Choix d’une disposition (HTML)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Pour fournir l’interface la plus souple et adaptable qui soit aux utilisateurs de votre application Windows Runtime, vous devez d’abord choisir le mode de disposition qui convient le mieux à votre contenu, ainsi que les affichages possibles pour ce dernier. Cette rubrique décrit les fonctionnalités de disposition CSS3 (Cascading Style Sheets de niveau 3) prises en charge par les applications du Windows Store dans Windows 8. La disposition de boîte flexible et la disposition en grille sont utiles pour créer des dispositions fluides pour les applications et les contrôles personnalisés, tandis que les dispositions multicolonne et en régions sont particulièrement utiles pour disposer du texte et d’autres contenus de lecture.

Disposition de boîte flexible (Flexbox)

Dans ce mécanisme de disposition, les éléments enfants sont organisés et dimensionnés à l’aide d’un système basé sur des contraintes prenant en charge à la fois le dimensionnement flexible et le dimensionnement intrinsèque relatifs. Les dispositions Flexbox peuvent s’adapter à diverses tailles d’écran et permettent d’envisager des magazines et journaux numériques ou d’autres scénarios de consommation de média à impression numérique.

La fonctionnalité Flexbox est destinée aux dispositions de pages Web complexes. Elle est particulièrement utile lorsque vous souhaitez définir une position et une taille relatives constantes pour les éléments quelle que soit la taille de l’écran ou de la fenêtre du navigateur. Ceci permet de moins se reposer sur les éléments flottants, plus difficiles à positionner et à dimensionner correctement.

Lors de la définition des dimensions des boîtes, les dispositions Flexbox prennent en compte l’espace disponible, ce qui permet un dimensionnement et un positionnement relatifs. Par exemple, vous pouvez faire en sorte que l’espace blanc supplémentaire présent dans une fenêtre de navigateur soit réparti de façon égale sur la taille de plusieurs éléments enfants et que ces derniers soient centrés au milieu du bloc conteneur.

Avec la disposition Flexbox, vous pouvez :

• Créer une disposition fluide — même si vous utilisez différentes tailles d’écran et de fenêtre de navigateur — mais qui contient des éléments (tels que des images ou des contrôles) qui conservent leur position et leur taille les uns par rapport aux autres.
• Spécifier comment l’espace supplémentaire le long de l’axe de mise en forme (horizontal ou vertical) d’une série d’éléments peut être alloué proportionnellement pour augmenter la taille d’éléments donnés.
• Spécifier comment l’espace supplémentaire le long de l’axe de mise en forme d’une série d’éléments peut être alloué avant, après ou entre la série d’éléments.
• Spécifier comment l’espace supplémentaire perpendiculaire à l’axe de disposition d’un élément peut être disposé autour de l’élément — par exemple, au-dessus ou au-dessous des boutons disposés côte à côte.
• Contrôler le sens de disposition des éléments sur la page (par exemple, de haut en bas, de gauche à droite, de droite à gauche ou de bas en haut).
• Réorganiser les éléments sur l’écran dans un ordre différent de celui spécifié par le DOM (Document Object Model).

À la différence de la disposition en grille, Flexbox n’exige pas que les éléments enfants soient positionnés explicitement dans le conteneur parent. Vous pouvez préférer utiliser la disposition en grille lors de la conception de conteneurs d’éléments légers avec un nombre d’éléments enfants déterminé dynamiquement.

Pour en savoir plus, voir Disposition de boîte flexible (« Flexbox »).

Alignement de grille

Cette fonctionnalité permet aux auteurs de diviser l’espace de disposition libre en colonnes et lignes à l’aide d’un jeu de comportements de dimensionnement prévisibles. Les auteurs peuvent alors positionner et dimensionner avec précision les éléments de bloc de construction de leur application en référençant les lignes de la grille entre les colonnes et les lignes ou en définissant et référençant une cellule de la grille, espace rectangulaire couvrant une intersection de colonnes et de lignes.

Comme les dispositions Flexbox, les dispositions en grille offrent une plus grande fluidité qu’un positionnement à l’aide d’éléments flottants ou de scripts. Vous pouvez ainsi diviser l’espace des principales régions d’une page Web ou d’une application Web et définir la relation qui existe entre diverses parties d’un contrôle HTML en termes de taille, position et couche. Il n’est donc plus nécessaire de créer une disposition fixe ne pouvant tirer profit de l’espace disponible au sein de la fenêtre du navigateur. Comme la disposition en grille vous permet d’aligner des éléments en colonnes et en lignes mais ne dispose d’aucune structure de contenu, elle permet également d’envisager d’autres scénarios impossibles à réaliser avec des tableaux HTML. En l’utilisant avec des requêtes de média, vous pouvez faire en sorte que votre disposition s’adapte de façon transparente aux changements de format, orientation, espace disponible et bien plus encore de votre appareil. Comme la disposition en grille contrôle la disposition horizontale et verticale, vous préférez peut-être utiliser la disposition en grille à la place de Flexbox pour la disposition de premier niveau de votre application.

Pour en savoir plus, voir Disposition en grille.

Disposition multicolonne

Cette fonctionnalité prend en charge le flux du contenu d’une colonne à l’autre pour un nombre arbitraire de colonnes.

Les dispositions multicolonnes permettent de disposer le contenu dans plusieurs colonnes qui conservent un espacement et une règle facultative entre elles. Vous pouvez également moduler le nombre de colonnes en fonction de la taille de la fenêtre du navigateur. Un élément multicolonne est défini par le W3C comme un élément dont la propriété column-width ou column-count n’a pas la valeur auto et agit donc comme un conteneur pour la disposition multicolonne. La disposition multicolonne introduit la notion de zone de colonne, définie comme un nouveau type de conteneur entre la zone de contenu et le contenu. Les éléments multicolonne peuvent posséder plusieurs lignes de zones de colonne. Les lignes sont divisées par des éléments de fractionnement de colonne (éléments pour lesquels column-span:all est spécifié). Les lignes sont triées dans le sens de l’élément multicolonne. Les zones de colonne adjacentes sont séparées par un espacement de colonne, lequel peut éventuellement contenir une règle de colonne.

Pour en savoir plus, voir Disposition multicolonne.

Disposition en régions

Cette disposition est une fonctionnalité de disposition de page qui vous permet de segmenter un flux de contenu unique en plusieurs conteneurs vides au sein d’un modèle HTML. Les modèles HTML sont des documents en grande partie vides de contenu d’origine. Ils se composent essentiellement de conteneurs vides dimensionnés et positionnés de façon à fournir au contenu entrant une disposition spécifique. Vous pouvez utiliser les régions pour placer du texte sur plusieurs colonnes explicitement dimensionnées et positionnées à l’aide de feuilles de style en cascade (CSS), créant ainsi une disposition de style magazine ou journal.

Pour en savoir plus, voir Régions.

Ateliers pratiques pour Windows 8

Si vous souhaitez essayer d’utiliser les dispositions d’application et d’autres fonctionnalités clés de Windows 8, téléchargez les ateliers pratiques pour Windows 8. Ces laboratoires constituent une introduction modulaire pas à pas à la création d’un exemple d’application du Windows Store dans le langage de programmation de votre choix (JavaScript et HTML ou C# et XAML).

Rubriques associées

Disposition de votre interface utilisateur

Disposition d’une page d’application

Recommandations en matière d’expérience utilisateur pour la disposition et la mise à l’échelle