Fonctionnalités pour la disposition adaptative
Internet Explorer 10 propose des fonctionnalités pour affecter divers styles, dispositions et facteurs d’échelle en fonction des options d’affichage utilisées. En outre, Internet Explorer 10 propose de nouveaux types de méthodes de disposition de feuilles de style en cascade (CSS, Cascading Style Sheets) adaptatives qui permettent d’utiliser plus efficacement l’espace fourni par l’écran sur une vaste gamme d’appareils et à des résolutions diverses.
Cette rubrique contient les sections suivantes :
- Requêtes de média
- Adaptation des appareils au format CSS
- Disposition en grille CSS
- Disposition de boîte flexible CSS
- Disposition multicolonne CSS
- Rubriques associées
Requêtes de média
Les requêtes de média vous permettent d’adapter parfaitement votre page à vos utilisateurs en fonction d’un ensemble de critères. Vous pouvez spécifier un ensemble de styles à appliquer uniquement à une page Web quand les proportions du navigateur sont, par exemple, en mode portrait (sa hauteur est supérieure à sa largeur) ou en mode paysage (sa largeur est supérieure à sa hauteur). Parmi les autres fonctionnalités de média prises en charge par Internet Explorer 10, on compte la résolution, les fonctionnalités d’affichage des couleurs et les proportions de l’écran de l’appareil utilisé (et non celles du navigateur). Les fonctionnalités multimédias prises en charge à partir de Windows Internet Explorer 9 sont répertoriées dans Requêtes de média.
La spécification Requêtes de média fait partie des recommandations du World Wide Web Consortium (W3C) depuis le 19 juin 2012. Les requêtes de média sont prises en charge dans la plupart des navigateurs modernes, notamment Internet Explorer 9. Internet Explorer 10 ajoute la prise en charge des écouteurs de requêtes de média, tel que spécifié dans le module CSSOM View.
L’un des formats les plus courants d’une requête de média se présente comme suit :
@media all and ( media_feature ) [and ( media_feature ) ] { styles }
Dans ce cas, media_feature peut être n’importe quelle fonctionnalité de média prise en charge à laquelle une valeur valide est attribuée (le cas échéant). Vous pouvez éventuellement ajouter plusieurs fonctionnalités de média pour introduire encore plus de critères. Si un navigateur qui visite la page correspond au profil décrit par les fonctionnalités de média, les styles sont appliqués au contenu.
| Type de ressource | Titre |
|---|---|
| Guide du développeur | Module de requêtes de média CSS3 (Internet Explorer 9), Écouteurs de requête de média (Internet Explorer 10) |
| Démonstrations | Requêtes de média CSS3 et écouteurs de requêtes de média |
| Référence | Requêtes de média CSS3, Écouteurs de requêtes de média |
Les requêtes de média peuvent également être utilisées en association avec les nouvelles fonctionnalités de disposition dans Internet Explorer 10, telles que l’adaptation des appareils au format CSS, la disposition en grille CSS, la disposition Flexbox CSS et la disposition multicolonne CSS.
Adaptation des appareils au format CSS
La spécification CSS Device Adaptation du W3C offre un moyen de remplacer la taille de la fenêtre d’affichage fournie par l’agent utilisateur : la règle @viewport. La règle @viewport (ou la règle @-ms-viewport dans Internet Explorer 10) vous permet de spécifier dans quels cas votre page doit être ajustée à l’écran de l’utilisateur et quelles résolutions doivent être utilisées. La règle @-ms-viewport a été développée afin de proposer des fonctionnalités similaires à celles de la balise meta HTML « viewport » implémentée pour la première fois par Apple pour le navigateur Safari dans iOS, mais d’une manière interopérable et normalisée. Par défaut, Internet Explorer 10 ajuste automatiquement le contenu quand la fenêtre est inférieure à 1 024 pixels, par exemple quand la fenêtre est ancrée ou en mode portrait. L’exemple suivant illustre une utilisation courante de la règle @-ms-viewport. Ce sélecteur peut surtout être utilisé pour optimiser une petite version de votre page Web afin de l’afficher dans l’état ancré.
@media screen and (max-width: 400px) {
@-ms-viewport { width: 320px; }
/* CSS for 320px width Modern taskbar layout goes here */
}
Toute fenêtre d’affichage d’une largeur inférieure à 400 pixels (par exemple, l’état d’affichage Snapped) est représentée avec une largeur de 320 pixels et mise à l’échelle. La CSS (qui a normalement été optimisée pour un petit écran) indiquée en dessous de cette fenêtre sera appliquée.
Quand cet ajustement n’est pas nécessaire ou n’est pas souhaité, par exemple dans le cas de modèles de conception Web réactive, le mot clé device-width peut être utilisé pour indiquer que l’affichage de la page est optimisé, quel que soit la largeur de l’appareil.
@-ms-viewport { width: device-width; }
La disposition en grille CSS est pour le moment une ébauche de spécification du W3C (World Wide Web Consortium) prise en charge dans Internet Explorer 10 avec un préfixe de fournisseur (@-ms-viewport).
| Type de ressource | Titre |
|---|---|
| Guide du développeur | Adaptation des appareils |
| Démonstrations | Vite fait, bien fait ! |
| Référence | Adaptation des appareils |
Disposition en grille CSS
La disposition en grille des feuilles de style en cascade de niveau 3 (CSS3, Cascading Style Sheets, Level 3) est une nouveauté d’Internet Explorer 10. Elle permet une plus grande fluidité qu’un positionnement à l’aide d’éléments flottants ou de scripts. Cette disposition vous permet de diviser l’espace des principales régions d’une page Web en fonction de dimensions fixes, de l’espace disponible dans la fenêtre du navigateur, ou d’une combinaison des deux. Grâce à la disposition en grille, vous pouvez aligner les éléments en lignes et en colonnes sans avoir à définir explicitement une structure de contenu, ce qui rend la disposition en grille plus flexible que des tableaux HTML ou CSS. La disposition en grille associée aux requêtes de média permet d’adapter en toute transparence votre mise en page aux modifications apportées au facteur de forme de l’appareil, à l’orientation, à l’espace disponible et bien plus encore.
La spécification CSS Grid Layout n’est pour le moment qu’une ébauche proposée par le 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. Puisque 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.
Voici un exemple simple d’utilisation de la disposition en grille. À l’aide des requêtes de média et de la disposition en grille, vous pouvez configurer la disposition d’une page Web de façon à ce qu’elle soit optimisée pour l’orientation portrait ou pour l’orientation paysage. Dans une orientation portrait, la hauteur de la fenêtre du navigateur est supérieure à sa largeur. Dans une orientation paysage, la largeur de la fenêtre du navigateur est supérieure à sa hauteur.
La disposition de page suivante est configurée de façon à s’adapter à son orientation. En orientation Paysage, les éléments de la page sont organisés de manière à tirer profit de l’espace horizontal disponible. En orientation Portrait, les éléments de la page qui pouvaient s’étirer horizontalement en mode Paysage sont déplacés vers le haut de la page pour tirer parti de l’espace vertical disponible. Ce comportement convient particulièrement à Internet Explorer dans la nouvelle interface utilisateur Windows, car la disposition de la page change en fonction de l’orientation de l’appareil même.
Cette capture d’écran illustre une page en mode Paysage dans Internet Explorer pour le Bureau :
.png "Capture d’écran d’une page Web présentant une disposition en grille en orientation Paysage")
Le fait de modifier l’orientation de la page en Portrait modifie également sa disposition, comme illustré ici :
.png "La même page, dont les volets ont été réorganisés pour s’adapter à l’orientation Portrait")
Pour en savoir plus et pour afficher une disposition en grille similaire par vous-même, voir Comment créer une disposition adaptative avec une grille CSS.
| Type de ressource | Titre |
|---|---|
| Guide du développeur | Disposition en grille |
| Démonstrations | The Grid System, Griddle |
| Exemples | Exemple de superposition de grilles CSS |
| Référence | Disposition en grille |
Disposition de boîte flexible CSS
Similaire à la disposition en grille CSS, la disposition de boîte flexible (« Flexbox ») vous permet de réorganiser, de redimensionner et de modifier l’orientation des éléments de la page, tels que les menus et les barres d’outils, en fonction de la disposition de la page. Flexbox est un outil puissant qui permet d’aligner facilement du contenu sur des pages Web complexes.
La spécification CSS Flexible Box Layout Module n’est pour le moment qu’une ébauche proposée par le 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 de boîte flexible (« Flexbox ») sur MSDN.
Voici un exemple simple d’utilisation de l’outil Flexbox. Cet exemple est disponible dans la Galerie d’exemples Internet Explorer. Il explique comment créer une barre d’outils qui s’adapte automatiquement à la disposition de la page Web. L’image suivante montre la barre d’outils quand la page est en mode paysage :
.png "Barre d’outils horizontale verte dont les boutons ont été organisés à l’aide de la disposition Flexbox")
Notons ici plusieurs points :
- La barre d’outils est en mode de disposition Flexbox (
display: -ms-flexbox;) - Les boutons de la barre d’outils sont définis de façon à être justifiés—tout espace supplémentaire entre les boutons est réparti uniformément (
-ms-flex-pack: justify;) - Le bouton Play est configuré de manière à prendre plus d’espace que les autres boutons (
-ms-flex: 3 1 100px;) - Les boutons Vol + et Vol - sont dans leur propre boîte flexible et configurés de manière à s’afficher l’un au-dessus de l’autre (
-ms-flex-direction: column;)
Quand la page Web est en mode Portrait (sa hauteur est supérieure à sa largeur), la disposition de la barre d’outils s’ajuste aux nouvelles dimensions :
.png "La même barre d’outils verticale verte dont les boutons ont été réorganisés à l’aide de la disposition Flexbox")
Cette opération est effectuée à l’aide d’une requête de média (@media (orientation:portrait)), qui déclenche les comportements suivants :
- La barre d’outils est configurée de manière à s’afficher verticalement (
-ms-flex-direction: column;) - Les boutons Vol + et Vol - sont à nouveau dans leur propre boîte flexible et configurés de manière à s’afficher l’un à côté de l’autre (
-ms-flex-direction: row;) - Des numéros de groupe ordinaux plus élevés ont été attribués aux boutons Reverse et Forward (
-ms-flex-order: 2). Cela signifie que même si le bouton Reverse apparaît avant le bouton Play dans l’ordre DOM (Document Object Model), il sera affiché après le bouton Play et les boutons de volume dans la barre d’outils verticale, dans la mesure où ils font implicitement partie du groupe ordinal 1.
Pour afficher l’intégralité de l’exemple, voir Exemple de disposition Flexbox CSS dans la Galerie d’exemples Internet Explorer.
| Type de ressource | Titre |
|---|---|
| Guide du développeur | Disposition de boîte flexible (« Flexbox ») |
| Exemples | Exemple de disposition Flexbox CSS |
| Référence | Disposition de boîte flexible (« Flexbox ») |
Disposition multicolonne CSS
Internet Explorer 10 introduit la prise en charge de la disposition multicolonne CSS3, qui vous permet d’organiser le contenu dans plusieurs zones de colonne plutôt que dans une seule zone de contenu. Vous avez désormais la possibilité de créer des colonnes semblables aux colonnes de journaux afin de faciliter la lecture sur différentes tailles et résolutions d’écran.
La prise en charge de la disposition multicolonne signifie que vous pouvez spécifier :
- la largeur des colonnes (quand la propriété column-width est définie seule, toutes les colonnes d’une largeur donnée s’ajustent dans l’espace disponible) ;
- le nombre de colonnes nécessaires à un élément (column-count)
- les règles et espacements facultatifs entre les colonnes (propriétés column-gap et column-rule) ;
- le comportement du séparateur entre les colonnes (propriétés break) ;
- le fractionnement des colonnes (column-span) ;
- la répartition du contenu entre les colonnes (column-fill).
La spécification CSS Multi-column Layout Module n’est pour le moment qu’une proposition de recommandation du W3C (World Wide Web Consortium) prise en charge dans Internet Explorer 10 sans préfixe de fournisseur. Pour obtenir la liste complète des propriétés prises en charge, voir Disposition multicolonne sur MSDN.
| Type de ressource | Titre |
|---|---|
| Guide du développeur | Disposition multicolonne CSS3 |
| Démonstrations | Colonnes Tweet |
| Exemples | Exemple de disposition multicolonne CSS |