Media-queries
Elles permettent de définir le style, en fonction du media (support) utilisé, et sont donc responsables en partie du Responsive web design.
Soit en spécifiant une feuille de style particulière de manière conditionnelle :
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />Soit en attribuant un style particulier au sein de la même feuille:
@media screen and (max-width: 640px) { .bloc { display:block; clear:both; } }
Media
Périphériques
L'attribut media peut prendre des valeurs liées à la nature du périphérique :
screen
⇒ écranprint
⇒ imprimantehandheld
⇒ périphériques mobiles ou de petite taille- …
Attributs
La plupart des attributs peuvent être préfixés par min-
et max-
lorsqu'ils acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.
color
⇒ support de la couleur (bits/pixel)color-index
⇒ périphérique utilisant une table de couleurs indexéesdevice-aspect-ratio
⇒ ratio du périphérique de sortie (par exemple 16/9)aspect-ratio
⇒ ratio de la zone d'affichagedevice-height
⇒ dimension en hauteur du périphériquedevice-width
⇒ dimension en largeur du périphériquegrid
⇒ périphérique bitmap ou grille (ex : lcd)height
⇒ dimension en hauteur de la zone d'affichagemonochrome
⇒ périphérique monochrome ou niveaux de gris (bits/pixel)orientation
⇒ orientation du périphérique (portrait ou landscape)resolution
⇒ résolution du périphérique (en dpi, dppx, ou dpcm)scan
⇒ type de balayage des téléviseurs (progressive ou interlace)width
⇒ dimension en largeur de la zone d'affichage
Opérateurs logiques
Ils permettent de combiner plusieurs conditions média :
- and ()
- only ()
- not ()