From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- .../index.html | 129 --------------------- .../index.md | 129 +++++++++++++++++++++ .../flow_layout_and_overflow/index.html | 71 ------------ .../flow_layout_and_overflow/index.md | 71 ++++++++++++ .../flow_layout_and_writing_modes/index.html | 91 --------------- .../flow_layout_and_writing_modes/index.md | 91 +++++++++++++++ .../in_flow_and_out_of_flow/index.html | 69 ----------- .../in_flow_and_out_of_flow/index.md | 69 +++++++++++ files/fr/web/css/css_flow_layout/index.html | 42 ------- files/fr/web/css/css_flow_layout/index.md | 42 +++++++ .../intro_to_formatting_contexts/index.html | 90 -------------- .../intro_to_formatting_contexts/index.md | 90 ++++++++++++++ 12 files changed, 492 insertions(+), 492 deletions(-) delete mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md delete mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html create mode 100644 files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md delete mode 100644 files/fr/web/css/css_flow_layout/index.html create mode 100644 files/fr/web/css/css_flow_layout/index.md delete mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create mode 100644 files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md (limited to 'files/fr/web/css/css_flow_layout') diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html deleted file mode 100644 index f4e278deeb..0000000000 --- a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Disposition de bloc et en ligne avec le flux normal -slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow -original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal ---- -
{{CSSRef}}
- -

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

- -

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

- -

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

- -
-

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
-
- Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

-
- -

Quant aux éléments du contexte de formatage en ligne :

- -
-

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

-
- -

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

- -

Les éléments qui participent à un contexte de formatage de bloc

- -

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

- -

- -

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

- -

- -

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

- -

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

- -

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

- -

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

- -

La fusion des marges

- -

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

- -

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

- -

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

- -
-

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

- -

-
- -

Les éléments qui participent à un contexte de formatage en ligne

- -

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

- -

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

- -

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

- -

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

- -

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

- -

La propriété display et la disposition de flux

- -

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

- -

Le type d'affichage d'un élément définit deux choses :

- - - -

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

- -

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

- -

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

- -

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

- -

Modifier le contexte de formatage auquel un élément participe

- -

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

- -

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

- -

Résumé

- -

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md new file mode 100644 index 0000000000..f4e278deeb --- /dev/null +++ b/files/fr/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.md @@ -0,0 +1,129 @@ +--- +title: Disposition de bloc et en ligne avec le flux normal +slug: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_de_bloc_en_ligne_avec_flux_normal +--- +
{{CSSRef}}
+ +

Dans ce guide, nous verrons le comportement des éléments de bloc et des éléments en ligne lorsqu'ils sont placés dans le flux normal.

+ +

Le flux normal est défini par la spécification CSS 2.1 qui explique comment les boîtes du flux normal s'inscrivent dans le contexte de formatage. Les boîtes peuvent être de bloc (block) ou en ligne (inline) mais pas les deux à la fois. Les boîtes de bloc contribuent au contexte de formatage des blocs et les boîtes en ligne contribuent au contexte de formatage en ligne.

+ +

Le comportement des éléments qui ont un contexte de formatage de bloc ou en ligne est également défini dans cette spécification. Pour les éléments avec un contexte de formatage de bloc, voici ce qui est indiqué dans la spécification :

+ +
+

« Dans un contexte de formatage de bloc, les boîtes sont disposées l'une après l'autre, verticalement, en démarrant en haut du bloc englobant. La distance verticale entre deux boîtes voisines est déterminée par les propriétés relatives aux marges. Les marges verticales fusionnent pour deux boîtes de bloc voisines au sein d'un contexte de formatage de bloc.
+
+ Dans un contexte de formatage de bloc, chaque bord gauche de chaque boîte touche le bord gauche du bloc englobant (pour les documents écrits de droite à gauche, ce sont les bords droits qui coïncident). » - 9.4.1

+
+ +

Quant aux éléments du contexte de formatage en ligne :

+ +
+

« Dans un contexte de formatage en ligne, les boîtes sont disposées horizontalement les unes après les autres, en démarrant en haut du bloc englobant. Les marges, bordures, espaces de remplissage (padding) entre ces boîtes sont respectées. L'alignement vertical des boîtes peut varier (alignement du bas et du haut ou alignement des lignes de base du texte). La zone rectangulaire contenant les boîtes qui forment une ligne est appelée une "boîte de ligne". » - 9.4.2

+
+ +

On notera que la spécification CSS 2.1 décrit des documents dont le mode d'écriture est horizontal, allant de haut en bas. C'est notamment le cas avec la description de la distance verticale entre les boîtes de bloc. Le comportement des éléments de bloc et en ligne est donc le même lorsqu'on a un mode d'écriture vertical. Nous verrons cela dans un article suivant.

+ +

Les éléments qui participent à un contexte de formatage de bloc

+ +

Les éléments de bloc organisés avec un mode d'écriture horizontal (un document en français par exemple) sont disposés verticalement les uns au dessus des autres.

+ +

+ +

