Requêtes multimédias CSS et conception réactive

Comment travailler avec des requêtes multimédias en CSS pour créer des pages Web réactives

Dans cet article, je vais d'abord présenter les types de médias et les descripteurs de fonctionnalités multimédias, puis je vais expliquer les requêtes multimédias.

Types de médias

Utilisés dans les requêtes multimédias et les déclarations @import, les types de supports nous permettent de déterminer sur quel support un fichier CSS, ou un morceau de CSS, est chargé.

Nous avons ce qui suittypes de média

  • allsignifie tous les médias
  • printutilisé lors de l'impression
  • screenutilisé lorsque la page est présentée sur un écran
  • speechutilisé pour les lecteurs d'écran

screenest la valeur par défaut.

Dans le passé, nous en avions plus, mais la plupart sont obsolètes car ils se sont avérés ne pas être un moyen efficace de déterminer les besoins des appareils.

Nous pouvons les utiliser dans des instructions @import comme ceci:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

Nous pouvons charger un fichier CSS sur plusieurs types de supports en séparant chacun par une virgule:

@import url(myfile.css) screen, print;

La même chose fonctionne pour lelinkbalise en HTML:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

Nous ne sommes pas limités à l'utilisation de types de médias dansmediaattribut et dans le@importdéclaration. Il y a plus

Descripteurs de fonctionnalités multimédias

Tout d'abord, introduisonsdescripteurs de fonctionnalités multimédias. Ce sont des mots-clés supplémentaires que nous pouvons ajouter à lamediaattribut delinkou au@importdéclaration, pour exprimer plus de conditions sur le chargement du CSS.

Voici la liste d'entre eux:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

Chacun d'eux a un min- * et un max- * correspondant, par exemple:

  • min-width,max-width
  • min-device-width,max-device-width

etc.

Certains d'entre eux acceptent une valeur de longueur qui peut être exprimée enpxouremou toute valeur de longueur. C'est le cas dewidth,height,device-width,device-height.

Par exemple:

@import url(myfile.css) screen and (max-width: 800px);

Notez que nous enveloppons chaque bloc à l'aide de descripteurs de fonctionnalités multimédias entre parenthèses.

Certains acceptent une valeur fixe.orientation, utilisé pour détecter l'orientation de l'appareil, accepteportraitoulandscape.

Exemple:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan, utilisé pour déterminer le type d'écran, accepteprogressive(pour les affichages modernes) ouinterlace(pour les anciens appareils CRT)

Certains autres veulent un entier.

Aimercolorqui inspecte le nombre de bits par composant de couleur utilisé par l'appareil. Très bas niveau, mais il vous suffit de savoir qu'il est là pour votre utilisation (commegrid,color-index,monochrome).

aspect-ratioetdevice-aspect-ratioaccepter une valeur de rapport représentant le rapport largeur / hauteur de la fenêtre, qui est exprimé sous forme de fraction.

Exemple:

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolutionreprésente la densité de pixels de l'appareil, exprimée entype de données de résolutionaimerdpi.

Exemple:

@import url(myfile.css) screen and (min-resolution: 100dpi);

Opérateurs logiques

Nous pouvons combiner des règles en utilisantand:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

Nous pouvons effectuer une opération logique de type «ou» à l'aide de virgules, qui combine plusieurs requêtes multimédias:

@import url(myfile.css) screen, print;

On peut utilisernotpour annuler une requête multimédia:

@import url(myfile.css) not screen;

Important:notne peut être utilisé que pour annuler une requête multimédia entière, elle doit donc être placée au début de celle-ci (ou après une virgule)

Requêtes médias

Toutes ces règles ci-dessus que nous avons vues s'appliquaient à @import ou aulinkLa balise HTML peut également être appliquée à l'intérieur du CSS.

Vous devez les envelopper dans un@media () {}structure.

Exemple:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

et c'est le fondement dedesign réactif.

Les requêtes multimédias peuvent être assez complexes. Cet exemple applique le CSS uniquement s'il s'agit d'un périphérique d'écran, la largeur est comprise entre 600 et 800 pixels et l'orientation est paysage:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: