diff options
Diffstat (limited to 'files/fr/learn/css/css_layout')
15 files changed, 2823 insertions, 2580 deletions
diff --git a/files/fr/learn/css/css_layout/flexbox/index.md b/files/fr/learn/css/css_layout/flexbox/index.md index 17a2d6e00f..bf49bc6db6 100644 --- a/files/fr/learn/css/css_layout/flexbox/index.md +++ b/files/fr/learn/css/css_layout/flexbox/index.md @@ -16,269 +16,288 @@ tags: translation_of: Learn/CSS/CSS_layout/Flexbox original_slug: Apprendre/CSS/CSS_layout/Flexbox --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> - -<p>Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.</p> +Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à utiliser le système Flexbox pour créer des mises en page web.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre à utiliser le système Flexbox pour créer des mises en page + web. + </td> + </tr> + </tbody> </table> -<h2 id="Pourquoi_Flexbox">Pourquoi Flexbox ?</h2> +## Pourquoi Flexbox ? -<p>Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">flotteurs (boîtes flottantes)</a> et le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>. Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants.</p> +Pendant longtemps, les seuls outils de mise en page CSS fiables et compatibles avec les navigateurs, étaient les propriétés concernant les [flotteurs (boîtes flottantes)](/fr/docs/Learn/CSS/CSS_layout/Floats) et le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). Ces outils sont bien et fonctionnent, mais restent à certains égards plutôt limitatifs et frustrants. -<p>Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils :</p> +Les simples exigences de mise en page suivantes sont difficiles si ce n'est impossibles à réaliser de manière pratique et souple avec ces outils : -<ul> - <li>centrer verticalement un bloc de contenu dans son parent ;</li> - <li>faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ;</li> - <li>faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère.</li> -</ul> +- centrer verticalement un bloc de contenu dans son parent ; +- faire que tous les enfants d'un conteneur occupent tous une même quantité de hauteur/largeur disponible selon l'espace offert ; +- faire que toutes les colonnes dans une disposition multi‑colonnes aient la même hauteur même si leur quantité de contenu diffère. -<p>Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu !</p> +Comme vous le verrez dans les paragraphes suivants, flexbox facilite considérablement les tâches de mise en page. Approfondissons un peu ! -<h2 id="Voici_un_exemple_simple">Voici un exemple simple</h2> +## Voici un exemple simple -<p>Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">voir en direct ici</a> aussi.</p> +Dans cet article, nous allons commenter une série d'exercices pour vous faciliter la compréhension du fonctionnement de flexbox. Pour commencer, faites une copie locale du premier fichier de démarrage — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) de notre dépôt Github —, chargez‑le dans un navigateur moderne (comme Firefox ou Chrome) et regardez le code dans votre éditeur. Vous pouvez le [voir en direct ici](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html) aussi. -<p>Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes.</p> +Qu'avons‑nous ? un élément {{htmlelement("header")}} avec un en‑tête de haut niveau à l'intérieur, et un élément {{htmlelement("section")}} contenant trois {{htmlelement("article")}}s. Nous allons les utiliser pour créer une disposition vraiment classique sur trois colonnes. -<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> + -<h2 id="Détermination_des_éléments_à_disposer_en_boîtes_flexibles">Détermination des éléments à disposer en boîtes flexibles</h2> +## Détermination des éléments à disposer en boîtes flexibles -<p>Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur <code>flex</code> à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) :</p> +Pour commencer, sélectionnons les éléments devant être présentés sous forme de boîtes flexibles. Pour ce faire, donnons une valeur spéciale à la propriété {{cssxref("display")}} du parent de ces éléments à disposer. Dans ce cas, comme cela concerne les éléments {{htmlelement("article")}}, nous affectons la valeur `flex` à l'élément {{htmlelement("section")}} (qui devient un conteneur flex) : -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Voici le résultat :</p> +Voici le résultat : -<p><img alt="Échantillon d'utilisation de flexbox" src="Exemple_flexbox_1.png"></p> + -<p>Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard.</p> +Ainsi, cette unique déclaration donne tout ce dont nous avons besoin — incroyable, non ? Nous avons ainsi notre disposition en plusieurs colonnes de largeur égale, et toutes de même hauteur. Ceci parce que les valeurs par défaut données aux éléments flex (les enfants du conteneur flex) sont configurés pour résoudre des problèmes courants tels celui-ci. On en reparlera plus tard. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi définir une valeur <code>inline-flex</code> pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables.</p> -</div> +> **Note :** Vous pouvez aussi définir une valeur `inline-flex` pour {{cssxref("display")}} si vous voulez disposer des éléments en ligne sous forme de boîtes modulables. -<h2 id="Aparté_sur_le_modèle_flex">Aparté sur le modèle flex</h2> +## Aparté sur le modèle flex -<p>Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes :</p> +Lorsque les éléments sont disposés en boîtes flexibles, ils sont disposés le long de deux axes : -<p><img alt="Terminologie pour les boîtes modulables" src="termes_flex.png"></p> + -<ul> - <li>L'<strong>axe principal</strong> <strong>(main axis) </strong>est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'<strong>origine principale</strong> <strong>(main start) </strong>et la <strong>fin principale (main end)</strong>.</li> - <li>L'<strong>axe croisé </strong><strong> </strong>est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début<strong> (cross start)</strong> et la fin (<strong>cross end</strong>) de l'axe croisé.</li> - <li>L'élément parent dont la propriété est <code>display: flex</code> ({{htmlelement("section")}} dans notre exemple) est appelé le <strong>conteneur flex</strong> (<strong>flex container</strong>).</li> - <li>Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés <strong>éléments flex (flex items) </strong>(les éléments {{htmlelement("article")}}} dans notre exemple).</li> -</ul> +- L'**axe principal** **(main axis)** est l'axe de la direction dans laquelle sont disposés les éléments flex (par exemple, horizontalement sur la page, ou verticalement de haut en bas de la page). Le début et la fin de cet axe sont appelés l'**origine principale** **(main start)** et la **fin principale (main end)**. +- L'**axe croisé** \*\* **est l'axe perpendiculaire à l'axe principal, càd à la direction dans laquelle sont disposés les éléments flex. Le début et la fin de cet axe sont appelés le début **(cross start)** et la fin (**cross end\*\*) de l'axe croisé. +- L'élément parent dont la propriété est `display: flex` ({{htmlelement("section")}} dans notre exemple) est appelé le **conteneur flex** (**flex container**). +- Les éléments disposés en tant que boîtes flexibles à l'intérieur du conteneur flex sont appelés **éléments flex (flex items)** (les éléments {{htmlelement("article")}}} dans notre exemple). -<p>Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés.</p> +Gardez cette terminologie en tête en lisant les paragraphes suivants. Vous pouvez toujours vous y référer si vous avez un doute sur la signification des termes utilisés. -<h2 id="Colonnes_ou_lignes">Colonnes ou lignes ?</h2> +## Colonnes ou lignes ? -<p>Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à <code>row</code> : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français).</p> +Flexbox dispose de la propriété {{cssxref("flex-direction")}} pour indiquer la direction de l'axe principal (direction dans laquelle les enfants flexibles sont disposés) — cette propriété est égale par défaut à `row` : ils sont donc disposés en ligne, dans le sens de lecture de la langue par défaut du navigateur (de gauche à droite, dans le cas d'un navigateur français). -<p>Ajoutons la déclaration suivante dans la règle :</p> +Ajoutons la déclaration suivante dans la règle : -<pre class="brush: css">flex-direction: column;</pre> +```css +flex-direction: column; +``` -<p>Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple.</p> +Cela dispose de nouveau les éléments en colonnes, comme c'était le cas avant l'ajout de la CSS. Avant de poursuivre, enlevez cette déclaration de l'exemple. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs <code>row-reverse</code> et <code>column-reverse</code>. Expérimentez ces valeurs aussi !</p> -</div> +> **Note :** Vous pouvez aussi disposer les éléments flex dans la direction inverse avec les valeurs `row-reverse` et `column-reverse`. Expérimentez ces valeurs aussi ! -<h2 id="Enveloppement">Enveloppement</h2> +## Enveloppement -<p>Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a>, essayez <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">directement</a> (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) :</p> +Problème : quand votre structure est de largeur ou hauteur fixe, il arrive que les éléments flex débordent du conteneur et brisent cette structure. Voyez l'exemple [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html), essayez [directement](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (faites une copie locale de ce fichier maintenant si vous voulez suivre cet exemple) : -<p><img alt="Débordement des éléments modulables" src="Exemple_flexbox_2.png"></p> + -<p>Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour <code>section</code> :</p> +Ici, nous voyons que les enfants débordent du conteneur. Une façon d'y remédier est d'ajouter la déclaration suivante à votre règle pour `section` : -<pre class="brush: css">flex-wrap: wrap;</pre> +```css +flex-wrap: wrap; +``` -<p>Essayons ; la disposition est bien meilleure avec cet ajout :</p> +Essayons ; la disposition est bien meilleure avec cet ajout : -<p><img alt="Conditionnement des éléments modulables" src="Exemple_flexbox_3.png">Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration <code>flex: 200px</code> pour les éléments <code>article</code> signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie.</p> +Nous avons maintenant plusieurs lignes — un nombre sensé d'enfants flexibles est placé sur chaque ligne, et le débordement est déplacé vers le bas sur une ligne supplémentaire. La déclaration `flex: 200px` pour les éléments `article` signifie que chacun aura au moins 200px de large ; nous discuterons de cette propriété plus en détail plus tard. Vous noterez aussi que chacun des enfants de la dernière rangée est plus large, de façon à ce que toute la rangée reste remplie. -<p>Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en <code>row-reverse</code> — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers.</p> +Mais nous pouvons faire plus ici. Tout d'abord, essayez de changer la valeur de la propriété {{cssxref("flex-direction")}} en `row-reverse` — maintenant vous avez toujours la disposition sur plusieurs lignes, mais elles commencent dans l'angle opposé de la fenêtre du navigateur et se disposent à l'envers. -<h2 id="Forme_abrégée_«_flex-flow_»">Forme abrégée « flex-flow »</h2> +## Forme abrégée « flex-flow » -<p>Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer</p> +Notez maintenant qu'il y a une forme abrégée pour {{cssxref("flex-direction")}} et {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Ainsi, par exemple, vous pouvez remplacer -<pre class="brush: css">flex-direction: row; -flex-wrap: wrap;</pre> +```css +flex-direction: row; +flex-wrap: wrap; +``` -<p>par</p> +par -<pre class="brush: css">flex-flow: row wrap;</pre> +```css +flex-flow: row wrap; +``` -<h2 id="Taille_modulable_des_éléments_flex">Taille modulable des éléments flex</h2> +## Taille modulable des éléments flex -<p>Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> ou prenez une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> comme nouveau point de départ (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">voir en direct</a>).</p> +Revenons maintenant au premier exemple, et examinons comment nous pouvons contrôler la proportion d'éléments flexibles dans l'espace. Lancez votre copie locale de [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) ou prenez une copie de [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) comme nouveau point de départ ([voir en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)). -<p>Ajoutez d'abord la règle ci-dessous en fin de la CSS :</p> +Ajoutez d'abord la règle ci-dessous en fin de la CSS : -<pre class="brush: css">article { +```css +article { flex: 1; -}</pre> +} +``` -<p>Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet.</p> +Il s'agit d'une valeur de proportion, sans unité, définissant la quantité d'espace disponible que chaque élément flex prendra le long de l'axe principal. Dans ce cas, nous donnons à chaque élément {{htmlelement("article")}}} une valeur de 1, ce qui signifie qu'ils prendront tous une portion égale de l'espace libre après le calcul du remplissage et de la marge. Cette valeur représente une proportion, càd que le fait de donner une valeur de 400 000 simultanément à tous les éléments flex aurait exactement le même effet. -<p>Maintenant ajoutons cette règle en-dessous de la précédente :</p> +Maintenant ajoutons cette règle en-dessous de la précédente : -<pre class="brush: css">article:nth-of-type(3) { +```css +article:nth-of-type(3) { flex: 2; -}</pre> +} +``` -<p>Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible.</p> +Maintenant, lorsque vous actualisez, vous voyez que le troisième {{htmlelement("article")}} occupe deux fois plus de largeur disponible que chacun des deux autres — il y a maintenant quatre unités de division disponibles au total. Les deux premiers éléments flexibles en occupent chacun un, soit 1/4 de l'espace disponible pour chacun. Le troisième remplit deux unités, soit 2/4 (la moitié) de l'espace disponible. -<p>Vous pouvez également définir une valeur minimale de taille dans la valeur <code>flex</code>. Modifiez comme suit vos règles <code>article</code> existantes :</p> +Vous pouvez également définir une valeur minimale de taille dans la valeur `flex`. Modifiez comme suit vos règles `article` existantes : -<pre class="brush: css">article { +```css +article { flex: 1 200px; } article:nth-of-type(3) { flex: 2 200px; -}</pre> +} +``` -<p>En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : <em>quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte.</em></p> +En gros, cela dit : « Chaque élément flex reçoit d'abord 200px de l'espace disponible quand c'est possible. Ensuite, le reste de l'espace disponible est réparti selon les unités de proportion ». Note : _quand ce n'est pas possible, ce sont les unités de proportions qui sont prises en compte._ -<p>Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti.</p> +Actualisez et vous devriez voir une différence dans la façon dont l'espace est réparti. -<p><img alt="Modulation de la largeur" src="Exemple_flexbox_4.png"></p> + -<p>Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement.</p> +Le véritable intérêt de flexbox apparaît dans sa souplesse et sa réactivité — si vous redimensionnez la fenêtre du navigateur ou ajoutez un autre élément {{htmlelement("article")}}}, la mise en page continue de fonctionner correctement. -<h2 id="Flex_forme_abrégée_vs_forme_longue">Flex : forme abrégée vs forme longue</h2> +## Flex : forme abrégée vs forme longue -<p>{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes :</p> +{{cssxref("flex")}} est une forme abrégée de propriété qui peut servir à définir trois valeurs différentes : -<ul> - <li>une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ;</li> - <li>une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ;</li> - <li>une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}.</li> -</ul> +- une valeur de proportion sans unité, vue ci‑dessus. Elle peut être précisée seule avec la forme longue de la propriété {{cssxref("flex-grow")}} ; +- une deuxième valeur de proportion sans unité — {{cssxref("flex-shrink")}} — intervenant quand les éléments flex débordent du conteneur. Elle indique la quantité de dépassement à retirer de l'extension de chacun des éléments flex pour les empêcher de déborder du conteneur. Il s'agit d'une fonctionnalité avancée de flexbox, et nous n'en parlerons plus dans cet article ; +- une valeur de taille minimale, vue ci‑dessus. Elle peut aussi être précisée seule avec la forme longue de la propriété {{cssxref("flex-basis")}}. -<p>Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes.</p> +Nous vous déconseillons d'utiliser les propriétés flex sous leur forme longue, sans autre alternative possible (par exemple, pour annuler quelque chose déjà défini). Elles représentent du code supplémentaire, et peuvent être quelque peu déroutantes. -<h2 id="Alignement_horizontal_et_vertical">Alignement horizontal et vertical</h2> +## Alignement horizontal et vertical -<p>Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">voir aussi en direct</a>). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche.</p> +Vous pouvez également utiliser les fonctionnalités de flexbox pour aligner les éléments flex le long de l'axe principal ou croisé. Voyons cela avec un nouvel exemple — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([voir aussi en direct](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)). Nous allons le transformer facilement en une barre souple de boutons. Actuellement, nous avons une barre de menu horizontale avec quelques boutons tassés dans l'angle supérieur gauche. -<p><img alt="Alignement" src="Exemple_flexbox_5.png"></p> + -<p>D'abord, faites une copie locale de cet exemple.</p> +D'abord, faites une copie locale de cet exemple. -<p>Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple :</p> +Ensuite, ajoutez ce qui suit à la fin de la CSS de l'exemple : -<pre class="brush: css">div { +```css +div { display: flex; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés.</p> +Actualisez la page et vous verrez que les boutons sont maintenant bien centrés, horizontalement et verticalement. Cette transformation a été opérée grâce à deux nouvelles propriétés. -<p>{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis).</p> +{{cssxref("align-items")}} fixe là où les éléments flex sont placés sur l'axe perpendiculaire, dit aussi croisé (cross axis). -<ul> - <li>Par défaut, la valeur est <code>stretch</code>, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut.</li> - <li>Avec la valeur <code>center</code>, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement.</li> - <li>Il y a également des valeurs comme <code>flex-start</code> et <code>flex-end</code> qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails.</li> -</ul> +- Par défaut, la valeur est `stretch`, qui étire tous les éléments flex de manière à emplir le conteneur parent le long de l'axe croisé. Si le parent ne possède pas de dimension définie dans la direction de l'axe croisé, alors tous les éléments flex auront la dimension du plus étiré des éléments. C'est pour cette raison que, dans notre premier exemple, les colonnes ont toutes la même hauteur par défaut. +- Avec la valeur `center`, utilisée dans le code ci-dessus, les éléments gardent leur dimension intrinsèque, tout en étant centrés sur l'axe croisé. C'est la raison pour laquelle, dans l'exemple actuel, les boutons sont centrés verticalement. +- Il y a également des valeurs comme `flex-start` et `flex-end` qui alignent respectivement tous les éléments au début ou à la fin de l'axe croisé. Voyez {{cssxref("align-items")}} pour tous les détails. -<p>Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS:</p> +Vous pouvez prendre le pas sur le comportement de {{cssxref("align-items")}} pour un élément flex donné en lui appliquant la propriété {{cssxref("align-self")}}. Par exemple, ajoutez ce qui suit aux CSS: -<pre class="brush: css">button:first-child { +```css +button:first-child { align-self: flex-end; -}</pre> +} +``` -<p>Voyez l'effet obtenu, puis supprimez ensuite la règle.</p> +Voyez l'effet obtenu, puis supprimez ensuite la règle. -<p>{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal.</p> +{{cssxref("justify-content")}} fixe où les éléments flex sont placés sur l'axe principal. -<ul> - <li>La valeur par défaut est <code>flex-start</code>. Tous les éléments sont disposés vers l'origine de l'axe principal.</li> - <li>Vous utiliserez <code>flex-end</code> pour les disposer vers la fin.</li> - <li><code>center</code> est aussi une valeur possible pour <code>justify-content</code>. Avec elle, les éléments flex sont placés vers le centre de l'axe principal.</li> - <li>La valeur <code>space-around</code>, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun.</li> - <li>Une autre valeur, <code>space-between</code>, est semblable à <code>space-around</code> mais elle ne laisse pas d'espace aux extrémités.</li> -</ul> +- La valeur par défaut est `flex-start`. Tous les éléments sont disposés vers l'origine de l'axe principal. +- Vous utiliserez `flex-end` pour les disposer vers la fin. +- `center` est aussi une valeur possible pour `justify-content`. Avec elle, les éléments flex sont placés vers le centre de l'axe principal. +- La valeur `space-around`, utilisée plus haut, est pratique — elle distribue régulièrement tous les éléments le long de l'axe principal, en laissant autant d'espace à chaque extrémité qu'entre chacun. +- Une autre valeur, `space-between`, est semblable à `space-around` mais elle ne laisse pas d'espace aux extrémités. -<p>N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre.</p> +N'hésitez pas à jouer avec ces valeurs pour visualiser leur fonctionnement avant de poursuivre. -<h2 id="Ordonner_les_éléments_flex">Ordonner les éléments flex</h2> +## Ordonner les éléments flex -<p>Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page.</p> +Flexbox dispose aussi d'une fonctionnalité pour modifier l'ordre d'affichage des éléments flex, sans en modifier l'ordre dans la source. C'est une chose impossible à réaliser avec les méthodes classiques de mise en page. -<p>Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons :</p> +Le code pour ce faire est simple : ajoutez la règle CSS suivante dans l'exemple de code de la barre de boutons : -<pre class="brush: css">button:first-child { +```css +button:first-child { order: 1; -}</pre> +} +``` -<p>Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne :</p> +Actualisez, et vous pouvez voir que le bouton « Smile » a été déplacé en fin de l'axe principal. Voyons en détail comment cela fonctionne : -<ul> - <li>par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ;</li> - <li>les éléments flex avec des valeurs <code>order</code> plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ;</li> - <li>les éléments flex avec les mêmes valeurs pour <code>order</code> sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs <code>order</code> de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier.</li> - <li>Le troisième élément suit le deuxième, car il a la même valeur pour <code>order</code> et qu'il est placé après dans le code source.</li> -</ul> +- par défaut, tous les éléments flex possèdent une valeur {{cssxref("order")}} égale à 0 ; +- les éléments flex avec des valeurs `order` plus élévées apparaîtront plus tard dans l'ordre d'affichage que ceux avec des valeurs plus faibles ; +- les éléments flex avec les mêmes valeurs pour `order` sont affichés dans l'ordre de la source. Ainsi, si vous avez 4 éléments avec des valeurs `order` de 2, 1, 1 et 0, leur ordre d'affichage sera 4ème, 2ème, 3ème et premier. +- Le troisième élément suit le deuxième, car il a la même valeur pour `order` et qu'il est placé après dans le code source. -<p>Vous pouvez donner des valeurs négatives à <code>order</code> pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante :</p> +Vous pouvez donner des valeurs négatives à `order` pour faire en sorte que ces éléments soient affichés avant les éléments d'ordre 0. Par exemple, vous pouvez faire apparaître le bouton « Blush » en tête de l'axe principal avec la règle suivante : -<pre class="brush: css">button:last-child { +```css +button:last-child { order: -1; -}</pre> +} +``` -<h2 id="Boîtes_flex_imbriquées">Boîtes flex imbriquées</h2> +## Boîtes flex imbriquées -<p>Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">à voir en direct également</a>).</p> +Il est possible de créer des mises en page joliment complexes avec flexbox. Il est parfaitement loisible de déclarer un élément flex en tant que conteneur flex, de sorte que ses enfants sont également disposés en tant que boîtes modulables. Regardez [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([à voir en direct également](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)). -<p><img alt="Imbrications avec flexbox" src="Exemple_flexbox_6.png"></p> + -<p>Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} :</p> +Le HTML pour cela est vraiment simple. Voici un élément {{htmlelement("section")}} contenant trois éléments {{htmlelement("article")}}. Le troisième élément {{htmlelement("article")}} contient trois éléments {{htmlelement("div")}}. Le premier élément {{htmlelement("div")}} contient cinq éléments {{htmlelement("button")}} : -<pre>section - article - article - article - div - button - div button - div button - button - button</pre> + section - article + article + article - div - button + div button + div button + button + button -<p>Regardez le code utilisé pour cette disposition.</p> +Regardez le code utilisé pour cette disposition. -<p>Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles.</p> +Primo, nous déterminons que les enfants de l'élément {{htmlelement("section")}} seront des boîtes flexibles. -<pre class="brush: css">section { +```css +section { display: flex; -}</pre> +} +``` -<p>Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne.</p> +Secundo, nous définissons des valeurs flex pour les éléments {{htmlelement("article")}} eux‑mêmes. Remarquez en particulier ici la deuxième règle — nous paramétrons le troisième élément {{htmlelement("article")}} pour que ses enfants soient eux-mêmes disposés en tant qu'éléments flex, mais cette fois‑ci en colonne. -<pre class="brush: css">article { +```css +article { flex: 1 200px; } @@ -287,56 +306,56 @@ article:nth-of-type(3) { display: flex; flex-flow: column; } -</pre> +``` -<p>Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur <code>flex:1 100px;</code> pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut.</p> +Tertio, nous sélectionnons le premier élément {{htmlelement("div")}} et lui assignons la valeur `flex:1 100px;` pour qu'il ait effectivement une hauteur minimale de 100px, ensuite nous indiquons que ses enfants (les éléments {{htmlelement("button")}}) doivent être disposés en tant qu'éléments flex dans une ligne enveloppante, centrés dans l'espace disponible comme dans l'exemple des boutons vu plus haut. -<pre class="brush: css">article:nth-of-type(3) div:first-child { +```css +article:nth-of-type(3) div:first-child { flex:1 100px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; -}</pre> +} +``` -<p>Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes.</p> +Enfin, nous définissons un dimensionnement des boutons, et plus précisément nous leur donnons une valeur flex de 1. L'effet obtenu est très intéressant ; vous l'observerez en modifiant la largeur de la fenêtre du navigateur. Les boutons prennent autant d'espace qu'il leur est permis, et sont si possible disposés sur la même ligne ; mais si ce n'est pas possible, il "descendent" pour créer de nouvelles lignes. -<pre class="brush: css">button { +```css +button { flex: 1; margin: 5px; font-size: 18px; line-height: 1.5; -}</pre> +} +``` -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification).</p> +La prise en charge de Flexbox est disponible avec la plupart des navigateurs récents — Firefox, Chrome, Opera, Microsoft Edge et IE 11, les nouvelles versions d'Android/iOS, etc. Mais vous devez être attentif au fait que l'on utilise encore des navigateurs anciens qui ne prennent pas en charge Flexbox (ou le font, mais uniquement pour des versions très anciennes, vraiment dépassées de la spécification). -<p>Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible.</p> +Pour l'apprentissage et l'expérimentation, cela n'a pas trop d'importance. Mais utiliser flexbox pour un site web réel nécessite de faire des tests et de s'assurer que l'expérience utilisateur est toujours acceptable dans le plus grand nombre de navigateurs possible. -<p>Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable.</p> +Flexbox est une fonctionnalité plus complexe que les règles CSS courantes. Par exemple, une absence de prise en charge des ombres portées dans les CSS laissera le site utilisable. Mais la non prise en charge des fonctionnalités flexbox risque de casser totalement la mise en page, et de rendre le site inutilisable. -<p>Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Tests croisés sur navigateurs</a>.</p> +Les stratégies pour contourner les problèmes de compatibilité des navigateurs est discutée dans le module [Tests croisés sur navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS.</p> +Notre visite guidée des bases de flexbox est maintenant terminée. Espérons que vous en êtes satisfaits, et que vous saurez jouer avec ses fonctionnalités tout en progressant dans l'apprentissage. Nous allons examiner ensuite un autre aspect important de la mise en page avec les CSS — les grilles CSS. -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}}</div> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout/Flexbox_skills", "Learn/CSS/CSS_layout")}} -<div> -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> -</div> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/flexbox_skills/index.md b/files/fr/learn/css/css_layout/flexbox_skills/index.md index 4e473510b9..0ba2cb65a6 100644 --- a/files/fr/learn/css/css_layout/flexbox_skills/index.md +++ b/files/fr/learn/css/css_layout/flexbox_skills/index.md @@ -4,97 +4,80 @@ slug: Learn/CSS/CSS_layout/Flexbox_skills translation_of: Learn/CSS/CSS_layout/Flexbox_skills original_slug: Apprendre/CSS/CSS_layout/Flexbox_skills --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout/Grids", "Apprendre/CSS/CSS_layout")}}</div> +Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire. -<p>Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.</p> +> **Note :** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) to work on the tasks. +> +> If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page. -<div class="note"> -<p><strong>Note :</strong> You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br> - <br> - If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p> -</div> +## Flex Layout One -<h2 id="Flex_Layout_One">Flex Layout One</h2> +Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous. -<p>Ces éléments de liste constituent la navigation pour un site. Ils doivent être disposés en ligne, avec un espace égal entre chaque élément. L'exemple fini doit ressembler à l'image ci-dessous.</p> + -<p><img alt="Flex items laid out as a row with space between them." src="flex-task1.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox1.html", '100%', 700)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Two -<h2 id="Flex_Layout_Two">Flex Layout Two</h2> +Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément. -<p>Ces éléments de liste sont tous de tailles différentes, mais nous voulons qu'ils soient affichés sous forme de trois colonnes de taille égale, quel que soit le contenu de chaque élément.</p> + -<p><img alt="Flex items laid out as three equal size columns with different amounts of content." src="flex-task2.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox2.html", '100%', 800)}}</p> +Questions supplémentaires: -<p>Questions supplémentaires:</p> +- Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ? -<ul> - <li>Pouvez-vous maintenant faire en sorte que le premier article soit deux fois plus grand que les autres ?</li> -</ul> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox1-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Three -<h2 id="Flex_Layout_Three">Flex Layout Three</h2> +Il y a deux éléments dans le HTML ci-dessous, une div avec une classe `.parent` qui contient une autre div avec une classe `.child`. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent. -<p>Il y a deux éléments dans le HTML ci-dessous, une div avec une classe <code>.parent</code> qui contient une autre div avec une classe <code>.child</code>. Utilisez Flexbox pour centrer le fichier enfant à l'intérieur du parent.</p> + -<p><img alt="A box centered inside another box." src="flex-task3.png"></p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}} -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox3.html", '100%', 800)}}</p> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html) to work in your own editor or in an online editor. -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox3-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +## Flex Layout Four -<h2 id="Flex_Layout_Four">Flex Layout Four</h2> +Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image. -<p>Dans cette dernière tâche, placez ces éléments en lignes comme dans l'image.<br> - </p> -<p><img alt="A set of items displayed as rows." src="flex-task4.png"></p> -<p>Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé :</p> + -<p>{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}}</p> +Essayez de mettre à jour le code ci-dessous pour recréer l'exemple terminé : -<div class="note"> -<p><strong>Note :</strong> For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p> -</div> +{{EmbedGHLiveSample("css-examples/learn/tasks/flexbox/flexbox4.html", '100%', 800)}} -<h2 id="Assessment_or_further_help">Assessment or further help</h2> +> **Note :** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/flexbox/flexbox4-download.html) to work in your own editor or in an online editor. -<p>You can practice these examples in the Interactive Editors mentioned above.</p> +## Assessment or further help -<p>If you would like your work assessed, or are stuck and want to ask for help:</p> +You can practice these examples in the Interactive Editors mentioned above. -<ol> - <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li> - <li>Write a post asking for assessment and/or help at the<a href="https://discourse.mozilla.org/c/mdn"> MDN Discourse forum</a>. Add the "learning" tag to your post so we are able to more easily find it. Your post should include: - <ul> - <li>A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test".</li> - <li>Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,.</li> - <li>A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> - <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> - </ul> - </li> -</ol> +If you would like your work assessed, or are stuck and want to ask for help: -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</p> +1. Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections. +2. Write a post asking for assessment and/or help at the[ MDN Discourse forum](https://discourse.mozilla.org/c/mdn). Add the "learning" tag to your post so we are able to more easily find it. Your post should include: + + - A descriptive title such as "Assessment wanted for Flexbox layout 1 skill test". + - Details of what you would like us to do — for example what you have already tried, if you are stuck and need help,. + - A link to the example you want assessed or need help with, in an online editor. This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. + - A link to the actual task or assessment page, so we can find the question you want help with. + +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} diff --git a/files/fr/learn/css/css_layout/floats/index.md b/files/fr/learn/css/css_layout/floats/index.md index 386185ea62..1557416859 100644 --- a/files/fr/learn/css/css_layout/floats/index.md +++ b/files/fr/learn/css/css_layout/floats/index.md @@ -16,52 +16,62 @@ tags: translation_of: Learn/CSS/CSS_layout/Floats original_slug: Apprendre/CSS/CSS_layout/Floats --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> - -<p>À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.</p> +À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété [`float`](/fr/docs/Web/CSS/float "The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).") est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée de la manière dont fonctionne CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre comment créer des éntités flottantes dans les pages web, ainsi qu'utiliser la propriété <code>clear</code> et autres méthodes de dégagement des boîtes flottantes.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée de la manière dont fonctionne CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction au CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre comment créer des éntités flottantes dans les pages web, ainsi + qu'utiliser la propriété <code>clear</code> et autres méthodes de + dégagement des boîtes flottantes. + </td> + </tr> + </tbody> </table> -<h2 id="Contexte_de_boîtes_flottantes">Contexte de boîtes flottantes</h2> +## Contexte de boîtes flottantes -<p>La propriété <a href="/fr/docs/Web/CSS/float" title="The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning)."><code>float</code></a> a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal.</p> +La propriété [`float`](/fr/docs/Web/CSS/float "The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).") a été introduite pour permettre aux développeurs web d'implémenter des dispositions simples comme une image flottant dans une colonne de texte, le texte se développant autour de cette image sur la gauche ou sur la droite. Le genre de choses que vous pourriez avoir dans une mise en page de journal. -<p>Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de <code>float</code> s'est élargie. Notre <a href="/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">exemple de paragraphe élégant</a> vu plus haut dans le cours montre comment vous pouvez utiliser <code>float</code> pour créer une lettrine.</p> +Mais les développeurs web se sont vite rendus compte que tout élément pouvait flotter, pas seulement les images, et c'est ainsi que l'utilisation de `float` s'est élargie. Notre [exemple de paragraphe élégant](/fr/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph) vu plus haut dans le cours montre comment vous pouvez utiliser `float` pour créer une lettrine. -<p>Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé.</p> +Les boîtes flottantes ont été couramment utilisées pour créer des mises en page complètes de sites web avec plusieurs colonnes d'informations flottant les unes à côté des autres (le comportement par défaut est une superposition des contenus, dans le même ordre que dans le code source). De nouvelles techniques de mises en page bien meilleures sont disponibles, nous les avons déjà vues dans ce module, et l'utilisation des boîtes flottantes à cette fin doit être considérée comme une technique du passé. -<p>Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes.</p> +Dans cet article, nous nous limiterons notre exposé à l'utilisation appropriée des boîtes flottantes. -<h2 id="Exemple_simple_de_boîte_flottante">Exemple simple de boîte flottante</h2> +## Exemple simple de boîte flottante -<p>Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier <code>index.html</code> sur votre ordinateur initialisé avec un <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html" rel="noopener">simple modèle HTML</a> et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler.</p> +Découvrons comment utiliser les boîtes flottantes. Nous commencerons par un exemple très simple consistant à faire flotter un élément dans un bloc de texte. Vous pouvez suivre cela en créant un nouveau fichier `index.html` sur votre ordinateur initialisé avec un [simple modèle HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous à la bonne place. Au bas de ce paragraphe vous pouvez directement voir un exemple en direct de ce à quoi le code final doit ressembler. -<p>Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément <code>body</code> en supprimant tout ce qu'il y avait avant :</p> +Tout d'abord, commençons avec un HTML simple — ajoutez le code ci-dessous dans l'élément `body` en supprimant tout ce qu'il y avait avant : -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> +<img src="butterfly.jpg" alt="Un joli papillon de couleur rouge, blanche et brune sur une grande feuille"> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<p>Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier <code>.css</code> séparé — comme vous voulez):</p> +Maintenant, appliquez la CSS suivante au HTML ci-dessus (avec un élément {{htmlelement("style")}} ou un élément {{htmlelement("link")}} pointant sur un fichier `.css` séparé — comme vous voulez): -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -74,11 +84,13 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour <code>.box</code> :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose qui ressemble un peu à ce à quoi vous vous attendiez — la boîte est au-dessus du texte suivant le cours normal de l'affichage. Pour faire flotter l'image dans le texte ajoutez ces deux propriétés à la règle pour `.box` : -<pre class="brush: css">.box { +```css +.box { float: left; margin-right: 15px; width: 150px; @@ -86,26 +98,29 @@ original_slug: Apprendre/CSS/CSS_layout/Floats border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; -}</pre> +} +``` -<p>Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit:</p> +Enregistrez et actualisez à nouveau et vous verrez quelque chose comme ce qui suit: -<h3>Faire flotter la boîte</h3> +### Faire flotter la boîte -<p>Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant <code>.box</code> :</p> +Pour faire flotter la boîte, on ajoutera les propriétés {{cssxref("float")}} et {{cssxref("margin-right")}} à la règle ciblant `.box` : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -121,38 +136,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }}</p> +{{ EmbedLiveSample('Faire_flotter_la_boîte', '100%', 500) }} -<p>Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété <code>float</code> (l'élément <code>box</code> dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (<code>left</code>) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête.</p> +Voyons comment fonctionne la boîte flottante — l'élément possèdant la propriété `float` (l'élément `box` dans notre cas) est retiré du cours normal de la mise en page du document et collé du côté gauche (`left`) de son conteneur parent ({{htmlelement("body")}}, dans ce cas). Tout contenu disposé après l'élément flottant dans le cours normal de la mise en page (c'est à dire disposé à la suite dans le code source) va maintenant l'envelopper en remplissant l'espace sur sa droite sur toute sa hauteur. Là, ça s'arrête. -<p>Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur <code>right</code> à la propriété <code>float</code> et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat.</p> +Faire flotter le contenu surla droite a exactement le même effet, mais inversé — l'élément flottant se plaque sur la droite du conteneur et le contenu l'enveloppera en se plaçant à gauche. Donnez la valeur `right` à la propriété `float` et remplacez {{cssxref("margin-right")}} par {{cssxref("margin-left")}} dans le dernier jeu de règles, et observez le résultat. -<p>Ajoutez une classe <code>special</code> au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond.</p> +Ajoutez une classe `special` au premier paragraphe du texte suivant immédiatement la boîte flottante, puis dans la CSS ajoutez les règles suivantes. Elles donnent à ce paragraphe une couleur de fond. -<pre class="brush: css">.special { +```css +.special { background-color: rgb(79,185,227); padding: 10px; color: #fff; } -</pre> +``` -<h3>Visualiser le flottement</h3> +### Visualiser le flottement -<p>Pour mieux visualiser l'effet, modifiez <code>margin-right</code> de la boîte flottante en <code>margin</code> de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous :</p> +Pour mieux visualiser l'effet, modifiez `margin-right` de la boîte flottante en `margin` de façon à avoir le même espace tout autour de la boîte flottante. Vous verrez l'arrière-plan du paragraphe juste au dessous de la boîte flottante comme dans l'exemple ci-dessous : -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> +```html hidden +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -174,35 +193,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats padding: 10px; color: #fff; } -</pre> +``` -<p>{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }}</p> +{{ EmbedLiveSample('Visualiser_le_flottement', '100%', 500) }} -<p>Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur.</p> +Les lignes du paragraphe suivant la boîte flottante ont été raccourcies pour que le texte entoure cette boîte, mais comme elle a été sortie du cours normal, la boîte du contenu du paragraphe reste sur toute la largeur du conteneur. -<h2 id="Dégagement_des_boîtes_flottantes">Dégagement des boîtes flottantes</h2> +## Dégagement des boîtes flottantes -<p>Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}.</p> +Nous avons vu que la boîte flottante est retirée du cours normal de l'affichage et que les autres éléments se placent à côté, donc si nous voulons empêcher un élément à la suite de remonter pour se placer à côté, nous devons le dégager. Cette opération se réalise à l'aide de la propriété {{cssxref("clear")}}. -<p>Dans le HTML de l'exemple précédent, donnez la classe <code>cleared</code> au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS :</p> +Dans le HTML de l'exemple précédent, donnez la classe `cleared` au second paragraphe sous l'élément destiné à être placé à côté de la boîte flottante. Puis, ajoutez ceci à la CSS : -<pre class="brush: css">.cleared { +```css +.cleared { clear: left; } -</pre> +``` -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +```html +<h1>Exemple simple de boîte flottante</h1> -<div class="box">Boîte flottante</div> +<div class="box">Boîte flottante</div> -<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<pre class="brush: css">body { +``` + +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -222,53 +245,57 @@ original_slug: Apprendre/CSS/CSS_layout/Floats .cleared { clear: left; } -</pre> +``` -<p>{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Dégagement_des_boîtes_flottantes', '100%', 600) }} -<p>Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété <code>clear</code> accepte les valeurs suivantes :</p> +Vous verrez que le paragraphe suivant s'est dégagé de l'élément flottant et ne remonte plus à côté de ce dernier. La propriété `clear` accepte les valeurs suivantes : -<ul> - <li><code>left</code> : dégage les élément à gauche de la boîte flottante.</li> - <li><code>right</code> : dégage les éléments à droite.</li> - <li><code>both </code>: dégage de tous élément flottant, à gauche et à droite.</li> -</ul> +- `left` : dégage les élément à gauche de la boîte flottante. +- `right` : dégage les éléments à droite. +- `both `: dégage de tous élément flottant, à gauche et à droite. -<h2 id="Dégagement_de_boîtes_autour_dune_boîte_flottante">Dégagement de boîtes autour d'une boîte flottante</h2> +## Dégagement de boîtes autour d'une boîte flottante -<p>Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe <code>wrapper</code>.</p> +Vous savez comment dégager quelque chose suivant un élément flottant, mais regardez ce qui arrive si vous avez une boîte flottante de grande hauteur et un paragraphe de texte court dans une boîte enveloppant les deux. Modifiez votre document de sorte que le premier paragraphe et la boîte flottante soient englobés dans un élément {{htmlelement("div")}} de la classe `wrapper`. -<pre class="brush: html"><div class="wrapper"> - <div class="box">Boîte flottante</div> +```html +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> -</div> -</pre> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +``` -<p>Dans la CSS, ajoutez la règle suivante pour la classe <code>.wrapper</code> et actualisez la page :</p> +Dans la CSS, ajoutez la règle suivante pour la classe `.wrapper` et actualisez la page : -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; -}</pre> +} +``` -<h3>Le problème</h3> +### Le problème -<p>Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante.</p> +Comme dans l'exemple où nous avons mis un arrière‑plan au paragraphe, vous voyez que la couleur d'arrière‑plan s'étale derrière la boîte flottante. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -290,37 +317,42 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_problème', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_problème', '100%', 600) }} -<p>Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement.</p> +Encore une fois, c'est parce que la boîte flottante a été retirée du cours normal de l'affichage. Dégager l'élément suivant ne résout pas ce problème où vous voulez que la boîte d'emballage de l'élément flottant et le contenu textuel , même court, arrive au bas de l'élément flottant. Il y a trois façons possibles de résoudre ce problème, deux fonctionnant avec tous les navigateurs — mais relevant un peu de la débrouille — et une troisième, nouvelle, permettant de faire face à cette situation proprement. -<h3 id="Le_«_clearfix_hack_»">Le « clearfix hack »</h3> +### Le « clearfix hack » -<p>La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur <code>both</code> à la propriété <code>clear</code>.</p> +La façon dont cette situation est traditionnellement traitée consiste à utiliser un procédé connu sous le nom de « clearfix hack » (truc pour déboguer clear). Cela consiste à insérer un contenu après la boîte contenant le flotteur, envelopper le contenu et donner la valeur `both` à la propriété `clear`. -<p>Ajoutez ceci à la CSS de notre exemple :</p> +Ajoutez ceci à la CSS de notre exemple : -<pre class="brush: css">.wrapper::after { +```css +.wrapper::after { content: ""; clear: both; display: block; -}</pre> +} +``` -<p>Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que <code><div></code> en dessous avec la règle <code>clear: both</code>.</p> +Maintenant actualisez la page et la boîte est dégagée. C'est pratiquement la même chose que si vous aviez ajouté un élément HTML tel que `<div>` en dessous avec la règle `clear: both`. -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -348,34 +380,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats clear: both; display: block; } -</pre> +``` -<p>{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }}</p> +{{ EmbedLiveSample('Le_«_clearfix_hack_»', '100%', 600) }} -<h3 id="Utilisation_du_débordement">Utilisation du débordement</h3> +### Utilisation du débordement -<p>Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de <code>wrapper</code> à autre chose que <code>visible</code>.</p> +Une autre méthode consiste à fixer la valeur de la propriété {{cssxref("overflow")}} de `wrapper` à autre chose que `visible`. -<p>Supprimez les éléments <code>clearfix</code> de la CSS su paragraphe précédent et, à la place, ajoutez <code>overflow: auto</code> aux règles pour <code>wrapper</code>. À nouveau, la boîte doit être dégagée.</p> +Supprimez les éléments `clearfix` de la CSS su paragraphe précédent et, à la place, ajoutez `overflow: auto` aux règles pour `wrapper`. À nouveau, la boîte doit être dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; overflow: auto; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -398,34 +435,39 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }}</p> +{{ EmbedLiveSample('Utilisation_du_débordement', '100%', 600) }} -<p>Cet exemple fonctionne en créant ce que l'on appelle un <strong>block formatting context</strong> (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement.</p> +Cet exemple fonctionne en créant ce que l'on appelle un **block formatting context** (BFC) (contexte de formatage de bloc). C'est comme une mini composition à l'intérieur de la page, composition dans laquelle tout est contenu ; l'élément flottant est contenu à l'intérieur de la BFC et l'arrière-plan est derrière les deux éléments. Cela fonctionne en règle générale, mais dans certains cas, vous pourriez avoir des barres de défilement indésirables ou des ombres découpées en raison des conséquences involontaires de l'utilisation du débordement. -<h3 id="«_display_flow-root_»">« display: flow-root »</h3> +### « display: flow-root » -<p>La solution moderne de ce problème consiste à utiliser la valeur <code>flow-root</code> pour le propriété <code>display</code>. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez <code>overflow: auto</code> de la règle <code>.wrapper</code> et ajoutez <code>display: flow-root</code>. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée.</p> +La solution moderne de ce problème consiste à utiliser la valeur `flow-root` pour le propriété `display`. Elle n'existe que pour créer des BFC sans recourir à des astuces — il n'y pas de conséquences imprévisibles à son utilisation. Supprimez `overflow: auto` de la règle `.wrapper` et ajoutez `display: flow-root`. En supposant que votre navigateur le prenne en charge, la boîte sera dégagée. -<pre class="brush: css">.wrapper { +```css +.wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; display: flow-root; -}</pre> +} +``` -<pre class="brush: html hidden"><h1>Exemple simple de boîte flottante</h1> -<div class="wrapper"> - <div class="box">Boîte flottante</div> +```html hidden +<h1>Exemple simple de boîte flottante</h1> +<div class="wrapper"> + <div class="box">Boîte flottante</div> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> -</div> -<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +``` -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -448,27 +490,25 @@ original_slug: Apprendre/CSS/CSS_layout/Floats background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<p>{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }}</p> +{{ EmbedLiveSample('«_display_flow-root_»', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes anciennes de mise en page</a> pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens.</p> +Vous savez maintenant tout ce qu'il y a à savoir à propos des boîtes flottantes dans le développement moderne du web. Voyez l'article sur les [Méthodes anciennes de mise en page](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) pour toute information sur la façon dont elles étaient utilisées autrefois, ce qui pourrait se révéler utile si vous travaillez sur des projets anciens. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md index 3694a00968..aada82d606 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -4,79 +4,79 @@ slug: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.</p> +Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques. <table class="standard-table"> - <tbody> - <tr> - <th scope="row"><strong>Conditions préalables</strong>:</th> - <td>Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue tous les articles de ce module.</td> - </tr> - <tr> - <th scope="row"><strong>Objectif</strong>:</th> - <td>Pour tester la compréhension des compétences de base en aménagement couvertes dans ce module.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><strong>Conditions préalables</strong>:</th> + <td> + Avant de tenter cette évaluation, vous devriez déjà avoir passé en revue + tous les articles de ce module. + </td> + </tr> + <tr> + <th scope="row"><strong>Objectif</strong>:</th> + <td> + Pour tester la compréhension des compétences de base en aménagement + couvertes dans ce module. + </td> + </tr> + </tbody> </table> -<h2 id="dossier_de_projet">dossier de projet</h2> +## dossier de projet -<p>Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous.</p> +Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintenant créer une mise en page pour la conception, qui devrait ressembler à l'image ci-dessous. -<p><img alt="" src="layout-task-complete.png"></p> + -<h3 id="configuration_de_base">configuration de base</h3> +### configuration de base -<p>Vous pouvez télécharger le code HTML, CSS et un ensemble de six images <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">ici</a> .</p> +Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) . -<p>Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé <code>images</code>. Ouvrir le <code>index.html</code>fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous.</p> +Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous. -<p>Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal.</p> +Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal. -<p><img alt="" src="layout-task-start.png"></p> + -<h3 id="Votre_section_detâches">Votre section de tâches</h3> +### Votre section de tâches -<p>Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont:</p> +Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont: -<ol> - <li>Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments.</li> - <li>La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint.</li> - <li>L'image qui se trouve à l'intérieur de l'article doit être entourée de texte.</li> - <li>Les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>et <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites.</li> - <li>Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images.</li> -</ol> +1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments. +2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint. +3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte. +4. Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites. +5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images. -<p>Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes:</p> +Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes: -<ul> - <li>Positionnement</li> - <li>Flotte</li> - <li>Flexbox</li> - <li>CSS Grid Layout</li> -</ul> +- Positionnement +- Flotte +- Flexbox +- CSS Grid Layout -<p>Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> .</p> +Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) . -<h2 id="Evaluation">Evaluation</h2> +## Evaluation -<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982" rel="noopener">fil de discussion relatif à cet exercice</a> ou sur le <a href="irc://irc.mozilla.org/mdn">canal</a> IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a> . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher!</p> +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher! -<h2 id="Dans_ce_module_Section">Dans ce module Section</h2> +## Dans ce module Section -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Débit normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">la grille</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flotteurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mise en page à plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception sensible</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant aux questions des médias</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page héritées</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Soutenir les anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation fondamentale de la compréhension de la mise en page.</a></li> -</ul> +- [Introduction à la mise en page CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Débit normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [la grille](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flotteurs](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Mise en page à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception sensible](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant aux questions des médias](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mise en page héritées](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Soutenir les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation fondamentale de la compréhension de la mise en page.](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/grids/index.md b/files/fr/learn/css/css_layout/grids/index.md index 6a0d5da4ad..23532b7599 100644 --- a/files/fr/learn/css/css_layout/grids/index.md +++ b/files/fr/learn/css/css_layout/grids/index.md @@ -18,110 +18,133 @@ tags: translation_of: Learn/CSS/CSS_layout/Grids original_slug: Apprendre/CSS/CSS_layout/Grids --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> - -<p>« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame.</p> +« CSS Grid Layout » (Trames avec les CSS) est un système de mise en page bidimensionnel. Il vous permet de disposer les contenus en lignes et en colonnes ; il possède de nombreuses fonctionnalités simplifiant la construction de mises en page complexes. Cet article vous indique tout ce que vous devez savoir pour commencer une mise en page avec une trame. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre les concepts fondamentaux sous-jacents de la disposition en trame et comment la mettre en œuvre en utilisant « CSS Grid ».</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a> + et <a href="/fr/Apprendre/CSS/styliser_boites">Styles de boîtes</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Comprendre les concepts fondamentaux sous-jacents de la disposition en + trame et comment la mettre en œuvre en utilisant « CSS Grid ». + </td> + </tr> + </tbody> </table> -<h2 id="Quest_quune_disposition_en_trame">Qu'est qu'une disposition en trame ?</h2> +## Qu'est qu'une disposition en trame ? -<p>Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.</p> +Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web. -<p>La trame est constituée généralement de <strong>rangées</strong> (<strong>colonnes</strong> ou <strong>lignes)</strong>. L'espace entre chaque ligne ou colonne est communément appelé <strong>gouttière</strong>.</p> +La trame est constituée généralement de **rangées** (**colonnes** ou **lignes)**. L'espace entre chaque ligne ou colonne est communément appelé **gouttière**. -<p><img alt="Schéma du quadrillage" src="grille.png"></p> + -<h2 id="Création_dune_trame_CSS">Création d'une trame CSS</h2> +## Création d'une trame CSS -<p>Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet.</p> +Après avoir décidé le maillage voulu pour votre design, vous pouvez utiliser « CSS Grid Layout » pour créer une trame avec la CSS et y placer des éléments. Nous examinerons d'abord les caractéristiques de base de « Grid Layout » (disposition en quadrillage), puis nous explorerons comment créer un système de trame simple pour le projet. -<h3 id="Définition_dune_trame">Définition d'une trame</h3> +### Définition d'une trame -<p>Pour débuter, téléchargez et ouvrez <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">le fichier de départ</a> dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage.</p> +Pour débuter, téléchargez et ouvrez [le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html) dans l'éditeur de texte et dans le navigateur. Vous y verrez un exemple constitué d'un conteneur avec quelques enfants. Par défaut, ils sont présentés suivant le cours normal : les boîtes s'affichent donc accolées les unes au dessous des autres. Nous travaillerons avec ce fichier dans la première partie de la leçon ; nous y introduirons des changements et observerons les modifications induites dans le comportement du maillage. -<p>Pour définir un tramage, on affecte la valeur <code>grid</code> à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier :</p> +Pour définir un tramage, on affecte la valeur `grid` à la propriété {{cssxref("display")}}. De la même manière qu'avec Flexbox, nous basculons ainsi en « Grid Layout » (disposition en quadrillage) ; tous les enfants directs du conteneur deviennent des éléments de la maille. Ajoutez ceci à la CSS du fichier : -<pre class="brush: css">.container { +```css +.container { display: grid; -}</pre> +} +``` -<p>Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer <code>display: grid</code> fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal.</p> +Contrairement au cas de Flexbox, il n'y a sur le champ aucune différence pour les éléments. Déclarer `display: grid` fournit une chaîne à un seul fil et, donc, les éléments continuent à s'afficher juxtaposés comme dans un cours normal. -<p>Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne.</p> +Pour voir quelque chose qui ressemble plus à un quadrillage, nous devons ajouter quelques fils de chaîne à la trame. Mettons trois colonnes de 200 pixels — vous pouvez utiliser n'importe quelle unité de taille ou bien un pourcentage pour créer ces rangées en colonne. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -}</pre> +} +``` -<p>Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé.</p> +Ajoutons cette déclaration dans nos règles CSS, puis actualisons la page : nous voyons que les éléments ont été arrangés et placés chacun dans une cellule du quadrillage ainsi créé. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` + +```css +.container { display: grid; grid-template-columns: 200px 200px 200px; -} </pre> +} +``` -<p>{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }}</p> +{{ EmbedLiveSample('Définition_dune_trame', '100%', 400) }} -<h3 id="Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité « fr »</h3> +### Trames adaptables avec l'unité « fr » -<p>En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame.</p> +En plus de créer des fils de chaîne en unités de longueur ou de pourcentage, nous pouvons utiliser l'unité « fr » pour moduler la taille des lignes et colonnes du quadrillage. Cette unité représente une fraction de l'espace disponible du conteneur de trame. -<p>En changeant la liste des chaînes par la suivante, on crée trois chaînes de <code>1fr</code>.</p> +En changeant la liste des chaînes par la suivante, on crée trois chaînes de `1fr`. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -}</pre> +} +``` -<p>Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité <code>fr</code> ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi :</p> +Vous avez maintenant des chaînes de trame adaptables. L'espace est distribué en proportion de la valeur donnée à l'unité `fr` ; vous pouvez donc affecter des valeurs positives différentes à chaque piste. Par exemple, si vous changez la définition ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; -}</pre> +} +``` -<p>La première chaîne obtient <code>2fr</code> de l'espace disponible et les deux autres <code>1fr</code> ; la première chaîne sera plus large. Il est possible de mélanger des unités <code>fr</code> et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes.</p> +La première chaîne obtient `2fr` de l'espace disponible et les deux autres `1fr` ; la première chaîne sera plus large. Il est possible de mélanger des unités `fr` et des largeurs fixes pour les chaînes — dans ce cas, l'espace nécessaire aux chaînes de largeur fixée est réservé avant la distribution proportionnelle de l'espace restant aux autres chaînes. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -133,43 +156,47 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-template-columns: 2fr 1fr 1fr; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` -<p>{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }}</p> - -<div class="note"> -<p><strong>Note :</strong> L'unité <code>fr</code> distribue l'espace disponible, et non sa <em>totalité</em>. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager.</p> +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` + +{{ EmbedLiveSample('Trames_adaptables_avec_lunité_«_fr_»', '100%', 400) }} -<h3 id="Espaces_entre_pistes">Espaces entre pistes</h3> +> **Note :** L'unité `fr` distribue l'espace disponible, et non sa _totalité_. Donc, si une des pistes contient quelque chose de grande taille, il y aura moins d'espace disponible à partager. -<p>Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup.</p> +### Espaces entre pistes -<pre class="brush: css">.container { +Pour créer des « gouttières » entre chaînes et trames, nous nous servons des propriétés {{cssxref("grid-column-gap")}} et {{cssxref("grid-row-gap")}} pour, respectivement, les espacements entre colonnes et entre lignes ; la propriété {{cssxref("grid-gap")}} définit les deux d'un coup. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; -}</pre> +} +``` -<p>Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité <code>fr</code>.</p> +Ces espacements peuvent être définis avec n'importe quelle unité de longueur ou un pourcentage, mais pas avec l'unité `fr`. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -182,176 +209,189 @@ original_slug: Apprendre/CSS/CSS_layout/Grids grid-gap: 20px; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> - -<pre class="brush: html"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> -</pre> -</div> -</div> -<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> +``` -<div class="note"> -<p><strong>Note :</strong> Les propriétés <em>*gap</em> étaient traditionnellement préfixées par <code>grid-</code>, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code.</p> +```html +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> </div> +``` -<pre class="brush: css">.container { +{{ EmbedLiveSample('Grid_3', '100%', 400) }} + +> **Note :** Les propriétés _\*gap_ étaient traditionnellement préfixées par `grid-`, mais la norme a été modifiée avec l'intention de la rendre utilisable dans les diverses méthodes de mise en page. Actuellement, Edge et Firefox prennent en charge la version non préfixée ; les versions préfixées seront maintenues en tant qu'alias, de sorte qu'elles seront utilisables en toute sécurité pendant un certain temps. En appliquant le principe de précaution, vous pouvez doubler et mettre les deux types de propriétés pour « blinder » votre code. + +```css +.container { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-gap: 20px; gap: 20px; -}</pre> +} +``` -<h3 id="Répétition_des_listes_de_pistes">Répétition des listes de pistes</h3> +### Répétition des listes de pistes -<p>Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi :</p> +Vous pouvez répéter tout ou partie d'une liste de chaînes à l'aide d'une notation adaptée. Modifiez la liste des chaînes ainsi : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; -}</pre> +} +``` -<p>Nous obtenons 3 chaînes de <code>1fr</code> de large, comme précédemment. La première valeur passée à la fonction <code>repeat</code> est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter.</p> +Nous obtenons 3 chaînes de `1fr` de large, comme précédemment. La première valeur passée à la fonction `repeat` est le nombre de répétitions de la liste, définie par le paramètre suivant : celui-ci peut être une ou plusieurs chaînes que vous voulez répéter. -<h3 id="Trame_implicite_et_explicite">Trame implicite et explicite</h3> +### Trame implicite et explicite -<p>Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec <code>grid-template-columns</code> <strong>ou</strong> <code>grid-template-rows</code>. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox.</p> +Nous n'avons jusqu'à présent défini que des chaînes en colonnes, mais on peut aussi les créer en lignes pour recevoir les contenus. C'est un exemple de trame explicite (la chaîne) vs. implicite (la trame). La chaîne explicite est celle créée avec `grid-template-columns` **ou** `grid-template-rows`. La trame implicite est créée lorsque l'on met du contenu dans ce quadrillage — comme dans les rangées de nos exemples. La cahîne explicite et la trame implicite sont analogues aux axes principal et croisé de Flexbox. -<p>Par défaut, les rangées de la trame implicite sont <code>auto</code> dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété <code>grid-auto-rows</code> avec une valeur de <code>100px</code> dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut.</p> +Par défaut, les rangées de la trame implicite sont `auto` dimensionnées, ce qui signifie qu'elles sont, en général, suffisamment grandes pour accueillir le contenu. Si vous voulez que les rangées de trame créées par le navigateur aient une taille donnée, utilisez les propriétés {{cssxref("grid-auto-rows")}} et {{cssxref("grid-auto-columns")}}. Si vous ajoutez la propriété `grid-auto-rows` avec une valeur de `100px` dans la CSS, vous verrez que le rangées créées ont maintenant 100 pixels de haut. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); -} </pre> - -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> - </pre> - -<pre class="brush: css">.container { +} +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> + +``` + +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }}</p> +{{ EmbedLiveSample('Trame_implicite_et_explicite', '100%', 400) }} -<h3 id="La_fonction_minmax">La fonction minmax()</h3> +### La fonction minmax() -<p>Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'<em>au moins</em> 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension.</p> +Les rangées de trame de 100 pixels de haut ne seront pas très utiles si nous y plaçons des contenus de plus de 100 pixels de haut : il y aurait alors débordement. Il est préférable d'avoir des pistes d'_au moins_ 100 pixels de haut, mais susceptibles de s'agrandir si le contenu déposé le nécessite. C'est un constat classique à propos du web : vous ne savez jamais vraiment quelle sera la hauteur d'un élément ; du contenu supplémentaire ou des tailles de police plus grandes peuvent amener des problèmes avec des designs en pixels visant la perfection dans toute dimension. -<p>La fonction <code>minmax</code> nous permet de fixer une taille maximale et minimale pour une trame, par exemple <code>minmax(100px, auto)</code>. La taille minimale est de 100 px, mais la maximale est <code>auto</code> — elle s'agrandira selon le contenu. Changeons <code>grid-auto-rows</code> en utilisant une valeur <code>minmax</code> :</p> +La fonction `minmax` nous permet de fixer une taille maximale et minimale pour une trame, par exemple `minmax(100px, auto)`. La taille minimale est de 100 px, mais la maximale est `auto` — elle s'agrandira selon le contenu. Changeons `grid-auto-rows` en utilisant une valeur `minmax` : -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée.</p> +Si vous ajoutez du contenu supplémentaire, vous verrez que la trame grandit pour permettre l'incorporation. Notez que l'agrandissement est général pour toute la rangée. -<h3 id="Autant_de_chaînes_que_possibles">Autant de chaînes que possibles</h3> +### Autant de chaînes que possibles -<p>Il est possible de combiner nos savoirs à propos des listes de pistes, la notation <code>repeat</code> et <code>minmax()</code> pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de <code>grid-template-columns</code> égale à <code>repeat()</code> avec le mot-clé <code>auto-fill</code> comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez <code>minmax()</code> avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum.</p> +Il est possible de combiner nos savoirs à propos des listes de pistes, la notation `repeat` et `minmax()` pour créer un modèle utile. Parfois, demander à ce que la génèration automatique crée autant de chaînes que possibles dans un conteneur nous faciliterait la tâche. Pour réaliser cela, définissez la valeur de `grid-template-columns` égale à `repeat()` avec le mot-clé `auto-fill` comme premier paramètre au lieu d'un nombre. Pour le second paramètre de la fonction, utilisez `minmax()` avec pour minimum la taille souhaitée pour la piste et 1fr pour maximum. -<p>Essayez ceci dans le fichier avec la CSS ci-dessous :</p> +Essayez ceci dans le fichier avec la CSS ci-dessous : -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } -.container > div { +.container > div { border-radius: 5px; padding: 10px; background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); } - </pre> -<pre class="brush: html hidden"><div class="container"> - <div>Un</div> - <div>Deux</div> - <div>Trois</div> - <div>Quatre</div> - <div>Cinq</div> - <div>Six</div> - <div>Sept</div> -</div> </pre> +``` + +```html hidden +<div class="container"> + <div>Un</div> + <div>Deux</div> + <div>Trois</div> + <div>Quatre</div> + <div>Cinq</div> + <div>Six</div> + <div>Sept</div> +</div> +``` -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(100px, auto); grid-gap: 20px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }}</p> +{{ EmbedLiveSample('Autant_de_chaînes_que_possibles', '100%', 400) }} -<p>Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées.</p> +Il a été créé autant de chaînes de 200 pixels qu'il y a de place dans le conteneur, puis l'espace restant a été partagé entre toutes les colonnes — le maximum de 1fr répartit, comme nous le savons déjà, l'espace de façon égale entre rangées. -<h2 id="Placement_sur_les_lignes">Placement sur les lignes</h2> +## Placement sur les lignes -<p>Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche.</p> +Nous passons maintenant de la création du quadrillage à la mise en place des choses sur dans celui-ci. Le quadrillage a toujours des fils de chaîne, ils commencent à 1 et sont en relation avec le Writing Mode (mode d'écriture) du document. Ainsi, en anglais, la rangée de la chaîne 1 sera une colonne et se trouvera à gauche du quadrillage et la rangée de la trame sera une ligne 1 en haut. En arabe, la rangée de la chaîne 1 se situera du côté droit, car l'arabe s'écrit de droite à gauche. -<p>Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes :</p> +Nous pouvons placer les choses dans ces rangées en indiquant les rangées de début et de fin. Pour ce faire, nous utilisons les propriétés suivantes : -<ul> - <li>{{cssxref("grid-column-start")}}</li> - <li>{{cssxref("grid-column-end")}}</li> - <li>{{cssxref("grid-row-start")}}</li> - <li>{{cssxref("grid-row-end")}}</li> -</ul> +- {{cssxref("grid-column-start")}} +- {{cssxref("grid-column-end")}} +- {{cssxref("grid-row-start")}} +- {{cssxref("grid-row-end")}} -<p>Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés :</p> +Ces propriétés acceptent toutes un numéro de ligne comme valeur. Vous pouvez également utiliser les formes abrégées de ces propriétés : -<ul> - <li>{{cssxref("grid-column")}}</li> - <li>{{cssxref("grid-row")}}</li> -</ul> +- {{cssxref("grid-column")}} +- {{cssxref("grid-row")}} -<p>Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un <code>/</code> — une barre inclinée.</p> +Cela vous permet de définir les rangées de départ et de fin simultanément, en les séparant avec un `/` — une barre inclinée. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">Pour débuter, téléchargez ce fichier</a>. Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé.</p> +[Pour débuter, téléchargez ce fichier](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html). Il comporte déjà une définition de quadrillage et un seul article. Constatez que le placement automatique met les éléments dans chaque cellule du quadrillage créé. -<p>À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS :</p> +À la place, nous allons mettre la totalité des éléments du site sur le quadrillage en utilisant les rangées de la chaîne (les colonnes dans notre cas). Ajoutez les règles ci-après à la fin de la CSS : -<pre class="brush: css">header { +```css +header { grid-column: 1 / 3; grid-row: 1; } @@ -369,9 +409,11 @@ aside { footer { grid-column: 1 / 3; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden"> body { +```css hidden + body { width: 90%; max-width: 900px; margin: 2em auto; @@ -414,36 +456,37 @@ footer { aside { border-right: 1px solid #999; } -</pre> - -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` + +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p>{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }}</p> +{{ EmbedLiveSample('Placement_sur_les_lignes', '100%', 400) }} -<div class="note"> -<p><strong>Note :</strong> vous pouvez aussi utiliser la valeur <code>-1</code> pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur <code>-1</code> ne ciblera pas le rang de fin de trame implicite.</p> -</div> +> **Note :** vous pouvez aussi utiliser la valeur `-1` pour cibler la dernière rangée de la chaîne et compter vers l'intérieur à partir de la fin en utilisant des valeurs négatives. Cependant, cela ne fonctionne que pour la chaîne explicite. La valeur `-1` ne ciblera pas le rang de fin de trame implicite. -<h2 id="Placer_avec_«_grid-template-areas_»">Placer avec « grid-template-areas »</h2> +## Placer avec « grid-template-areas » -<p>Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design.</p> +Une autre façon de placer des éléments dans le quadrillage consiste à utiliser la propriété {{cssxref("grid-template-areas")}} en donnant un nom au divers éléments du design. -<p>Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS.</p> +Supprimez le placement sur les lignes du dernier exemple (ou bien rechargez le fichier pour avoir un nouveau point de départ) et ajoutez ceci à la CSS. -<pre class="brush: css">.container { +```css +.container { display: grid; grid-template-areas: "header header" @@ -467,12 +510,13 @@ aside { footer { grid-area: footer; -}</pre> - -<p>Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne !</p> +} +``` +Actualisez la page et vous verrez que vos éléments ont été placés comme la fois précédente sans que nous ayons besoin d'utiliser un quelconque numéro de ligne ! -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -516,44 +560,46 @@ aside { footer { grid-area: footer; } - </pre> -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }}</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` + +{{ EmbedLiveSample('Placer_avec_«_grid-template-areas_»', '100%', 400) }} -<p>Les règles pour <code>grid-template-areas</code> sont les suivantes :</p> +Les règles pour `grid-template-areas` sont les suivantes : -<ul> - <li>toute cellule du quadrillage doit être remplie.</li> - <li>pour couvrir deux cellules, répétez le nom.</li> - <li>pour laisser une cellule vide, utilisez un point <code>.</code> .</li> - <li>les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple.</li> - <li>les zones ne peuvent pas être répétées dans des emplacements différents.</li> -</ul> +- toute cellule du quadrillage doit être remplie. +- pour couvrir deux cellules, répétez le nom. +- pour laisser une cellule vide, utilisez un point `.` . +- les zones doivent être rectangulaires — vous ne pouvez pas avoir une zone en L par exemple. +- les zones ne peuvent pas être répétées dans des emplacements différents. -<p>Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS.</p> +Vous pouvez jouer avec la disposition, en modifiant le pied de page pour qu'il ne soit placé que sous le contenu et que la barre latérale soit sur toute la hauteur de la page, par exemple. C'est une très belle façon de décrire une disposition, car elle est évidente à la seule lecture de la CSS. -<h2 id="«_CSS_Grid_»_une_structure_de_quadrillage">« CSS Grid » : une structure de quadrillage</h2> +## « CSS Grid » : une structure de quadrillage -<p>Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications.</p> +Les « structures » de quadrillage se fondent sur une série de 12 à 16 rangées ; avec « CSS Grid », vous n'avez pas besoin d'outils tierce partie pour créer la structure — elle est déjà dans les spécifications. -<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">Chargez le fichier de départ</a>. Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes.</p> +[Chargez le fichier de départ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html). Il contient un conteneur à 12 colonnes et le même balisage que celui utilisé dans les deux exemples précédents. Nous pouvons maintenant utiliser le placement sur les lignes pour mettre le contenu sur le quadrillage à 12 colonnes. -<pre class="brush: css">header { +```css +header { grid-column: 1 / 13; grid-row: 1; } @@ -571,9 +617,11 @@ aside { footer { grid-column: 1 / 13; grid-row: 3; -}</pre> +} +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -617,55 +665,52 @@ footer { aside { border-right: 1px solid #999; } - </pre> - -<pre class="brush: html hidden"><div class="container"> - <header>Voici mon joli blog</header> - <article> - <h1>Mon article</h1> - <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - </article> - <aside> - <h2>Autres sujets</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> - </aside> - <footer>Contactez moi@monsite.com</footer> -</div> </pre> +``` -<p>{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }}</p> +```html hidden +<div class="container"> + <header>Voici mon joli blog</header> + <article> + <h1>Mon article</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p>Si vous utilisez <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Inspector</a> (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne.</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Autres sujets</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contactez moi@monsite.com</footer> +</div> +``` -<p><img alt="A 12 column grid overlaid on our design." src="trames.png"></p> +{{ EmbedLiveSample('«_CSS_Grid_»_une_structure_de_quadrillage', '100%', 400) }} -<h2 id="Résumé">Résumé</h2> +Si vous utilisez [Firefox Grid Inspector](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) (Inspecteur > Mise en page > Grilles) pour superposer les lignes du quadrillage sur le design, vous verrez comment le quadrillage à 12 colonnes fonctionne. -<p>Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous.</p> + -<h2 id="Voir_également">Voir également</h2> +## Résumé -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS Grid guides</a></li> - <li><a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS Grid Inspector: Examine grid layouts</a></li> -</ul> +Dans cet aperçu, nous avons parcouru les principales caractéristiques de la mise en page avec les fonctionnalités des « CSS Grid Layout ». Vous devriez pouvoir commencer à l'utiliser dans vos mises en page. Pour en savoir plus sur les spécifications, lisez nos guides sur la disposition en trame ; leurs intitulés sont rappelés ci-dessous. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> +## Voir également +- [CSS Grid guides](/fr/docs/Web/CSS/CSS_Grid_Layout#Guides) +- [CSS Grid Inspector: Examine grid layouts](/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts) +{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md index b6b10499ce..5a8db10ccf 100644 --- a/files/fr/learn/css/css_layout/index.md +++ b/files/fr/learn/css/css_layout/index.md @@ -20,67 +20,58 @@ tags: translation_of: Learn/CSS/CSS_layout original_slug: Apprendre/CSS/CSS_layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître.</p> +À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître. -<div class="callout"> - <p>Vous cherchez à devenir développeuse ou développeur web front-end ?</p> - <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p> - <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a> - </p> -</div> +> **Remarque :** +> +> Vous cherchez à devenir développeuse ou développeur web front-end ? +> +> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. +> +> [Commencer](/fr/docs/Learn/Front-end_web_developer) -<h2 id="prerequisites">Prérequis</h2> +## Prérequis -<p>Avant de commencer ce module, vous devriez déjà :</p> +Avant de commencer ce module, vous devriez déjà : -<ol> - <li>Connaître les bases du HTML, telles qu'exposées dans le module <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML.</a></li> - <li>Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans <a href="/fr/docs/Learn/CSS/First_steps">Introduction à CSS</a>.</li> - <li>Savoir <a href="/fr/docs/Learn/CSS/Building_blocks">mettre en forme les boîtes.</a></li> -</ol> +1. Connaître les bases du HTML, telles qu'exposées dans le module [Introduction au HTML.](/fr/docs/Learn/HTML/Introduction_to_HTML) +2. Être à l'aise avec les fondamentaux du CSS, telles qu'exposés dans [Introduction à CSS](/fr/docs/Learn/CSS/First_steps). +3. Savoir [mettre en forme les boîtes.](/fr/docs/Learn/CSS/Building_blocks) -<div class="notecard note"> - <p><strong>Note :</strong> Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a></p> -</div> +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou autre périphérique sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez essayer (la plupart) les exemples de code dans des sites de développement en ligne tels que [JSBin](http://jsbin.com/) ou [Glitch](https://glitch.com/) -<h2 id="guides">Guides</h2> +## Guides -<p>Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web.</p> +Ces articles fourniront des instructions sur les outils et techniques de mise en page fondamentaux disponibles dans CSS. À la fin des leçons, un exercice vous permettra de vérifier la compréhension des méthodes de mise en page en créant votre propre page web. -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></dt> - <dd>Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de <a href="/fr/docs/Web/CSS/display"><code>display</code></a> — et présente certains des concepts que nous couvrirons dans de ce module.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal des éléments</a></dt> - <dd>Les éléments se placent d'eux‑même sur les pages web selon un <em>flux normal</em> sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> - <dd><a href="/fr/docs/Glossary/Flexbox">Flexbox</a> est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles</a></dt> - <dd>Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Le flottement</a></dt> - <dd>À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété <a href="/fr/docs/Web/CSS/float"><code>float</code></a> fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></dt> - <dd>Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS <a href="/fr/docs/Web/CSS/position"><code>position</code></a> et comment les utiliser.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition en colonnes</a></dt> - <dd>Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design"><i>Responsive design</i></a></dt> - <dd>Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « <i>responsive design</i> » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide pour débuter avec les <i>media queries</i></a></dt> - <dd>Les <i>media queries</i> (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les <i>media queries</i> puis appliquerons cela à un exemple pour le rendre réactif.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page historiques</a></dt> - <dd>Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique.</dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></dt> - <dd> - <p>Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens.</p> - </dd> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension des fondamentaux de la mise en page</a></dt> - <dd>Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web.</dd> -</dl> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) + - : Cet article récapitule quelques-unes des fonctionnalités de mise en page CSS que nous avons déjà abordées dans les modules précédents — telles que les diverses valeurs de [`display`](/fr/docs/Web/CSS/display) — et présente certains des concepts que nous couvrirons dans de ce module. +- [Flux normal des éléments](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) + - : Les éléments se placent d'eux‑même sur les pages web selon un _flux normal_ sauf à ce que nous modifions la disposition avec CSS. Cet article explique les fondamentaux du flux normal pour permettre de comprendre comment le modifier. +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) + - : [Flexbox](/fr/docs/Glossary/Flexbox) est une méthode de mise en page unidimensionnelle pour disposer les éléments en lignes ou en colonnes. Les éléments s'adaptent pour remplir de l'espace supplémentaire et se rétractent pour s'insérer dans des espaces plus petits. Cet article explique les bases de cet outil CSS. +- [Grilles](/fr/docs/Learn/CSS/CSS_layout/Grids) + - : Les grilles CSS permettent de composer un document avec une mise en page bidimensionnelle. Elles permettent de disposer le contenu en lignes et en colonnes, et possèdent de nombreuses fonctionnalités qui simplifient la construction de mises en page complexes. Cet article vous fournira l'ensemble des informations pour commencer avec la mise en page via les grilles CSS. +- [Le flottement](/fr/docs/Learn/CSS/CSS_layout/Floats) + - : À l'origine destinée aux images flottantes à l'intérieur de blocs de texte, la propriété [`float`](/fr/docs/Web/CSS/float) fut pendant un moment l'un des outils les plus utilisés pour créer des mises en page sur plusieurs colonnes sur des pages web. Avec l'avènement de flexbox et des grilles, cette propriété retrouve son usage initial. Nous verrons ce qu'il en est dans cet article. +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) + - : Le positionnement vous permet d'extraire des éléments du flux de mise en page normal du document et de les faire se comporter différemment, par exemple en se mettant l'un sur l'autre ou en les positionnant toujours au même endroit dans la fenêtre du navigateur. Cet article indique les différentes valeurs pour la propriété CSS [`position`](/fr/docs/Web/CSS/position) et comment les utiliser. +- [Disposition en colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) + - : Ce type de disposition permet d'organiser le contenu en colonnes, comme dans un journal papier. Cet article explique comment utiliser cette fonctionnalité. +- [_Responsive design_](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) + - : Avec l'apparition d'écrans de tailles diverses pour naviguer sur le Web, le concept de « _responsive design_ » (ou conception de sites web réactifs en français) est apparu. Il s'agit d'un ensemble de pratiques qui permettent d'adapter la disposition et l'apparence du contenu web pour s'afficher au mieux sur les différents écrans (quelle que soit leur largeur ou leur résolution par exemple). Cette méthode a changé la façon de concevoir des sites et applications web pour les différents appareils. Dans cet article, nous verrons les techniques principales associées et ce qu'il faut connaître pour maîtriser cette méthode. +- [Guide pour débuter avec les _media queries_](/fr/docs/Learn/CSS/CSS_layout/Media_queries) + - : Les _media queries_ (ou requêtes média en français) permettent d'appliquer des règles CSS en fonction de conditions sur l'environnement ou l'appareil. On peut ainsi choisir de déclencher une règle lorsque la zone d'affichage est plus large que 480 pixels. Les requêtes média sont une brique fondamentale pour la conception de sites web réactifs car elles permettent de créer différentes dispositions en fonction de la taille de la zone d'affichage. Elles permettent également de détecter d'autres notions relatives à l'environnement de navigation comme l'utilisation d'un écran tactile ou d'une souris. Dans cet article, nous verrons la syntaxe utilisée pour les _media queries_ puis appliquerons cela à un exemple pour le rendre réactif. +- [Méthodes de mise en page historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) + - : Les systèmes de grilles sont une fonctionnalité courramment utilisée pour les mises en page avec CSS. Avant l'implémentation des grilles CSS, il fallait utiliser le flottement ou d'autres techniques de disposition. Dans cet article, nous exposerons comment ces méthodes plus anciennes fonctionnent afin que vous compreniez comment elles étaient utilisées si vous travaillez sur un projet historique. +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) + - : Dans ce module, nous vous recommandons d'utiliser flexbox et les grilles CSS comme méthodes de mise en page pour vos pages et applications. Cependant, il y aura des visiteurs de votre site utilisant des navigateurs plus anciens ou des navigateurs ne prenant pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web — au fur et à mesure du développement de nouvelles fonctionnalités, les implémentations des navigateurs pourront varier. Cet article explique comment utiliser les techniques modernes du Web sans exclure les personnes utilisant des navigateurs plus anciens. +- [Compréhension des fondamentaux de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) + - : Une évaluation pour tester vos connaissances des différentes méthodes de mise en page web. -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<dl> - <dt><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a></dt> - <dd>Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement.</dd> -</dl> +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples) + - : Cet article montre comment construire quelques exemples réalistes pour illustrer les possibilités du positionnement. diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md index c295efa170..9edb2531f8 100644 --- a/files/fr/learn/css/css_layout/introduction/index.md +++ b/files/fr/learn/css/css_layout/introduction/index.md @@ -17,207 +17,224 @@ tags: translation_of: Learn/CSS/CSS_layout/Introduction original_slug: Apprendre/CSS/CSS_layout/Introduction --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}} -<div>{{NextMenu("Apprendre/CSS/CSS_layout/Normal_Flow", "Apprendre/CSS/CSS_layout")}}</div> - -<p>Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module.</p> +Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de {{cssxref("display")}} — et en introduit de nouveaux que nous aborderons dans ce module. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont la CSS fonctionne (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont la CSS fonctionne (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Vous donner un aperçu des techniques de mise en page des CSS. Chaque + technique peut être apprise plus précisément dans des tutoriels dédiés. + </td> + </tr> + </tbody> </table> -<p>Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont:</p> +Les techniques de mise en page des CSS nous permettent de prendre des éléments contenus dans une page web et d'en contrôler le placement par rapport à leur position par défaut dans le flot d'une mise en page courante, aux autres éléments environnants, à leur conteneur parents ou à la fenêtre principale d'affichage. Les techniques de mises en page abordées en détail dans ce module sont: -<ul> - <li>le cours normal</li> - <li>la propriété {{cssxref("display")}}</li> - <li>Flexbox</li> - <li>les trames</li> - <li>les flotteurs</li> - <li>le positionnement</li> - <li>la mise en page des tableaux</li> - <li>la disposition sur plusieurs colonnes</li> -</ul> +- le cours normal +- la propriété {{cssxref("display")}} +- Flexbox +- les trames +- les flotteurs +- le positionnement +- la mise en page des tableaux +- la disposition sur plusieurs colonnes -<p>Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation.</p> +Chaque technique à ses usages, ses avantages et ses inconvénients. Aucune technique n'a été conçue pour être utilisée isolément. En comprenant ce pourquoi chaque méthode a été conçue, vous saurez utiliser le meilleur outil de mise en page dans chaque situation. -<h2 id="Cours_normal">Cours normal</h2> +## Cours normal -<p>Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML:</p> +Le cours normal est la manière dont le navigateur présente les pages HTML par défaut quand vous ne faites rien pour contrôler la mise en page. Regardons rapidement un exemple HTML: -<pre class="brush: html"><p>J'aime mon chat.</p> +```html +<p>J'aime mon chat.</p> -<ul> - <li>Acheter des croquettes</li> - <li>Exercice</li> - <li>Haut les cœurs, ami</li> -</ul> +<ul> + <li>Acheter des croquettes</li> + <li>Exercice</li> + <li>Haut les cœurs, ami</li> +</ul> -<p>La fin !</p></pre> +<p>La fin !</p> +``` -<p>Par défaut, le navigateur affichera ce code ainsi :</p> +Par défaut, le navigateur affichera ce code ainsi : -<p>{{ EmbedLiveSample('Cours_normal', '100%', 200) }}</p> +{{ EmbedLiveSample('Cours_normal', '100%', 200) }} -<p>Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe.</p> +Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe. -<p>Les éléments disposés en empilement sont désignés comme étant des éléments <em>blocs</em>, par opposition aux éléments <em>en ligne</em> qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe.</p> +Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe. -<div class="note"> -<p><strong>Note :</strong> « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés.</p> -</div> +> **Note :** « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés. -<p>Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition.</p> +Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition. -<p>Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes :</p> +Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes : -<ul> - <li><strong>La propriété {{cssxref("display")}}</strong> — les valeurs standards comme <code>block</code>, <code>inline</code> ou <code>inline-block</code> peuvent changer la manière dont l'élément se comporte dans le cours normal (voir <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte">Types de boîtes</a> pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de <code>display</code>, par exemple les <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a> ou <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> - <li><strong>Flotteurs</strong> — appliquer à {{cssxref("float")}} une valeur comme <code>left</code> peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines.</li> - <li><strong>La propriété {{cssxref("position")}}</strong> — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. <code>static</code> est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur.</li> - <li><strong>Mise en page de tableaux</strong> — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant <code>display: table</code> et les propriétés associées.</li> - <li><strong>Mise en page sur plusieurs colonnes</strong> — Les propriétés <a href="/fr/docs/Web/CSS/CSS_Columns">Multi-column</a> peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal.</li> -</ul> +- **La propriété {{cssxref("display")}}** — les valeurs standards comme `block`, `inline` ou `inline-block` peuvent changer la manière dont l'élément se comporte dans le cours normal (voir [Types de boîtes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de `display`, par exemple les [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) ou [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines. +- **La propriété {{cssxref("position")}}** — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. `static` est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur. +- **Mise en page de tableaux** — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant `display: table` et les propriétés associées. +- **Mise en page sur plusieurs colonnes** — Les propriétés [Multi-column](/fr/docs/Web/CSS/CSS_Columns) peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal. -<h2 id="La_propriété_«_display_»">La propriété « display »</h2> +## La propriété « display » -<p>Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété <code>display</code>. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété <code>display</code>. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est <code>display: block</code>. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est <code>display: inline</code> par défaut.</p> +Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété `display`. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété `display`. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est `display: block`. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est `display: inline` par défaut. -<p>Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est <code>display: block</code> par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de <code>display</code> pour <code>inline</code>, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier.</p> +Vous pouvez modifier le comportement d'affichage par défaut. Par exemple, l'élément {{htmlelement("li")}} est `display: block` par défaut, ce qui signifie que les éléments de la liste s'afficheront l'un sous l'autre dans un document en anglais. Si nous changeons la valeur de `display` pour `inline`, ils s'afficheront alors les uns à côté des autres, comme les mots dans une phrase. Le fait que vous puissiez changer la valeur d'affichage de n'importe quel élément signifie que vous pouvez choisir des éléments HTML pour leur signification sémantique, sans vous soucier de leur apparence. Leur apparence est quelque chose que vous pouvez modifier. -<p>En plus de pouvoir changer la présentation par défaut en faisant passer un élément de <code>block</code> à <code>inline</code> et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de <code>display</code>. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont <code>display: flex</code> et <code>display: grid</code>.</p> +En plus de pouvoir changer la présentation par défaut en faisant passer un élément de `block` à `inline` et vice versa, il existe des méthodes de mise en page accrues commençant avec une valeur particulière de `display`. Cependant, si vous les utilisez, vous devrez généralement invoquer des propriétés supplémentaires. Les deux valeurs les plus importantes pour notre discussion sur la mise en page sont `display: flex` et `display: grid`. -<h2 id="Flexbox">Flexbox</h2> +## Flexbox -<p>Flexbox est l'abréviation pour <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a> Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser <code>flexbox</code>, appliquez <code>display: flex</code> à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments <code>flex</code>. Voyons cela avec un simple exemple.</p> +Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple. -<p>Le balisage HTML ci-dessous crée un élément conteneur de la classe <code>wrapper</code>, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française.</p> +Le balisage HTML ci-dessous crée un élément conteneur de la classe `wrapper`, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française. -<h3>Utiliser display: flex</h3> +### Utiliser display: flex -<p>Mais nous ajoutons <code>display: flex</code> sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des <em>éléments flex</em> et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est <code>row</code>. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est <code>stretch</code>. Ce qui signifie que les éléments se casent dans la hauteur du conteneur <code>flex</code> défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace.</p> +Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace. -<pre class="brush: css hidden">* {box-sizing: border-box;} +```css hidden +* {box-sizing: border-box;} -.wrapper > div { +.wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Utiliser_display_flex', '300', '200') }} -<h3>Définir la propriété flex</h3> +### Définir la propriété flex -<p>En plus des propriétés ci-dessus applicables au conteneur <code>flex</code>, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible.</p> +En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible. -<p>À titre d'exemple, nous pouvons donner la valeur <code>1</code> à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit.</p> +À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: flex; } -.wrapper > div { +.wrapper > div { flex: 1; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> +</div> +``` -<p>{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }}</p> +{{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }} -<div class="note"> -<p><strong>Note :</strong> Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> -</div> +> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). -<h2 id="Disposition_en_trame">Disposition en trame</h2> +## Disposition en trame -<p>Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes.</p> +Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes. -<p>À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à <code>display</code> — <code>display: grid</code>. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre <code>display: grid</code>, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de <code>1fr</code> chacune et deux lignes de <code>100px</code>. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées.</p> +À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées. -<h3>Utiliser display: grid</h3> +### Utiliser display: grid -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; } -</pre> - -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> - <div class="box4">Quatre</div> - <div class="box5">Cinq</div> - <div class="box6">Six</div> -</div> -</pre> +``` + +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> + <div class="box4">Quatre</div> + <div class="box5">Cinq</div> + <div class="box6">Six</div> +</div> +``` -<p>{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }}</p> +{{ EmbedLiveSample('Utiliser_display_grid', '300', '330') }} -<h3>Placer des objets sur la grille</h3> +### Placer des objets sur la grille -<p>Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames.</p> +Une fois la trame créée, vous pouvez y placer explicitement les éléments au lieu de compter sur le placement automatique. Dans ce second exemple ci‑dessous nous avons défini la même trame, mais cette fois avec trois éléments enfants. Nous avons défini début et fin de ligne pour chaque élément avec les propriétés {{cssxref("grid-column")}} et {{cssxref("grid-row")}}. Les éléments occupent alors plusieurs trames. -<pre class="brush: css hidden"> * {box-sizing: border-box;} +```css hidden + * {box-sizing: border-box;} - .wrapper > div { + .wrapper > div { border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } - </pre> -<pre class="brush: css">.wrapper { +``` + +```css +.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; @@ -238,40 +255,37 @@ original_slug: Apprendre/CSS/CSS_layout/Introduction grid-row: 2; grid-column: 3; } -</pre> +``` -<pre class="brush: html"><div class="wrapper"> - <div class="box1">Un</div> - <div class="box2">Deux</div> - <div class="box3">Trois</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="box1">Un</div> + <div class="box2">Deux</div> + <div class="box3">Trois</div> </div> +``` -<p>{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }}</p> +{{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }} -<div class="note"> -<p><strong>Note :</strong> Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Disposition tramée</a>.</p> -</div> +> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids). -<p>La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident.</p> +La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident. -<h2 id="Flotteurs_boîtes_flottantes">Flotteurs (boîtes flottantes)</h2> +## Flotteurs (boîtes flottantes) -<p>Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu.</p> +Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu. -<p>La propriété {{cssxref("float")}} a quatre valeurs possibles :</p> +La propriété {{cssxref("float")}} a quatre valeurs possibles : -<ul> - <li><code>left</code> — fait flotter l'élément sur la gauche.</li> - <li><code>right</code> — fait flotter l'élément sur la droite.</li> - <li><code>none</code> — indique que rien ne flotte. C'est la valeur par défaut.</li> - <li><code>inherit</code> — indique que la valeur de la propriété <code>float</code> sera héritée de celle de l'élément parent.</li> -</ul> +- `left` — fait flotter l'élément sur la gauche. +- `right` — fait flotter l'élément sur la droite. +- `none` — indique que rien ne flotte. C'est la valeur par défaut. +- `inherit` — indique que la valeur de la propriété `float` sera héritée de celle de l'élément parent. -<p>Dans l'exemple ci‑dessous nous faisons flotter un élément <code><div></code> à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne.</p> +Dans l'exemple ci‑dessous nous faisons flotter un élément `<div>` à gauche avec un valeur pour la propriété {{cssxref("margin")}} sur la droite pour éloigner le texte de l'élément. Cela donne un effet de texte enveloppant cette boîte. C'est l'essentiel de ce qu'il faut savoir à propos des boîtes flottantes dans le design du web moderne. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -288,60 +302,59 @@ p { padding: 10px; border-radius: 5px; } -</pre> - -<pre class="brush: html"><h1>Exemple simple de boîte flottante</h1> +``` -<div class="box">Boîte flottante</div> +```html +<h1>Exemple simple de boîte flottante</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<div class="box">Boîte flottante</div> -</pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css"> +```css .box { float: left; width: 150px; height: 150px; margin-right: 30px; } -</pre> +``` -<p>{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }}</p> +{{ EmbedLiveSample('Flotteurs_boîtes_flottantes', '100%', 600) }} -<div class="note"> -<p><strong>Note :</strong> Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">float et clear</a>. Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mise en page traditionnelles</a>.</p> -</div> +> **Note :** Les boîtes flottantes sont précisément expliquées dans la leçon à propos des propriétés [float et clear](/fr/docs/Learn/CSS/CSS_layout/Floats). Précédant les techniques telles que Flexbox et les trames, les boîtes flottantes étaient utilisées comme méthode pour créer des dispositions en colonnes. Vous rencontrerez peut‑être encore ce méthodes sur le Web ; nous les expliciterons dans la leçon sur les [Méthodes de mise en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). -<h2 id="Techniques_de_positionnement">Techniques de positionnement</h2> +## Techniques de positionnement -<p>Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page.</p> +Le positionnement permet de déplacer un élément de l'endroit où il serait placé dans le cours normal vers un autre endroit. Le positionnement n'est pas une méthode pour créer des mises en page principales, il s'agit plutôt de gérer et d'affiner la position d'éléments donnés sur la page. -<p>Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal.</p> +Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal. -<p>Il y a cinq types de positionnement à connaître :</p> +Il y a cinq types de positionnement à connaître : -<ul> - <li><strong>positionnement statique</strong> : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ».</li> - <li><strong>positionnement relatif : </strong>modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page.</li> - <li><strong>positionnement absolu</strong> : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément <code><html></code> (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle.</li> - <li><strong>positionnement fixe : </strong>tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page.</li> - <li><strong>positionnement collant : </strong>nouvelle méthode de positionnement qui fait qu'un élément se comporte comme <code>position: static</code> jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était <code>position: fixed</code>.</li> -</ul> +- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ». +- **positionnement relatif :** modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page. +- **positionnement absolu** : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément `<html>` (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle. +- **positionnement fixe :** tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page. +- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`. -<h3 id="Exemple_simple_de_positionnement">Exemple simple de positionnement</h3> +### Exemple simple de positionnement -<p>Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci:</p> +Afin de se familiariser avec ces techniques de mises en page, nous allons vous montrer quelques exemples. Nos exemples utiliserons tous le même code HTML, qui est celui-ci: -<pre class="brush: html"><h1>Positionnement</h1> +```html +<h1>Positionnement</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Je suis un élément de niveau bloc de base.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Je suis un élément de niveau bloc de base.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<p>Ce code HTML sera stylisé par défaut en utilisant la CSS suivante :</p> +Ce code HTML sera stylisé par défaut en utilisant la CSS suivante : -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -353,33 +366,38 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<p>Le rendu est le suivant:</p> +Le rendu est le suivant: -<p>{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }}</p> +{{ EmbedLiveSample('Exemple_simple_de_positionnement', '100%', 300) }} -<h3 id="Positionnement_relatif">Positionnement relatif</h3> +### Positionnement relatif -<p>Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif :</p> +Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif : -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; top: 30px; left: 30px; -}</pre> +} +``` -<p>Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur <code>relative</code> — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas.</p> +Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas. -<p>Ajouter ce code donne le résultat suivant :</p> +Ajouter ce code donne le résultat suivant : -<pre class="brush: html hidden"><h1>Positionnement relatif</h1> +```html hidden +<h1>Positionnement relatif</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Voici un élément avec un positionnement relatif.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Voici un élément avec un positionnement relatif.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -391,39 +409,46 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }}</p> +{{ EmbedLiveSample('Positionnement_relatif', '100%', 300) }} -<h3 id="Positionnement_absolu">Positionnement absolu</h3> +### Positionnement absolu -<p>Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur.</p> +Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur. -<p>En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu :</p> +En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu : -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; top: 30px; left: 30px; -}</pre> +} +``` -<p>Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur <code>absolute</code> et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant :</p> +Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant : -<pre class="brush: html hidden"><h1>Positionnement absolu</h1> +```html hidden +<h1>Positionnement absolu</h1> -<p>Je suis un élément de niveau bloc de base.</p> -<p class="positioned">Voici un élément avec un positionnement absolu.</p> -<p>Je suis un élément de niveau bloc de base.</p></pre> +<p>Je suis un élément de niveau bloc de base.</p> +<p class="positioned">Voici un élément avec un positionnement absolu.</p> +<p>Je suis un élément de niveau bloc de base.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -435,48 +460,52 @@ p { margin: 10px; border-radius: 5px; } -</pre> +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: absolute; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; -}</pre> - -<p>{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }}</p> +} +``` -<p>C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">positionnement</a>.</p> +{{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }} -<h3 id="Positionnement_fixé">Positionnement fixé</h3> +C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<p>Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui.</p> +### Positionnement fixé -<p>Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété <code>position: fixed</code>.</p> +Le positionnement fixé sort l'élément du cours normal de la même façon que le positionnement absolu. Toutefois, les décalages ne sont plus relatifs au conteneur, mais à la vue. L'élément étant fixé par rapport à la vue, nous pourrons créer des effets comme celui d'un menu restant fixé au haut de la fenêtre alors que la page défile sous lui. -<pre class="brush: html"><h1>Positionnement fixé</h1> +Pour cet exemple, l'HTML est constitué de trois paragraphes de texte, de façon à pouvoir les faire défiler, et d'une boîte à laquelle nous avons donné la propriété `position: fixed`. -<div class="positioned">Fixé</div> +```html +<h1>Positionnement fixé</h1> -<p>Paragraphe 1.</p> -<p>Paragraphe 2.</p> -<p>Paragraphe 3.</p> -</pre> +<div class="positioned">Fixé</div> -<pre class="brush: html hidden"><h1>Positionnement fixé</h1> +<p>Paragraphe 1.</p> +<p>Paragraphe 2.</p> +<p>Paragraphe 3.</p> +``` -<div class="positioned">Fixé</div> +```html hidden +<h1>Positionnement fixé</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<div class="positioned">Fixé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -487,31 +516,37 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: fixed; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_fixé', '100%', 200) }} -<h3 id="Positionnement_collant">Positionnement collant</h3> +### Positionnement collant -<p>Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété <code>position: sticky</code>, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si <code>position: fixed</code> lui était appliqué.</p> +Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si `position: fixed` lui était appliqué. -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```html hidden +<h1>Positionnement collant</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<div class="positioned">Collé</div> +<div class="positioned">Collé</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -522,49 +557,53 @@ p { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }}</p> +{{ EmbedLiveSample('Positionnement_collant', '100%', 200) }} -<div class="note"> -<p><strong>Note :</strong> pour plus de précisions à propos du positionnement, voir l'article <a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a>.</p> -</div> +> **Note :** pour plus de précisions à propos du positionnement, voir l'article [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). -<h2 id="Les_tableaux_CSS">Les tableaux CSS</h2> +## Les tableaux CSS -<p>Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau).</p> +Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau). -<p>La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ».</p> +La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ». -<p>Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page.</p> +Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page. -<pre class="brush: html"><form> - <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> - <div> - <label for="fname">Prénom :</label> - <input type="text" id="fname"> - </div> - <div> - <label for="lname">Nom :</label> - <input type="text" id="lname"> - </div> - <div> - <label for="age">Âge :</label> - <input type="text" id="age"> - </div> -</form></pre> +```html +<form> + <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> + <div> + <label for="fname">Prénom :</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Nom :</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Âge :</label> + <input type="text" id="age"> + </div> +</form> +``` -<p>Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout.</p> +Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout. -<p>Notez que les propriétés <code>display: table-caption;</code> et <code>caption-side: bottom;</code> ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments <code>input</code> dans le code source. Voilà une bonne dose de souplesse.</p> +Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse. -<pre class="brush: css">html { +```css +html { font-family: sans-serif; } @@ -598,69 +637,75 @@ form p { width: 400px; color: #999; font-style: italic; -}</pre> +} +``` -<p>Ce qui nous donne le résultat suivant:</p> +Ce qui nous donne le résultat suivant: -<p>{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }}</p> +{{ EmbedLiveSample('Les_tableaux_CSS', '100%', '170') }} -<p>Vous pouvez également examiner cet exemple directement à <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (voyez le <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">code source également</a>).</p> +Vous pouvez également examiner cet exemple directement à [css-tables-example.html](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) (voyez le [code source également](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). -<h2 id="Disposition_sur_plusieurs_colonnes">Disposition sur plusieurs colonnes</h2> +## Disposition sur plusieurs colonnes -<p>Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile.</p> +Le module mise en page sur plusieurs colonnes permet de placer un contenu en colonnes, telle la présentation de l'enchaînement des textes dans un journal. Bien que la lecture de colonnes de haut en bas soit moins utile dans un contexte Web, car il n'est pas question de forcer les utilisateurs à faire défiler en tous sens le contenu d'écran, la disposition en colonnes peut se révéler une technique utile. -<p>Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée.</p> +Pour transformer un bloc en conteneur multicolonnes, utilisez soit la propriété {{cssxref("column-count")}} qui indique au navigateur le nombre de colonnes souhaitées, soit la propriété {{cssxref("column-width")}}, qui demande au navigateur de remplir le conteneur d'autant de colonnes de la largeur donnée. -<p>Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur <code><div></code> de la classe <code>container</code>.</p> +Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément conteneur `<div>` de la classe `container`. -<pre class="brush: html"><div class="container"> - <h1>Disposition en colonnes</h1> +```html +<div class="container"> + <h1>Disposition en colonnes</h1> - <p>Paragraphe 1.</p> - <p>Paragraphe 2.</p> + <p>Paragraphe 1.</p> + <p>Paragraphe 2.</p> -</div> -</pre> +</div> +``` + +Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées. -<p>Noux utilisons une propriété <code>column-width</code> de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées.</p> +```html hidden + <div class="container"> + <h2>Disposition en colonnes</h2> -<pre class="brush: html hidden"> <div class="container"> - <h2>Disposition en colonnes</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </div> - </div> - </pre> +``` -<pre class="brush: css hidden">body { max-width: 800px; margin: 0 auto; } </pre> +```css hidden +body { max-width: 800px; margin: 0 auto; } +``` -<pre class="brush: css"> .container { +```css + .container { column-width: 200px; - }</pre> + } +``` -<p>{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }}</p> +{{ EmbedLiveSample('Disposition_sur_plusieurs_colonnes', '100%', 200) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique !</p> +Cet article donne un bref résumé de toutes les techniques de mise en page à connaître. Poursuivez la lecture pour en savoir plus à propos de chaque technique ! -<p>{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}}</p> +{{NextMenu("Apprendre/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout">La mise en page avec les CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [La mise en page avec les CSS](/fr/docs/Apprendre/CSS/CSS_layout) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index e78ffa385a..7fd67d23b5 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -13,75 +13,92 @@ tags: translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<p>Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien.</p> +Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (voyez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>) et une idée du fonctionnement de CSS (voyez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>).</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux derrière les systèmes de disposition en trame utilisés avant que CSS Grid Layout soit disponible dans les navigateurs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (voyez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >) et une idée du fonctionnement de CSS (voyez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a> et + <a href="/fr/docs/Apprendre/CSS/styliser_boites">Styles de boîtes</a>). + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux derrière les systèmes de + disposition en trame utilisés avant que CSS Grid Layout soit disponible + dans les navigateurs. + </td> + </tr> + </tbody> </table> -<h2 id="Mise_en_page_et_systèmes_de_trames_avant_CSS_Grid_Layout">Mise en page et systèmes de trames avant CSS Grid Layout</h2> +## Mise en page et systèmes de trames avant CSS Grid Layout -<p>Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ».</p> +Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ». -<p>Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout.</p> +Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout. -<p>Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes.</p> +Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes. -<p>Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.</p> +Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame. -<h2 id="Disposition_sur_deux_colonnes">Disposition sur deux colonnes</h2> +## Disposition sur deux colonnes -<p>Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier <code>index.html</code> sur l'ordinateur, en le remplissant avec le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modèle HTML simple</a> et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final.</p> +Débutons avec l'exemple le plus simple qui soit — une disposition sur deux colonnes. Vous pouvez suivre en créant un nouveau fichier `index.html` sur l'ordinateur, en le remplissant avec le [modèle HTML simple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et en y insérant le code ci-dessous aux endroits appropriés. À la fin du paragraphe, vous verrez un exemple en direct de ce à quoi devrait ressembler le code final. -<p>Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de <code>body</code> par ceci :</p> +Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplacez ce qui se trouve à l'intérieur de `body` par ceci : -<pre class="brush: html"><h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -</div> +```html +<h1>Exemple de disposition sur 2 colonnes</h1> +<div> + <h2>Première colonne</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> +<div> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre.</p> +Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre. -<p>Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration :</p> +Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 900px; margin: 0 auto; -}</pre> +} +``` -<p>Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS :</p> +Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; } div:nth-of-type(2) { width: 48%; -}</pre> +} +``` -<p>Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi :</p> +Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi : -<pre class="brush: css">div:nth-of-type(1) { +```css +div:nth-of-type(1) { width: 48%; float: left; } @@ -89,26 +106,29 @@ div:nth-of-type(2) { div:nth-of-type(2) { width: 48%; float: right; -}</pre> +} +``` -<p>En mettant tout ensemble, voici le résultat :</p> +En mettant tout ensemble, voici le résultat : -<h3>Exemple complet</h3> +### Exemple complet -<pre class="brush: html hidden"><h1>Exemple de disposition sur 2 colonnes</h1> +```html hidden +<h1>Exemple de disposition sur 2 colonnes</h1> -<div> - <h2>Première colonne</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -</div> +<div> + <h2>Première colonne</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> -<div> - <h2>Seconde colonne</h2> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -</div> -</pre> +<div> + <h2>Seconde colonne</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 0 auto; @@ -123,60 +143,61 @@ div:nth-of-type(2) { width: 48%; float: right; } -</pre> +``` -<p>{{ EmbedLiveSample('Exemple_complet', '100%', 520) }}</p> +{{ EmbedLiveSample('Exemple_complet', '100%', 520) }} -<p>Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une <strong>disposition fluide</strong>, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif.</p> +Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif. -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir cet exemple en cours à la page <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> (voyez aussi son <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">code source</a>).</p> -</div> +> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)). -<h2 id="Ancienne_création_d'un_cadre_de_trames">Ancienne création d'un cadre de trames</h2> +## Ancienne création d'un cadre de trames -<p>La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le <a href="/fr/docs/Learn/CSS/CSS_layout/Floats">dégagement des boîtes flottantes</a>.</p> +La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le [dégagement des boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats). -<p>Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes.</p> +Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes. -<p>Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2.</p> +Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2. -<h3 id="Une_simple_trame_de_largeurs_fixes">Une simple trame de largeurs fixes</h3> +### Une simple trame de largeurs fixes -<p>Créons d'abord une trame à colonnes à largeur fixe.</p> +Créons d'abord une trame à colonnes à largeur fixe. -<p>Commençons par faire une copie locale du fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> qui comporte le balisage suivant dans <code>body</code>.</p> +Commençons par faire une copie locale du fichier exemple [simple-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html) qui comporte le balisage suivant dans `body`. -<pre class="brush: html"><div class="wrapper"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col span1">13</div> - <div class="col span6">14</div> - <div class="col span3">15</div> - <div class="col span2">16</div> - </div> -</div></pre> +```html +<div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div> +``` -<p>Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame.</p> +Le but est d'en faire une trame de démonstration sur deux lignes à partir des 12 colonnes — la ligne haute montre la taille de colonnes prises isolément, la ligne basse montre des zones de taille différentes à partir de cette trame. -<p><img alt="" src="simple-grid-finished.png"></p> + -<p>À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à <code>border-box</code> sur tous les éléments du site (voir <a href="/fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte">Modification totale du modèle de boîte</a> pour plus d'explications).</p> +À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications). -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -187,40 +208,44 @@ body { .wrapper { padding-right: 20px; -}</pre> +} +``` -<p>Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente :</p> +Utilisez maintenant le conteneur enveloppe de chaque ligne de la trame pour dissocier et dégager chaque ligne. Ajoutez la règle suivante sous la règle précédente : -<pre class="brush: css">.row { +```css +.row { clear: both; -}</pre> +} +``` -<p>Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles.</p> +Appliquer ce dégagement signifie que nous n'avons pas besoin de remplir totalement chaque rangée (ligne) d'éléments remplissant totalement les douze colonnes. Les lignes resteront séparées et n'interfèreront pas entre elles. -<p>Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240.</p> +Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont faites en créant un marge du côté droit de chaque colonne ‑ y compris la première pour compenser le remplissage de 20 pixels du côté droit du conteneur. Nous avons donc 12 gouttières en tout — 12 x 20 = 240. -<p>Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels.</p> +Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels. -<p>L'étape suivante consiste à créer un règle pour la classe <code>.col</code> la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS :</p> +L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 20px; width: 60px; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame.</p> +La ligne supérieure des colonnes unitaires est maintenant disposées en tant que trame. -<div class="note"> -<p><strong>Note :</strong> Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune.</p> -</div> +> **Note :** Nous avons aussi donné à chaque colonne une couleur légèrement rosée pour que vous puissiez voir exactement l'espace pris par chacune. -<p>Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes.</p> +Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes. -<p>Ajoutez ce qui suit en bas de la CSS :</p> +Ajoutez ce qui suit en bas de la CSS : -<pre class="brush: css">/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ +```css +/* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ .col.span2 { width: 140px; } /* Trois largeurs de colonnes (180px) plus deux largeurs de gouttières (40px) */ .col.span3 { width: 220px; } @@ -233,50 +258,52 @@ body { .col.span9 { width: 700px; } .col.span10 { width: 780px; } .col.span11 { width: 860px; } -.col.span12 { width: 940px; }</pre> +.col.span12 { width: 940px; } +``` -<p>Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet.</p> +Une fois ces classes crées, nous pouvons disposer des colonnes de largeur différentes sur la trame. Enregistrez et chargez cette page dans le navigateur pour voir l'effet. -<div class="note"> -<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">version terminée</a> sur GitHub (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">en fonctionnement direct</a>).</p> -</div> +> **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). -<p>Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci :</p> +Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci : -<pre class="brush: css"><div class="row"> - <div class="col span8">13</div> - <div class="col span4">14</div> -</div></pre> +```css +<div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div> +``` -<p>Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super !</p> +Maintenant vous avez un système de trame fonctionnel. Il suffit simplement de définir les lignes et le nombre de colonnes dans chaque ligne, puis de remplir chaque conteneur avec le contenu voulu. Super ! -<h3 id="Creation_d'une_trame_fluide">Creation d'une trame fluide</h3> +### Creation d'une trame fluide -<p>Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages.</p> +Cette trame est tout à fait correcte, mais elle a une largeur fixe. Nous souhaitons vraiment une trame souple (fluide) qui s'élargisse ou s'étrécisse avec l'espace disponible dans la fenêtre de vue du navigateur. Pour ce faire, il faut transformer les largeurs de référence de pixels en pourcentages. -<p>L'équation qui transforme une largeur fixe en pourcentage est la suivante :</p> +L'équation qui transforme une largeur fixe en pourcentage est la suivante : -<pre>cible / contexte = résultat</pre> + cible / contexte = résultat -<p>Pour la largeur de la première colonne, la <strong>largeur cible</strong> est de 60 pixels et le <strong>contexte</strong> est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage.</p> +Pour la largeur de la première colonne, la **largeur cible** est de 60 pixels et le **contexte** est l'enveloppe de 960 pixels. Avec la formule ci‑dessus nous calculons le pourcentage. -<pre>60 / 960 = 0.0625</pre> + 60 / 960 = 0.0625 -<p>Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%.</p> +Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%. -<p>En faisant de même pour la largeur de la gouttière :</p> +En faisant de même pour la largeur de la gouttière : -<pre>20 / 960 = 0.02083333333</pre> + 20 / 960 = 0.02083333333 -<p>Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle <code>.col</code> et de {{cssxref("padding-right")}} dans la règle <code>.wrapper</code>.</p> +Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left")}} dans la règle `.col` et de {{cssxref("padding-right")}} dans la règle `.wrapper`. -<h4 id="Mise_à_jour_de_la_trame">Mise à jour de la trame</h4> +#### Mise à jour de la trame -<p>Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a> comme point de départ.</p> +Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) comme point de départ. -<p>Mettez à jour la deuxième règle CSS (avec le sélecteur <code>.wrapper</code>) comme suit :</p> +Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -284,24 +311,28 @@ body { .wrapper { padding-right: 2.08333333%; -}</pre> +} +``` -<p>Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large.</p> +Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large. -<p>Ensuite, mettez à jour les quatre règles CSS (du sélecteur <code>.col</code>) ainsi :</p> +Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : -<pre class="brush: css">.col { +```css +.col { float: left; margin-left: 2.08333333%; width: 6.25%; background: rgb(255, 150, 150); -}</pre> +} +``` -<p>Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles <code>.col.span</code> en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous.</p> +Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous. -<p>Mettez à jour le bloc bas des règles CSS avec ce qui suit :</p> +Mettez à jour le bloc bas des règles CSS avec ce qui suit : -<pre class="brush: css">/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ +```css +/* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ .col.span2 { width: 14.58333333%; } /* Trois largeurs de colonnes (18.75%) plus deux largeurs de gouttière (4.1666666%) */ .col.span3 { width: 22.91666666%; } @@ -314,27 +345,29 @@ body { .col.span9 { width: 72.91666664%; } .col.span10 { width: 81.24999997%; } .col.span11 { width: 89.5833333%; } -.col.span12 { width: 97.91666663%; }</pre> +.col.span12 { width: 97.91666663%; } +``` -<p>Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient.</p> +Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la largeur de vue — vous devez constater que la largeur des colonnes s'ajuste comme il convient. -<div class="note"> -<p><strong>Note :</strong> Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">version terminée sur GitHub</a> (voir aussi celle <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">s'exécutant en direct</a>).</p> -</div> +> **Note :** Si vous avez du mal à faire fonctionner l'exemple ci‑dessus, comparez‑le avec notre [version terminée sur GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (voir aussi celle [s'exécutant en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)). -<h3 id="Faciliter_les_calculs_avec_la_fonction_calc()">Faciliter les calculs avec la fonction calc()</h3> +### Faciliter les calculs avec la fonction calc() -<p>Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir <a href="/fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">cet exemple dans le didacticiel MediaRecorder API</a>.</p> +Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>). -<p>Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction <code>calc()</code> nous permet de faire ce calcul dans la valeur <code>width</code> même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple :</p> +Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple : -<pre class="brush: css">.col.span4 { +```css +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); -}</pre> +} +``` -<p>Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique :</p> +Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique : -<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +```css +.col.span2 { width: calc((6.25%*2) + 2.08333333%); } .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } @@ -344,85 +377,87 @@ body { .col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } .col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } .col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } -.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); } +``` -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir la version terminée dans <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a> (la voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">en direct</a>).</p> -</div> +> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). -<div class="note"> -<p><strong>Note :</strong> Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction <code>calc()</code>, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9.</p> -</div> +> **Note :** Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9. -<h3 id="Systèmes_de_trames_«_sémantiques_»_vs._«_non_sémantiques_»">Systèmes de trames « sémantiques » vs. « non sémantiques »</h3> +### Systèmes de trames « sémantiques » vs. « non sémantiques » -<p>Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes <code>span2</code>, <code>span3</code>, etc.</p> +Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc. -<p>Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe <code>content</code> que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe <code>span8</code>, ce qui vous donne une règle :</p> +Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe `content` que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe `span8`, ce qui vous donne une règle : -<pre class="brush: css">.content { +```css +.content { width: calc((6.25%*8) + (2.08333333%*7)); -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Si vous deviez utiliser un préprocesseur tel que <a href="http://sass-lang.com/">Sass</a>, vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous.</p> -</div> +> **Note :** Si vous deviez utiliser un préprocesseur tel que [Sass](http://sass-lang.com/), vous pourriez créer un simple mixage pour qu'il insère cette valeur pour vous. -<h3 id="Décalage_du_conteneur_d'une_trame">Décalage du conteneur d'une trame</h3> +### Décalage du conteneur d'une trame -<p>La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe <code>offset</code> pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs !</p> +La trame créée plus haut fonctionne bien tant que tous les conteneurs sont placés à l'aplomb du côté gauche d'une colonne de trame. Si nous voulons laisser une colonne vide avant le premier conteneur — ou entre les conteneurs — nous devons créer une classe `offset` pour ajouter une marge gauche à notre site pour le décaler visuellement dans la grille. Encore des calculs ! -<p>Essayons.</p> +Essayons. -<p>Démarrons avec le code précédent ou utilisons le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> comme point de départ.</p> +Démarrons avec le code précédent ou utilisons le fichier [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) comme point de départ. -<p>Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS :</p> +Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: calc(6.25% + (2.08333333%*2)); -}</pre> +} +``` -<p>Ou, si vous préférez calculer le pourcentage vous-même, utilisez :</p> +Ou, si vous préférez calculer le pourcentage vous-même, utilisez : -<pre class="brush: css">.offset-by-one { +```css +.offset-by-one { margin-left: 10.41666666%; -}</pre> +} +``` -<p>Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML :</p> +Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML : -<pre class="brush: html"><div class="col span6">14</div></pre> +```html +<div class="col span6">14</div> +``` -<p>remplacez‑le par :</p> +remplacez‑le par : -<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> +```html +<div class="col span5 offset-by-one">14</div> +``` -<div class="note"> -<p><strong>Note :</strong> Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage !</p> -</div> +> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage ! -<p>Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">l'exécution directement</a>). L'exemple terminé doit ressembler à ceci :</p> +Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci : -<p><img alt="" src="offset-grid-finished.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Comme exercice supplémentaire, pouvez‑vous implémenter une classe <code>offset-by-two</code> ?</p> -</div> +> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ? -<h3 id="Limitations_des_trames_de_boîtes_flottantes">Limitations des trames de boîtes flottantes</h3> +### Limitations des trames de boîtes flottantes -<p>En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame.</p> +En utilisant un tel système, vous devez veiller à ce que la somme des largeurs doit correcte et que ne soit pas inclus d'éléments dans une ligne qui s'étendent sur plus de colonnes que la rangée peut en contenir. En raison du mode de fonctionnement des boîtes flottantes, si le nombre de colonnes de la grille devient trop large pour la trame, les éléments d'extrémité descendront sur la ligne suivante et casseront la trame. -<p>N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché.</p> +N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des rangées qu'ils occupent, il y aura débordement et tout sera gâché. -<p>La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée..</p> +La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée.. -<h2 id="Trames_Flexbox">Trames Flexbox ?</h2> +## Trames Flexbox ? -<p>Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus.</p> +Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus. -<p>Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes <code>wrapper</code>, <code>row</code> et <code>col</code> :</p> +Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` : -<pre class="brush: css">body { +```css +body { width: 90%; max-width: 980px; margin: 0 auto; @@ -443,140 +478,147 @@ body { width: 6.25%; flex: 1 1 auto; background: rgb(255,150,150); -}</pre> +} +``` -<p>Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> (voir aussi en <a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">exécution directe</a>).</p> +Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)). -<p>Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à <code>display : flex</code>.</p> +Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`. -<p>Pour <code>.col</code> nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à <code>auto</code>. Comme la valeur {{cssxref("width")}} de l'élément est fixée, <code>auto</code> utilisera cette valeur en tant que valeur de <code>flex-basis</code>.</p> +Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`. -<p>Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne.</p> +Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne. -<p><img alt="" src="flexbox-grid-incomplete.png"></p> + -<p>Pour corriger cela, nous avons encore besoin d'inclure les classes <code>span</code> pour donner une largeur qui remplave la valeur donnée par <code>flex-basis</code> pour cet élément.</p> +Pour corriger cela, nous avons encore besoin d'inclure les classes `span` pour donner une largeur qui remplave la valeur donnée par `flex-basis` pour cet élément. -<p>Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos.</p> +Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos. -<p>Flexbox est un design <strong>mono-dimensionnel</strong> par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes <strong>et</strong> pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes.</p> +Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes. -<p>Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité.</p> +Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité. -<h2 id="Systèmes_de_trame_tierces_parties">Systèmes de trame tierces parties</h2> +## Systèmes de trame tierces parties -<p>Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que <a href="http://getbootstrap.com/">Bootstrap</a> et <a href="http://foundation.zurb.com/">Foundation</a> incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs.</p> +Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs. -<p>Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS.</p> +Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS. -<p>Commençons par visiter le <a href="http://getskeleton.com/">site web de Skeleton</a> et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers <em>skeleton.css</em> et <em>normalize.css</em> dans un nouveau répertoire.</p> +Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire. -<p>Faites une copie de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> et enregistrez le dans le même répertoire que <em>skeleton.css</em> et <em>normalize.css</em>.</p> +Faites une copie de [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) et enregistrez le dans le même répertoire que _skeleton.css_ et _normalize.css_. -<p>Incorporez les .css <em>skeleton</em> et <em>normalize</em> dans la page HTML, en ajoutant ce qui suit dans <code>head</code> :</p> +Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` : -<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> -<link href="skeleton.css" rel="stylesheet"></pre> +```html +<link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"> +``` -<p>Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment.</p> +Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour la typographie et autres éléments de page que vous pouvez utiliser comme point de départ. Toutefois nous les laisserons de côté pour l'instant — c'est la trame qui nous interesse pour le moment. -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/">Normalize</a> est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs.</p> +> **Note :** [Normalize](/fr/docs/) est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs. + +Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML : + +```html +<div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> </div> +``` + +Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe `container` — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels. -<p>Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML :</p> - -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="col">1</div> - <div class="col">2</div> - <div class="col">3</div> - <div class="col">4</div> - <div class="col">5</div> - <div class="col">6</div> - <div class="col">7</div> - <div class="col">8</div> - <div class="col">9</div> - <div class="col">10</div> - <div class="col">11</div> - <div class="col">12</div> - </div> - <div class="row"> - <div class="col">13</div> - <div class="col">14</div> - <div class="col">15</div> - <div class="col">16</div> - </div> -</div></pre> - -<p>Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe <code>container</code> — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels.</p> - -<p>Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément <code><div></code> est centré en utilisant la valeur <code>auto</code> pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur <code>border-box</code> comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale.</p> - -<pre class="brush: css">.container { +Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale. + +```css +.container { position: relative; width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; -}</pre> +} +``` -<p>Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un <code><div></code> supplémentaire ou d'un autre élément de la classe <code>row</code> imbriqué entre le <code><div></code> de <code>content </code>et les véritables conteneurs <code><div> </code>de contenu. Nous avons aussi déjà fait cela.</p> +Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content `et les véritables conteneurs `<div> `de contenu. Nous avons aussi déjà fait cela. -<p>Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes <code>one column</code> pour qu'elles se répartissent à raison de une par colonne.</p> +Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. -<p>Ajoutez maintenant cet extrait de lignes de code :</p> +Ajoutez maintenant cet extrait de lignes de code : -<pre class="brush: html"><div class="container"> - <div class="row"> - <div class="one column">1</div> - <div class="one column">2</div> - <div class="one column">3</div> +```html +<div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> /* and so on */ - </div> -</div></pre> + </div> +</div> +``` -<p>Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi :</p> +Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi : -<pre class="brush: html"><div class="row"> - <div class="one column">13</div> - <div class="six columns">14</div> - <div class="three columns">15</div> - <div class="two columns">16</div> -</div></pre> +```html +<div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div> +``` -<p>Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne.</p> +Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne. -<div class="note"> -<p><strong>Note :</strong> Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> (à voir aussi <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">en exécution directe</a>).</p> -</div> +> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). -<p>Si vous regardez dans le fichier <em>skeleton.css</em> vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait.</p> +Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait. -<pre class="brush: css">.three.columns { width: 22%; }</pre> +```css +.three.columns { width: 22%; } +``` -<p>Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même.</p> +Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même. -<p>Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent.</p> +Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes.</p> +Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md index f629d17eb3..6a9f08ddef 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.md +++ b/files/fr/learn/css/css_layout/media_queries/index.md @@ -4,197 +4,216 @@ slug: Learn/CSS/CSS_layout/Media_queries translation_of: Learn/CSS/CSS_layout/Media_queries original_slug: Apprendre/CSS/CSS_layout/Media_queries --- -<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<p>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</p> +The **CSS Media Query** gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>HTML basics (study <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To understand how to use media queries, and the most common approach for using them to create responsive designs.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td> + HTML basics (study + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction to HTML</a + >), and an idea of how CSS works (study + <a href="/fr/docs/Learn/CSS/First_steps">CSS first steps</a> and + <a href="/fr/docs/Learn/CSS/Building_blocks">CSS building blocks</a>.) + </td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td> + To understand how to use media queries, and the most common approach for + using them to create responsive designs. + </td> + </tr> + </tbody> </table> -<h2 id="Media_Query_Basics">Media Query Basics</h2> +## Media Query Basics -<p>The simplest media query syntax looks like this:</p> +The simplest media query syntax looks like this: -<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) { +```css +@media media-type and (media-feature-rule) { /* CSS rules go here */ -}</pre> +} +``` -<p>It consists of:</p> +It consists of: -<ul> - <li>A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).</li> - <li>A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.</li> - <li>A set of CSS rules that will be applied if the test passes and the media type is correct.</li> -</ul> +- A media type, which tells the browser what kind of media this code is for (e.g. print, or screen). +- A media expression, which is a rule, or test that must be passed for the contained CSS to be applied. +- A set of CSS rules that will be applied if the test passes and the media type is correct. -<h3 id="Media_types">Media types</h3> +### Media types -<p>The possible types of media you can specify are:</p> +The possible types of media you can specify are: -<ul> - <li><code>all</code></li> - <li><code>print</code></li> - <li><code>screen</code></li> - <li><code>speech</code></li> -</ul> +- `all` +- `print` +- `screen` +- `speech` -<p>The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser.</p> +The following media query will only set the body to 12pt if the page is printed. It will not apply when the page is loaded in a browser. -<pre class="brush: css">@media print { +```css +@media print { body { font-size: 12pt; } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> the media type here is different from the so-called {{glossary("MIME type")}}.</p> -</div> +> **Note :** the media type here is different from the so-called {{glossary("MIME type")}}. -<div class="note"> -<p><strong>Note :</strong> there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided.</p> -</div> +> **Note :** there were a number of other media types defined in the Level 3 Media Queries specification; these have been deprecated and should be avoided. -<div class="note"> -<p><strong>Note :</strong> Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types.</p> -</div> +> **Note :** Media types are optional; if you do not indicate a media type in your media query then the media query will default to being for all media types. -<h3 id="Media_feature_rules">Media feature rules</h3> +### Media feature rules -<p>After specifying the type, you can then target a media feature with a rule.</p> +After specifying the type, you can then target a media feature with a rule. -<h4 id="Width_and_height">Width and height</h4> +#### Width and height -<p>The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the <code>min-width</code>, <code>max-width</code>, and <code>width</code> media features.</p> +The feature we tend to detect most often in order to create responsive designs (and that has widespread browser support) is viewport width, and we can apply CSS if the viewport is above or below a certain width — or an exact width — using the `min-width`, `max-width`, and `width` media features. -<p>These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query.</p> +These features are used to create layouts that respond to different screen sizes. For example, to change the body text color to red if the viewport is exactly 600 pixels, you would use the following media query. -<pre class="brush: css">@media screen and (width: 600px) { +```css +@media screen and (width: 600px) { body { color: red; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html). -<p>The <code>width</code> (and <code>height</code>) media features can be used as ranges, and therefore be prefixed with <code>min-</code> or <code>max-</code> to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use <code>max-width</code>:</p> +The `width` (and `height`) media features can be used as ranges, and therefore be prefixed with `min-` or `max-` to indicate that the given value is a minimum, or a maximum. For example, to make the color blue if the viewport is narrower than 400 pixels, use `max-width`: -<pre class="brush: css">@media screen and (max-width: 400px) { +```css +@media screen and (max-width: 400px) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/max-width.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html). -<p>In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see <code>width</code> or <code>height</code> used alone.</p> +In practice, using minimum or maximum values is much more useful for responsive design so you will rarely see `width` or `height` used alone. -<p>There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">Using Media Queries: Media Features</a>.</p> +There are a number of other media features that you can test for, although some of the newer features introduced in Level 4 and 5 of the media queries specification have limited browser support. Each feature is documented on MDN along with browser support information, and you can find a full list at [Using Media Queries: Media Features](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features). -<h4 id="Orientation">Orientation</h4> +#### Orientation -<p>One well-supported media feature is <code>orientation</code>, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query.</p> +One well-supported media feature is `orientation`, which allows us to test for portrait or landscape mode. To change the body text color if the device is in landscape orientation, use the following media query. -<pre class="brush: css">@media (orientation: landscape) { +```css +@media (orientation: landscape) { body { color: rebeccapurple; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/orientation.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html). -<p>A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode.</p> +A standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or tablet in portrait mode. Testing for orientation can help you to create a layout which is optimised for devices in portrait mode. -<h4 id="Use_of_pointing_devices">Use of pointing devices</h4> +#### Use of pointing devices -<p>As part of the Level 4 specification, the <code>hover</code> media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.</p> +As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. -<pre class="brush: css">@media (hover: hover) { +```css +@media (hover: hover) { body { color: rebeccapurple; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/hover.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html). -<p>If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over.</p> +If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over. -<p>Also in Level 4 is the <code>pointer</code> media feature. This takes three possible values, <code>none</code>, <code>fine</code> and <code>coarse</code>. A <code>fine</code> pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A <code>coarse</code> pointer is your finger on a touchscreen. The value <code>none</code> means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands.</p> +Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. -<p>Using <code>pointer</code> can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen.</p> +Using `pointer` can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen. -<h2 id="More_complex_media_queries">More complex media queries</h2> +## More complex media queries -<p>With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched.</p> +With all of the different possible media queries, you may want to combine them, or create lists of queries — any of which could be matched. -<h3 id="and_logic_in_media_queries">"and" logic in media queries</h3> +### "and" logic in media queries -<p>To combine media features you can use <code>and</code> in much the same way as we have used <code>and</code> above to combine a media type and feature. For example, we might want to test for a <code>min-width</code> and <code>orientation</code>. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode.</p> +To combine media features you can use `and` in much the same way as we have used `and` above to combine a media type and feature. For example, we might want to test for a `min-width` and `orientation`. The body text will only be blue if the viewport is at least 400 pixels wide and the device is in landscape mode. -<pre class="brush: css">@media screen and (min-width: 400px) and (orientation: landscape) { +```css +@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/and.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html). -<h3 id="or_logic_in_media_queries">"or" logic in media queries</h3> +### "or" logic in media queries -<p>If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches.</p> +If you have a set of queries, any of which could match, then you can comma separate these queries. In the below example the text will be blue if the viewport is at least 400 pixels wide OR the device is in landscape orientation. If either of these things are true the query matches. -<pre class="brush: css">@media screen and (min-width: 400px), screen and (orientation: landscape) { +```css +@media screen and (min-width: 400px), screen and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/or.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html). -<h3 id="not_logic_in_media_queries">"not" logic in media queries</h3> +### "not" logic in media queries -<p>You can negate an entire media query by using the <code>not</code> operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait.</p> +You can negate an entire media query by using the `not` operator. This reverses the meaning of the entire media query. Therefore in this next example the text will only be blue if the orientation is portrait. -<pre class="brush: css">@media not all and (orientation: landscape) { +```css +@media not all and (orientation: landscape) { body { color: blue; } -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">Open this example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">view the source</a>.</p> +[Open this example](https://mdn.github.io/css-examples/learn/media-queries/not.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html). -<h2 id="How_to_choose_breakpoints">How to choose breakpoints</h2> +## How to choose breakpoints -<p>In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports.</p> +In the early days of responsive design, many designers would attempt to target very specific screen sizes. Lists of the sizes of the screens of popular phones and tablets were published in order that designs could be created to neatly match those viewports. -<p>There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as <strong>breakpoints</strong>.</p> +There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as **breakpoints**. -<p>The <a href="/fr/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.</p> +The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design. -<p><img alt="A screenshot of a layout in a mobile view in Firefox DevTools." src="rwd-mode.png"></p> + -<h2 id="Active_learning_mobile_first_responsive_design">Active learning: mobile first responsive design</h2> +## Active learning: mobile first responsive design -<p>Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as <strong>mobile first</strong> responsive design and is quite often the best approach to follow.</p> +Broadly, you can take two approaches to a responsive design. You can start with your desktop or widest view and then add breakpoints to move things around as the viewport becomes smaller, or you can start with the smallest view and add layout as the viewport becomes larger. This second approach is described as **mobile first** responsive design and is quite often the best approach to follow. -<p>The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default.</p> +The view for the very smallest devices is quite often a simple single column of content, much as it appears in normal flow. This means that you probably don't need to do a lot of layout for small devices — order your source well and you will have a readable layout by default. -<p>The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same.</p> +The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same. -<h3 id="Walkthrough_a_simple_mobile-first_layout">Walkthrough: a simple mobile-first layout</h3> +### Walkthrough: a simple mobile-first layout -<p>Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout.</p> +Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout. -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -244,63 +263,65 @@ nav a:hover { article { margin-bottom: 1em; } -</pre> - -<p>We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable.</p> - -<pre class="brush: html"><body> - <div class="wrapper"> - <header> - <nav> - <ul> - <li><a href="">About</a></li> - <li><a href="">Contact</a></li> - <li><a href="">Meet the team</a></li> - <li><a href="">Blog</a></li> - </ul> - </nav> - </header> - <main> - <article> - <div class="content"> - <h1>Veggies!</h1> - <p> +``` + +We've made no layout changes, however the source of the document is ordered in a way that makes the content readable. This is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable. + +```html +<body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">About</a></li> + <li><a href="">Contact</a></li> + <li><a href="">Meet the team</a></li> + <li><a href="">Blog</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>Veggies!</h1> + <p> ... - </p> - </div> - <aside class="related"> - <p> + </p> + </div> + <aside class="related"> + <p> ... - </p> - </aside> - </article> - - <aside class="sidebar"> - <h2>External vegetable-based links</h2> - <ul> - <li> + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>External vegetable-based links</h2> + <ul> + <li> ... - </li> - </ul> - </aside> - </main> + </li> + </ul> + </aside> + </main> - <footer><p>&copy;2019</p></footer> - </div> - </body> -</pre> + <footer><p>©2019</p></footer> + </div> + </body> +``` -<p>This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site.</p> +This simple layout also works well on mobile. If we view the layout in Responsive Design Mode in DevTools we can see that it works pretty well as a straightforward mobile view of the site. -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">Open step 1</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">view the source</a>.</p> +[Open step 1](https://mdn.github.io/css-examples/learn/media-queries/step1.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html). -<p><strong>If you want to follow on and implement this example as we go, make a local copy of <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a> on your computer.</strong></p> +**If you want to follow on and implement this example as we go, make a local copy of [step1.html](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html) on your computer.** -<p>From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size.</p> +From this point, start to drag the Responsive Design Mode view wider until you can see that the line lengths are becoming quite long, and we have space for the navigation to display in a horizontal line. This is where we'll add our first media query. We'll use ems, as this will mean that if the user has increased their text size, the breakpoint will happen at a similar line-length but wider viewport, than someone with a smaller text size. -<p><strong>Add the below code into the bottom of your step1.html CSS.</strong></p> +**Add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css">@media screen and (min-width: 40em) { +```css +@media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; @@ -315,17 +336,18 @@ article { flex: 1; } } -</pre> +``` -<p>This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row.</p> +This CSS gives us a two-column layout inside the article, of the article content and related information in the aside element. We have also used flexbox to put the navigation into a row. -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">Open step 2</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">view the source</a>.</p> +[Open step 2](https://mdn.github.io/css-examples/learn/media-queries/step2.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html). -<p>Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint.</p> +Lets continue to expand the width until we feel there is enough room for the sidebar to also form a new column. Inside a media query we'll make the main element into a two column grid. We then need to remove the {{cssxref("margin-bottom")}} on the article in order that the two sidebars align with each other, and we'll add a {{cssxref("border")}} to the top of the footer. Typically these small tweaks are the kind of thing you will do to make the design look good at each breakpoint. -<p><strong>Again, add the below code into the bottom of your step1.html CSS.</strong></p> +**Again, add the below code into the bottom of your step1.html CSS.** -<pre class="brush: css"><code>@media screen and (min-width: 70em) { +```css +@media screen and (min-width: 70em) { main { display: grid; grid-template-columns: 3fr 1fr; @@ -340,43 +362,46 @@ article { border-top: 1px solid #ccc; margin-top: 2em; } -}</code> -</pre> - -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">Open step 3</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">view the source</a>.</p> - -<p>If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design.</p> - -<h2 id="Do_you_really_need_a_media_query">Do you really need a media query?</h2> - -<p>Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all.</p> - -<p>This could be achieved using the following:</p> - -<pre class="brush: html"><ul class="grid"> - <li> - <h2>Card 1</h2> - <p>...</p> - </li> - <li> - <h2>Card 2</h2> - <p>...</p> - </li> - <li> - <h2>Card 3</h2> - <p>...</p> - </li> - <li> - <h2>Card 4</h2> - <p>...</p> - </li> - <li> - <h2>Card 5</h2> - <p>...</p> - </li> -</ul></pre> - -<pre class="brush: css">.grid { +} +``` + +[Open step 3](https://mdn.github.io/css-examples/learn/media-queries/step3.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html). + +If you look at the final example at different widths you can see how the design responds and works as a single column, two columns, or three columns, depending on the available width. This is a very simple example of a mobile first responsive design. + +## Do you really need a media query? + +Flexbox, Grid, and multi-column layout all give you ways to create flexible and even responsive components without the need for a media query. It's always worth considering whether these layout methods can achieve what you want without adding media queries. For example, you might want a set of cards that are at least 200 pixels wide, with as many of these 200 pixels as will fit into the main article. This can be achieved with grid layout, using no media queries at all. + +This could be achieved using the following: + +```html +<ul class="grid"> + <li> + <h2>Card 1</h2> + <p>...</p> + </li> + <li> + <h2>Card 2</h2> + <p>...</p> + </li> + <li> + <h2>Card 3</h2> + <p>...</p> + </li> + <li> + <h2>Card 4</h2> + <p>...</p> + </li> + <li> + <h2>Card 5</h2> + <p>...</p> + </li> +</ul> +``` + +```css +.grid { list-style: none; margin: 0; padding: 0; @@ -388,39 +413,38 @@ article { .grid li { border: 1px solid #666; padding: 10px; -}</pre> +} +``` -<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">Open the grid layout example</a> in the browser, or <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">view the source</a>.</p> +[Open the grid layout example](https://mdn.github.io/css-examples/learn/media-queries/grid.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html). -<p>With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results.</p> +With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. -<h2 id="Test_your_skills!">Test your skills!</h2> +## Test your skills! -<p>You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see <a href="/fr/docs/Learn/CSS/CSS_layout/rwd_skills">Test your skills: Responsive Web Design</a>.</p> +You've reached the end of this article, but can you remember the most important information? You can find a test to verify that you've retained this information before you move on — see [Test your skills: Responsive Web Design](/fr/docs/Learn/CSS/CSS_layout/rwd_skills). -<h2 id="Summary">Summary</h2> +## Summary -<p>In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.</p> +In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design. -<p>You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the <code>pointer</code> media feature.</p> +You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature. -<p>You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content.</p> +You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">In this module</h2> +## In this module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Beginner's guide to media queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Legacy layout methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental layout comprehension assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md index 248c788e2b..b6e2cfb1ce 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md @@ -13,128 +13,146 @@ tags: translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</div> - -<p>Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.</p> +Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Apprendre comment créer une disposition de contenu sur plusieurs colonnes dans une page web, comme dans un journal.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Apprendre comment créer une disposition de contenu sur plusieurs + colonnes dans une page web, comme dans un journal. + </td> + </tr> + </tbody> </table> -<h2 id="Un_exemple_élémentaire">Un exemple élémentaire</h2> +## Un exemple élémentaire -<p>Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « <em>multicol</em> ». Vous pourrez effectuer le suivi de cet article en <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">téléchargeant le fichier de depart multicol</a> et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler.</p> +Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « *multicol* ». Vous pourrez effectuer le suivi de cet article en [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler. -<p>Notre point de départ contient un HTML très simple ; une enveloppe de la classe <code>container</code> dans laquelle nous avons placé un en‑tête et quelques paragraphes.</p> +Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes. -<p>L'élément {{htmlelement("div")}} de la classe <code>container</code> sera notre conteneur multi‑colonnes. Nous basculons dans une disposition <em>multicol</em> en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété <code>column-count</code> crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes :</p> +L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes : -<pre class="brush: css">.container { +```css +.container { column-count: 3; } -</pre> +``` -<p>Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles.</p> +Les colonnes créées sont de largeur variable — le navigateur calcule automatiquement l'espace à donner à chacune d'entre elles. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; } - </pre> -<pre class="brush: html"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +``` + +```html +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div> -</pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }}</p> +{{ EmbedLiveSample('Un_exemple_élémentaire', '100%', 400) }} -<h3>Définir column-width</h3> +### Définir column-width -<p>Modifiez la CSS pour utiliser <code>column-width</code> ainsi :</p> +Modifiez la CSS pour utiliser `column-width` ainsi : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; } -</pre> +``` -<p>Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur.</p> +Le navigateur dispose maintenant le maximum de colonnes possible de la taille fixée ; le reste de l'espace est partagé entre les colonnes existantes. Cela signifie que vous n'obtiendrez pas exactement la largeur définie, à moins que le conteneur soit exactement divisible par cette largeur. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```html hidden +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Définir_column-width', '100%', 400) }}</p> +{{ EmbedLiveSample('Définir_column-width', '100%', 400) }} -<h2 id="Style_des_colonnes">Style des colonnes</h2> +## Style des colonnes -<p>Les colonnes créées avec <em>multicol</em> ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes :</p> +Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes : -<ul> - <li>modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}.</li> - <li>ajouter une règle entre colonnes avec {{cssxref("column-rule")}}.</li> -</ul> +- modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}. +- ajouter une règle entre colonnes avec {{cssxref("column-rule")}}. -<p>En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété <code>column-gap</code> :</p> +En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` : -<pre class="brush: css">.container { +```css +.container { column-width: 200px; column-gap: 20px; -}</pre> +} +``` -<p>Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec <code>column-rule</code>. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, <code>column-rule</code>, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs.</p> +Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs. -<pre class="brush: css">.container { +```css +.container { column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<p>Ajoutons des règles pour les divers styles et couleurs.</p> +Ajoutons des règles pour les divers styles et couleurs. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; @@ -144,101 +162,107 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout column-count: 3; column-gap: 20px; column-rule: 4px dotted rgb(79, 185, 227); -}</pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <h1>Simple exemple <i>multicol</i></h1> +```html hidden +<div class="container"> + <h1>Simple exemple <i>multicol</i></h1> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit - quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> - <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis - dis parturient montes, nascetur ridiculus mus.</p> -</div></pre> + dis parturient montes, nascetur ridiculus mus.</p> +</div> +``` -<p>{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }}</p> +{{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }} -<p>Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec <code>column-gap</code>. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes.</p> +Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes. -<h2 id="Colonnes_et_coupures">Colonnes et coupures</h2> +## Colonnes et coupures -<p>Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur <em>multicol</em>, il est découpé en colonnes de texte pour permettre cette disposition.</p> +Le contenu d'une disposition en plusieurs colonnes est coupé. Il se comporte essentiellement de la même manière qu'un contenu en plusieurs pages — comme quand vous imprimez une page web. Quand vous mettez un contenu dans un conteneur _multicol_, il est découpé en colonnes de texte pour permettre cette disposition. -<p>Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé <em>multicol</em> pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux.</p> +Quelquefois, ces coupures se font dans des endroits amenant des difficultés de lecture. Dans l'exemple en direct ci‑dessous, j'ai utilisé _multicol_ pour disposer une série de boîtes dont chacune a un titre et un peu de texte. Le titre est séparé du texte si la coupure de colonne se produit entre les deux. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -} </pre> -</div> +} +``` -<pre class="brush: html hidden"><div class="container"> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat +```html hidden +<div class="container"> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -248,17 +272,19 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }}</p> +{{ EmbedLiveSample('Colonnes_et_coupures', '100%', 600) }} -<h3>Utiliser break-inside</h3> +### Utiliser break-inside -<p>Pour contrôler ce comportement, utilisons les propriétés stipulées dans <a href="/fr/docs/Web/CSS/CSS_Fragmentation">CSS Fragmentation</a> (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le <em>multicol</em> et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur <code>avoid</code> aux règles pour <code>.card</code>, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée.</p> +Pour contrôler ce comportement, utilisons les propriétés stipulées dans [CSS Fragmentation](/fr/docs/Web/CSS/CSS_Fragmentation) (coupures dans la CSS). Cette fonctionnalité nous offre des propriétés pour contrôler les coupures de contenu dans le _multicol_ et les médias paginés. Par exemple, ajoutons la propriété {{cssxref("break-inside")}} avec la valeur `avoid` aux règles pour `.card`, qui est le conteneur du titre et du texte. Nous indiquons que nous ne souhaitons pas que cette boîte soit coupée. -<p>Il est également préférable d'ajouter l'ancienne propriété <code>page-break-inside: avoid</code> pour une meilleure prise en charge par les divers navigateurs.</p> +Il est également préférable d'ajouter l'ancienne propriété `page-break-inside: avoid` pour une meilleure prise en charge par les divers navigateurs. -<pre class="brush: css">.card { +```css +.card { break-inside: avoid; page-break-inside: avoid; background-color: rgb(207,232,220); @@ -266,77 +292,81 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout padding: 10px; margin: 0 0 1em 0; } -</pre> +``` -<p>Actualisez la page et les boîtes devraient rester entières.</p> +Actualisez la page et les boîtes devraient rester entières. -<pre class="brush: css hidden">body { +```css hidden +body { width: 90%; max-width: 900px; margin: 2em auto; font: .9em/1.2 Arial, Helvetica, sans-serif; -} </pre> +} +``` -<pre class="brush: html hidden"><div class="container"> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat +```html hidden +<div class="container"> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> - <div class="card"> - <h2>Je suis un titre</h2> - <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + <div class="card"> + <h2>Je suis un titre</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci - vel, viverra egestas ligula.</p> - </div> + vel, viverra egestas ligula.</p> + </div> -</div> -</pre> +</div> +``` -<pre class="brush: css">.container { +```css +.container { column-width: 250px; column-gap: 20px; } @@ -348,34 +378,31 @@ original_slug: Apprendre/CSS/CSS_layout/Multiple-column_Layout border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 0 0 1em 0; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }}</p> +{{ EmbedLiveSample('Utiliser_break-inside', '100%', 600) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications.</p> +Vous savez maintenant comment utiliser les fonctionnalités élémentaires de la mise en page sur plusieurs colonnes, autre outil à votre disposition pour choisir une méthode de présentation pour le désign de vos applications. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/CSS_Fragmentation">Coupures avec la CSS</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Utilisation des mises en page sur plusieurs colonnes</a></li> -</ul> +- [Coupures avec la CSS](/fr/docs/Web/CSS/CSS_Fragmentation) +- [Utilisation des mises en page sur plusieurs colonnes](/fr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md index b0edfa8415..95ee411f27 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.md +++ b/files/fr/learn/css/css_layout/normal_flow/index.md @@ -4,71 +4,84 @@ slug: Learn/CSS/CSS_layout/Normal_Flow translation_of: Learn/CSS/CSS_layout/Normal_Flow original_slug: Apprendre/CSS/CSS_layout/Normal_Flow --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Introduction", "Apprendre/CSS/CSS_layout/Flexbox", "Apprendre/CSS/CSS_layout")}} -<p>Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.</p> +Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a>) et avoir une idée de la manière dont les CSS fonctionnent (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" + >Introduction au HTML</a + >) et avoir une idée de la manière dont les CSS fonctionnent (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction aux CSS</a + >). + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Expliquer comment les navigateurs composent les pages web par défaut, + avant que nous commencions à faire des modifications. + </td> + </tr> + </tbody> </table> -<p>Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page.</p> +Comme indiqué dans la précédente leçon d'introduction à la mise en page, les éléments d'une page Web suivent un cours normal de mise en page, si vous n'avez pas appliqué de CSS pour changer leur comportement. Et, comme nous avons commencé à le découvrir, vous pouvez changer le comportement des éléments, soit en ajustant leur position dans ce cours normal, soit en les sortant totalement de ce cours. Commencer par un document solide, bien structuré et lisible en cours normal est la meilleure façon de commencer n'importe quelle page Web. Cela garantit un contenu lisible, même si l'utilisateur visite le site avec un navigateur peu performant ou un dispositif tel qu'un lecteur d'écran lisant le contenu de la page. De plus, comme le cours normal a été pensé pour faire en sorte que le document soit lisible, en commençant de cette façon, vous travaillez avec le document au lieu de vous battre contre lui quand vous apportez des modifications à la mise en page. -<p>Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document.</p> +Avant d'approfondir les diverses méthodes de mise en page, revoir certaines choses déjà exposées dans les modules précédents à propos du cours normal d'affichage d'un document. -<h2 id="Disposition_des_éléments_par_défaut">Disposition des éléments par défaut</h2> +## Disposition des éléments par défaut -<p>Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt.</p> +Tout d'abord, les boîtes des éléments pris isolément sont conditionnées en prenant le contenu des éléments, auquel, autour d'eux, est rapporté le remplissage, l'encadrement et la marge — conformément au modèle de boîte examiné plus tôt. -<p>Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec <code>display: bloc ;</code> (ou même <code>display: inline-block ;</code> qui mélange les caractéristiques des deux).</p> +Par défaut, le contenu d'un élément de niveau bloc prend 100% de la largeur de son élément parent et sa hauteur est commandée par son contenu. Les éléments en ligne ont la hauteur et la largeur de leur contenu. Vous ne pouvez pas définir la largeur ou la hauteur d'éléments en ligne — ils se trouvent uniquement à l'intérieur d'un contenu d'élément de niveau bloc. Si vous voulez contrôler la taille d'un élément en ligne de cette manière, vous devez le paramétrer pour qu'il se comporte comme un élément de niveau bloc avec `display: bloc ;` (ou même `display: inline-block ;` qui mélange les caractéristiques des deux). -<p>Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement.</p> +Ce qui précède explique le comportement des éléments pris individuellement, mais qu'en est-il de la façon dont les éléments interagissent les uns avec les autres ? Le cours normal de mise en page (mentionné dans l'article d'introduction à la mise en page) est le système par lequel les éléments sont placés à l'intérieur de la fenêtre de vue du navigateur. Par défaut, les éléments de niveau bloc sont disposés dans le sens où les blocs s'affichent dans le mode d'écriture du document — chacun apparaît sur une nouvelle ligne en dessous de la dernière et ils sont séparés par la marge qui leur a été assignée. En anglais donc, ou tout autre mode d'écriture horizontal, de haut en bas, les éléments de niveau bloc sont empilés verticalement. -<p>Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne.</p> +Les éléments en ligne se comportent différemment — ils ne sont pas sur une nouvelle ligne ; ils se placent sur la même ligne qu'un autre élément inline ou que n'importe quel contenu textuel adjacent (ou entourant) tant qu'il y a de la place pour eux dans la largeur de l'élément parent de niveau de bloc. S'il n'y a pas suffisamment d'espace, le texte ou les éléments débordants se déplaceront sur une nouvelle ligne. -<p>Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut.</p> +Si deux éléments adjacents ont tous deux une marge et que les deux marges se touchent, seule reste la plus grande des deux et la plus petite est englobée dans la plus grande — c'est ce qu'on appelle la fusion des marges ; nous l'avons déjà rencontrée plus haut. -<p>Voici un exemple simple expliquant cela :</p> +Voici un exemple simple expliquant cela : -<h3 id="Exemple">Exemple</h3> +### Exemple -<pre class="brush: html"><h2>Cours d'un document de base</h2> +```html +<h2>Cours d'un document de base</h2> -<p>Je suis un élément de niveau bloc de base. +<p>Je suis un élément de niveau bloc de base. Mes éléments de niveau bloc adjacents sont sur de - nouvelles lignes en dessous de moi.</p> + nouvelles lignes en dessous de moi.</p> -<p>Par défaut, nous occupons 100% de la largeur +<p>Par défaut, nous occupons 100% de la largeur de notre élément parent et nous sommes aussi hauts que notre contenu enfant. Nos largeur et hauteur totales sont égales à la largeur/hauteur de notre - contenu + remplissage + encadrement.</p> + contenu + remplissage + encadrement.</p> -<p>Nous sommes séparés de nos marges. +<p>Nous sommes séparés de nos marges. Comme il y a fusion des marges, nous sommes séparés - par la largeur de l'une de nos marges et non les deux.</p> + par la largeur de l'une de nos marges et non les deux.</p> -<p>Des éléments <code>inline</code> <span>comme celui-ci</span> ou - <span>celui‑là</span> sont placés sur la même ligne et +<p>Des éléments inline <span>comme celui-ci</span> ou + <span>celui‑là</span> sont placés sur la même ligne et les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les débordements des éléments inline - <span>sont placés sur une nouvelle ligne si possible - (comme celle‑ci contenant du texte)</span>, sinon ils + <span>sont placés sur une nouvelle ligne si possible + (comme celle‑ci contenant du texte)</span>, sinon ils sont placés sur une nouvelle ligne, comme cette image : - <img src="long.jpg"></p></pre> + <img src="long.jpg"></p> +``` -<pre class="brush: css">body { +```css +body { width: 500px; margin: 0 auto; } @@ -83,27 +96,26 @@ p { span { background: white; border: 1px solid black; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Exemple', '100%', 500) }}</p> +{{ EmbedLiveSample('Exemple', '100%', 500) }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design.</p> +Maintenant que vous avez vu ce qu'est le cours normal de la mise en page et la façon dont le navigateur présente les choses par défaut, passons à la page suivante pour comprendre comment modifier cet affichage par défaut pour créer une mise en page conforme à votre design. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md index 8485a78f70..5e70ea8b8b 100644 --- a/files/fr/learn/css/css_layout/positioning/index.md +++ b/files/fr/learn/css/css_layout/positioning/index.md @@ -18,82 +18,89 @@ tags: translation_of: Learn/CSS/CSS_layout/Positioning original_slug: Apprendre/CSS/CSS_layout/Le_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> - -<p>Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser.</p> +Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de {{cssxref("position")}}, et comment les utiliser. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Savoir comment fonctionne le positionnement avec les CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les fondamentaux du HTML (étudiez + <a href="/fr/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/Apprendre/CSS/Introduction_à_CSS">Introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td>Savoir comment fonctionne le positionnement avec les CSS.</td> + </tr> + </tbody> </table> -<p>Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> sur le dépôt Github (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">code source ici</a>) et utilisez-le comme point de départ.</p> +Nous aimerions que vous suiviez, si possible, les exercices sur votre ordinateur — prenez une copie de [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) sur le dépôt Github ([code source ici](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) et utilisez-le comme point de départ. -<h2 id="Introduction_au_positionnement">Introduction au positionnement</h2> +## Introduction au positionnement -<p>Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles.</p> +Le positionnement permet de modifier le cours classique de la mise en page pour produire des effets intéressants. Vous souhaitez modifier légèrement le placement de boîtes par rapport à leur position par défaut dans la mise en page, et donner ainsi une touche d'originalité à votre page ? Vous souhaitez créer un élément d'interface utilisateur flottant au‑dessus d'autres parties de la page, et/ou que cet élément reste fixé à la même place dans la fenêtre du navigateur, quel que soit le point de défilement de la page ? Le positionnement est l'outil qu'il vous faut, il rend de tels agencements possibles. -<p>Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}.</p> +Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}. -<h3 id="Positionnement_«_static_»">Positionnement « static »</h3> +### Positionnement « static » -<p>Le positionnement <code>static</code> est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ».</p> +Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ». -<p>Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe <code>positioned</code> pour le deuxième {{htmlelement("p")}} dans le HTML:</p> +Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe `positioned` pour le deuxième {{htmlelement("p")}} dans le HTML: -<pre class="brush: html"><p class="positioned"> ... </p></pre> +```html +<p class="positioned"> ... </p> +``` -<p>Puis ajoutez la règle suivante au bas de votre CSS:</p> +Puis ajoutez la règle suivante au bas de votre CSS: -<pre class="brush: css">.positioned { +```css +.positioned { position: static; - background: yellow; }</pre> + background: yellow; } +``` -<p>Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut !</p> +Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune différence, à l'exception de la mise à jour de la couleur de l'arrière-plan du deuxième paragraphe. C'est correct, comme nous l'avons vu plus tôt, le positionnement statique est le comportement par défaut ! -<div class="note"> -<p><strong>Note :</strong> ce lien <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">voir le code source</a>) pointe sur un exemple de positionnement « static ».</p> -</div> +> **Note :** ce lien [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)) pointe sur un exemple de positionnement « static ». -<h3 id="Positionnement_«_relative_»">Positionnement « relative »</h3> +### Positionnement « relative » -<p>Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de <code>position</code> dans le code :</p> +Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de `position` dans le code : -<pre class="brush: css">position: relative;</pre> +```css +position: relative; +``` -<p>Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe.</p> +Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe. -<h3 id="Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»">Présentation de « top », « bottom », « left » et « right »</h3> +### Présentation de « top », « bottom », « left » et « right » -<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle <code>.positioned</code> dans la CSS :</p> +{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS : -<pre>top: 30px; -left: 30px;</pre> + top: 30px; + left: 30px; -<div class="note"> -<p><strong>Note :</strong> les valeurs de ces propriétés peuvent prendre n'importe quelle <a href="/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units">unité</a> logiquement attendue — pixels, mm, rem, %, etc.</p> -</div> +> **Note :** les valeurs de ces propriétés peuvent prendre n'importe quelle [unité](/fr/Apprendre/CSS/Introduction_à_CSS/Values_and_units) logiquement attendue — pixels, mm, rem, %, etc. -<p>Si vous enregistrez et actualisez maintenant, vous verrez ce résultat :</p> +Si vous enregistrez et actualisez maintenant, vous verrez ce résultat : -<pre class="brush: html hidden"><h1>Positionnement relatif</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +```html hidden +<h1>Positionnement relatif</h1> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -108,32 +115,33 @@ span { position: relative; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }}</p> +{{ EmbedLiveSample('Présentation_de_«_top_»_«_bottom_»_«_left_»_et_«_right_»', '100%', 500) }} -<p>Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini <code>top</code> (haut) et <code>left</code> (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions <code>top: 30px;</code>, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px.</p> +Cool, n'est-ce-pas ? Oui, mais ce n'était probablement pas ce à quoi vous vous attendiez. Pourquoi le déplacement s'est‑il effectué vers le bas et à droite si nous avons défini `top` (haut) et `left` (gauche) ? Même si cela peut paraître illogique, c'est la façon dont fonctionne le positionnement relatif. Songez à une force invisible poussant le côté spécifié de l'élément à positionner, le déplaçant ainsi dans la direction opposé. Par exemple, si nous spécifions `top: 30px;`, une force pousse le haut de la boîte, entraînant son déplacement vers le bas de 30px. -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez retrouver un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez retrouver un exemple ici [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)). -<h3 id="Positionnement_«_absolute_»">Positionnement « absolute »</h3> +### Positionnement « absolute » -<p>Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de <code>position</code> dans le code :</p> +Le positionnement absolu nous apporte des résultats bien différents. Modifions la déclaration de `position` dans le code : -<pre>position: absolute;</pre> + position: absolute; -<p>Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre :</p> +Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ceci apparaitre : -<pre class="brush: html hidden"><h1>Positionnement absolu</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +```html hidden +<h1>Positionnement absolu</h1> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } p { @@ -148,45 +156,42 @@ span { position: absolute; background: yellow; top: 30px; - left: 30px; }</pre> + left: 30px; } +``` -<p>{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }}</p> +{{ EmbedLiveSample('Positionnement_«_absolute_»', '100%', 420) }} -<p>Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore.</p> +Tout d'abord, notez que l'emplacement où l'élément à positionner aurait dû se trouver dans le cours normal de la mise en page du document ne s'y trouve plus. Le premier élément et le troisième sont l'un à côté de l'autre comme si le second n'existait plus ! Dans un sens, c'est le cas. Un élément positionné de manière absolue ne fait plus partie du cours normal de la mise en page. Il se trouve maintenant sur un plan qui lui est propre, séparé de tout le reste. C'est très utile : cela signifie que nous pouvons créer une fonctionnalité d'interface graphique isolée qui n'interfère pas avec la position des autres éléments sur la page. Par exemple, des boîtes d'informations contextuelles (popup), des menus de contrôle, des panneaux déroulants (rollover panels), des fonctionnalités d'interface utilisateur que l'on peut glisser et déposer n'importe où sur la page, et bien plus encore. -<p>Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information)</p> +Ensuite, notez que la position de l'élément a changé. {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} se comportent différemment avec le positionnement absolu. Au lieu de positionner l'élément en fonction de sa position relative dans la mise en page du document, ils définissent la distance à laquelle l'élément doit se situer par rapport aux côtés de l'élément contenant. Dans ce cas, nous indiquons que l'élément à positionner de manière absolue doit se placer à 30px du haut et à 30px de la gauche de « l'élément conteneur ». (Dans ce cas, le bloc conteneur initial. Voir la section ci-dessous pour plus d'information) -<div class="note"> -<p><strong>Note :</strong> vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez <code>top: 0; bottom: 0; left: 0; right: 0;</code> et <code>margin: 0;</code> sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite...</p> -</div> +> **Note :** vous pouvez utiliser {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} pour redimensionner les éléments selon vos besoins. Définissez `top: 0; bottom: 0; left: 0; right: 0;` et `margin: 0;` sur les éléments à positionner et voyez ce qu'il se produit ! Réinitialisez le tout ensuite... -<div class="note"> -<p><strong>Note :</strong> Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas.</p> -</div> +> **Note :** Les marges affectent toujours les éléments à positionner. Toutefois, la fusion de marges ne se fait pas. -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple ici [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)). -<h3 id="Contextes_de_positionnement">Contextes de positionnement</h3> +### Contextes de positionnement -<p>Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément <strong>le contexte de positionnement</strong> de l'élément.</p> +Quel élément est « le conteneur » d'un élément positionné de manière absolue ? Par défaut, c'est l'élément {{htmlelement("html")}} — l'élément à position absolue est imbriqué dans l'élément {{htmlelement("body")}} dans le code source HTML, mais dans le rendu final, il est éloigné de 30px du haut et de la gauche du bord de page, qui est l'élément {{htmlelement("html")}}. Cela s'appelle plus précisément **le contexte de positionnement** de l'élément. -<p>Nous pouvons changer ce <strong>contexte de positionnement</strong> — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body:</p> +Nous pouvons changer ce **contexte de positionnement** — par rapport à quel élément est placé l'élément à positionner en absolu. Cela s'effectue en définissant le positionnement sur un des autres éléments parents — un des éléments dans lequel il est imbriqué (vous ne pouvez pas le positionner par rapport à un élément dans lequel il n'est pas imbriqué). Pour l'illustrer, ajoutez la déclaration suivante à la règle body: -<pre>position: relative;</pre> + position: relative; -<p>Cela devrait donner le résultat suivant:</p> +Cela devrait donner le résultat suivant: -<pre class="brush: html hidden"><h1>Contextes de positionnement</h1> +```html hidden +<h1>Contextes de positionnement</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&gt;</code> !</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code><body></code>, et non par rapport à l'élément <code><html></code> !</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; @@ -209,51 +214,52 @@ span { background: yellow; top: 30px; left: 30px; -}</pre> +} +``` -<p>{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }}</p> +{{ EmbedLiveSample('Contextes_de_positionnement','100%', 420) }} -<p>À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}.</p> +À présent, l'élément a été positionné par rapport à l'élément {{htmlelement("body")}}. -<div class="note"> -<p><strong>Note :</strong> à ce stade, vous pouvez voir cet exemple ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">voir le code source</a>).</p> -</div> +> **Note :** à ce stade, vous pouvez voir cet exemple ici [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)). -<h3 id="Présentation_du_z-index">Présentation du z-index</h3> +### Présentation du z-index -<p>Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ?</p> +Tout ce positionnement absolu est amusant, mais il y a autre chose que nous n'avons pas encore considéré — quand les éléments se chevauchent, comment est déterminé l'élément apparaissant au-dessus d'un autre ? Dans les exemples vus jusqu'à présent, nous n'avions qu'un seul élément à positionner dans le contexte ; il apparaissait en haut, car les éléments positionnés l'emportent sur les éléments non positionnés. Qu'en est‑il lorsqu'il y en a plus d'un ? -<p>Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu :</p> +Ajoutez le code suivant à la CSS, pour faire en sorte que le premier paragraphe soit aussi en positionnement absolu : -<pre>p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; -}</pre> + p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + } -<p>A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe <code>.positioned</code> original, là où les deux se chevauchent. C'est parce que le paragraphe <code>.positioned</code> est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source.</p> +A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du cours normal des documents et positionné un peu au-dessus de l'endroit où il se trouvait à l'origine. Il est également empilé sous le paragraphe `.positioned` original, là où les deux se chevauchent. C'est parce que le paragraphe `.positioned` est le deuxième paragraphe dans l'ordre du code source ; les éléments positionnés en dernier dans l'ordre du code source l'emportent sur les éléments positionnés plus en amont dans l'ordre du code source. -<p>Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe <strong>z</strong>. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas).</p> +Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe **z**. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas). -<p>Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un <code>z-index</code> <code>auto</code>, qui est effectivement 0.</p> +Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index` `auto`, qui est effectivement 0. -<p>Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle <code>p:nth-of-type(1)</code> :</p> +Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle `p:nth-of-type(1)` : -<pre>z-index: 1;</pre> + z-index: 1; -<p>Voici maintenant l'exemple terminé :</p> +Voici maintenant l'exemple terminé : -<pre class="brush: html hidden"><h1>z-index</h1> +```html hidden +<h1>z-index</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code>&lt;body&gt;</code>, et non par rapport à l'élément <code>&lt;html&lt;html&gt;</code> !</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> -</pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Maintenant je suis positionné de manière absolue par rapport à l'élément <code><body></code>, et non par rapport à l'élément <code><html<html></code> !</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; position: relative; } @@ -276,59 +282,60 @@ p:nth-of-type(1) { top: 10px; right: 30px; z-index: 1; } -</pre> +``` -<p>{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }}</p> +{{ EmbedLiveSample('Présentation_du_z-index', '100%', 400) }} -<p>Notez que <code>z-index</code> n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000.</p> +Notez que `z-index` n'accepte que des valeurs d'index sans unité ; vous ne pouvez pas préciser que vous voulez qu'un élément soit à 23 pixels sur l'axe des z — cela ne fonctionne pas ainsi. Les plus grandes valeurs vont au‑dessus des valeurs plus faibles et c'est à vous d'indiquer les valeurs. Utiliser 2 et 3 aura le même effet que 300 et 40000. -<div class="note"> -<p><strong>Note :</strong> sur ce sujet, vous pouvez voir l'exemple <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">voir le code source</a>).</p> -</div> +> **Note :** sur ce sujet, vous pouvez voir l'exemple [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)). -<h3 id="Positionnement_«_fixed_»">Positionnement « fixed »</h3> +### Positionnement « fixed » -<p>Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants.</p> +Voyons maintenant le positionnement « fixed ». Cela fonctionne exactement de la même manière que le positionnement absolu, avec une différence essentielle : alors que le positionnement absolu fixe un élément en place par rapport à l'élément {{htmlelement("html")}} ou son parent positionné le plus proche, le positionnement « fixed » fige un élément en place par rapport à la vue par la fenêtre du navigateur elle-même. Cela signifie que vous pouvez créer des éléments d'interface utilisateur utiles qui sont fixés en place, comme des menus de navigation persistants. -<p>Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de <code>p:nth-of-type(1)</code> et <code>.positioned</code> de la CSS.</p> +Voici un exemple simple pour montrer ce que nous voulons dire. D'abord, supprimez la règle de `p:nth-of-type(1)` et `.positioned` de la CSS. -<p>Maintenant, mettez à jour la règle <code>body</code> : supprimez la déclaration <code>position : relative ;</code> et ajoutez une hauteur fixe, ainsi :</p> +Maintenant, mettez à jour la règle `body` : supprimez la déclaration `position : relative ;` et ajoutez une hauteur fixe, ainsi : -<pre>body { - width: 500px; - height: 1400px; - margin: 0 auto; -}</pre> + body { + width: 500px; + height: 1400px; + margin: 0 auto; + } -<p>Maintenant, donnez la position <code>fixed</code> à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS :</p> +Maintenant, donnez la position `fixed` à l'élément {{htmlelement("h1")}} et centrez‑le en haut de la fenêtre. Ajoutez la règle suivante à la CSS : -<pre>h1 { - position: fixed; - top: 0; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -}</pre> + h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; + } -<p><code>top: 0;</code> est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique <code>margin: 0 auto;</code> pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui.</p> +`top: 0;` est requis pour qu'il colle au haut de l'écran ; ensuite nous donnons au titre d'en‑tête la même largeur que la colonne de contenu et utilisons la vieille astuce classique `margin: 0 auto;` pour le centrer. Nous mettons ensuite un fond blanc et un peu de remplissage pour que le contenu ne soit pas visible sous lui. -<p>Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant :</p> +Si vous enregistrez et actualisez maintenant, vous verrez un petit effet amusant par lequel le titre reste fixe et le contenu semble défiler vers le haut et disparaître en dessous. Mais nous pouvons l'améliorer davantage — actuellement, une partie du contenu commence sous l'en‑tête. En effet, l'en-tête positionné n'apparaît plus dans le cours du document, de sorte que le reste du contenu se déplace vers le haut. Nous devons tout baisser un peu ; nous pouvons le faire en fixant une marge supérieure sur le premier paragraphe. Ajoutez ceci maintenant : -<pre>p:nth-of-type(1) { - margin-top: 60px; -}</pre> + p:nth-of-type(1) { + margin-top: 60px; + } -<p>Voici l'exemple terminé :</p> +Voici l'exemple terminé : -<pre class="brush: html hidden"><h1>Positionnement fixe</h1> +```html hidden +<h1>Positionnement fixe</h1> -<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> -<p class="positioned">Je ne suis plus positionné...</p> -<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p></pre> +<p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> +<p class="positioned">Je ne suis plus positionné...</p> +<p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -357,32 +364,33 @@ h1 { p:nth-of-type(1) { margin-top: 60px; -}</pre> - -<p>{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }}</p> +} +``` -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">code source</a>).</p> -</div> +{{ EmbedLiveSample('Positionnement_«_fixed_»', '100%', 400) }} -<h3 id="«_position_sticky_»">« position: sticky »</h3> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). -<p>Il y a une autre valeur de positionnement disponible appelée <code>position : sticky</code>. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page.</p> +### « position: sticky » +Il y a une autre valeur de positionnement disponible appelée `position : sticky`. Elle est un peu plus récente que les autres. Il s'agit essentiellement d'un hybride entre position relative et position fixe : l'élément à positionner est en positionnement relatif jusqu'à un certain seuil (par ex. 10px du haut de la fenêtre), seuil au delà duquel il est en positionnement fixe. Ce positionnement s'utilise par exemple pour faire défiler une barre de navigation avec la page jusqu'à un certain point et ensuite coller en haut de la page. -<h4>Exemple simple</h4> +#### Exemple simple -<pre class="brush: html hidden"><h1>Positionnement collant</h1> +```html hidden +<h1>Positionnement collant</h1> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> -<div class="positioned">Collant : relatif en deça, fixe au delà</div> +<div class="positioned">Collant : relatif en deça, fixe au delà</div> -<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> -<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; margin: 0 auto; } @@ -393,55 +401,59 @@ p:nth-of-type(1) { padding: 10px; margin: 10px; border-radius: 5px; -}</pre> +} +``` -<pre class="brush: css">.positioned { +```css +.positioned { position: sticky; top: 30px; left: 30px; -}</pre> - - -<p>{{ EmbedLiveSample('Exemple_simple', '100%', 200) }}</p> - -<h4>Index déroulant</h4> - -<p>Une utilisation courante pleine d'intérêt de <code>position: sticky</code> permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci :</p> - -<pre class="brush: html"><h1>Positionnement collant</h1> - -<dl> - <dt>A</dt> - <dd>Abeille</dd> - <dd>Abricot</dd> - <dd>Altimètre</dd> - <dd>Avion</dd> - <dt>B</dt> - <dd>Banane</dd> - <dd>Betterave</dd> - <dd>Bœuf</dd> - <dd>Bouvreuil</dd> - <dd>Buzzard</dd> - <dt>C</dt> - <dd>Calculateur</dd> - <dd>Camera</dd> - <dd>Cane</dd> - <dd>Chameau</dd> - <dt>D</dt> - <dd>Dime</dd> - <dd>Dindon</dd> - <dd>Drapeau</dd> - <dd>Drone</dd> - <dt>E</dt> - <dd>Eau</dd> - <dd>Éléphant</dd> - <dd>Escadrille</dd> -</dl> -</pre> - -<p>Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute <code>position : sticky</code> à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile.</p> - -<pre class="brush: css">dt { +} +``` + +{{ EmbedLiveSample('Exemple_simple', '100%', 200) }} + +#### Index déroulant + +Une utilisation courante pleine d'intérêt de `position: sticky` permet de créer une page d'index déroulante dans laquelle les divers en‑tête restent collés en haut de la page une fois qu'ils l'ont atteint. Le balisage d'un exemple de ce type ressemble à ceci : + +```html +<h1>Positionnement collant</h1> + +<dl> + <dt>A</dt> + <dd>Abeille</dd> + <dd>Abricot</dd> + <dd>Altimètre</dd> + <dd>Avion</dd> + <dt>B</dt> + <dd>Banane</dd> + <dd>Betterave</dd> + <dd>Bœuf</dd> + <dd>Bouvreuil</dd> + <dd>Buzzard</dd> + <dt>C</dt> + <dd>Calculateur</dd> + <dd>Camera</dd> + <dd>Cane</dd> + <dd>Chameau</dd> + <dt>D</dt> + <dd>Dime</dd> + <dd>Dindon</dd> + <dd>Drapeau</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Eau</dd> + <dd>Éléphant</dd> + <dd>Escadrille</dd> +</dl> +``` + +Le CSS pourrait ressembler à ce qui suit. Dans le cours normal, les éléments {{htmlelement("dt")}} défilent avec le contenu. Quand on ajoute `position : sticky` à l'élément {{htmlelement("dt")}} avec une valeur {{cssxref("top")}} de 0, les navigateurs prenant en charge ce positionnement colleront les titres au sommet de la vue de la fenêtre au fur et à mesure qu'ils atteignent cette position. Chaque en-tête suivant remplacera l'en-tête précédent au fur et à mesure que le contenu défile. + +```css +dt { background-color: black; color: white; padding: 10px; @@ -450,9 +462,10 @@ p:nth-of-type(1) { left: 0; margin: 1em 0; } -</pre> +``` -<pre class="brush: css hidden">body { +```css hidden +body { width: 500px; height: 1400px; margin: 0 auto; @@ -467,38 +480,32 @@ dt { left: 0; margin: 1em 0; } -</pre> +``` -<p>{{ EmbedLiveSample('Index_déroulant', '100%', 200) }}</p> +{{ EmbedLiveSample('Index_déroulant', '100%', 200) }} -<div class="note"> -<p><strong>Note :</strong> à ce stade de l'article, vous pouvez voir un exemple en direct ici <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (voir le <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">code</a> <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">source</a>).</p> -</div> +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) (voir le [code](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html) [source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté.</p> +Je suis sûr que vous avez eu du plaisir à jouer avec le positionnement de base ; bien que ce ne soit pas une méthode à utiliser pour des mises en page complètes, comme vous pouvez le voir il y a beaucoup de tâches pour lesquelles il est adapté. -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Référence de la propriété {{cssxref("position")}}.</li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pratiques de positionnement</a>, pour quelques idées utiles supplémentaires.</li> -</ul> +- Référence de la propriété {{cssxref("position")}}. +- [Exemples pratiques de positionnement](/fr/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), pour quelques idées utiles supplémentaires. -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> -</ul> +- [Introduction to CSS layout](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Normal Flow](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Floats](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positioning](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Multiple-column Layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Legacy Layout Methods](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Supporting older browsers](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Fundamental Layout Comprehension Assessment](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md index b496e93796..bcdd6003da 100644 --- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md @@ -4,83 +4,85 @@ slug: Learn/CSS/CSS_layout/Practical_positioning_examples translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples original_slug: Apprendre/CSS/CSS_layout/Exemples_pratiques_de_positionnement --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement.</p> +Cet article illustre comment construire quelques exemples concrets de ce qu'on peut réaliser avec le positionnement. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Les fondamentaux en HTML (étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction au HTML</a>), et une idée du fonctionnement du CSS (étudier <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Avoir une idée des aspects pratiques du positionnement</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Les fondamentaux en HTML (étudier + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Une introduction au HTML</a + >), et une idée du fonctionnement du CSS (étudier + <a href="/fr/docs/Learn/CSS/First_steps">Une introduction à CSS</a>.) + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Avoir une idée des aspects pratiques du positionnement</td> + </tr> + </tbody> </table> -<h2 id="Une_boîte_dinformation_à_onglets">Une boîte d'information à onglets</h2> +## Une boîte d'information à onglets -<p>Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :</p> +Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé : -<p><img alt="" src="tabbed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances.</p> +On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances. -<div class="note"> -<p><strong>Note :</strong> Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que <a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple.</p> -</div> +> **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple. -<p>Pour commencer, effectuez une copie locale du fichier HTML de départ — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page :</p> +Pour commencer, effectuez une copie locale du fichier HTML de départ — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Enregistrez ce fichier dans un endroit approprié sur votre ordinateur et ouvrez-le dans votre éditeur de texte. Examinons le HTML contenu dans le corps de cette page : -<pre class="brush: html"> -<section class="info-box"> - <ul> - <li><a href="#" class="active">Onglet 1</a></li> - <li><a href="#">Onglet 2</a></li> - <li><a href="#">Onglet 3</a></li> - </ul> - <div class="panels"> - <article class="active-panel"> - <h2>Premier onglet</h2> +```html +<section class="info-box"> + <ul> + <li><a href="#" class="active">Onglet 1</a></li> + <li><a href="#">Onglet 2</a></li> + <li><a href="#">Onglet 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>Premier onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> - </article> - <article> - <h2>Deuxième onglet</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>Deuxième onglet</h2> - <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> - </article> - <article> - <h2>Troisième onglet</h2> + <p>Cet onglet ne contient pas de Lorem Ipsum, mais bon c'est aussi peu intéressant que les autres onglets.</p> + </article> + <article> + <h2>Troisième onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> - <ol> - <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> - <li>Aliquam ut porttitor urna.</li> - <li>Nulla facilisi</li> - </ol> - </article> - </div> -</section> -</pre> + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section> +``` -<p>Nous avons un élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> avec une <code>class</code> <code>info-box</code>, qui contient un élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément <code>div</code> contient trois éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu.</p> +Nous avons un élément [`<section>`](/fr/docs/Web/HTML/Element/section) avec une `class` `info-box`, qui contient un élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) et un élément [`<div>`](/fr/docs/Web/HTML/Element/div). La liste non ordonnée contient trois éléments de liste avec des liens à l'intérieur, qui deviendront les véritables onglets sur lesquels il faudra cliquer pour afficher nos panneaux de contenu. L'élément `div` contient trois éléments [`<article>`](/fr/docs/Web/HTML/Element/article), qui constitueront les panneaux de contenu correspondant à chaque onglet. Chaque panneau contient un échantillon de contenu. -<p>L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre <a href="/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics">quelques bases de JavaScript</a> dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées.</p> +L'idée ici est que nous allons donner aux onglets l'aspect d'un menu de navigation horizontal standard, et que nous allons donner aux panneaux l'aspect d'être superposés en utilisant un positionnement absolu. Nous vous donnerons également un peu de JavaScript à inclure dans votre page pour afficher le panneau correspondant lorsqu'on clique sur un des onglets, et nous donnerons un style à l'onglet lui-même. Vous n'aurez pas besoin de comprendre le JavaScript lui-même à ce stade, mais vous devriez penser à apprendre [quelques bases de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics) dès que possible - plus les fonctionnalités de votre interface utilisateur deviendront complexes, plus il est probable que vous aurez besoin de JavaScript pour implémenter les fonctionnalités souhaitées. -<h3 id="Configuration_générale">Configuration générale</h3> +### Configuration générale -<p>Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Pour commencer, ajoutez ce qui suit entre les balises ouvrantes et fermantes [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css html { font-family: sans-serif; } @@ -92,41 +94,40 @@ html { body { margin: 0; } -</pre> +``` -<p>Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle <code>border-box</code> <a href="/fr/docs/Web/CSS/box-sizing"><code>box-sizing</code></a>, pour surcharger la marge par défaut de <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</p> +Il s'agit uniquement d'une configuration générale pour définir une police sans serif sur notre page, utiliser le modèle `border-box` [`box-sizing`](/fr/docs/Web/CSS/box-sizing), pour surcharger la marge par défaut de [`<body>`](/fr/docs/Web/HTML/Element/body). -<p>Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent :</p> +Ensuite, ajoutez ce qui suit en dessous de votre CSS précédent : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; margin: 0 auto; } -</pre> +``` -<p>Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce <code>margin: 0 auto</code>. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs.</p> +Cela définit une largeur et une hauteur spécifiques sur le contenu, et le centre sur l'écran en utilisant l'ancienne astuce `margin: 0 auto`. Précédemment dans le cours, nous avons déconseillé de définir une hauteur fixe sur les conteneurs de contenu si possible. Nous dérogeons à cette règle ici, car nous avons un contenu fixe dans les onglets. De plus, il serait déconcertant d'avoir des onglets différents avec différentes hauteurs. -<h3 id="Mettre_en_forme_les_onglets">Mettre en forme les onglets</h3> +### Mettre en forme les onglets -<p>On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de <a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a> et <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> pour la liste non-ordonnée :</p> +On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée : -<pre class="brush: css"> +```css .info-box ul { padding-left: 0; margin-top: 0; -}</pre> +} +``` -<div class="note"> - <p><strong>Note :</strong> On utilise ici un sélecteur de descendants avec <code>.info-box</code> au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant.</p> -</div> +> **Note :** On utilise ici un sélecteur de descendants avec `.info-box` au début du sélecteur et pour tout cet exemple afin qu'on puisse insérer cette fonctionnalité dans une page possédant déjà un autre contenu, sans risquer de causer des interférences avec le style déjà existant. -<p>Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a> est placée à <code>none</code> afin de ne plus avoir les puces et <a href="/fr/docs/Web/CSS/width"><code>width</code></a> vaut <code>150px</code> afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> ont <a href="/fr/docs/Web/CSS/display"><code>display</code></a> avec la valeur <code>inline-block</code> afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés.</p> +Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés. -<p>Ajoutez le fragment de CSS qui suit :</p> +Ajoutez le fragment de CSS qui suit : -<pre class="brush: css"> +```css .info-box li { float: left; list-style-type: none; @@ -142,11 +143,11 @@ body { color: black; text-align: center; } -</pre> +``` -<p>Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états <code>:focus</code> et <code>:hover</code> afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut <code>class</code> avec la valeur <code>active</code> est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites :</p> +Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites : -<pre class="brush: css"> +```css .info-box li a:focus, .info-box li a:hover { background-color: #a60000; color: white; @@ -156,27 +157,27 @@ body { background-color: #a60000; color: white; } -</pre> +``` -<h3 id="Mettre_en_forme_les_panneaux">Mettre en forme les panneaux</h3> +### Mettre en forme les panneaux -<p>La suite consiste à mettre en forme les panneaux de contenu. Allons-y !</p> +La suite consiste à mettre en forme les panneaux de contenu. Allons-y ! -<p>Pour commencer, ajoutez la règle suivante qui met en forme le conteneur <code>.panels</code> <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. Ici, on définit une hauteur fixe avec <a href="/fr/docs/Web/CSS/height"><code>height</code></a> afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>relative</code> sur l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a>) pour la mise en forme. Enfin, on utilise <a href="/fr/docs/Web/CSS/clear"><code>clear</code></a> pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition.</p> +Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panels` [`<div>`](/fr/docs/Web/HTML/Element/div). Ici, on définit une hauteur fixe avec [`height`](/fr/docs/Web/CSS/height) afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit [`position`](/fr/docs/Web/CSS/position) `relative` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément [`<html>`](/fr/docs/Web/HTML/Element/html)) pour la mise en forme. Enfin, on utilise [`clear`](/fr/docs/Web/CSS/clear) pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition. -<pre class="brush: css"> +```css .info-box .panels { height: 352px; position: relative; clear: both; } -</pre> +``` -<p>Dans cette section, nous allons mettre en forme les éléments <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> qui forment les panneaux. La première règle va fixer <a href="/fr/docs/Web/CSS/position"><code>position</code></a> absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/left"><code>left</code></a>. C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte (<a href="/fr/docs/Web/CSS/color"><code>color</code></a>), ainsi qu'une couleur d'arrière-plan (<a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>).</p> +Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)). -<p>La deuxième règle ajoutée indique qu'un panneau avec une classe (<code>class</code>) valant <code>active-panel</code> aura une valeur de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un <code>z-index</code> qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript.</p> +La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript. -<pre class="brush: css"> +```css .info-box article { position: absolute; top: 0; @@ -190,109 +191,101 @@ body { .info-box .active-panel { z-index: 1; } -</pre> +``` -<h3 id="Ajouter_notre_JavaScript">Ajouter notre JavaScript</h3> +### Ajouter notre JavaScript -<p>La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> (elles se situent après le contenu HTML) :</p> +La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) : -<pre class="brush: js"> +```js let tabs = document.querySelectorAll('.info-box li a'); let panels = document.querySelectorAll('.info-box article'); -for(let i = 0; i < tabs.length; i++) { +for(let i = 0; i < tabs.length; i++) { let tab = tabs[i]; setTabHandler(tab, i); } function setTabHandler(tab, tabPos) { tab.onclick = function() { - for(let i = 0; i < tabs.length; i++) { + for(let i = 0; i < tabs.length; i++) { tabs[i].className = ''; } tab.className = 'active'; - for(let i = 0; i < panels.length; i++) { + for(let i = 0; i < panels.length; i++) { panels[i].className = ''; } panels[tabPos].className = 'active-panel'; } } -</pre> +``` -<p>Ce code effectue les actions suivantes :</p> +Ce code effectue les actions suivantes : -<ul> - <li>Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées <code>tabs</code> et <code>panels</code> afin qu'on puisse facilement les manipuler par la suite.</li> - <li>Ensuite, on utilise une boucle <code>for</code> pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée <code>setTabHandler()</code> qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice <code>i</code> qui identifie la position de l'onglet dans le tableau <code>tabs</code>.</li> - <li>Dans la fonction <code>setTabHandler()</code>, l'onglet se voit affecter un gestionnaire d'évènement <code>onclick</code>. Ainsi dès qu'on clique sur un onglet, on a : - <ul> - <li>Une boucle <code>for</code> qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux.</li> - <li>Une classe (<code>class</code>) <code>active</code> qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'onglet afin que celles-ci correspondent aux couleurs du panneau.</li> - <li>Une boucle <code>for</code> qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux.</li> - <li>Une classe <code>active-panel</code> qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1, afin de faire apparaître ce panneau par-dessus les autres.</li> - </ul> - </li> -</ul> +- Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées `tabs` et `panels` afin qu'on puisse facilement les manipuler par la suite. +- Ensuite, on utilise une boucle `for` pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée `setTabHandler()` qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice `i` qui identifie la position de l'onglet dans le tableau `tabs`. +- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a : + + - Une boucle `for` qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux. + - Une classe (`class`) `active` qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur l'onglet afin que celles-ci correspondent aux couleurs du panneau. + - Une boucle `for` qui parcourt tous les panneaux afin de retirer toute classe qui serait présente sur eux. + - Une classe `active-panel` qui est appliquée sur le panneau correspondant à l'onglet. Cela permet d'appliquer la règle CSS vue plus haut qui définit [`z-index`](/fr/docs/Web/CSS/z-index) à 1, afin de faire apparaître ce panneau par-dessus les autres. -<p>Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple.</p> +Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allons le modifier pour construire le deuxième exemple. -<h2 id="Une_boîte_d'information_à_onglets_avec_une_position_fixe">Une boîte d'information à onglets avec une position fixe</h2> +## Une boîte d'information à onglets avec une position fixe -<p>Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :</p> +Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à : -<p><img alt="" src="fixed-info-box.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> depuis le dépôt GitHub.</p> +Comme point de départ, vous pouvez utiliser l'exemple construit dans la première section de cet article ou enregistrer sur votre ordinateur le fichier [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) depuis le dépôt GitHub. -<h3 id="Ajouts_au_HTML">Ajouts au HTML</h3> +### Ajouts au HTML -<p>Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section (<a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>) suivante juste après la balise ouvrante <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et avant la section existante :</p> +Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante : -<pre class="brush: html"> -<section class="fake-content"> - <h1>Faux contenu</h1> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> - <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> -</section> -</pre> +```html +<section class="fake-content"> + <h1>Faux contenu</h1> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> + <p>Du contenu imaginaire. Le contenu principal de votre page web se situerait probablement ici.</p> +</section> +``` -<div class="note"> -<p><strong>Note :</strong> N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez.</p> -</div> +> **Note :** N'hésitez pas à changer ce contenu imaginaire par du contenu concret si vous le souhaitez. -<h3 id="Modifications_au_CSS_existant">Modifications au CSS existant</h3> +### Modifications au CSS existant -<p>Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant <code>.info-box</code> afin de se débarrasser de <code>margin: 0 auto;</code> (on ne veut plus que la boîte soit centrée) et d'ajouter <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> avant de l'attacher au haut de la zone d'affichage du navigateur avec <a href="/fr/docs/Web/CSS/top"><code>top</code></a>.</p> +Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant `.info-box` afin de se débarrasser de `margin: 0 auto;` (on ne veut plus que la boîte soit centrée) et d'ajouter [`position`](/fr/docs/Web/CSS/position)`: fixed;` avant de l'attacher au haut de la zone d'affichage du navigateur avec [`top`](/fr/docs/Web/CSS/top). -<p>Voici ce à quoi ça devrait ressembler :</p> +Voici ce à quoi ça devrait ressembler : -<pre class="brush: css"> +```css .info-box { width: 450px; height: 400px; position: fixed; top: 0; } -</pre> +``` -<h3 id="Mettre_en_forme_le_contenu_principal">Mettre en forme le contenu principal</h3> +### Mettre en forme le contenu principal -<p>Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant :</p> +Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant : -<pre class="brush: css"> +```css .fake-content { background-color: #a60000; color: white; @@ -300,51 +293,47 @@ function setTabHandler(tab, tabPos) { height: 2000px; margin-left: 470px; } -</pre> +``` -<p>Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>, <a href="/fr/docs/Web/CSS/color"><code>color</code></a>, et le même remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a>) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste.</p> +Pour commencer, on utilise la même couleur de texte et d'arrière-plan avec [`background-color`](/fr/docs/Web/CSS/background-color), [`color`](/fr/docs/Web/CSS/color), et le même remplissage ([`padding`](/fr/docs/Web/CSS/padding)) que pour les panneaux de la boîte d'information. On applique ensuite une marge à gauche suffisante ([`margin-left`](/fr/docs/Web/CSS/margin-left)) pour décaler le contenu à droite afin de créer suffisamment d'espace pour la boîte d'information pour que celle-ci ne recouvre pas le reste. -<p>Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile.</p> +Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera tout aussi utile. -<h2 id="Un_panneau_glissant_masqué">Un panneau glissant masqué</h2> +## Un panneau glissant masqué -<p>Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile.</p> +Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile. -<p>Voilà ce à quoi ressemblera notre exemple terminé :</p> +Voilà ce à quoi ressemblera notre exemple terminé : -<p><img alt="" src="hidden-sliding-panel.png"></p> + -<div class="note"> -<p><strong>Note :</strong> Vous pouvez voir l'exemple fini en démonstration sur la page <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">code source</a>). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire.</p> -</div> +> **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -<p>Pour commencer, enregistrez le fichier <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier :</p> +Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier : -<pre class="brush: html"> -<label for="toggle">❔</label> -<input type="checkbox" id="toggle"> -<aside> +```html +<label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> ... -</aside> -</pre> +</aside> +``` -<p>Pour commencer, nous avons un élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> et un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>. Les éléments <code><label></code> sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher <code><input></code> grâce aux attributs <code>for</code> et <code>id</code>.</p> +Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`. -<div class="note"> -<p><strong>Note :</strong> Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau.</p> -</div> +> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau. -<p>Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments <code><label></code> est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse <a href="https://css-tricks.com/the-checkbox-hack/">bidouille de la case à cocher</a> qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a> qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision).</p> +Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision). -<p>Dans les sections qui suivent, nous expliquerons comment cela fonctionne.</p> +Dans les sections qui suivent, nous expliquerons comment cela fonctionne. -<h3 id="Mettre_en_forme_les_éléments_de_formulaire">Mettre en forme les éléments de formulaire</h3> +### Mettre en forme les éléments de formulaire -<p>Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> :</p> +Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) : -<pre class="brush: css"> +```css label[for="toggle"] { font-size: 3rem; position: absolute; @@ -358,24 +347,22 @@ input[type="checkbox"] { position: absolute; top: -100px; } -</pre> +``` -<p>La première règle met en forme <code><label></code>, on y trouve :</p> +La première règle met en forme `<label>`, on y trouve : -<ul> - <li>Une taille de police (<a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>) élevée afin que l'icône soit bien visible.</li> - <li>Une <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> avec des définitions pour <a href="/fr/docs/Web/CSS/top"><code>top</code></a> et <a href="/fr/docs/Web/CSS/right"><code>right</code></a> qui permettent de positionner l'icône dans le coin supérieur droit.</li> - <li>Une définition de <a href="/fr/docs/Web/CSS/z-index"><code>z-index</code></a> à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information.</li> - <li>Une propriété <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant.</li> -</ul> +- Une taille de police ([`font-size`](/fr/docs/Web/CSS/font-size)) élevée afin que l'icône soit bien visible. +- Une [`position`](/fr/docs/Web/CSS/position) `absolute` avec des définitions pour [`top`](/fr/docs/Web/CSS/top) et [`right`](/fr/docs/Web/CSS/right) qui permettent de positionner l'icône dans le coin supérieur droit. +- Une définition de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 afin que, lorsque le panneau d'information est montré, il ne recouvre pas l'icône mais que celle-ci soit toujours affichée afin de pouvoir l'utiliser pour masquer le panneau d'information. +- Une propriété [`cursor`](/fr/docs/Web/CSS/cursor) pour changer le curseur de la souris au survol de l'icône afin que le curseur prenne la forme d'une main (la même que celle utilisée par défaut au survol des liens). Cela fournit une indication visuelle supplémentaire comme quoi l'icône fait quelque chose d'intéressant. -<p>La deuxième règle applique <a href="/fr/docs/Web/CSS/position"><code>position</code></a> <code>absolute</code> sur la case à cocher <code><input></code> et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur.</p> +La deuxième règle applique [`position`](/fr/docs/Web/CSS/position) `absolute` sur la case à cocher `<input>` et la masquer en haut de l'écran, car on ne veut pas l'afficher sur l'interface utilisateur. -<h3 id="Mettre_en_forme_le_panneau">Mettre en forme le panneau</h3> +### Mettre en forme le panneau -<p>Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS :</p> +Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS : -<pre class="brush: css"> +```css aside { background-color: #a60000; color: white; @@ -390,49 +377,55 @@ aside { transition: 0.6s all; } -</pre> +``` -<p>Il y a plusieurs déclarations ici, voyons-les au fur et à mesure :</p> +Il y a plusieurs déclarations ici, voyons-les au fur et à mesure : -<ul> - <li>Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</li> - <li>Ensuite, on définit une largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) fixe sur le panneau et on définit la hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) afin que celle-ci occupe la hauteur de toute la zone d'affichage.</li> - <li>On ajoute également du remplissage (<a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>) horizontal pour espacer légèrement.</li> - <li>Ensuite, on utilise <a href="/fr/docs/Web/CSS/position"><code>position</code></a><code>: fixed;</code> sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut (<a href="/fr/docs/Web/CSS/top"><code>top</code></a>) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite (<a href="/fr/docs/Web/CSS/right"><code>right</code></a>) et en dehors de l'écran.</li> - <li>Enfin, on applique une <a href="/fr/docs/Web/CSS/transition"><code>transition</code></a> sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran.</li> -</ul> +- Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec [`background-color`](/fr/docs/Web/CSS/background-color) et [`color`](/fr/docs/Web/CSS/color). +- Ensuite, on définit une largeur ([`width`](/fr/docs/Web/CSS/width)) fixe sur le panneau et on définit la hauteur ([`height`](/fr/docs/Web/CSS/height)) afin que celle-ci occupe la hauteur de toute la zone d'affichage. +- On ajoute également du remplissage ([`padding`](/fr/docs/Web/CSS/padding)) horizontal pour espacer légèrement. +- Ensuite, on utilise [`position`](/fr/docs/Web/CSS/position)`: fixed;` sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut ([`top`](/fr/docs/Web/CSS/top)) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite ([`right`](/fr/docs/Web/CSS/right)) et en dehors de l'écran. +- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran. -<h3 id="Définir_l'état_coché">Définir l'état coché</h3> +### Définir l'état coché -<p>Voici le dernier fragment de CSS à ajouter, là encore à la fin :</p> +Voici le dernier fragment de CSS à ajouter, là encore à la fin : -<pre class="brush: css"> +```css input[type=checkbox]:checked + aside { right: 0px; } -</pre> +``` + +Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau. + +Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter. + +## Résumé + +Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>. + +## Dans ce module + +- [Introduction aux dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Flux normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Boîtes flexibles (flexbox)](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Flottements](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition à plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<p>Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément <code><aside></code> adjacent à l'élément <code><input></code>, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe <a href="/fr/docs/Web/CSS/:checked"><code>:checked</code></a>). Lorsque c'est le cas, on définit la propriété <a href="/fr/docs/Web/CSS/right"><code>right</code></a> de l'élément <code><aside></code> à <code>0px</code>, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau.</p> + <i lang="en">responsive design</i> -<p>Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter.</p> + [Conception adaptative (<i lang="en">responsive design</i>)](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) -<h2 id="Résumé">Résumé</h2> +- [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<p>Et voici pour notre étude sur le positionnement. Vous devriez désormais avoir une idée des mécanismes de base et une compréhension nécessaire pour appliquer ces notions afin de construire des interfaces utilisateurs. Pas d'inquiétude si vous n'avez pas tout compris immédiatement, le positionnement est un sujet plutôt avancé et il est toujours possible de revenir sur ces articles afin d'aider à la compréhension par la suite. Le prochain sujet que nous aborderons portera sur les boîtes flexibles, aussi appelées <i lang="en">flexbox</i>.</p> + <i lang="en">media queries</i> -<h2 id="Dans_ce_module">Dans ce module</h2> + [Guide sur les requêtes de média (<i lang="en">media queries</i>)](/fr/docs/Learn/CSS/CSS_layout/Media_queries) -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction aux dispositions CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Flux normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Boîtes flexibles (flexbox)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grilles CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Flottements</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition à plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Conception adaptative (<i lang="en">responsive design</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide sur les requêtes de média (<i lang="en">media queries</i>)</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de disposition historiques</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prendre en charge les anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Évaluation pour la compréhension des fondamentaux des dispositions CSS</a></li> -</ul> +- [Méthodes de disposition historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prendre en charge les anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Évaluation pour la compréhension des fondamentaux des dispositions CSS](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 312eea3059..87fefdde89 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -13,205 +13,207 @@ tags: translation_of: Learn/CSS/CSS_layout/Responsive_Design original_slug: Apprendre/CSS/CSS_layout/Responsive_Design --- -<div>{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</div> +{{learnsidebar}}{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<p>Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de <em>responsive web design</em> (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.</p> +Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de _responsive web design_ (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Les bases du HTML (étudier <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction au HTML</a>), et une idée du fonctionnement du CSS (édutier <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Comprendre les concepts fondamentaux et l'histoire du responsive design.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Les bases du HTML (étudier + <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement du CSS (édutier + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas en CSS</a> et + <a href="/fr/docs/Apprendre/CSS/Building_blocks">Blocs de base en CSS</a + >.) + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + Comprendre les concepts fondamentaux et l'histoire du responsive design. + </td> + </tr> + </tbody> </table> -<h2 id="Historique_de_la_mise_en_page_des_sites_Web">Historique de la mise en page des sites Web</h2> +## Historique de la mise en page des sites Web -<p>A une époque, vous aviez deux options pour concevoir un site Web :</p> +A une époque, vous aviez deux options pour concevoir un site Web : -<ul> - <li>Vous pourriez créer un <em>site liquide</em>, qui s'étirerait pour remplir la fenêtre du navigateur</li> - <li>ou un site <em>à largeur fixe</em>, qui aurait une taille fixe en pixels.</li> -</ul> +- Vous pourriez créer un _site liquide_, qui s'étirerait pour remplir la fenêtre du navigateur +- ou un site _à largeur fixe_, qui aurait une taille fixe en pixels. -<p>Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands.</p> +Ces deux approches donnaient lieu à un site Web qui avait fière allure sur l'écran de la personne qui le concevait ! Les site liquides avaient pour résultat un design écrasé sur les petits écrans (comme on le voit ci-dessous) et des longueurs de lignes illisibles sur les plus grands. -<img alt="Une mise en page avec deux colonnes écrasées dans une fenêtre de taille mobile." src="mdn-rwd-liquid.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cette simple mise en page "liquide" : <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">code source</a>. Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles.</p> -</div> +> **Note :** Voir cette simple mise en page "liquide" : [exemple](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html). Lorsque vous regardez l'exemple, faites glisser la fenêtre de votre navigateur vers l'intérieur et vers l'extérieur pour voir comment cela se présente en fonction des différentes tailles. -<p>Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands.</p> +Les sites à largeur fixe risquaient d'avoir une barre de défilement horizontale sur les écrans plus petits que la largeur du site (comme on le voit ci-dessous), et beaucoup d'espace blanc sur les bords sur les écrans plus grands. -<img alt="Une mise en page avec une barre de défilement horizontale dans une fenêtre de visualisation mobile." src="mdn-rwd-fixed.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cette simple mise en page à largeur fixe : <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">code source</a>. Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur.</p> -</div> +> **Note :** Voir cette simple mise en page à largeur fixe : [exemple](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Là encore, observez le résultat lorsque vous modifiez la taille de la fenêtre du navigateur. -<div class="note"> -<p><strong>Note :</strong> Les captures d'écran ci-dessus sont réalisées à l'aide de la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a> de la boîte à outils de Firefox.</p> -</div> +> **Note :** Les captures d'écran ci-dessus sont réalisées à l'aide de la [Vue adaptative](/fr/docs/Outils/Vue_adaptative) de la boîte à outils de Firefox. -<p>Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour.</p> +Lorsque le web mobile a commencé à devenir une réalité avec les premiers téléphones à fonctions, les entreprises qui souhaitaient adopter le mobile créaient généralement une version mobile spéciale de leur site, avec une URL différente (souvent quelque chose comme m.example.com, ou example.mobi). Cela signifiait qu'il fallait développer deux versions distinctes du site et les tenir à jour. -<p>De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site.</p> +De plus, ces sites mobiles offraient souvent une expérience très réduite. Les appareils mobiles devenant plus puissants et capables d'afficher des sites Web complets, cela était frustrant pour les utilisateurs mobiles qui se retrouvaient coincés dans la version mobile du site et incapables d'accéder à l'information qu'ils savaient disponible sur la version de bureau complète du site. -<h2 id="Mise_en_page_flexible_avant_le_responsive_design">Mise en page flexible avant le responsive design</h2> +## Mise en page flexible avant le responsive design -<p>Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Mise en page en fonction de la résolution</a>, décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS.</p> +Un certain nombre d'approches ont été développées pour tenter de résoudre les inconvénients des méthodes de construction de sites Web liquide et à largeur fixe. En 2004, Cameron Adams a écrit un article intitulé [Mise en page en fonction de la résolution](http://www.themaninblue.com/writing/perspective/2004/09/21/), décrivant une méthode de création de design pouvant s'adapter à différentes résolutions d'écran. Cette approche nécessitait l'utilisation de JavaScript pour détecter la résolution d'écran et charger la bonne CSS. -<p>Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille.</p> +Zoe Mickley Gillenwater a grandement contribué au travail de description et de formalisation des différentes façons de créer des sites flexibles, en essayant de trouver un juste milieu entre remplir l'écran ou être complètement fixe en taille. -<h2 id="Responsive_design">Responsive design</h2> +## Responsive design -<p>Le terme de responsive design a été <a href="https://alistapart.com/article/responsive-web-design/">inventé par Ethan Marcotte en 2010</a>, et décrit la combinaison de trois techniques.</p> +Le terme de responsive design a été [inventé par Ethan Marcotte en 2010](https://alistapart.com/article/responsive-web-design/), et décrit la combinaison de trois techniques. -<ol> - <li>La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publié en 2009 sur A List Apart).</li> - <li>La deuxième technique était l'idée <a href="http://unstoppablerobotninja.com/entry/fluid-images">d'images fluides</a>. En utilisant une technique très simple de réglage de la propriété <code>max-width</code> à <code>100%</code>, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image.</li> - <li>Le troisième élément clé était la <a href="/fr/docs/Web/CSS/Media_Queries">media query</a>. Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée.</li> -</ol> +1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, [Fluid Grids](https://alistapart.com/article/fluidgrids/) (publié en 2009 sur A List Apart). +2. La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image. +3. Le troisième élément clé était la [media query](/fr/docs/Web/CSS/Media_Queries). Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée. -<p>Il est important de comprendre que <strong>le responsive web design n'est pas une technologie à part</strong> - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives.<br> - <br> - Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif.</p> +Il est important de comprendre que **le responsive web design n'est pas une technologie à part** - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives. -<h2 id="Media_Queries">Media Queries</h2> +Le reste de cet article vous indiquera les différentes fonctionnalités de la plate-forme web que vous pourriez vouloir utiliser pour créer un site réactif. -<p>Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur.</p> +## Media Queries -<p>Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur <code>.container</code> ne sera appliqué que si ces deux éléments sont vrais.</p> +Le responsive design n'a pu voir le jour uniquement grâce aux média queries. La spécification de niveau 3 des média queries est devenue une Recommandation Candidate en 2009, ce qui signifie qu'elle a été jugée prête à être mise en œuvre dans les navigateurs. Les Media Queries nous permettent d'effectuer une série de tests (par exemple, si l'écran de l'utilisateur dépasse une certaine largeur, ou une certaine résolution) et d'appliquer le CSS de manière sélective pour donner à la page le style approprié aux besoins de l'utilisateur. -<pre class="brush: css"><code>@media screen and (min-width: 800px) { +Par exemple, la média query suivante teste si la page Web actuelle est affichée comme média d'écran (donc pas un document à imprimer) et si la fenêtre de visualisation a au moins 800 pixels de large. Le CSS du sélecteur `.container` ne sera appliqué que si ces deux éléments sont vrais. + +```css +@media screen and (min-width: 800px) { .container { margin: 1em 2em; } -} </code> -</pre> +} +``` -<p>Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt.</p> +Vous pouvez ajouter plusieurs medias queries dans une feuille de style, afin de modifier votre mise en page ou certaines de ses parties pour les adapter aux différentes tailles d'écran. Les endroits où une média query est introduite et où la mise en page est modifiée sont appelés points d'arrêt. -<p>Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité.</p> +Une approche courante lors de l'utilisation de Media Queries consiste à créer une disposition à colonne unique simple pour les appareils à écran étroit (par exemple les téléphones portables), puis à vérifier si les écrans sont plus grands et à mettre en œuvre une disposition à colonnes multiples lorsque vous savez que vous avez suffisamment de largeur d'écran pour la prendre en charge. Ceci est souvent décrit comme la conception mobile en priorité. -<p>Pour en savoir plus, consultez la documentation MDN pour les <a href="/fr/docs/Web/CSS/Media_Queries">Media Queries</a>.</p> +Pour en savoir plus, consultez la documentation MDN pour les [Media Queries](/fr/docs/Web/CSS/Media_Queries). -<h2 id="Grilles_flexibles">Grilles flexibles</h2> +## Grilles flexibles -<p>Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée.</p> +Les sites responsives ne se contentent pas de changer leur mise en page entre les points de rupture, ils sont construits sur des grilles flexibles. Une grille flexible signifie que vous n'avez pas besoin de cibler toutes les tailles d'appareils possibles et de construire une mise en page parfaite au pixel près. Cette approche serait impossible étant donné le grand nombre de dispositifs de tailles différentes qui existent, et le fait que sur les ordinateurs de bureau au moins, les gens n'ont pas toujours la fenêtre de leur navigateur maximisée. -<p>En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit.</p> +En utilisant une grille flexible, vous n'avez qu'à ajouter un point d'arrêt et à modifier le design au moment où le contenu commence à avoir une piètre apparence. Par exemple, si la longueur des lignes devient illisible à mesure que la taille de l'écran augmente, ou si une boîte se retrouve écrasée avec deux mots sur chaque ligne lorsqu'elle se rétrécit. -<p>Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser <a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">floats</a>. Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels.</p> +Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser [floats](/fr/docs/Apprendre/CSS/CSS_layout/Floats). Aux débuts du responsive design, notre seule option pour réaliser la mise en page était d'utiliser des flotteurs. Des mises en page flottantes flexibles ont été réalisées en donnant à chaque élément un pourcentage de largeur et en s'assurant que les totaux ne dépassent pas 100 % dans toute la mise en page. Dans sa publication originale sur les grilles fluides, Marcotte a détaillé une formule pour convertir en pourcentages une mise en page conçue à l'aide de pixels. -<pre><code>target / context = result </code> -</pre> + target / context = result -<p>Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite.</p> +Par exemple, si la taille de notre colonne cible est de 60 pixels et que le contexte (ou conteneur) dans lequel elle se trouve est de 960 pixels, nous divisons 60 par 960 pour obtenir une valeur que nous pouvons utiliser dans notre CSS, après avoir déplacé le point décimal de deux places vers la droite. -<pre class="brush: css"><code>.col { +```css +.col { width: 6.25%; /* 60 / 960 = 0.0625 */ -} </code> -</pre> +} +``` + +Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods). Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement. -<p>Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur <a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a>. Cette approche se retrouve aujourd'hui à de nombreux endroits sur le Web, et elle est documentée ici dans la section sur la mise en page de notre article sur les méthodes de mise en page héritées. Il est probable que vous rencontrerez des sites web utilisant cette approche dans votre travail, donc il est utile de la comprendre, même si vous ne construiriez pas un site moderne en utilisant une grille flexible basée sur le flottement.</p> +L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres : -<p>L'exemple suivant montre une conception simple et responsive en utilisant des médias queries et une grille flexible. Sur des écrans étroits, la mise en page affiche les boîtes entassées les unes sur les autres :<br> - </p> -<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="mdn-rwd-mobile.png"> -<p>Sur des écrans plus larges, ils se positionnent sur deux colonnes :</p> + -<img alt="A desktop view of a layout with two columns." src="mdn-rwd-desktop.png"> +Sur des écrans plus larges, ils se positionnent sur deux colonnes : -<div class="note"> -<p><strong>Note :</strong> Vous pouvez trouver l'<a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">exemple en direct</a> et le <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">code source</a> pour cet exemple sur GitHub.</p> -</div> + -<h2 id="Techniques_modernes_de_mise_en_page">Techniques modernes de mise en page</h2> +> **Note :** Vous pouvez trouver l'[exemple en direct](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) et le [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) pour cet exemple sur GitHub. -<p>Les méthodes de mise en page modernes telles que <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a>, <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, et <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a> sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire.</p> +## Techniques modernes de mise en page -<h3 id="Multicol">Multicol</h3> +Les méthodes de mise en page modernes telles que [Multiple-column layout](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox), et [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) sont responsives par défaut. Elles partent toutes du principe que vous essayez de créer une grille flexible et vous donnent des moyens plus faciles de le faire. -<p>La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un <code>column-count</code>, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran.</p> +### Multicol -<pre class="brush: css"><code>.container { +La plus ancienne de ces méthodes de mise en page est multicol — lorsque vous spécifiez un `column-count`, cela indique en combien de colonnes vous voulez que votre contenu soit divisé. Le navigateur calcule alors la taille de celles-ci, une taille qui changera en fonction de la taille de l'écran. + +```css +.container { column-count: 3; -} </code> -</pre> +} +``` -<p>Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible.</p> +Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur minimale. Le navigateur créera autant de colonnes de cette largeur qu'il en faudra pour que le conteneur soit parfaitement adapté, puis répartira l'espace restant entre toutes les colonnes. Par conséquent, le nombre de colonnes changera en fonction de l'espace disponible. -<pre class="brush: css"><code>.container { +```css +.container { column-width: 10em; -} </code> -</pre> +} +``` -<h3 id="Flexbox">Flexbox</h3> +### Flexbox -<p>Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de <code>flex-grow</code> et <code>flex-shrink</code> vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux.</p> +Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink` vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux. -<p>Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation <code>flex: 1</code> comme décrit dans la rubrique de mise en page <a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex">Flexbox: Taille modulable des éléments flex</a>.</p> +Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation `flex: 1` comme décrit dans la rubrique de mise en page [Flexbox: Taille modulable des éléments flex](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex). -<pre class="brush: css"><code>.container { +```css +.container { display: flex; } .item { flex: 1; -} </code> -</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">code source</a>.</p> -</div> +> **Note :** À titre d'exemple, nous avons reconstruit la mise en page simple et réactive ci-dessus, en utilisant cette fois-ci la méthode flexbox. Vous pouvez voir comment nous n'avons plus besoin d'utiliser des pourcentages étranges pour calculer la taille des colonnes : [exemple](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html). -<h3 id="CSS_grid">CSS grid</h3> +### CSS grid -<p>Dans la mise en page en grille CSS, l'unité <code>fr</code> permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de <code>1fr</code>. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section <a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»">Trames adaptables avec l'unité "fr"</a>.</p> +Dans la mise en page en grille CSS, l'unité `fr` permet la répartition de l'espace disponible sur les différentes sections de la grille. L'exemple suivant crée un conteneur de grille avec trois rangées dont la taille est de `1fr`. Cela créera trois colonnes, chacune prenant une partie de l'espace disponible dans le conteneur. Vous pouvez en savoir plus sur cette approche pour créer une grille dans la rubrique Apprendre la mise en place en grille, dans la section [Trames adaptables avec l'unité "fr"](/fr/docs/Apprendre/CSS/CSS_layout/Grids#Trames_adaptables_avec_lunité_«_fr_»). -<pre class="brush: css"><code>.container { +```css +.container { display: grid; grid-template-columns: 1fr 1fr 1fr; -} </code> -</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">code source</a>.</p> -</div> +> **Note :** La version à grille est encore plus simple puisque nous pouvons définir les colonnes sur le .wrapper : [exemple](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html). -<h2 id="Images_responsives">Images responsives</h2> +## Images responsives -<p>L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part :</p> +L'approche la plus simple pour les images responsive est celle décrite dans les premiers articles de Marcotte sur le design responsive. En gros, vous preniez une image qui était à la plus grande taille possible et vous la réduisiez. C'est encore une approche utilisée aujourd'hui, et dans la plupart des feuilles de style, vous trouverez le CSS suivant quelque part : -<pre class="brush: css"><code>img { +```css +img { max-width: 100%: -} </code> -</pre> +} +``` -<p>Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image.</p> +Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image. -<p>Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} <code>srcset</code> et <code>sizes</code> permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise.</p> +Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} `srcset` et `sizes` permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise. -<p>Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran.</p> +Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran. -<p>Vous pouvez trouver un <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guide détaillé sur les Images Responsives dans la section Apprendre le HTML</a> ici sur MDN.</p> +Vous pouvez trouver un [guide détaillé sur les Images Responsives dans la section Apprendre le HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) ici sur MDN. -<h2 id="Typographie_responsive">Typographie responsive</h2> +## Typographie responsive -<p>L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran.</p> +L'idée d'une typographie responsive est un élément du responsive design qui n'a pas été abordé dans les documents précédents. Elle décrit essentiellement la modification de la taille des polices de caractères dans les médias queries pour tenir compte d'un nombre plus ou moins important de pixels à l'écran. -<p>Dans cet exemple, nous voulons fixer notre titre de niveau 1 à <code>4rem</code>, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins <code>1200px</code>.</p> +Dans cet exemple, nous voulons fixer notre titre de niveau 1 à `4rem`, ce qui signifie qu'il sera quatre fois plus gros que notre police de base. C'est un très grand titre ! Nous voulons que ce titre géant ne soit utilisé que sur des écrans de grande taille, c'est pourquoi nous créons d'abord un titre plus petit, puis nous utilisons des média queries pour le remplacer par un titre de plus grande taille si nous savons que l'utilisateur a une taille d'écran d'au moins `1200px`. -<pre class="brush: css"><code>html { +```css +html { font-size: 1em; } @@ -223,101 +225,96 @@ h1 { h1 { font-size: 4rem; } -} </code> -</pre> +} +``` -<p>Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes.</p> +Nous avons modifié notre exemple de grilles réactives ci-dessus pour inclure également les type responsives en utilisant la méthode décrite. Vous pouvez voir comment le titre change de taille au fur et à mesure que la mise en page passe à la version à deux colonnes. -<p>Sur un mobile, le titre est plus petit :</p> +Sur un mobile, le titre est plus petit : -<img alt="A stacked layout with a small heading size." src="mdn-rwd-font-mobile.png"> + -<p>Sur le bureau cependant, nous voyons la plus grande taille de titre :</p> +Sur le bureau cependant, nous voyons la plus grande taille de titre : -<img alt="A two column layout with a large heading." src="mdn-rwd-font-desktop.png"> + -<div class="note"> -<p><strong>Note :</strong> Voir cet exemple en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">code source</a>.</p> -</div> +> **Note :** Voir cet exemple en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html). -<p>Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes.</p> +Comme le montre cette approche de la typographie, vous n'avez pas besoin de limiter les requêtes des médias à la seule modification de la mise en page. Elles peuvent être utilisées pour modifier n'importe quel élément afin de le rendre plus utilisable ou plus attrayant à des tailles d'écran différentes. -<h3 id="Utilisation_dunités_de_visualisation_pour_une_typographie_réactive">Utilisation d'unités de visualisation pour une typographie réactive</h3> +### Utilisation d'unités de visualisation pour une typographie réactive -<p>Une approche intéressante consiste à utiliser l'unité viewport <code>vw</code> pour permettre une typographie réactive. <code>1vw</code> est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de <code>vw</code>, elle sera toujours liée à la taille de la fenêtre.</p> +Une approche intéressante consiste à utiliser l'unité viewport `vw` pour permettre une typographie réactive. `1vw` est égal à un pour cent de la largeur de la fenêtre, ce qui signifie que si vous définissez la taille de votre police à l'aide de `vw`, elle sera toujours liée à la taille de la fenêtre. -<pre class="brush: css">h1 { +```css +h1 { font-size: 6vw; -}</pre> +} +``` -<p>Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité <code>vw</code>, car ce texte est toujours lié à la taille de la fenêtre de visualisation. <strong>Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.</strong></p> +Le problème est que l'utilisateur perd la possibilité de zoomer sur un ensemble de texte en utilisant l'unité `vw`, car ce texte est toujours lié à la taille de la fenêtre de visualisation. **Par conséquent, vous ne devez jamais définir un texte en utilisant uniquement les unités de viewport.** -<p>Il existe une solution, et elle consiste à utiliser <code><a href="/fr/docs/Web/CSS/calc">calc()</a></code>. Si vous ajoutez l'unité <code>vw</code> à un ensemble de valeurs utilisant une taille fixe telle que <code>em</code>s ou <code>rem</code>s, le texte sera toujours zoomable. En fait, l'unité <code>vw</code> s'ajoute à cette valeur zoomée :</p> +Il existe une solution, et elle consiste à utiliser [`calc()`](/fr/docs/Web/CSS/calc). Si vous ajoutez l'unité `vw` à un ensemble de valeurs utilisant une taille fixe telle que `em`s ou `rem`s, le texte sera toujours zoomable. En fait, l'unité `vw` s'ajoute à cette valeur zoomée : -<pre class="brush: css">h1 { +```css +h1 { font-size: calc(1.5rem + 3vw); -}</pre> +} +``` -<p>Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage.</p> +Cela signifie que nous n'avons besoin de spécifier la taille de la police pour l'en-tête qu'une seule fois, plutôt que de la configurer pour les mobiles et de la redéfinir dans les requêtes des médias. La police augmente ensuite progressivement à mesure que l'on augmente la taille de la zone d'affichage. -<div class="note"> -<p><strong>Note :</strong> Voir un exemple de cela en action : <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">exemple</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">code source</a>.</p> -</div> +> **Note :** Voir un exemple de cela en action : [exemple](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [code source](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html). -<h2 id="Le_méta-tag_du_viewport">Le méta-tag du viewport</h2> +## Le méta-tag du viewport -<p>Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section <code><head></code> du document.</p> +Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document. -<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> -</pre> +```html +<meta name="viewport" content="width=device-width,initial-scale=1"> +``` -<p>Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez.</p> +Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur de la fenêtre à la largeur de l'écran de l'appareil, et mettre l'échelle du document à 100% de sa taille prévue, affichant le document à la taille optimisée pour les mobiles que vous vouliez. -<p>Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre.</p> +Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre. -<p>Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.</p> +Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -<p>Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant <code>width = device-width</code>, vous remplacez la largeur par défaut d'Apple de <code>width = 960px </code>par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.</p> +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. -<p><strong>Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.</strong></p> +**Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** -<p>Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez.</p> +Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta viewport, mais en général, la ligne ci-dessus est celle que vous utiliserez. -<ul> - <li><code>initial-scale</code>: Définit le zoom initial de la page, que nous définissons à 1.</li> - <li><code>height</code>: Definit une hauteur spécifique pour la fenêtre.</li> - <li><code>minimum-scale</code>: Définit le niveau minimal de zoom</li> - <li><code>maximum-scale</code>: Définit le niveau maximal de zoom.</li> - <li><code>user-scalable</code>: Empêche le zoom si défini à <code>no</code>.</li> -</ul> +- `initial-scale`: Définit le zoom initial de la page, que nous définissons à 1. +- `height`: Definit une hauteur spécifique pour la fenêtre. +- `minimum-scale`: Définit le niveau minimal de zoom +- `maximum-scale`: Définit le niveau maximal de zoom. +- `user-scalable`: Empêche le zoom si défini à `no`. -<p>Vous devriez éviter d'utiliser <code>minimum-scale</code>, <code>maximum-scale</code>, et en particulier la définition de <code>user-scalable</code> sur <code>no</code>. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité.</p> +Vous devriez éviter d'utiliser `minimum-scale`, `maximum-scale`, et en particulier la définition de `user-scalable` sur `no`. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité. -<div class="note"> -<p><strong>Note :</strong> Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — <a href="/fr/docs/Web/CSS/@viewport">@viewport</a> — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge.</p> -</div> +> **Note :** Il existe une règle @ CSS conçue pour remplacer la métabalise viewport — [@viewport](/fr/docs/Web/CSS/@viewport) — Cependant, son support par navigateur est médiocre. Il a été mis en œuvre dans Internet Explorer et Edge, mais une fois que Edgium (La version Edge basée sur Chromium) sera livré, il ne fera plus partie du navigateur Edge. -<h2 id="Sommaire">Sommaire</h2> +## Sommaire -<p>Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif.</p> +Le responsive design fait référence à la conception d'un site ou d'une application qui répond à l'environnement dans lequel il est vu. Elle englobe un certain nombre de caractéristiques et de techniques CSS et HTML, et c'est essentiellement la façon dont nous construisons les sites web par défaut. Considérez les sites que vous visitez sur votre téléphone - il est probablement assez inhabituel de tomber sur un site dont la version de bureau est réduite, ou sur lequel vous devez faire défiler les pages pour trouver des choses. Cela s'explique par le fait que le web a adopté cette approche de design réactif. -<p>Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site.</p> +Il est également devenu beaucoup plus facile de réaliser des responsives designs à l'aide des méthodes de mise en page que vous avez apprises dans ces leçons. Si vous êtes novice en matière de développement web, vous disposez aujourd'hui de beaucoup plus d'outils qu'aux premiers jours du responsive design. Il est donc utile de vérifier l'âge des documents que vous référencez. Si les articles historiques sont toujours utiles, l'utilisation moderne des CSS et du HTML facilite grandement la création de designs élégants et utiles, quel que soit le dispositif avec lequel votre visiteur consulte le site. -<p>{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Apprendre/CSS/CSS_layout/Multiple-column_Layout", "Apprendre/CSS/CSS_layout/Media_queries", "Apprendre/CSS/CSS_layout")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement">Le positionnement</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Media_queries">Guide du débutant pour les Medias Queries</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Apprendre/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Apprendre/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Apprendre/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Apprendre/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) +- [Disposition sur plusieurs colonnes](/fr/docs/Apprendre/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant pour les Medias Queries](/fr/docs/Apprendre/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Apprendre/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Apprendre/CSS/CSS_layout/Prise_en_charge_des_anciens_navigateurs) +- [Compréhension fondamentale de la mise en page](/fr/docs/Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension) diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md index 1aeb151ae9..b218bec511 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md @@ -17,58 +17,72 @@ tags: translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<p>Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes.</p> +Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS comme principales méthodes de mise en page de vos créations. Cependant, certains visiteurs de votre site utilisent des navigateurs plus anciens ou qui ne prennent pas en charge les méthodes que vous avez utilisées. Ce sera toujours le cas sur le Web : au fur et à mesure que de nouvelles fonctionnalités sont développées, les différents navigateurs donnent la priorité à certaines fonctionnalités plutôt qu'à d'autres. Cet article explique comment utiliser les techniques modernes du Web sans exclure les utilisateurs de technologies plus anciennes. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Les bases du HTML (étudiez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une idée du fonctionnement de CSS (étudiez <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.)</td> + <th scope="row">Prérequis :</th> + <td> + Les bases du HTML (étudiez + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" + >Introduction au HTML</a + >), et une idée du fonctionnement de CSS (étudiez + <a href="/fr/docs/Learn/CSS/First_steps">Premiers pas avec CSS</a> et + <a href="/fr/docs/Learn/CSS/Building_blocks">Blocs de base en CSS</a>.) + </td> </tr> <tr> <th scope="row">Objectif :</th> - <td>Comprendre comment assurer la prise en charge, de vos mises en page, sur les anciens navigateurs qui pourraient ne pas supporter les fonctionnalités que vous souhaitez utiliser.</td> + <td> + Comprendre comment assurer la prise en charge, de vos mises en page, sur + les anciens navigateurs qui pourraient ne pas supporter les + fonctionnalités que vous souhaitez utiliser. + </td> </tr> </tbody> </table> -<h2 id="What_is_the_browser_landscape_for_your_site">Quel est le terrain des navigateurs pour votre site ?</h2> +## Quel est le terrain des navigateurs pour votre site ? -<p>Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que <a href="http://gs.statcounter.com/">Statcounter</a> qui peuvent fournir des statistiques filtrées par région.</p> +Chaque site web est différent en termes de public ciblé. Avant de décider de l'approche à adopter, déterminez le nombre de visiteurs qui arrivent sur votre site en utilisant d'anciens navigateurs. Cette démarche est simple si vous avez un site existant que vous souhaitez compléter ou remplacer, car vous disposez probablement d'outils d'analyse qui peuvent vous indiquer la technologie utilisée par les visiteurs. Si vous n'avez pas de système d'analyse ou s'il s'agit d'un tout nouveau site, il existe des sites tels que [Statcounter](http://gs.statcounter.com/) qui peuvent fournir des statistiques filtrées par région. -<p>Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique.</p> +Vous devez également tenir compte du type d'appareils et de la façon dont les visiteurs utilisent votre site. Par exemple, vous pouvez vous attendre à un nombre d'appareils mobiles supérieur à la moyenne. L'accessibilité et les personnes utilisant des technologies d'assistance doivent toujours être prises en compte, mais pour certains sites, cela peut être encore plus critique. -<h2 id="What_is_the_support_for_the_features_you_want_to_use">Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ?</h2> +## Quelle est la prise en charge des fonctionnalités que vous souhaitez utiliser ? -<p>Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété.</p> +Une fois que vous connaissez les navigateurs utilisés pour accéder à votre site, vous pouvez évaluer toute technologie que vous souhaitez utiliser, en fonction de sa prise en charge dans les différents navigateurs et de la facilité avec laquelle vous pouvez proposer une alternative aux visiteurs qui ne disposent pas de cette technologie. Nous essayons de vous faciliter la tâche sur le MDN, en fournissant des informations sur la compatibilité des navigateurs sur chaque page détaillant une propriété CSS. Par exemple, jetez un œil à la page de {{cssxref("grid-template-columns")}}. Au bas de cette page se trouve un tableau qui répertorie les principaux navigateurs avec la version dans laquelle ils ont commencé à prendre en charge cette propriété. -<p><img alt="Capture d'un tableau de compatibilité d'une page sur MDN où on voit en vert les versions initiales compatibles et en rouge les navigateurs sans prise en charge" src="browser-table.png"></p> + -<p>Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site <a href="https://caniuse.com/">Can I Use</a>. Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur.</p> +Un autre moyen qui est fréquemment utilisé pour savoir dans quelle mesure une fonctionnalité est prise en charge est le site [Can I Use](https://caniuse.com/). Ce site répertorie la majorité des fonctionnalités de la plate-forme web avec des informations sur leur statut de prise en charge par les navigateurs. Vous pouvez afficher les statistiques d'utilisation par emplacement — utile si vous travaillez sur un site qui a des utilisateurs principalement pour une région spécifique du monde. Vous pouvez même relier votre compte Google Analytics pour obtenir une analyse basée sur vos données d'utilisateur. -<p>Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs.</p> +Comprendre la technologie dont disposent vos utilisateurs et la prise en charge des fonctionnalités que vous pourriez vouloir utiliser vous place dans une bonne position pour prendre toutes vos décisions et savoir comment servir au mieux tous vos utilisateurs. -<h2 id="Support_doesnt_mean_looks_the_same">Prendre en charge ne veut pas dire « ressembler à la même chose »</h2> +## Prendre en charge ne veut pas dire « ressembler à la même chose » -<p>Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens.</p> +Un site web ne peut pas avoir le même aspect dans tous les navigateurs, car certains de vos utilisateurs consulteront le site sur un téléphone et d'autres sur un grand écran de bureau. De même, certains de vos utilisateurs auront une ancienne version du navigateur, et d'autres la dernière. Certains de vos utilisateurs pourront lire votre contenu à l'aide d'un lecteur d'écran, ou auront zoomé sur la page pour pouvoir la lire. La prise en charge de tous les utilisateurs signifie que vous devez fournir une version de votre contenu conçue de manière défensive, afin qu'elle soit parfaite sur les navigateurs modernes, tout en restant utilisable à un niveau de base pour les utilisateurs de navigateurs plus anciens. -<p>Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. <em>Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?</em></p> +Une prise en charge basique consiste à bien structurer votre contenu afin que le flux de votre page ait un sens. Un utilisateur disposant d'un téléphone aux fonctionnalités très limitées ne comprendra peut-être pas grand-chose à votre CSS, mais le contenu s'écoulera de manière à faciliter la lecture. Par conséquent, un document HTML bien structuré devrait toujours être votre point de départ. _Si vous supprimez votre feuille de style, votre contenu a-t-il un sens ?_ -<p>Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement.</p> +Une option consiste à laisser cette vue simple du site comme solution de repli pour les personnes utilisant des navigateurs très anciens ou limités. Si le nombre de personnes qui consultent le site à l'aide de ces navigateurs est minime, il n'est peut-être pas judicieux, d'un point de vue commercial, de consacrer du temps à essayer de leur offrir une expérience similaire à celle des utilisateurs de navigateurs modernes. Il vaudrait mieux consacrer ce temps à des choses qui rendent le site plus accessible afin qu'il bénéficie à un plus grand nombre d'utilisateurs. Il existe un monde une page HTML basique et un site rutilant de fonctionnalités ; CSS permet la création de ces solutions de repli assez simplement. -<h2 id="Creating_fallbacks_in_CSS">Création de substituts en CSS</h2> +## Création de substituts en CSS -<p>Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des <a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">techniques historiques</a> que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent.</p> +Les spécifications CSS contiennent des informations qui expliquent ce que fait le navigateur lorsque deux méthodes de mise en page sont appliquées au même élément. Cela signifie qu'il existe une définition de ce qui se passe si un élément flottant, par exemple, est également un élément de grille utilisant la mise en page de grille CSS. Associez ces informations au fait que les navigateurs ignorent les CSS qu'ils ne comprennent pas, et vous disposez d'un moyen de créer des mises en page simples à l'aide des [techniques historiques](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) que nous avons déjà abordées, qui sont ensuite écrasées par votre mise en page « Grid » dans les navigateurs modernes qui la comprennent. -<p>Dans l'exemple ci-dessous, nous avons fait flotter trois <code><div></code> pour les afficher en ligne. Tout navigateur qui ne prend pas en charge <a href="/fr/docs/Learn/CSS/CSS_layout/Grids">CSS Grid Layout</a> verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de <code>display : grid</code>, et la mise en page flottante est utilisée.</p> +Dans l'exemple ci-dessous, nous avons fait flotter trois `<div>` pour les afficher en ligne. Tout navigateur qui ne prend pas en charge [CSS Grid Layout](/fr/docs/Learn/CSS/CSS_layout/Grids) verra la rangée de cases comme une disposition flottante. Un élément flottant qui devient un élément de grille perd le comportement flottant, ce qui signifie qu'en transformant le conteneur en conteneur de grille, les éléments flottants deviennent des éléments de grille.Si le navigateur prend en charge la mise en page de la grille, il affichera la vue de la grille, sinon il ignore les propriétés liées à ce dernier, en plus de `display : grid`, et la mise en page flottante est utilisée. -<h3 id="Example_1">Exemple</h3> -<h4 id="CSS_1">CSS</h4> -<pre class="brush:css">* { +### Exemple + +#### CSS + +```css +* { box-sizing: border-box; } @@ -86,46 +100,47 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs background-color: rgb(207,232,220); padding: 1em; } -</pre> +``` -<h4 id="HTML_1">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML + +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` {{EmbedLiveSample('Example_1', '', '150')}} -<div class="notecard note"> - <p><strong>Note :</strong> La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS.</p> -</div> +> **Note :** La propriété {{cssxref("clear")}} n'a également aucun effet une fois que l'élément dégagé devient un élément de grille. Vous pouvez donc avoir une mise en page avec un pied de page dégagé, qui est ensuite transformée en une mise en page sur une grille CSS. + +### Méthodes de substitution + +Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer. -<h3 id="Fallback_Methods">Méthodes de substitution</h3> +- `float` et `clear` + - : Comme indiqué ci-dessus, les propriétés `float` et `clear` cessent d'affecter la mise en page si les éléments ciblés par `float` ou `clear` deviennent des éléments d'une grille ou d'une zone flexible. +- `display : inline-block` + - : Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a `display : inline-block` défini mais devient ensuite un élément flexible ou d'une grille, le comportement _inline-block_ est ignoré. +- `display: table` + - : La méthode de création de tableaux CSS décrite dans l'[introduction](/fr/docs/Learn/CSS/CSS_layout/Introduction) de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées. +- Mise en page à colonnes multiples + - : Pour certaines mises en page, vous pourriez utiliser [multi-col](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) comme solution de substitution, si votre conteneur a l'une des propriétés `column-*` définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas. +- Flexbox comme solution de repli pour la grille + - : [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété `flex` appliquée aux enfants sera ignorée. -<p>Il existe un certain nombre de méthodes de mise en page qui peuvent être utilisées de manière similaire à cet exemple d'éléments flottants. Vous pouvez choisir celle qui convient le mieux selon le modèle de présentation que vous devez créer.</p> +Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur. -<dl> - <dt><code>float</code> et <code>clear</code></dt> - <dd>Comme indiqué ci-dessus, les propriétés <code>float</code> et <code>clear</code> cessent d'affecter la mise en page si les éléments ciblés par <code>float</code> ou <code>clear</code> deviennent des éléments d'une grille ou d'une zone flexible.</dd> - <dt><code>display : inline-block</code></dt> - <dd>Cette méthode peut être utilisée pour créer des mises en page en colonnes, si un élément a <code>display : inline-block</code> défini mais devient ensuite un élément flexible ou d'une grille, le comportement <i>inline-block</i> est ignoré.</dd> - <dt><code>display: table</code></dt> - <dd>La méthode de création de tableaux CSS décrite dans l'<a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">introduction</a> de ces leçons peut être utilisée comme solution de substitution. Les éléments sur lesquels des dispositions de tableau CSS ont été définies perdront ce comportement s'ils deviennent des éléments flex ou des éléments de grille. Il est important de noter que les boîtes anonymes créées pour fixer la structure de la table ne sont pas créées.</dd> - <dt>Mise en page à colonnes multiples</dt> - <dd>Pour certaines mises en page, vous pourriez utiliser <a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> comme solution de substitution, si votre conteneur a l'une des propriétés <code>column-*</code> définies sur lui et devient ensuite un conteneur de grille, le comportement multicolonne ne se produira pas.</dd> - <dt>Flexbox comme solution de repli pour la grille</dt> - <dd><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> bénéficie d'une meilleure prise en charge par les navigateurs que les grilles CSS en raison de sa prise en charge par IE10 et 11, même si vous devez consulter les informations plus loin dans cette leçon expliquant la prise en charge plutôt inégale et confuse de Flexbox dans les anciens navigateurs. Si vous transformez un conteneur flexible en conteneur de grille, toute propriété <code>flex</code> appliquée aux enfants sera ignorée.</dd> -</dl> +Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite. -<p>Pour de nombreux ajustements de mise en page dans les navigateurs plus anciens, vous constaterez peut-être que vous pouvez offrir une expérience décente en utilisant CSS de cette manière. Nous ajoutons une mise en page plus simple basée sur des techniques plus anciennes et bien supportées, puis nous utilisons un CSS plus récent pour créer la mise en page que plus de 90 % de votre public verra. Dans certains cas, cependant, le code de substitution devra inclure un élément que les nouveaux navigateurs interpréteront également. Par exemple, si nous devions ajouter des pourcentages de largeur à nos éléments flottants pour que les colonnes ressemblent davantage à l'affichage en grille, en s'étirant pour remplir le conteneur.</p> +### Exemple -<p>Dans la disposition flottante, le pourcentage est calculé à partir du conteneur — 33,333 % correspond à un tiers de la largeur du conteneur. Dans la grille, cependant, ces 33,333 % sont calculés à partir de la zone de la grille dans laquelle l'élément est placé, de sorte qu'il devient en fait un tiers de la taille souhaitée une fois que la disposition en grille est introduite.</p> +#### CSS -<h3 id="Example_2">Exemple</h3> -<h4 id="CSS_2">CSS</h4> -<pre class="brush: css">* { +```css +* { box-sizing: border-box; } @@ -144,29 +159,34 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs padding: 1em; width: 33.333%; } -</pre> +``` -<h4 id="HTML_2">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +#### HTML -<p>{{EmbedLiveSample('Example_2', '', '150')}}</p> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` + +{{EmbedLiveSample('Example_2', '', '150')}} + +Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici. -<p>Pour résoudre ce problème, nous devons trouver un moyen de détecter si la grille est prise en charge et donc si elle remplacera la largeur. CSS a une solution pour nous ici.</p> +## Requêtes de fonctionnalités -<h2 id="Feature_queries">Requêtes de fonctionnalités</h2> +Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page. -<p>Les requêtes de fonctionnalités vous permettent de vérifier si un navigateur prend en charge une fonctionnalité CSS particulière. Cela signifie que vous pouvez écrire du CSS pour les navigateurs qui ne prennent pas en charge une certaine fonctionnalité, puis vérifier si le navigateur la prend en charge et, si c'est le cas, intégrer votre mise en page.</p> +Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur `auto` si nous savons que nous avons un support de grille. -<p>Si nous ajoutons une requête de fonctionnalité à l'exemple ci-dessus, nous pouvons l'utiliser pour remettre les largeurs de nos éléments sur <code>auto</code> si nous savons que nous avons un support de grille.</p> +### Exemple -<h3 id="Example_3">Exemple</h3> -<h4 id="CSS_3">CSS</h4> -<pre class="brush: css">* { +#### CSS + +```css +* { box-sizing: border-box; } @@ -191,70 +211,68 @@ original_slug: Apprendre/CSS/CSS_layout/Prise_En_Charge_Des_Anciens_Navigateurs width: auto; } } -</pre> +``` + +#### HTML -<h4 id="HTML_3">HTML</h4> -<pre class="brush: html"><div class="wrapper"> - <div class="item">Item One</div> - <div class="item">Item Two</div> - <div class="item">Item Three</div> -</div> -</pre> +```html +<div class="wrapper"> + <div class="item">Item One</div> + <div class="item">Item Two</div> + <div class="item">Item Three</div> +</div> +``` -<p>{{EmbedLiveSample('Example_3', '', '150')}}</p> +{{EmbedLiveSample('Example_3', '', '150')}} -<p>La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité.</p> +La prise en charge des requêtes de caractéristiques est très bonne dans les navigateurs modernes. Toutefois, vous devez noter que ce sont les navigateurs qui ne prennent pas en charge la grille CSS, qui ne prennent pas non plus en charge les requêtes de fonctionnalités. Cela signifie qu'une approche telle que celle décrite ci-dessus fonctionnera pour ces navigateurs. Ce que nous faisons, c'est écrire notre ancien CSS en premier, en dehors de toute requête de fonctionnalité. Les navigateurs qui ne prennent pas en charge la grille et la requête de fonctionnalité utiliseront les informations de mise en page qu'ils peuvent comprendre et ignoreront complètement tout le reste. Les navigateurs qui prennent en charge la requête de fonctionnalité prennent également en charge CSS Grid et exécuteront donc le code de la grille et le code contenu dans la requête de fonctionnalité. -<p>La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible.</p> +La spécification pour les requêtes de fonctionnalités contient également la possibilité de tester si un navigateur ne prend pas en charge une fonctionnalité — cela n'est utile que si le navigateur prend en charge les requêtes de fonctionnalités. À l'avenir, une approche consistant à vérifier l'absence de prise en charge fonctionnera, car les navigateurs qui ne prennent pas en charge les requêtes de caractéristiques disparaîtront. Pour l'instant, cependant, utilisez l'approche consistant à utiliser l'ancien CSS, puis à l'écraser, pour obtenir la meilleure prise en charge possible. -<h2 id="Older_versions_of_Flexbox">Anciennes versions de Flexbox</h2> +## Anciennes versions de Flexbox -<p>Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe <code>-ms-</code> pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">ce guide utile</a> vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs.</p> +Dans les anciennes versions des navigateurs, vous pouvez trouver des itérations précédentes de la spécification Flexbox. Au moment de la rédaction de cet article, il s'agit principalement d'un problème avec Internet Explorer 10, qui utilise le préfixe `-ms-` pour Flexbox. Cela signifie également qu'il existe des articles et des tutoriels dépassés ; [ce guide utile](https://css-tricks.com/old-flexbox-and-new-flexbox/) vous aide à vérifier ce que vous regardez et peut également vous aider si vous avez besoin d'une prise en charge de Flexbox dans de très anciens navigateurs. -<h2 id="The_IE10_and_11_prefixed_version_of_Grid">La version préfixée d'IE10 et 11 de Grid</h2> +## La version préfixée d'IE10 et 11 de Grid -<p>La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille <em>moderne</em>, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées <code>-ms-</code>, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne.</p> +La spécification CSS Grid a été initialement prototypée dans Internet Explorer 10 ; cela signifie que si IE10 et IE11 ne disposent pas du support de la grille _moderne_, ils disposent d'une version de la mise en page Grid qui est très utilisable, bien que différente de la spécification moderne documentée sur ce site. Les implémentations d'IE10 et 11 sont préfixées `-ms-`, ce qui signifie que vous pouvez les utiliser pour ces navigateurs et qu'elles seront ignorées par les navigateurs non-Microsoft. Edge comprend toujours l'ancienne syntaxe, cependant, alors faites attention à ce que tout soit écrasé en toute sécurité dans votre grille CSS moderne. -<p>Le guide <a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a> peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge.</p> +Le guide [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) peut vous aider à comprendre la version IE de la grille, et nous avons inclus quelques liens utiles supplémentaires à la fin de cette leçon. Cependant, à moins que vous n'ayez un nombre très élevé de visiteurs dans des versions IE plus anciennes, il est préférable de vous concentrer sur la création d'une solution de substitution qui fonctionne pour tous les navigateurs non pris en charge. -<h2 id="Testing_older_browsers">Test des anciens navigateurs</h2> +## Test des anciens navigateurs -<p>La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing">Test sur plusieurs navigateurs</a>.</p> +La majorité des navigateurs prenant en charge Flexbox et Grid, il peut être raisonnablement difficile de tester les navigateurs plus anciens. Une façon de procéder est d'utiliser un outil de test en ligne tel que Sauce Labs, comme détaillé dans le module [Test sur plusieurs navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing). -<p>Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">une gamme de machines virtuelles à télécharger gratuitement</a>. Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows.</p> +Vous pouvez également télécharger et installer des machines virtuelles, et exécuter les anciennes versions des navigateurs dans un environnement confiné sur votre propre ordinateur. Avoir accès à d'anciennes versions d'Internet Explorer est particulièrement utile, et à cette fin, Microsoft a mis à disposition [une gamme de machines virtuelles à télécharger gratuitement](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/). Celles-ci sont disponibles pour les systèmes d'exploitation Mac, Windows et Linux et constituent donc un excellent moyen de tester les navigateurs Windows anciens et modernes, même si vous n'utilisez pas d'ordinateur Windows. -<h2 id="Summary">Résumé</h2> +## Résumé -<p>Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir.</p> +Vous disposez désormais des connaissances nécessaires pour utiliser en toute confiance des techniques telles que les grilles CSS et Flexbox, créer des solutions de substitution pour les navigateurs plus anciens et utiliser toutes les nouvelles techniques qui pourraient apparaître à l'avenir. -<h2 id="See_Also">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Utilisation des requêtes de fonctionnalités en CSS</a> <small>(en)</small></li> - <li><a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Mises en page avancées avec les boîtes flexibles</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Les grilles CSS et l'amélioration progressive</a></li> - <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutoriel qui utilise la version IE10 et 11 de Grid</a> <small>(en)</small></li> - <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?</a> <small>(en)</small></li> - <li><a href="https://24ways.org/2017/cascading-web-design/">Conception Web en cascade avec les requêtes de fonctionnalités</a> <small>(en)</small></li> - <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Utilisation des requêtes de fonctionnalités (vidéo)</a> <small>(en)</small></li> -</ul> +- [Utilisation des requêtes de fonctionnalités en CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) (en) +- [Mises en page avancées avec les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) +- [Les grilles CSS et l'amélioration progressive](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Utilisation de la grille CSS : Prise en charge des navigateurs sans Grid](https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/) (en) +- [Un tutoriel qui utilise la version IE10 et 11 de Grid](https://24ways.org/2012/css3-grid-layout/) (en) +- [Dois-je essayer d'utiliser la mise en œuvre de la grille dans IE10 ?](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/) (en) +- [Conception Web en cascade avec les requêtes de fonctionnalités](https://24ways.org/2017/cascading-web-design/) (en) +- [Utilisation des requêtes de fonctionnalités (vidéo)](https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/) (en) -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> +{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}} -<h2 id="In_this_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Introduction">Introduction à la mise en page en CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">Cours normal</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Floats">Les boîtes flottantes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Positioning">Le positionnement</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Disposition sur plusieurs colonnes</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Media_queries">Guide du débutant des Media Queries</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Méthodes de mises en page traditionnelles</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Prise en charge des anciens navigateurs</a></li> - <li><a href="/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Compréhension fondamentale de la mise en page</a></li> -</ul> +- [Introduction à la mise en page en CSS](/fr/docs/Learn/CSS/CSS_layout/Introduction) +- [Cours normal](/fr/docs/Learn/CSS/CSS_layout/Normal_Flow) +- [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) +- [Grid](/fr/docs/Learn/CSS/CSS_layout/Grids) +- [Les boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats) +- [Le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning) +- [Disposition sur plusieurs colonnes](/fr/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) +- [Responsive design](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) +- [Guide du débutant des Media Queries](/fr/docs/Learn/CSS/CSS_layout/Media_queries) +- [Méthodes de mises en page traditionnelles](/fr/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) +- [Prise en charge des anciens navigateurs](/fr/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) +- [Compréhension fondamentale de la mise en page](/fr/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension) |