Avec un mode d'écriture vertical, les boîtes seraient organisées horizontalement.

+ +

+ +

Dans la suite de ce guide, nous prendrons l'hypothèse d'un mode d'écriture horizontal. Toutefois, tout ce qui est décrit fonctionne de la même façon pour un mode d'écriture vertical.

+ +

Comme indiqué dans la spécification, les marges entre deux boîtes de bloc permettent de créer une séparation entre les éléments. On peut voir ceci dans un exemple simple avec deux paragraphes auxquels on ajoute une bordure. La feuille de style par défaut du navigateur ajoute un espace entre les paragraphes en ajoutant une marge en haut et en bas.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

Si on définit explicitement des marges nulles sur les paragraphes, les bordures se toucheront.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

Par défaut, les éléments de bloc consomment tout l'espace disponible sur l'axe en ligne. Ainsi, les paragraphes « s'étalent » horizontalement autant qu'ils le peuvent au sein du bloc englobant. Si on fixait leur longueur afin que deux paragraphes puissent tenir horizontalement, ils seraient tout de même l'un au dessus de l'autre. Chaque boîte de bloc commencera au début de l'axe de bloc du bloc englobant.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

La fusion des marges

+ +

La spécification indique que les marges verticales entre chaque éléments de bloc fusionnent. Cela signifie que si un élément avec une marge en haut suit directement un élément avec une marge en bas, plutôt que la marge résultante soit la somme des deux marges, on aura une fusion des marges et ce sera uniquement la plus grande des marges qui sera appliquée.

+ +

Dans l'exemple suivant, les paragraphes ont une marge en haut qui mesure 20 pixels et une marge en bas qui mesure 40 pixels. La taille de la marge entre les deux paragraphes est donc de 40px car la plus petite est « fusionnée » avec la plus grande.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

Pour en savoir plus à propos de la fusion des marges, vous pouvez lire l'article dédié à la fusion des marges.

+ +
+

Note : Si vous n'êtes pas certain⋅e que la fusion des marges a lieu, vous pouvez utiliser les outils de développement de votre navigateur afin de voir la valeur réellement utilisée pour les marges.

+ +

+
+ +

Les éléments qui participent à un contexte de formatage en ligne

+ +

Les éléments en ligne sont affichés les uns à la suite des autres selon la direction avec laquelle les phrases sont écrites pour ce mode d'écriture. Ces boîtes en ligne se suivent les unes après les autres. S'il n'y a pas suffisamment d'espace dans la boîte englobante, une boîte en ligne pourra être scindée pour passer à la ligne. Les lignes ainsi créées sont appelées des boîtes de ligne. Comme la plupart des objets en CSS, les éléments en ligne disposent bien d'une boîte (qu'on oublie parfois).

+ +

Dans l'exemple suivant on a trois boîtes en ligne créées par un paragraphe avec un élément {{HTMLElement("strong")}} à l'intérieur.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

Les boîtes autour des mots, avant et après l'élément {{HTMLElement("<strong>")}} sont qualifiées de boîtes anonymes. Ce sont des boîtes qui permettent que tout soit contenu dans une boîte mais on ne peut pas cibler ces boîtes spécifiquement.

+ +

La taille de la boîte de la ligne sur l'axe orthogonal à l'axe de lecture est définie avec la taille de la plus grande boîte qu'elle contient. Dans l'exemple suivant, on a un élément {{HTMLElement("<strong>")}} qui a une taille de 300% et c'est donc son contenu qui détermine la hauteur de la boîte de ligne pour cette ligne.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

Pour en savoir plus sur le comportement des boîtes en ligne et des boîtes de bloc, vous pouvez consulter le guide sur le modèle de formatage visuel.

+ +

La propriété display et la disposition de flux

+ +

En plus des règles existantes en CSS 2.1, les spécifications CSS ultérieures décrivent plus en détail le comportement des boîtes en ligne et des boîtes en bloc. La propriété display définit la façon dont une boîte, et celles qu'elle contient, se comporte. Avec la spécification CSS Display Model Level 3, on en apprend plus sur la façon dont la propriété display modifie comportement des boîtes et des boîtes qu'elles génèrent.

+ +

Le type d'affichage d'un élément définit deux choses :

+ + + +

Dans l'exemple suivant, on a un élément {{HTMLElement("div")}} sur lequel on a appliqué display: flex. Le conteneur flexible se comporte comme un élément de bloc : il s'affiche sur une nouvelle ligne et occupe tout l'espace du bloc englobant dans l'axe en ligne. Aussi, le type d'affichage extérieur vaut block.

+ +

Les objets flexibles, à l'intérieur, contribuent à un contexte de formatage flexible car leur élément parent a display: flex. Aussi, le type d'affichage intérieur vaut flex et un nouveau contexte de formatage flexible est mis en place pour les éléments enfants.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

On peut envisager chaque boîte CSS sous cet angle. La boîte possède un type d'affichage extérieur et sait ainsi comment se comporter avec les boîtes qui l'entourent. Ensuite, la boîte possède un type d'affichage intérieur qui permet d'organiser les éléments qu'elle contient. Ces éléments, à leur tour, disposent d'un type d'affichage extérieur et d'un type d'affichage intérieur. Dans l'exemple précédent, les objets flexibles ont des boîtes flexibles. Le type d'affichage extérieur est dicté par le contexte de formatage flexible. En revanche, leur type d'affichage intérieur est flow et leurs éléments enfants participeront à un flux normal. Les éléments enfants s'organiseront comme des éléments en ligne ou de bloc sauf si leur type d'affichage est explicitement modifié.

+ +

Le concept de type d'affichage extérieur et intérieur est important car il nous indique qu'un conteneur utilisant Flexbox (display: flex) ou les grilles CSS (display: grid) continue de participer à une disposition bloc/en ligne du fait du type d'affichage extérieur qui est block.

+ +

Modifier le contexte de formatage auquel un élément participe

+ +

Les navigateurs affichent les éléments en bloc ou ligne selon ce qui est pertinent pour chaque élément. Ainsi, l'élément {{HTMLElement("strong")}}, utilisé pour mettre en avant un mot (souvent alors affiché en gras), ne crée pas de nouvelle ligne pour afficher son contenu : ce n'est pas un élément de bloc mais un élément en ligne.

+ +

Si on souhaitait afficher tous les éléments {{HTMLElement("strong")}} comme des éléments de bloc, il suffirait d'ajouter la règle display: block en ciblant les éléments <strong>. Cela signifie qu'on peut toujours écrire un code HTML qui soit le plus sémantique possible pour le contenu puis modifier la façon dont le document est affiché grâce à CSS.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

Résumé

+ +

Dans ce guide, nous avons vu comment les éléments étaient affichés dans le flux normal, comme éléments de bloc ou comme éléments en ligne. Les éléments HTML s'afficheront par défaut de façon lisible sans CSS. En comprenant comment fonctionne le flux normal, vous comprendrez comment apporter les modifications nécessaires pour parvenir à la disposition désirée.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html deleted file mode 100644 index a1c3966d64..0000000000 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: La disposition en flux et le dépassement -slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow -original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement ---- -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
- -

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

- -

Qu'est-ce que le dépassement ?

- -

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

- -

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

- -

Contrôler le dépassement

- -

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

- -

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

- -

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

- -

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

- -
-

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

-
- -

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

- -

Les propriétés relatives

- -

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

- -

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

- -

Gérer le dépassement

- -

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

- -

Dépassement sur l'axe en ligne

- -

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

- -

Dépassement sur l'axe de bloc

- -

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

- -

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

- -

Résumé

- -

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md new file mode 100644 index 0000000000..a1c3966d64 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_overflow/index.md @@ -0,0 +1,71 @@ +--- +title: La disposition en flux et le dépassement +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_dépassement +--- +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
+ +

Lorsque le conteneur est trop petit pour son contenu, on obtient une situation de dépassement. Le comportement du dépassement est importante dès qu'on manipule des objets CSS dont la taille est contrainte. Dans ce guide, nous verrons le fonctionnement du dépassement avec le flux normal.

+ +

Qu'est-ce que le dépassement ?

+ +

Pour créer un exemple de dépassement, prenons un élément avec une hauteur et une largeur fixés puis ajoutons un contenu trop important dans la boîte :

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

Le contenu « arrive » dans la boîte puis remplit celle-ci et ensuite, il dépasse en affichant du contenu en dehors de la boîte éventuellement en dessous du contenu environnant. Pour contrôler le comportement du dépassement, on pourra utiliser la propriété overflow. La valeur initiale de cette propriété est visible et c'est pour cela qu'on voit le contenu dépasser.

+ +

Contrôler le dépassement

+ +

La propriété overflow possède d'autres valeurs qui permettent de contrôler le dépassement. Afin de masquer le contenu qui dépasse, on peut utiliser la valeur hidden. Avec cette valeur, une partie du contenu peut ne pas être visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

Avec la valeur scroll, le contenu est dans la boîte et des barres de défilement sont ajoutées à la boîte afin de pouvoir défiler et voir le contenu. Les barres de défilement seront ajoutées, même si le contenu « tient » dans la boîte.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

Avec la valeur auto, le contenu sera affiché sans barre de défilement s'il tient dans la boîte. S'il dépasse, des barres de défilement sont ajoutées. En comparant l'exemple précédent avec celui qui suit, on peut voir que overflow: scroll ajoute des barres de défilement verticales et horizontales (même s'il y a uniquement besoin du défilement vertical). Avec la valeur auto, seules les barres de défilement nécessaires sont ajoutées.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

Comme nous l'avons vu plus tôt, toute valeur qui est différente de visible créera un nouveau contexte de formatage de bloc.

+ +
+

Note : Dans le brouillon du module de spécification Overflow de niveau 3, une valeur est ajoutée : overflow: clip. Cette valeur agira comme overflow: hidden mais ne permettra de faire défiler le contenu à l'aide de code. La boîte ne pourra pas défiler. De plus, cette valeur ne crée pas de contexte de formatage de bloc.

