Création d'applications HTML5

Utilisation de Media Queries CSS3 pour créer des sites Web plus réactifs

Brandon Satrom

Télécharger l'exemple de code

Cet article porte sur la version préliminaire de la plateforme Internet Explorer 10. Toutes les informations contenues dans le présent document peuvent faire l'objet de modifications.

Il y a quelques années, un client m'a contacté, car il souhaitait créer un site Web destiné exclusivement aux mobiles pour de jeunes utilisateurs, très au fait des nouvelles technologies. Ce projet se présentait sous la forme d'un « site iPhone », déjà entièrement pensé. Nous étions très enthousiastes à l'idée de créer une telle application mobile avant-gardiste, et nous nous y sommes mis sérieusement et avions bien progressé, jusqu'au moment où nous avons dû prendre en compte les autres appareils mobiles présents sur le marché. Le client voulait pouvoir tous les prendre en charge. Nous avons alors dû déployer beaucoup d'efforts pour répondre à deux des questions les plus importantes auxquelles des développeurs Web sont confrontés lorsqu'ils tentent de bâtir des expériences adaptées aux mobiles : Comment savoir à quel moment changer l'expérience pour un navigateur mobile donné et comment appliquer ce changement lorsqu'il s'avère nécessaire ?

Conception Web réactive

Ces questions sont au cœur d'une conception Web réactive, terme inventé par Ethan Marcotte (bit.ly/aO2cFa). Une conception Web réactive consiste à exploiter des indices contextuels provenant du navigateur pour adapter la présentation d'un site pour un utilisateur (voire la manière dont il se comporte). Il s'agit de répondre aux informations présentées par le navigateur par une expérience personnalisée et convaincante qui convienne aux attentes de l'utilisateur en termes d'interaction sur le périphérique en question. Si les indices corrects révèlent suffisamment d'informations à propos du navigateur et du périphérique, il est alors possible de fournir des personnalisations, telles que des images supplémentaires et des présentations fluides.

