Exporter (0) Imprimer
Développer tout

Comment créer une disposition adaptative avec une grille CSS

Il va sans dire que les développeurs Web disposent d’un vaste choix pour la disposition de leurs pages Web. L’assurance que votre disposition peut s’adapter à différents appareils, orientations et écrans revêt un caractère primordial dans votre choix des méthodes à utiliser. La disposition en grille est une nouvelle méthode de disposition qui vous permet de diviser l’espace des principales régions d’une page Web en fonction d’une quantité fixe, de l’espace disponible dans la fenêtre du navigateur, ou d’une combinaison des deux.

Étant donné que la disposition en grille vous permet d’aligner des éléments dans des colonnes et des lignes mais qu’elle n’a pas de structure de contenu, elle permet aussi des scénarios—comme celui décrit dans cet article—qui ne sont pas possibles ou très difficile à réaliser avec des tables HTML ou CSS (Cascading Style Sheets). De plus, en utilisant la disposition en grille en association avec des requêtes de média, vous pouvez permettre à votre disposition de s’adapter en toute transparence aux modifications apportées au facteur de forme de l’appareil, à son orientation, à l’espace disponible et bien plus encore.

La disposition en grille CSS est pour le moment une ébauche de spécification du W3C (World Wide Web Consortium) partiellement prise en charge dans Internet Explorer 10 avec un préfixe de fournisseur. Pour obtenir la liste complète des propriétés prises en charge, voir Disposition en grille sur MSDN. Dans la mesure où la spécification de disposition en grille est encore au stade de développement, la prise en charge dans Internet Explorer 10 peut ne pas correspondre exactement à celle présentée dans la spécification.

Nous vous guidons ici dans la création d’une simple page Lightbox pour afficher des photos dans une galerie de photos. Nous utilisons la disposition en grille pour organiser le contenu de la page, et les requêtes de média pour en optimiser la disposition en mode portrait ou paysage. Dans une disposition en mode portrait, la hauteur de la fenêtre du navigateur est supérieure à sa largeur. Dans une disposition en mode paysage, la largeur de la fenêtre du navigateur est supérieure à sa hauteur.

Cette rubrique comporte les sections suivantes :

Conception de la page

Nous voulons que cette page Lightbox prenne la totalité de l’écran d’Internet Explorer dans le nouvel environnement d’interface utilisateur Windows, sans défilement. Bien entendu, cette page doit être tout aussi utilisable dans Internet Explorer pour le Bureau et elle doit également s’insérer parfaitement dans le chrome de ce navigateur.

Le croquis suivant représente à peu près l’apparence que nous voulons donner à notre page Lightbox en orientation portrait. Ce croquis part du principe que l’affichage du navigateur prend toute la largeur de l’écran dans une proportion de 16/9.

Maquette d’une page Lightbox de galerie de photos comportant des sections pour un logo, une description, une grande photo et plusieurs photos en miniature.

Dans ce croquis, A représente une petite zone permettant d’afficher un logo, la zone B est destinée à l’affichage d’une capture de photo ou d’une description, C représente la zone d’affichage de la photo principale, et la zone D est destinée à l’affichage des autres photos de la collection.

Étant donné que la page Lightbox est destinée à être affichée en mode plein écran, nous devrons tenir compte des différentes tailles d’écran. L’élément essentiel de la page est la grande photographie. Par conséquent, quand la taille de l’écran augmente, faisons en sorte que la zone destinée à la photo principale (zone C) augmente également. En revanche, nous devons empêcher la zone A de tout agrandissement, la zone B de s’étendre horizontalement et la zone D de s’étendre verticalement.

Construction de la grille

Ce scénario illustre une utilisation idéale de la disposition en grille. Afin d’aider à construire la grille, nous ajouterons des pointillés pour représenter les lignes qui ne sont pas encore visibles. Pour obtenir les marges entre les éléments de la page et empêcher le dessin de paraître trop chargé, nous ajouterons quelques gouttières. Les gouttières peuvent être de simples lignes et colonnes supplémentaires d’une hauteur et largeur fixes.

Dans cette image, les pointillés violets représentent l’élément Grille, ou le conteneur Présentation en grille. Les pointillés rouges représentent les lignes de la grille.

L’image précédente, avec des pointillés violets tout autour de l’élément Grille et des pointillés rouges pour indiquer où les lignes et les colonnes doivent être placées

La grille comprend un total de cinq lignes et de trois colonnes :

  • Les gouttières correspondent à la deuxième et à la quatrième lignes, ainsi qu’à la deuxième colonne.
  • La première et la dernière lignes ont une hauteur fixe afin de tenir compte des hauteurs fixes des zones A et D.
  • La hauteur de la troisième ligne est variable afin que la disposition puisse s’adapter à n’importe quel écran.
  • La première colonne a une hauteur fixe afin de tenir compte des largeurs fixes des zones A et B.
  • La largeur de la dernière colonne est variable afin que la disposition puisse s’adapter à n’importe quel écran.

Conception de la structure de la page

Commençons à représenter la grille. Pour commencer, écrivons un peu de code HTML simple de manière à obtenir la structure de base de la page. Notez que l’ordre des sections ne correspond pas nécessairement à celle du croquis mais c’est là l’un des avantages de la grille : vous pouvez réorganiser les éléments comme vous le souhaitez à partir de l’ordre DOM (Document Object Model).


<!DOCTYPE html>
<html>

<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
<style>
</style>
</head>

<body>

<div id="body">
  <div id="grid">
    <div id="text_box" class="orange">
      Text box</div>
    <div id="big_pic" class="red">
      <img id="mainphoto" alt="mainphoto" src="images/img1.jpg"></div>
    <div id="photos" class="blue">
      Photos</div>
    <div id="logo" class="green">
      <div id="logotype">
        CONTOSO<br>IMAGES</div>
      <div id="pagedesc">
        Lightbox</div>
    </div>
  </div>
</div>

</body>

</html>


Création de l’élément Grille et spécification des lignes et des colonnes

À présent, créons l’élément Grille et spécifions les lignes et les colonnes.

La première chose à faire est d’ajouter l’élément display et de lui attribuer la valeur -ms-grid. Cette action crée l’élément Grille.

Dans l’élément Grille, nous utilisons la propriété -ms-grid-columns pour spécifier la largeur de chaque colonne dans une liste délimitée par des espaces. De même, nous utilisons la propriété -ms-grid-rows pour spécifier la hauteur de chaque colonne dans une liste délimitée par des espaces.

Pour l’élément dont l’ID est "grid", notre grille CSS ressemble à ceci :


#grid {
  height: calc(100vh - 65px);  /* 65px to account for scrollbar */;  
  display: -ms-grid;
  -ms-grid-columns: 200px 25px 1fr;
  -ms-grid-rows: 160px 25px 1fr 25px 200px; 
  border: 1px solid red;	      /* for a visual guide */
}

À propos des unités fractionnaires

Pour permettre à la grille d’être dimensionnée automatiquement en fonction de l’espace disponible, nous utilisons des unités fractionnaires (fr). La taille d’une unité fractionnaire dépend à la fois de l’espace total disponible et du nombre total d’unités fractionnaires spécifié. Dans notre exemple de page Lightbox, nous utilisons une seule unité fractionnaire, mais des dispositions plus complexes sont également disponibles. Par exemple, envisageons un cas dans lequel quatre colonnes sont spécifiées avec les longueurs suivantes : auto, 100 pixels, 1 unité fractionnaire et 2 unités fractionnaires. Les colonnes s’afficheront ainsi :

  • Colonne 1 (mot clé auto) : la colonne est dimensionnée selon son contenu.
  • Colonne 2 ("100px") : la largeur de la colonne est de 100 pixels.
  • Colonne 3 ("1fr") : la colonne occupe une unité de fraction de l’espace restant.
  • Colonne 4 ("2fr") : la colonne occupe deux unités de fraction de l’espace restant.

Étant donné qu’il y a trois unités de fraction dans cette grille, 1 unité de fraction divisée par 3 unités de fraction—ou 1/3—de l’espace restant, est alloué à la colonne 3. 2/3 de l’espace restant sont alloués à la colonne 4.

Attribution des éléments de page aux colonnes et aux lignes

Si vous affichez la page maintenant, elle n’est manifestement pas encore prête. Tous les éléments de la page se chevauchent car nous n’avons pas encore défini dans quelle(s) colonne(s) chaque élément doit être placé. Pour ce faire, nous utilisons une combinaison des propriétés -ms-grid-row, -ms-grid-column, -ms-grid-row-span et -ms-grid-column-span.

Les propriétés -ms-grid-row et -ms-grid-column, quand elles sont appliquées à un élément de page, spécifient la cellule de grille dans laquelle les éléments de page commencent. Dans les langues qui s’écrivent de gauche à droite et de haut en bas, la propriété -ms-grid-row indique la ligne la plus haute que l’élément doit occuper. De la même façon, la propriété -ms-grid-column permet de spécifier la colonne la plus à gauche que l’élément doit occuper.

Les propriétés -ms-grid-row-span et -ms-grid-column-span, quand elles sont appliquées à un élément de page, spécifient le nombre de lignes et de colonnes sur lesquels l’élément de page doit s’étendre.

Sachez que si vous essayez d’étendre l’élément au-delà du nombre de lignes ou de colonnes défini dans la grille, une autre colonne ou ligne est implicitement créée et sa largeur ou hauteur est définie sur auto (dimensionnement automatique par rapport au contenu) pour chaque colonne ou ligne au-delà du nombre défini.


#text_box {
  -ms-grid-row: 3;
  -ms-grid-column: 1; 
  -ms-grid-row-span: 3;
  padding: 15px;
}
#big_pic {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
}
#photos {
  -ms-grid-row: 5; 
  -ms-grid-column: 3;
  padding: 15px;
}
#logo {
  -ms-grid-row: 1; 
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}


Affichez la page avec les sélecteurs ajoutés ainsi que quelques styles des autres éléments de la page.

Capture d’écran d’une page Web plein écran comportant une zone verte pour le logo, une longue zone verticale orange pour la description, une longue zone horizontale bleue pour les photos miniatures et une zone centrale blanche contenant une photo de nuages dans le coin supérieur gauche

Alignement des éléments de grille

La page s’affiche correctement mais il serait préférable de centrer la photo dans sa zone. Pour cela, nous allons utiliser les propriétés -ms-grid-row-align et -ms-grid-column-align. Ces propriétés définissent la façon dont un élément est aligné dans une ligne ou une colonne, respectivement. Dans notre cas, nous allons attribuer à ces deux propriétés la valeur center pour le sélecteur d’ID "big_pic" :


#big_pic { 
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  -ms-grid-row-span: 3;
  padding: 15px;
  -ms-grid-row-align: center;
  -ms-grid-column-align: center;
}


Même image que la précédente, mais le carré blanc qui encadre la photo a diminué et il est à présent centré dans sa zone

Vous pouvez afficher cette version de la page.

Utilisation de la grille avec les requêtes de média

Notre disposition en orientation paysage est plutôt réussie. Mais que donne-t-elle si le périphérique d’affichage est en orientation portrait ? Dans ce cas, nous pouvons utiliser les requêtes de média.

Grâce aux requêtes de média, nous allons redéfinir les aspects de la disposition afin qu’ils s’adaptent à une orientation portrait. Pour ajouter les styles spécifiques à la disposition en mode portrait à la feuille de style, ajoutez d’abord la syntaxe de requête de média :


@media all and (orientation: portrait) {

}

En langage de requête de média, l’orientation portrait définit une page dont la largeur est supérieure à la hauteur. Inversement, l’orientation paysage définit une page dont la hauteur est supérieure à la largeur.

À présent, nous allons ajouter une nouvelle disposition en grille et quelques nouveaux styles pour les autres éléments de la page. Nous ajoutons ces styles entre les accolades de la requête de média :


#grid {
	-ms-grid-columns: 150px 25px 1fr;
	-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
  -ms-grid-row: 1; 
  -ms-grid-column: 3;
  -ms-grid-row-span: 1;
}
#big_pic {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#photos {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row-span: 1;
}
#logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  text-align: center;
  padding: 20px;
}
#logotype {
  font-size: 15px;
}
#pagedesc {
  font-size: 12px;
}
#mainphoto {
  width: 100%; 
  border-width: 10px;
  border-color: white;
}


Vous pouvez maintenant afficher la page terminée. Si vous ne disposez pas d’un appareil que vous pouvez tourner pour afficher la page en orientation portrait, ouvrez la page dans Internet Explorer pour le Bureau et redimensionnez-la de manière à ce que sa largeur soit inférieure à sa hauteur.

Affichage en mode Portrait de la même galerie de photos ; la photo occupe maintenant presque entièrement l’écran et les zones bleu et orange apparaissent au-dessus et en dessous de la photo, respectivement.

Création d’une superposition d’éléments avec la grille

La grille CSS ouvre de nombreuses autres possibilités en termes de disposition de page. Par exemple, la grille vous permet de créer facilement des superpositions de contenus, qui, quand elles sont associées à la propriété d’opacité, peuvent créer, entre autres, des bandes translucides de texte sur une image. Pour plus d’informations sur les grilles avec superpositions et pour en voir les effets, consultez Exemple de superposition de grille CSS dans la Galerie d’exemples Internet Explorer.

Conclusion

Vous avez désormais une bonne idée des possibilités de disposition en grille et sur la façon d’utiliser les propriétés de la grille avec les requêtes de média. Pour en savoir plus, consultez les liens de la section suivante.

Rubriques connexes

Galeries de photos Contoso Images
Disposition en grille
Guide du développeur Internet Explorer 10 : disposition en grille
Billet IEBlog : IE10 Platform Preview and CSS Features for Adaptive Layouts

 

 

Afficher:
© 2014 Microsoft