+
+ +

Pour être tout à fait précis, la propriété overflow est une propriété raccourcie pour les propriétés overflow-x et overflow-y. Si on fournit une valeur, celle-ci sera utilisée pour les deux axes. On peut aussi fournir deux valeurs, auquel cas la première sera utilisée pour overflow-x et la seconde pour overflow-y. Dans l'exemple qui suit, seule overflow-y: scroll est utilisée et la barre de défilement horizontale superflue n'est pas ajoutée.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

Les propriétés relatives

+ +

Dans le guide sur les modes d'écriture et la disposition en flux, nous avons étudié des propriétés plus récentes block-size et inline-size qui permettent de raisonner avec les modes d'écriture plutôt qu'avec les dimensions physiques de l'écran. La spécification de niveau 3 Overflow inclut également les propriétés correspondantes pour le dépassement : overflow-block et overflow-inline. Ces propriétés « logiques » correspondent aux propriétés « physiques » overflow-x et overflow-y où la correspondance varie en fonction du mode d'écriture du document.

+ +

À l'heure où nous écrivons ces lignes, ces deux propriétés ne sont pas implémentées par les navigateurs et il faut donc s'en tenir aux propriétés physiques et ajuster selon le mode d'écriture.

+ +

Gérer le dépassement

+ +

Dans la spécification de niveau 3 sur le dépassement, certaines propriétés aident à améliorer l'apparence du contenu lors d'un dépassement.

+ +

Dépassement sur l'axe en ligne

+ +

La propriété text-overflow indique comment afficher le texte qui dépasse sur l'axe en ligne. La valeur clip qui coupe le contenu qui dépasse, c'est la valeur initiale et le comportement par défaut. La valeur ellipsis permet d'afficher une ellipse qui peut être adaptée en fonction de la langue ou du mode d'écriture utilisé.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

Dépassement sur l'axe de bloc

+ +

Il existe également une proposition pour une propriété block-overflow. Toutefois, celle-ci (ainsi que son nom) est toujours en discussion. La proposition consisterait à pouvoir afficher une ellipse lorsque le contenu dépasse sur l'axe de bloc.

+ +

Cette propriété serait par exemple utile lorsqu'on a une liste d'article avec une boîte pour chaque article dont la hauteur est fixée. Si le texte qui dépasse est masqué, ce n'est pas nécessairement évident qu'il y a du contenu supplémentaire et qu'il faut cliquer pour le lire. Ajouter une ellipse rendrait ce dépassement plus perceptible.

+ +

Résumé

+ +

Qu'on manipule un média « continu » sur le Web ou un format paginé (impression ou EPUB), il est utile de comprendre la façon dont le dépassement agit, quelle que soit la méthode de dépassement. En comprenant comment le dépassement fonctionne avec le flux normal, ce devrait être plus simple de comprendre le fonctionnement du dépassement pour les autres méthodes comme les grilles ou les boîtes flexibles.

diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html deleted file mode 100644 index 2291678c48..0000000000 --- a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Disposition de flux et modes d'écriture -slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes -tags: - - CSS - - Guide - - Mode d'écriture -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes -original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture ---- -

La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

- -

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

- -

La spécification des modes d'écriture

- -

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

- -
-

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

-
- -

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

- -

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

- -

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

- -

La propriété writing-mode et le flux de bloc

- -

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

- -

Voici un exemple avec horizontal-tb.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

- -

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

- -

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

- -

Les boîtes utilisant un mode d'écriture différent de leur parent

- -

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

- -

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

- -

Les éléments remplacés

- -

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

- -

Les propriétés et valeurs logiques

- -

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

- -

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

- -

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

- -

Résumé

- -

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

- -

Voir aussi

- - - -

Ressources externes

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md new file mode 100644 index 0000000000..2291678c48 --- /dev/null +++ b/files/fr/web/css/css_flow_layout/flow_layout_and_writing_modes/index.md @@ -0,0 +1,91 @@ +--- +title: Disposition de flux et modes d'écriture +slug: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +tags: + - CSS + - Guide + - Mode d'écriture +translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes +original_slug: Web/CSS/CSS_Flow_Layout/Disposition_flux_et_modes_écriture +--- +

La spécification CSS 2.1, qui décrit le comportement classique du flux normal, prend l'hypothèse d'un mode d'écriture horizontal. Les propriétés liées à la disposition devraient fonctionner de façon identique pour les modes d'écritures verticaux. Dans ce guide, nous verrons comment le flux normal se comporte selon les différents modes d'écriture.

+ +

Ce guide n'est pas un guide exhaustif sur l'utilisation des modes d'écriture en CSS. Son objectif est de documenter les interactions, éventuellement inattendues, entre le flux et les modes d'écriture. Pour plus de ressources à ce sujet, vous pouvez vour référer aux ressources externes ainsi qu'à la section Voir aussi en fin de page.

+ +

La spécification des modes d'écriture

+ +