En règle générale, pour obtenir ces indices contextuels, il suffit d'analyser la chaîne d'agent utilisateur présentée par le navigateur (pratique appelée détection d'agent utilisateur ou de navigateur), puis d'utiliser les informations obtenues pour savoir comment procéder. La détection d'agent utilisateur est abordée dans mon article de septembre 2011, intitulé « Aucun navigateur n'est oublié : Une stratégie pour adopter HTML5 » (msdn.microsoft.com/magazine/hh394148). Comme je l'avais alors indiqué, la détection de navigateur n'est pas fiable et a été en majeure partie remplacée par la détection de fonctionnalité, qui vous permet de prendre des décisions à propos du balisage, du CSS et du JavaScript, basées sur des fonctionnalités disponibles et non sur un navigateur et une version spécifiques.

Dans le cadre d'une conception Web réactive, tous les postes de travail récents et la plupart des navigateurs mobiles prennent en charge une fonctionnalité appelée Media Queries, un module CSS3 qui développe le concept des types de médias introduit dans CSS 2.1, à savoir : la capacité à spécifier d'autres feuilles de style pour l'impression, l'affichage etc., et la capacité à déterminer certaines caractéristiques physiques d'un périphérique se rendant sur un site. Les Media Queries sont semblables au raisonnement relatif à l'utilisation de la détection de fonctionnalité, et elles vous permettent de vous concentrer sur l'obtention d'indices contextuels corrects à propos d'un visiteur. Vous pouvez ensuite exploiter ces indices pour adapter au mieux l'expérience proposée. La puissance des Media Queries réside dans le fait qu'elles sont capables de fournir de tels indices aux feuilles de style.

Dans cet article, je vous propose un aperçu du module Media Queries CSS3. Je présente brièvement sa syntaxe et son utilisation, puis je donne un exemple simple qui tire parti des Media Queries pour concevoir des vues affichables sur tablette ou Smartphone d'une galerie de photos en ligne. Enfin, j'indique une astuce indispensable pour toutes les formes de développement mobile, avant de conclure par une petite présentation sur les écouteurs de Media Query, une spécification distincte du W3C (World Wide Web Consortium) (bit.ly/wyYBDG) qui fournit une API destinée à réagir aux changements dans l'environnement de média via JavaScript. À la fin de cet article, vous devriez avoir une base solide pour créer des sites et des applications Web réactifs, à l'aide uniquement de CSS et de quelques styles personnalisés.

Media Queries CSS

Comme indiqué précédemment, CSS 2.1 prend actuellement en charge des feuilles de style dépendantes d'un média basées sur des déclarations de « type média » (bit.ly/xhD3HD). Le balisage suivant illustre la manière dont vous pouvez utiliser des types de médias pour spécifier des feuilles de style conditionnelles :

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

Grâce à ces éléments, un site peut charger une feuille de style distincte de la feuille de style (« ou affichage ») par défaut lorsqu'une page est chargée en mode d'aperçu avant impression. Cette fonctionnalité est certes utile (quoique toujours sous-exploitée), mais elle ne fournit pas d'indices contextuels exploitables pour créer des sites Web véritablement réactifs. Même si l'utilisation de 10 types de média est détaillée dans des spécifications, les fournisseurs de navigateur n'ont jamais complètement adopté tous les types spécifiés.

L'attribut « média » offre pourtant une base solide et le W3C a décidé de créer des Media Queries (bit.ly/zbIeDg) directement dessus. Lorsque vous spécifiez un type de média (pour l'impression, l'affichage ou pour tout) les Media Queries vous permettent d'ajouter des expressions à l'attribut media afin de vérifier la présence de certaines fonctionnalités de média, telles que la largeur, la hauteur, l'orientation et même la résolution d'écran du périphérique actuel. Voici un exemple qui charge la feuille de style main.css si le type de média concerne l'affichage et si la largeur du périphérique est d'au moins 800 pixels :

<link rel="stylesheet" media="screen and (min-width: 800px)" href="main.css" />

Le contenu entre parenthèses constitue la Media Query. La partie de gauche indique la propriété à tester (largeur), avec un modificateur facultatif min- ou max- et la partie de droite indique la valeur de cette propriété. Si le périphérique ou le navigateur en question dispose d'un écran d'une largeur d'au moins 800 pixels, les styles de la feuille main.css sont appliqués. Sinon, ce n'est pas le cas. Cela illustre la manière dont les Media Queries offrent aux développeurs des indices contextuels utiles pour créer des sites et des applications Web réactifs.

Pour commencer

Comme indiqué, les Media Queries CSS3 sont prises en charge par les dernières versions des principaux navigateurs (bit.ly/wpamib), leur utilisation ne devrait donc vous poser aucun problème. Il existe trois méthodes pour tirer profit des Media Queries pour vos sites. La première consiste à charger de façon conditionnelle des feuilles de style complètes, comme indiqué dans l'exemple précédent. La deuxième consiste à utiliser des directives @import dans vos feuilles de style. Voici le même test, cette fois sous la forme d'une directive import :

@import url("main.css") screen and (min-width: 800px);

Comme dans le premier exemple, cette instruction va évaluer la largeur du périphérique actuel et, s'il fait au moins 800 pixels, charger la feuille main.css et appliquer ses styles.

Enfin, vous pouvez utiliser les Media Queries en ligne dans CSS à l'aide des directives @media, comme ceci :

@media screen and (min-width: 800px) { ... }

Dans ce cas, au lieu de définir des styles dans un fichier séparé, vous devez les placer en ligne dans une feuille de style existante et les encapsuler avec une Media Query qui garantit qu'ils sont appliqués uniquement lorsque c'est nécessaire.

Examinons à présent les Media Queries en action, en commençant par un exemple simple. Si vous voulez essayer cette opération vous-même, vous pouvez consulter l'exemple de code source de cet article, ou ouvrir votre IDE ou votre éditeur de texte favori et ajouter le balisage de la figure 1.

Figure 1 Exemple de document HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="media.css">
  </head>
  <body>
    <article id="small">This is a small screen</article>
    <article id="medium">This is a medium screen</article>
    <article id="large">This is a large screen</article>
    <article id="landscape">... and you're in landscape mode...</article> 
  </body>
</html>

Vous devez ensuite créer une feuille de style appelée media.css dans le même dossier et ajouter les styles définis dans la figure 2. Notez que j'ai défini toutes les directives @media au bas du fichier. Vous voudrez sans doute faire de même dans vos feuilles de style. Si vous choisissez de définir plusieurs feuilles de style dans votre balisage, vous devrez aussi placer les éléments <link> pour des feuilles de style spécifiques après vos feuilles de style principales. CSS étant en cascade, les règles spécifiques aux médias devront probablement prévaloir sur les règles principales et être définies de manière appropriée. Remarquez que j'ai défini des styles pour mon article et les éléments du corps, puis je les ai fait suivre des Media Queries (et de leurs règles associées) pour chaque expérience que je souhaite prendre en charge. Les écrans inférieurs à 480 pixels reçoivent un ensemble de styles supplémentaires ; ceux entre 480 et 1024 pixels en reçoivent un autre ; et ceux supérieurs à 1024 pixels reçoivent un troisième ensemble de styles. J'ai également ajouté une requête pour l'orientation, et j'appliquerai encore un autre ensemble de styles si le périphérique est en mode paysage.

**Figure 2 Media Queries CSS définies en ligne avec la directive @media**

article {
  display: none;
}
body {
  font-size: 24px;
  font-weight: 800;
  color: white;
}
@media screen and (max-width: 480px) {
  body {
    background-color: #ff2a18;
  }
  #small {
    display: inline;
  }
}
@media screen and (min-width: 480px) and (max-width: 1024px) {
  body {
    background-color: #00ff00;
  }
  #medium {
    display: inline;
  }
}
@media screen and (min-width: 1024px) {
  body {
    background-color: #0000ff;
  }
  #large {
    display: inline;
  }
}
@media screen and (orientation: landscape) {
  body {
    background-color: #ff7f00;
  }
  #landscape {
    display: inline;
  }
}

Une fois que vous avez créé la page indiquée dans la figure 1 et la feuille de style de la figure 2, ouvrez la page dans un navigateur quelconque. Vous pouvez facilement tester vos Media Queries, vous pouvez même le faire sans périphérique mobile. Il vous suffit de redimensionner la fenêtre du navigateur et d'observer les changements au niveau du texte et de la couleur d'arrière-plan au fur et à mesure que le contexte de la fenêtre visible change.

Maintenant que nous avons présenté les Media Queries, allons un peu plus loin et examinons un exemple plus réaliste. Pour cet exemple, je vais ajouter des Media Queries à une galerie de photos en ligne afin de prendre en charge des Smartphones et des tablettes. Vous trouverez le code correspondant à cet exemple, qui utilise le modèle de galerie de photos fourni avec WebMatrix (webmatrix.com) à l'adresse archive.msdn.microsoft.com/mag201204HTML5.

Si vous ouvrez cette page dans un navigateur de tablette ou de mobile, vous remarquez qu'elle apparaît « réduite » et qu'il est difficile de la parcourir ou d'en lire le contenu, comme illustré dans la figure 3. Grâce à quelques Media Queries, et quelques autres astuces, il est possible de créer une expérience sur mesure sans aucune détection de navigateur ni de nouveau balisage.

Figure 3 Affichage sur un mobile sans Media Queries

Au bas du fichier desktop.css créé pour cet exemple, commencez par ajouter votre directive et votre condition de Media Query. Le problème ici étant la taille réduite de l'affichage, je vais donc créer la définition suivante :

@media screen and (max-width: 480px) {}

À présent, dans cette définition, nous allons créer des règles pour redimensionner et repositionner les images pour les écrans plus petits. Ces règles sont présentées dans la figure 4.

Figure 4 Modification des styles pour les périphériques mobiles

body {
  min-width: 120px;
  max-width: 320px;
}
h1 {
  font-size: 1.5em;
}
img {
  width: 250px;
  height: 187.5px;
}
ul.thumbnails li {
  width: 265px;
    height: 200px;
    line-height: 200px;
}
ul.thumbnails li span.image-overlay {
    width: 265px;
}

Si vous actualisez la page après avoir ajouté ces styles, l'affichage doit être semblable à celui de la figure 5. Les images ont un meilleur aspect, mais la navigation principale n'est plus alignée correctement. En outre, la galerie utilise un pseudo sélecteur :hover CSS pour afficher des informations supplémentaires sur chaque image, comme illustré à la figure 6. Cette expérience utilisateur ne convient pas à un environnement où le survol est peu courant (pour les Smartphones et les tablettes), nous devons donc trouver une autre présentation pour cet aspect de la page également. Nous allons pour cela ajouter les styles de la figure 7 dans la directive @media actuelle.

