Responsive design : les media queries CSS 3 à l'honneur Responsive design et media queries CSS 3 : un exemple pour commencer
Deux mots barbares dans un seul titre, n'est-ce pas un peu trop ? Rassurez-vous, ils ne sont là que pour attiser votre curiosité ! Vous serez certainement friands de quelques explications au sujet de ces techniques, dont vous avez peut-être déjà entendu parler et qui sont apparues avec la diversité des écrans.
En CSS 3, il est possible d'affecter des styles spécifiques en fonction des caractéristiques des terminaux utilisés. Cette sélection de médias, appelée en anglais media queries, permet notamment d'utiliser une feuille de style adaptée aux dimensions de l'écran utilisé.
Quant au terme très à la mode de responsive web design, il signifie que notre site sera lisible par tous les terminaux, sa mise en page et son contenu étant adaptés aux différentes tailles d'écran, évidemment grâce à ces fameux media queries...
Un exemple pour commencer
Le principe des media queries est de sélectionner les terminaux en fonction d'un ou plusieurs critères. Sans le savoir, nous les avions déjà utilisés dans les exemples précédents, avec les mots-clés screen, handled et all.L'écriture restera la même dans les trois cas : règle @media {...} à l'intérieur d'une feuille de style, balise <link> ou règle @import pour l'appel d'une feuille CSS spécifique. Nos mots-clés indiquant le type d'écran sont toujours utilisables et d'autres sont apparus, qui nous serviront pour un test plus précis des caractéristiques du terminal.
Voici un premier exemple qui nous donne un aperçu de cette méthode :
@media screen and (max-width: 800px) {
... (règles de style ici) ...
}
Il s'agit ici d'appliquer des styles aux médias de type écran (mot-clé screen) et dont la largeur de fenêtre ne dépasse pas 800 pixels (condition max-width: 800px). Le mot-clé and indique que les deux conditions doivent être réunies.
Cette règle s'écrira de la même façon lorsque nous voudrons réserver une
feuille de style spécifique styles2.css à ces terminaux, avec la balise <link> :
<link rel="stylesheet" href="styles2.css"
media="screen and (max-width: 800px)" />ou bien avec la règle @import :
@import "styles-communs.css"
screen and (max-width: 800px);