Le module de spécification CSS Writing Modes de niveau 3 définit l'impact du mode d'écriture sur le flux. Voici l'introduction de la spécification quant aux modes d'écriture :

+ +
+

« En CSS, un mode d'écriture est défini par les propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Ce mode est principalement défini selon sa direction en ligne (inline) et selon sa direction de bloc. »

+
+ +

La spécification définit la direction en ligne comme la direction selon laquelle le contenu est ordonné sur une ligne. Cela définit le début et la fin de la direction en ligne. Le début correspond à l'emplacement du début d'une phrase sur la ligne et la fin correspond à l'emplacement où la ligne de texte se coupe pour passer sur une nouvelle ligne.

+ +

La direction de bloc correspond à la direction selon laquelle les boîtes (ex. les paragraphes) s'empilent pour ce mode d'écriture. La propriété writing-mode contrôle la direction de bloc. Si on souhaite changer la page ou une partie de la page afin d'utiliser la direction vertical-lr, on pourra utiliser writing-mode: vertical-lr sur un élément. Cela aura pour effet de modifier la direction de bloc et, par conséquent, de modifier la direction en ligne.

+ +

Les modes d'écritures peuvent être utilisés pour respecter la façon d'écrire de certaines langues. Ils peuvent également être utilisés à des fins stylistiques (pour avoir un titre vertical par exemple).

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

La propriété writing-mode et le flux de bloc

+ +

La propriété {{cssxref("writing-mode")}} s'utilise avec les valeurs horizontal-tb, vertical-rl et vertical-lr. Ces valeurs contrôlent la direction selon laquelle les blocs se suivent sur la page. La valeur initiale de cette propriété est horizontal-tb ce qui signifie que l'axe de bloc est dirigé de haut en bas (tb pour top to bottom qui signifie de haut en bas) et que l'axe en ligne est horizontal. Les langues qui s'écrivent de gauche à droite telles que le français ou les langues qui s'écrivent de droite à gauche telles que l'arabe utilisent toutes horizontal-tb.

+ +

Voici un exemple avec horizontal-tb.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

La valeur vertical-rl permet d'avoir une direction de bloc de droite à gauche et une direction en ligne verticale, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

Dans cet autre exemple, on voit comment se comporte la troisième valeur possible pour writing-mode : vertical-lr. On a une direction de bloc horizontal de la gauche vers la droite et une direction en ligne verticale.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

Les boîtes utilisant un mode d'écriture différent de leur parent

+ +

Lorsqu'une boîte imbriquée se voit affecter un mode d'écriture différent de son parent, une boîte en ligne s'affichera comme si elle avait display: inline-block.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

Une boîte de bloc créera un nouveau contexte de formatage. Ainsi, si son type d'affichage intérieur vaut flow, le type d'affichage calculé sera flow-root. On peut voir ce comportement dans l'exemple qui suit où la boîte affichée avec horizontal-tb contient un élément flottant contenu car son élément parent crée un nouveau contexte de formatage.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

Les éléments remplacés

+ +

Les éléments remplacés tels que les images ne changeront pas d'oritentation selon la valeur de la propriété writing-mode. Toutefois, les éléments remplacés tels que les éléments de formulaires qui incluent du texte devraient utiliser le mode d'écriture courant.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

Les propriétés et valeurs logiques

+ +

Lorsqu'on travaille avec des modes d'écriture autres que horizontal-tb, la plupart des propriétés et des valeurs correspondant aux dimensions physiques de l'écran semblent étranges. Ainsi, si on a une boîte qui fait 100 pixels de large, avec horizontal-tb cette largeur sera selon la direction en ligne. Mais avec le mode vertical-lr cela contrôlera la direction de bloc car elle ne tourne pas avec le texte.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

C'est pour cela que des propriétés logiques ont fait leur apparition comme {{cssxref("block-size")}} et {{cssxref("inline-size")}}. Si on fournit inline-size: 100px sur un bloc, peu importe qu'on ait un mode d'écriture horizontal ou vertical, inline-size correspondra à la direction en ligne quoi qu'il arrive.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

Le module de spécification CSS sur les propriétés et valeurs logiques contient des versions logiques des propriétés contrôlant les marges, le remplissage (padding) et les bordures et d'autres correspondances pour les concepts qu'on manipulait habituellement avec des directions physiques.

+ +

Résumé

+ +

Dans la plupart des cas, la disposition de flux fonctionne comme on s'y attend lorsqu'on change le mode d'écriture du document ou d'une de ses parties. Les modes d'écritures peuvent être utilisés pour écrire correctement une langue ou pour des aspects créatifs. CSS facilite cette utilisation en introduisant des propriétés et des valeurs logiques qui fonctionnent de façon homogène quel que soit le mode d'écriture. On peut alors créer des composants qui fonctionneront avec différents modes d'écriture.

+ +

Voir aussi

+ + + +

Ressources externes

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html deleted file mode 100644 index 5a796df22f..0000000000 --- a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Être ou ne pas être dans le flux -slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow -original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors ---- -
{{CSSRef}}
- -

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