Figure 5 Affichage d'images améliorées sur un mobile

Figure 6 Image avec l'effet de survol appliqué

Figure 7 Styles pour une navigation pour mobile et informations sur les images

#banner {
  height: 110px;
  background: #eaeaea;
}
#menu li {
  display: block;
  margin-top: 3px;
  margin-bottom: 3px;
}
#menu li.tags a,
#menu li.galleries a,
#menu li.account a {
  background: none; 
}
#menu li.login {
  display: none;
}
ul.thumbnails li span.image-overlay {
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  line-height: normal;
  width: 515px;
    padding: 5px;
}
ul.thumbnails li {
    background: #f3f6f7;
    border-color: #dbe2e5;
    border-radius: 7px;
    box-shadow: 0px 0px 20px 5px #A9A9A9;
}

À présent, si vous actualisez la page dans votre navigateur, la navigation doit en principe s'afficher correctement, ainsi que les informations qui apparaissaient auparavant lors d'un survol, comme dans la figure 8.

Figure 8 Galerie dotée d'une meilleure navigation et de cadres d'image

Nous avons, pour l'instant, un affichage Bureau pour la galerie, ainsi qu'une version mobile correcte, il nous faut encore quelques règles CSS supplémentaires. Allons donc un peu plus loin et ajoutons une prise en charge pour les écrans supérieurs à 480 pixels et inférieurs à 1024 pixels (tablettes).

Si vous affichez une galerie de photos dans un navigateur et que vous redimensionnez à un format inférieur à 1024 pixels (l'écran illustré dans la figure 8), vous remarquez que beaucoup d'images sont coupées. Les tablettes ayant généralement des écrans plus grands, il est logique de fournir des images plus grandes dans la page de la galerie. Ajoutons donc une autre Media Query pour les périphériques au format tablette :

@media screen and (min-width:480px) and (max-width:1024px)

Dans la source en ligne, j'ai refactorisé certaines règles de Smartphone en un jeu de styles qui s'applique à tous les périphériques autres que ceux de bureau. Il ne me reste donc plus qu'à définir les styles qui font référence au format miniature, d'image et de document (comme illustré à la figure 9) pour l'affichage sur tablette.

Figure 9 Styles pour l'affichage sur tablette

body {
  min-width: 480px;
  max-width: 800px;
} 
img {
  width: 500px;
  height: 375px;
  align: center;
} 
ul.thumbnails li {
  width: 515px;
    height: 390px;
    line-height: 200px;
}

Vous devez à présent actualiser l'affichage dans un navigateur pour tablette et vous verrez un écran similaire à celui présenté à la figure 10. Nous allons maintenant nous attaquer aux différentes tailles d'écran (et donc à plusieurs périphériques) et il nous suffit pour cela de créer d'autres styles.

Figure 10 Galerie de photos, affichables sur tablette

Priorité au mobile

Avant de conclure cet article sur les Media Queries, je souhaite vous faire part d'une astuce qui n'est pas spécifique aux Media Queries, mais qui est importante pour effectuer du développement Web de tout type. Vous devez commencer par définir le viewport et la conception pour le mobile.

Si vous avez réalisé le codage au fur et à mesure de ma présentation des Media Queries dans cet article, vous avez peut-être noté un petit problème lors de l'affichage de la page sur un Smartphone ou un émulateur de Smartphone : Sur certains périphériques, l'effet page « réduite » ne change pas, même après l'application des règles conditionnelles. Le navigateur mobile essaie en fait d'optimiser l'expérience sur un écran plus petit, ce qui est utile pour les sites qui ne prennent pas en compte les utilisateurs mobiles. Pour ce site, toutefois, on choisit de ne pas appliquer l'optimisation, vous pouvez donc ignorer ce comportement en ajoutant une seule balise <meta> dans l'élément <head> de votre page, comme ceci :

<meta name="viewport" content="width=device-width">

À présent, si vous actualisez la page et si vos Media Queries sont correctement définies, vos règles sont en principe activées.

Vous avez peut-être aussi noté que dans l'exemple de la galerie de photos, j'ai ajouté une expérience mobile à un site existant. En tant que développeur cherchant à vous familiariser avec les Media Queries, vous le ferez aussi probablement au départ. La tendance est toutefois de donner la « priorité au mobile » lors de la conception et du développement des sites et des applications Web. Comme son nom l'indique, donner priorité au mobile consiste à faire de l'expérience mobile la première des priorités et non de la placer au second plan (ce qui était souvent le cas avant). Ces deux dernières années les ventes de Smartphones et de tablettes ont dépassé celles des PC et la navigation mobile constitue à présent plus de la moitié de la navigation sur le Web, cela semble donc tout à fait logique. En outre, une approche donnant priorité au mobile encourage une « amélioration progressive » selon laquelle les sites sont conçus à partir d'une expérience de base (comportant souvent uniquement du texte), et qui progressivement est améliorée pour des navigateurs et des périphériques plus puissants. Pour en savoir plus sur cette approche donnant priorité au mobile, je recommande fortement de lire le livre à ce sujet, écrit par Luke Wroblewski (disponible à l'adresse bit.ly/zd9UWT).