- -

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

- -

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

- -

Retirer un élément du flux

- -

Tous les éléments d'un document sont dans le flux à l'exception :

- - - -

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

- -

Les éléments flottants

- -

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

- -

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

- -

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

- -

Le positionnement absolu

- -

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

- -

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

- -

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

- -

Le positionnement relatif et le flux

- -

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

- -

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

- -

Résumé

- -

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

- -

Voir aussi

- - diff --git a/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md new file mode 100644 index 0000000000..5a796df22f --- /dev/null +++ b/files/fr/web/css/css_flow_layout/in_flow_and_out_of_flow/index.md @@ -0,0 +1,69 @@ +--- +title: Être ou ne pas être dans le flux +slug: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow +original_slug: Web/CSS/CSS_Flow_Layout/Dans_le_flux_ou_en_dehors +--- +
{{CSSRef}}
+ +

Dans le précédent guide, nous avons vu le fonctionnement de la disposition en ligne et en bloc dans le flux normal. Tous les éléments qui sont « dans » le flux seront disposés grâce à cette méthode.

+ +

Dans l'exemple qui suit, on a un titre, un paragraphe, une liste puis un paragraphe final qui contient un élément strong. Le titre et les paragraphes sont des éléments de blocs et l'élément strong est un élément en ligne. La liste est affichée en utilisant les boîtes flexibles afin d'avoir les éléments de la liste sur une même ligne mais cette liste contribue bien à la disposition en ligne et en bloc car le conteneur a un type display externe qui vaut block.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

Dans ce cas, on peut dire que tous les éléments sont « dans le flux » et ils apparaissent sur la page selon le même ordre que le document source.

+ +

Retirer un élément du flux

+ +

Tous les éléments d'un document sont dans le flux à l'exception :

+ + + +

Les éléments qui ne sont pas dans le flux créent un nouveau contexte de formatage de bloc (ou Block Formatting Context (BFC) en anglais) et tout ce qui est dans ce contexte peut être vu comme une disposition imbriquée, séparée et indépendante du reste de la page. L'élément racine est ainsi en dehors du flux car c'est le conteneur qui contient l'intégralité du document et qui fournit le contexte de formatage de bloc pour l'ensemble du document.

+ +

Les éléments flottants

+ +

Dans cet exemple, on a un élément div puis deux paragraphes. On a ajouté une couleur d'arrière-plan sur les paragraphes puis on a appliqué un flottement à gauche pour l'élément div. L'élément div est désormais en dehors du flux.

+ +

Un élément flottant est d'abord disposé à l'endroit où il aurait été dans le flux normal puis il est retiré du flux et déplacé. Ici, il est déplacé le plus à gauche possible.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

On peut voir que la couleur du paragraphe suivant s'étend en dessous. Seules les boîtes de ligne du paragraphe ont été raccourcies et causent le passage à la ligne du contenu autour de l'élément flottant. La boîte du paragraphe s'affiche toujours selon les règles du flux normal. C'est pour cela qu''il faut ajouter une marge autour de l'élément flottant si on veut créer un espace autour. Avec une marge, on repoussera les boîtes de lignes adjacentes. Il n'est pas possible d'appliquer quoi que ce soit au contenu dans le flux pour obtenir le même effet.

+ +

Le positionnement absolu

+ +

En utilisant position: absolute ou position: fixed sur un élément, celui-ci est retiré du flux et tout l'espace qu'il aurait occupé est retiré. Dans l'exemple ci-après, on a trois paragraphes et le deuxième est ciblé avec position absolute et décalé avec les valeurs top: 30px et right: 30px. Cet élément est retiré du flux du document.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

Utiliser position: fixed retire également un objet de flux. Dans ce cas, les décalages seront calculés relativement à la zone d'affichage (viewport) plutôt que par rapport au bloc englobant.

+ +

Lorsqu'on retire un élément du flux grâce au positionnement, il faut également gérer les cas où le contenu peut se superposer. Lorsqu'un élément est en dehors du flux, les autres éléments ne « sauront » plus qu'il est là et ne seront pas déplacés pour lui laisser la place.

+ +

Le positionnement relatif et le flux

+ +

Si on fournit un positionnement relatif en appliquant position: relative à un élément, celui-ci reste dans le flux mais on peut alors utiliser des décalages pour le déplacer. Toutefois, l'espace initialement occupé par l'élément est toujours réservé, comme on peut le voir dans l'exemple qui suit.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

Dès qu'on retire ou qu'on décale un élément de son emplacement dans le flux normal, il faut s'attendre à devoir gérer le contenu environnant pour éviter les chevauchements. On pourra par exemple utiliser les flottements ou s'assurer que l'élément utilisant position: absolute n'est pas sur un autre contenu. C'est pour ces raisons que les méthodes qui retirent les éléments du flux doivent être utilisées avec circonspection.

+ +

Résumé

+ +

Dans ce guide, nous avons vu les différentes façons qui permettent de retirer un élément du flux afin d'obtenir certains positionnements spécifiques. Dans le prochain guide, nous verrons un concept similaire, celui de contexte de formatage de bloc dans Explications relatives aux contextes de formatage.

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/css_flow_layout/index.html b/files/fr/web/css/css_flow_layout/index.html deleted file mode 100644 index c4932f195c..0000000000 --- a/files/fr/web/css/css_flow_layout/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: CSS Flow Layout -slug: Web/CSS/CSS_Flow_Layout -tags: - - CSS - - CSS Flow Layout - - Reference -translation_of: Web/CSS/CSS_Flow_Layout ---- -
{{CSSRef}}
- -

Le flux normal ou « disposition en flux » (Flow Layout) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du flux, il est traité indépendamment.

- -

Avec un flux normal, les éléments en ligne (inline elements) sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon le mode d'écriture du document. Les éléments de bloc (block elements) sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.

- -

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

- -

Exemple simple

- -

Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.

- -

La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.

- -

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

- -

Guides

- - - -

Référence

- -

Termes du glossaire

- - diff --git a/files/fr/web/css/css_flow_layout/index.md b/files/fr/web/css/css_flow_layout/index.md new file mode 100644 index 0000000000..c4932f195c --- /dev/null +++ b/files/fr/web/css/css_flow_layout/index.md @@ -0,0 +1,42 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS + - CSS Flow Layout + - Reference +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

Le flux normal ou « disposition en flux » (Flow Layout) correspond à la façon dont les éléments de bloc et les éléments en ligne sont disposés avant tout changement apporté à leur disposition. Lorsqu'un élément est retiré du flux, il est traité indépendamment.

+ +

Avec un flux normal, les éléments en ligne (inline elements) sont affichés dans la direction « en incise », c'est-à-dire dans le sens dans lequel les mots sont écrits selon le mode d'écriture du document. Les éléments de bloc (block elements) sont affichés les uns après les autres, à la façon des paragraphes selon le mode d'écriture du document.

+ +

Par exemple, pour un document français, les éléments en ligne sont affichés les uns à la suite des autres de gauche à droite et les éléments de bloc sont affichés les uns en dessous des autres.

+ +

Exemple simple

+ +

Dans l'exemple suivant, on peut voir des boîtes de bloc et des boîtes en ligne. Les deux éléments correspondants aux paragraphes avec des bordures vertes sont des éléments de bloc. Ces deux éléments s'affichent l'un en dessous de l'autre.

+ +

La première phrase contient également un élément {{HTMLElement("span")}} avec un arrière-plan bleu. C'est un élément en ligne qui s'affiche donc en incise de la phrase.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Guides

+ + + +

Référence

+ +

Termes du glossaire

+ + diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html deleted file mode 100644 index 6478b943bc..0000000000 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Explications quant aux contextes de formatage -slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts -tags: - - CSS - - Guide - - Intermédiaire -translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts -original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage ---- -
{{CSSRef}}
- -

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

- -

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

- -

Le contexte de formatage de bloc

- -

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

- -

Créer un nouveau contexte de formatage de bloc

- -

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

- -

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

- - - -

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

- -

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

- -

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

- -

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

- -

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

- -

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

- -

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

- -

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

- -

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

- -

Un contexte de formatage en ligne

- -

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

- -

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

- -

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

- -

Les autres contexte de formatage

- -

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

- -

Résumé

- -

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

- -

Voir aussi

- - - -
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md new file mode 100644 index 0000000000..6478b943bc --- /dev/null +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md @@ -0,0 +1,90 @@ +--- +title: Explications quant aux contextes de formatage +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +original_slug: Web/CSS/CSS_Flow_Layout/Explications_contextes_formatage +--- +
{{CSSRef}}
+ +

Dans cet article, nous aborderons le concept des contextes de formatage. Ceux-ci peuvent être de dfiférents types : contextes de formatage de bloc, contextes de formatage en ligne, contextes de formatage flexibles. Nous verrons les bases de leur comportement et comment les utiliser.

+ +

Sur une page web, tout s'inscrit dans un contexte de formatage, une zone qui a été définie pour être organisée d'une certaine façon. Un contexte de formatage en bloc (ou block formatting context (BFC)) organisera ses éléments fils selon une disposition en bloc, un contexte de formatage flexible organisera ses éléments fils comme des objets flexibles, etc. Chaque contexte de formatage possède des règles spécifiques qui décrivent le comportement de la disposition pour ce contexte.

+ +

Le contexte de formatage de bloc

+ +

L'élément html définit le contexte de formatage de bloc initial pour la page. Cela signifie que tous les éléments contenus dans <html></html> s'organisent selon le flux normal en suivant les règles de la disposition de bloc et en ligne. Les élméents qui participent à un contexte de formatage de bloc (Block formatting context ou BFC en anglais) utilisent les règles décrites par le modèle de boîte CSS qui définit la façon dont les marges, bordures et zones de remplissage (padding) d'un élément interagissent avec les autres blocs du même contexte.

+ +