Écouteurs de Media Query

En plus de la prise en charge des Media Queries dans CSS3, le groupe de travail CSS cherche à ajouter des API JavaScript qui permettent aux développeurs d'évaluer des Media Queries au moment de l'exécution et d'être ensuite à l'écoute des modifications au niveau de l'exécution dans des conditions de Media Query. Ces API sont décrites dans les spécifications sur le module d'affichage CSSOM (bit.ly/w8Ncq4). La figure11 fournit un exemple de réalisation de Media Queries et de création d'écouteurs à partir de JavaScript.

Figure 11 Utilisation d'écouteurs de Media Query

listener = window.msMatchMedia("(min-width: 480px)");
evaluate(listener); // Perform an initial evaluation
listener.addListener(evaluate); // Evaluate each time the width changes
 function evaluate(listener) {
   if (mql.matches) {
    expandCommentList(); // Screen is at least 480px
   } else {
     shrinkCommentList(); // Screen is smaller
   }
 }

Les écouteurs peuvent s'avérer très précieux lorsque le viewport d'un périphérique est susceptible de changer au moment de l'exécution (par exemple, lorsque l'orientation change sur les Smartphones et les tablettes). Les écouteurs de Media Query vous permettent de répondre à ces modifications, pas simplement à partir des CSS, mais à partir des scripts. Les spécifications d'affichage CSSOM sont actuellement en cours d'élaboration, mais la version préliminaire de la plateforme Internet Explorer 10 fournit une prise en charge pour les écouteurs de Media Query, vous pouvez donc les tester sur Internet Explorer (bit.ly/gQk7wZ).

La prise en charge de plusieurs plateformes, écrans et expériences dans les applications Web a fait un bon bout de chemin ces dernières années. Alors qu'avant il était normal de créer des versions d'un site propres aux périphériques, la prolifération de périphériques pour mobiles a rapidement rendu le ciblage de périphériques irréalisable. Heureusement, l'introduction des Media Queries CSS3 sur les principaux navigateurs de bureau et mobiles vous permet d'utiliser des indices contextuels afin de proposer des expériences personnalisées sur une large gamme de périphériques, prenant tous en charge du CSS conditionnel. Pour obtenir plus d'informations sur les Media Queries CSS3, je recommande de consulter le chapitre à ce sujet dans l'excellent livre de Peter Gasston intitulé « The Book of CSS3 » (No Starch Press, 2011). Pour obtenir plusieurs exemples d'expériences remarquables réalisées à l'aide de Media Queries, consultez le site à ce sujet. J'espère que cet article vous a donné suffisamment d'informations pour pouvoir dès aujourd'hui démarrer vos propres expériences. J'ai vraiment hâte de les voir !

Brandon Satrom est responsable de produit pour Kendo UI (kendoui.com), un ensemble d'outils pour mobile et HTML5 de Telerik. Il possède un blog à l'adresse userinexperience.com et vous pouvez le suivre sur Twitter à l'adresse twitter.com/BrandonSatrom.

Je remercie les experts techniques suivants d'avoir relu cet article : John Box, Sharon Newman et Jacob Rossi