Créer un nouveau contexte de formatage de bloc

+ +

L'élément {{HTMLElement("html")}} n'est pas le seul élément capable de créer un nouveau contexte de formatage de bloc. Des propriétés CSS peuvent également être utilisées afin de créer un contexte de formatage de bloc. Cela peut s'avérer utile car un nouveau contexte se comportera comme notre document : on aura une mini-disposition contenu dans la disposition principale. Un contexte de formatage de bloc contient tout ses éléments fils et ses descendants. Le flottement ({{cssxref("float")}}) ou le dégagement ({{cssxref("clear")}}) ne s'appliqueront qu'aux éléments d'un même contexte de formatage. Les marges ne fusionneront que pour des éléments d'un même contexte formatage.

+ +

Au delà de l'élément racine du document (ici l'élément html), un nouveau contexte de formatage de bloc est créé dans les situations suivantes :

+ + + +

Prenons quelques exemples afin de voir les conséquences de la création d'un nouveau contexte de formatage de bloc.

+ +

Dans le prochain exemple, on a un élément flottant à l'intérieur d'un élément <div> où une bordure est appliquée. Le contenu de cet élément div flotte avec l'élément flottant. Le contenu de l'élément flottant étant plus grand que le contenu environnant, la bordure du div passe sur le contenu flottant. Comme expliqué dans le guide sur les éléments appartenant ou non au flux, l'élément flottant a été retiré du flux afin que l'arrière-plan et la bordure du div ne contienne que le contenu et pas l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

En créant un nouveau contexte, l'élément flottant serait contenu dans ce contexte. Par le passé, une méthode classique consistait à appliquer overflow: auto ou à utiliser d'autres valeurs que overflow: visible.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

En utilisant overflow: auto, on crée un nouveau contexte de formatage de bloc qui contient l'élément flottant. Notre élément div devient en quelque sorte responsable de sa disposition interne et chaque élément enfant sera intégré dans cette disposition.

+ +

Toutefois, utiliser overflow pour créer un nouveau contexte de formatage peut poser problème car la propriété overflow est avant tout conçue pour indiquer au navigateur comment on souhaite gérer le contenu qui dépasse. On peut obtenir des situations où on obtient des barres de défilement indésirables ou des ombres rognées lorsqu'on utilise principalement cette propriété pour créer un nouveau contexte. De plus, cette méthode peut ne pas être évidente et lisible pour un autre développeur et complexifier la maintenance du code associé. Si vous devez utiliser cette méthode, mieux vaudra commenter le code pour l'expliquer.

+ +

Créer un contexte de formatage de bloc explicite : utiliser display: flow-root

+ +

Une valeur plus récente de display permet de créer un nouveau contexte de formatage de bloc sans autre effet de bord indésirable. En utilisant display: flow-root sur le bloc englobant, on créera un nouveau contexte de formatage de bloc.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

Ainsi, en utilisant display: flow-root; sur l'élément {{HTMLElement("div")}} tout son contenu contribue au contexte de formatage de bloc et l'élément flottant n'est plus éjecté en bas de l'élément.

+ +

Le nom de cette valeur, flow-root, prend son sens lorsqu'on voit que l'élément agit comme une racine (root) pour le nouveau contexte qui est créé.

+ +

Un contexte de formatage en ligne

+ +

Les contextes de formatage en ligne existent au sein des autres contextes de formatage et peuvent être vus comme le contexte d'un paragraphe. Un paragraphe crée un contexte de formatage en ligne au sein duquel les éléments {{HTMLElement("strong")}}, {{HTMLElement("a")}} ou {{HTMLElement("span")}} entre autres, sont utilisés sur du texte.

+ +

Le modèle de boîte ne s'applique pas complètement aux objets qui s'inscrivent dans un contexte de formatage en ligne. Pour une ligne écrite avec un mode d'écriture horizontal, les remplissages (padding), bordures et marges seront appliqués à l'élément et écarteront le texte environnant à droite et ou à gauche. Le remplissage et bordures verticaux seront appliqués mais peuvent chevaucher le contenu au dessus et en dessous. Pour un contexte de formatage en ligne, les boîtes de ligne ne seront pas décalées par les bordures ou par le remplissage.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

Les autres contexte de formatage

+ +

Ce guide porte sur la disposition de flux et n'aborde pas tous les contextes de formatage possibles en dehors de ce type de disposition. Il est important de comprendre que n'importe quel contexte de formatage modifiera la façon dont ses éléments et son contenu sont organisés. Le comportement des autres contextes de formatage est décrit dans les modules de spécification respectifs et sur MDN.

+ +

Résumé

+ +

Dans ce guide, nous avons approfondi les notions relatives aux contextes de formatage en ligne et de bloc. Dans le prochain guide, nous verrons les interactions entre le flux normal et les différents modes d'écriture.

+ +

Voir aussi

+ + + +
{{QuickLinksWithSubpages("/fr/docs/Web/CSS/CSS_Flow_Layout/")}}
-- cgit v1.2.3-54-g00ecf