From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- .../basic_concepts_of_multicol/index.md | 100 ++++++------- .../handling_content_breaks_in_multicol/index.md | 74 +++++---- .../handling_overflow_in_multicol/index.md | 42 +++--- files/fr/web/css/css_columns/index.md | 145 ++++++++---------- .../web/css/css_columns/spanning_columns/index.md | 56 ++++--- .../web/css/css_columns/styling_columns/index.md | 40 ++--- .../using_multi-column_layouts/index.md | 166 +++++++++++---------- 7 files changed, 299 insertions(+), 324 deletions(-) (limited to 'files/fr/web/css/css_columns') diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md index 344caf8221..74f2583388 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md @@ -7,87 +7,85 @@ tags: translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

La disposition sur plusieurs colonnes (« Multiple-column Layout » ou « multicol » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples.

+La disposition sur plusieurs colonnes (« _Multiple-column Layout_ » ou « _multicol_ » en anglais) est un module de spécification pour organiser du contenu sur un ensemble de colonnes, à la façon des colonnes dans un journal imprimé. Dans ce guide, nous verrons comment fonctionne cette spécification et quelques cas d'exemples. -

Concepts et terminologie

+## Concepts et terminologie -

La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification CSS Paged Media.

+La disposition multi-colonnes se distinguent des autres dispositions CSS car elle fragmente le contenu, y compris les éléments descendants, en colonnes. Cela se produira de façon analogue en fragmentant sur des pages avec le module de spécification [CSS Paged Media](/fr/docs/Web/CSS/CSS_Pages). -

Les propriétés définies dans cette spécification sont :

+Les propriétés définies dans cette spécification sont : - +- {{cssxref("column-width")}} +- {{cssxref("column-count")}} +- {{cssxref("columns")}} +- {{cssxref("column-rule-color")}} +- {{cssxref("column-rule-style")}} +- {{cssxref("column-rule-width")}} +- {{cssxref("column-rule")}} +- {{cssxref("column-span")}} +- {{cssxref("column-fill")}} +- {{cssxref("column-gap")}} -

En ajoutant column-count ou column-width à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification.

+En ajoutant `column-count` ou `column-width` à un élément, on le transforme en conteneur multi-colonnes. Les colonnes sont des boîtes anonymes et sont décrites comme des « boîtes de colonne » dans la spécification. -

Definir des colonnes

+## Definir des colonnes -

Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété column-* (column-count ou column-width).

+Afin de créer un conteneur multi-colonnes, il est nécessaire d'utiliser au moins une propriété `column-*` (`column-count` ou `column-width`). -

La propriété column-count

+### La propriété `column-count` -

La propriété column-count définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué.

+La propriété `column-count` définit le nombre de colonnes sur lesquelles on veut afficher le contenu. Le navigateur affectera l'espace nécessaire à chaque boîte de colonne afin d'en créer le nombre indiqué. -

Dans l'exemple qui suit, on utilise la propriété column-count afin de créer trois colonnes au sein de l'élément .container. Le contenu, y compris l'élément fils de .container est alors divisé en trois colonnes.

+Dans l'exemple qui suit, on utilise la propriété `column-count` afin de créer trois colonnes au sein de l'élément `.container`. Le contenu, y compris l'élément fils de `.container` est alors divisé en trois colonnes. -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}} -

Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne fusionnent pas avec les marges du conteneur.

+Dans l'exemple qui précède, le contenu est intégré dans des paragraphes avec une mise en forme par défaut. Aussi, il y a une marge au dessus de chaque paragraphe. On peut voir comment cette marge décale la première ligne de texte vers le bas. Cela se produit car un conteneur multi-colonnes crée un nouveau contexte de formatage de bloc, ce qui signifie que les marges des éléments fils ne [fusionnent](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Fusion_des_marges) pas avec les marges du conteneur. -

La propriété column-width

+### La propriété `column-width` -

La propriété column-width est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour column-width, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir column-width comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite.

+La propriété `column-width` est utilisé afin de définir la largeur optimale pour chaque boîte de colonne. Si on déclare une valeur pour `column-width`, le navigateur calculera combien de colonnes de cette taille peuvent être intégrées puis répartira l'espace supplémentaire équitablement entre les colonnes. Aussi mieux vaut-il voir `column-width` comme une largeur minimale plutôt que comme une largeur exacte, l'espace restant étant rajouté ensuite. -

Il existe un seul cas où la boîte de colonne peut être plus petite que column-width : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à column-width.

+Il existe un seul cas où la boîte de colonne peut être plus petite que `column-width` : lorsqu'il n'y a qu'une seule colonne et que l'espace disponible est inférieur à `column-width`. -

Dans l'exemple qui suit, on utilise la propriété column-width avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes.

+Dans l'exemple qui suit, on utilise la propriété `column-width` avec une valeur de 200px et on obtient donc autant de colonnes de 200 pixels que possible avec l'espace restant partagé équitablement entre les différentes colonnes. -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/basics/column-width.html", '100%', 550)}} -

Utiliser column-count et column-width

+### Utiliser `column-count` et `column-width` -

Si on définit les deux propriétés pour un conteneur multi-colonnes, column-count agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour column-width aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par column-count soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur column-width).

+Si on définit les deux propriétés pour un conteneur multi-colonnes, `column-count` agira comme un maximum pour le nombre de colonnes. Le comportement décrit avant pour `column-width` aura bien lieu, jusqu'à ce que le nombre de colonnes décrit par `column-count` soit atteint. Ensuite, aucune autre colonne ne sera ajoutée et l'espace restant sera réparti entre les colonnes existantes (et ce même si l'espace restant permettrait de rajouter une ou plusieurs colonnes de largeur `column-width`). -

Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec column-count.

+Lorsqu'on utilise les deux propriétés ensemble, on peut obtenir un nombre de colonnes réel inférieur à la valeur fournie avec `column-count`. -

Dans l'exemple suivant, on utilise column-width avec une valeur de 200px et column-count avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une.

+Dans l'exemple suivant, on utilise `column-width` avec une valeur de 200px et `column-count` avec une valeur de 2. S'il y a de l'espace pour plus de deux colonnes, on aura uniquement deux colonnes. S'il n'y a pas assez d'espace pour deux colonnes de 200 pixels, il n'y en aura qu'une. -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/basics/column-count-width.html", '100%', 550)}} -

La propriété raccourcie columns

+### La propriété raccourcie `columns` -

La propriété raccourcie columns peut être utilisée afin de définir à la fois column-count et column-width. Si on utilise une unité de longueur, la valeur sera utilisée pour column-width, si on utilise un entier, la valeur sera utilisée pour column-count. Les deux peuvent être définies simultanément en étant séparées d'un espace.

+La [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) `columns` peut être utilisée afin de définir à la fois `column-count` et `column-width`. Si on utilise une unité de longueur, la valeur sera utilisée pour `column-width`, si on utilise un entier, la valeur sera utilisée pour `column-count`. Les deux peuvent être définies simultanément en étant séparées d'un espace. -

Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où column-count vaut 3.

+Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où `column-count` vaut 3. -
.container {
-  columns: 3;
-}
+ .container { +   columns: 3; + } -

Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où column-width vaut 200px.

+Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où `column-width` vaut `200px`. -
.container {
-  columns: 200px;
-}
+ .container { + columns: 200px; + } -

Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés column-count et column-width sont définies.

+Enfin, ce fragment de code CSS donnera le même résultat que le troisième exemple où les deux propriétés `column-count` et `column-width` sont définies. -
.container {
-  columns: 2 200px;
-}
+ .container { + columns: 2 200px; + } -

Prochaines étapes

+## Prochaines étapes -

Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons comment mettre en forme chacune des colonnes.

+Dans ce guide, nous avons vu des cas d'utilisation simples avec une disposition multi-colonnes. Dans le prochain article, nous verrons [comment mettre en forme chacune des colonnes](/fr/docs/Web/CSS/CSS_Columns/Styling_Columns). diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md index fd6bd631ba..9bc898e4b8 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -7,67 +7,61 @@ tags: translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification CSS Fragmentation. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes.

+Le contenu est coupé entre les colonnes d'une disposition multi-colonnes de la même façon qu'il est coupé entre chaque page d'un média paginé. Dans ces deux contextes, la façon dont on contrôle l'emplacement et la coupure se paramètre grâce aux propriétés décrites dans le module de spécification _CSS Fragmentation_. Dans ce guide, nous verrons comment fonctionne la fragmentation en multi-colonnes. -

Quelques notions de bases sur la fragmentation

+## Quelques notions de bases sur la fragmentation -

Le module de spécification CSS Fragmentation détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne.

+[Le module de spécification CSS Fragmentation ](https://www.w3.org/TR/css-break-3/)détaille la façon dont le contenu peut être coupé entre les conteneur de fragmentation. Pour une disposition multi-colonnes, le conteneur de fragmentation correspond à la boîte de colonne. -

Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures.

+Le contenu d'une boîte de colonne peut être varié et une coupure peut être malvenue à certains endroits. On préfèrerait par exemple qu'une légende ne soit pas séparée de l'image entre une colonne et la suivante. Les propriétés relatives à la fragmentation permettent de contrôler certains aspects de ces coupures. -

Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures :

+Voici plusieurs emplacements où on peut souhaiter contrôler les ruptures : - +- Les ruptures à l'intérieur des boîtes, par exemple à l'intérieur d'un élément `
` +- Les ruptures avant et après les boîtes +- Les ruptures entre les lignes -

Les ruptures à l'intérieur des boîtes

+## Les ruptures à l'intérieur des boîtes -

Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes :

+Pour contrôler la façon dont le contenu est coupé à l'intérieur d'une boîte, on pourra utiliser la propriété {{cssxref("break-inside")}}. Cette propriété peut prendre les valeurs suivantes : - +- `auto` +- `avoid` +- `avoid-page` +- `avoid-column` +- `avoid-region` -

Dans l'exemple qui suit, on a appliqué break-inside sur l'élément figure afin d'éviter que la légende soit séparée de l'image.

+Dans l'exemple qui suit, on a appliqué `break-inside` sur l'élément `figure` afin d'éviter que la légende soit séparée de l'image. -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-inside.html", '100%', 800)}} -

Les ruptures avant et après les boîtes

+## Les ruptures avant et après les boîtes -

Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes :

+Les propriétés {{cssxref("break-before")}} et {{cssxref("break-after")}} contrôlent respectivement les ruptures avant et après les éléments. Dans une disposition multi-colonnes, ces propriétés peuvent être utilisées avec les valeurs suivantes : - +- `auto` +- `avoid` +- `avoid-column` +- `column` -

Avec l'exemple suivant, on force une rupture avant chaque élément de titre h2.

+Avec l'exemple suivant, on force une rupture avant chaque élément de titre `h2`. -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/break-before.html", '100%', 800)}} -

Les ruptures entre les lignes

+## Les ruptures entre les lignes -

On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  orphans contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété widows contrôle le nombre de lignes qui restent au début d'un fragment.

+On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété  `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. -

Les propriétés orphans et widows prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble.

+Les propriétés `orphans` et `widows` prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble. -

Dans l'exemple ci-après, on utilise la propriété orphans pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu.

+Dans l'exemple ci-après, on utilise la propriété `orphans` pour contrôler le nombre de lignes conservées à la fin d'une colonne. Vous pouvez modifier la valeur afin de voir l'impact sur la rupture du contenu. -

{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/fragmentation/orphans.html", '100%', 800)}} -

Résultat non garanti

+## Résultat non garanti -

Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres.

+Si on souhaite prévenir la rupture à de nombreux endroits, le navigateur sera quand même obligé de couper le contenu entre les colonnes. D'une certaine façon, ces propriétés agissent plutôt comme des suggestions envers le moteur que comme des ordres. -

De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables.

+De plus, la prise en charge de ces propriétés n'est pas la plus homogène possible entre les navigateurs. Vous pouvez vous référer aux tableaux de compatibilité des pages de chaque propriété pour en savoir plus. Dans la plupart des cas, mieux vaudra encore laisser gérer le système plutôt que d'avoir trop de ruptures aux endroits indésirables. diff --git a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md index e37d560b61..ccd8a2d25b 100644 --- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md @@ -7,44 +7,42 @@ tags: translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur.

+Dans ce guide, nous verrons comment gérer le dépassement avec une disposition multi-colonnes. Le dépassement peut avoir lieu pour chaque boîte de colonne ou lorsqu'il y a plus de contenu que de place dans le conteneur. -

Le dépassement dans les boîtes des colonnes

+## Le dépassement dans les boîtes des colonnes -

On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de column-width ou à la largeur des colonnes selon le nombre indiqué avec column-count.

+On peut avoir un dépassement lorsqu'un objet est plus grand que la taille de la boîte de la colonne. Cela peut notamment se produire lorsqu'on a une image dans une colonne et que la largeur de cette image est supérieure à la valeur de `column-width` ou à la largeur des colonnes selon le nombre indiqué avec `column-count`. -

Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent).

+Dans cette situation, le contenu dépasse sur la prochaine colonne et n'est pas rogné à la boîte de la colonne. Voici un exemple qui suit et une illustration du résultat attendu (les navigateurs actuels pouvant afficher un résultat différent). -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/image.html", '100%', 800)}} -

+![](image-overflow-multicol.png) -

Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et max-width: 100% pour y parvenir.

+Si on veut une image qui se réduise à la boîte de la colonne, on pourra utiliser les solutions pour les images adaptatives et `max-width: 100%` pour y parvenir. -

{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/image-max-width.html", '100%', 800)}} -

Plus de colonnes que d'espace disponible

+## Plus de colonnes que d'espace disponible -

La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ?

+La façon dont les colonnes dépassent dépend du contexte dans lequel le document est affiché : est-ce un média fragmenté (pour l'impression par exemple) ou un média continu (une page web par exemple) ? -

Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal.

+Pour un média fragmenté, une fois qu'un fragment (ex. une page) est rempli de colonnes, les colonnes suivantes seront ajoutées sur le fragment suivant (ex. une nouvelle page) et ainsi de suite. Pour les médias continus, les colonnes dépasseront selon l'axe en ligne. Pour le Web, cela signifie qu'on aura une barre de défilement horizontal. -

Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur.

+Dans l'exemple qui suit, on peut observer un tel dépassement. Le conteneur multi-colonnes possède une hauteur fixée et il y a plus de texte que d'espace nécessaire pour créer des colonnes. On a alors des colonnes créées en dehors du conteneur. -

{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/overflow-inline.html", '100%', 800)}} -
-

Note : On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne).

-
+> **Note :** On peut souhaiter qu'une future version de la spécification permette de préciser la direction selon laquelle les colonnes qui dépassent sont affichées et ainsi pouvoir dépasser dans la direction de bloc (et non uniquement selon l'axe en ligne). -

Utiliser les requêtes média verticales

+## Utiliser les requêtes média verticales -

Lorsque les colonnes sont plus hautes que la zone d'affichage (viewport), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante.

+Lorsque les colonnes sont plus hautes que la zone d'affichage (_viewport_), par défaut, le lecteur devra faire défiler le contenu verticalement pour tout voir, dégradant ainsi l'ergonomie. Pour éviter ce problème, on peut n'appliquer les colonnes que lorsque la hauteur est suffisante. -

Dans l'exemple qui suit, on utilise par exemple une requête média avec min-height pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes.

+Dans l'exemple qui suit, on utilise par exemple une requête média avec `min-height` pour vérifier la hauteur avant d'appliquer les propriétés relatives aux colonnes. -

{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/overflow/min-height.html", '100%', 800)}} -

Dans le dernier guide de cette série, nous verrons comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes.

+Dans le dernier guide de cette série, nous verrons [comment la disposition multi-colonnes interagit avec le module de spécification Fragmentation](/fr/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) et nous permet de contrôler la façon dont le contenu est coupé entre les colonnes. diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md index 80a7ed7f0a..e5d4cc5ffa 100644 --- a/files/fr/web/css/css_columns/index.md +++ b/files/fr/web/css/css_columns/index.md @@ -8,86 +8,65 @@ tags: - Reference translation_of: Web/CSS/CSS_Columns --- -
{{CSSRef}}
- -

Les colonnes CSS (CSS Multi-column Layout en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes.

- -

Exemple simple

- -

Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe container. La valeur de la propriété column-count est 3, et le contenu est donc arrangé entre trois colonnes de tailles égales.

- -

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

- -

Liens avec le module de spécification CSS Fragmentation

- -

La disposition en colonnes est fortement liée aux média paginés pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification CSS Fragmentation sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes.

- -

Référence

- -

Propriétés relatives à la disposition en colonnes

- - - -

Propriétés relatives à la fragmentation

- - - -

Guides

- -
-
Concepts de base relatifs à la disposition en colonnes
-
Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes.
-
Mettre en forme les colonnes
-
Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes.
-
Équilibrer le remplissement des colonnes
-
Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies.
-
Gérer le dépassement
-
Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes.
-
Gérer la fragmentation du contenu en multi-colonnes
-
Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes.
-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Définition initiale.
- -

Voir aussi

- -

Les autres modules liées aux dispositions possibles en CSS :

- - +{{CSSRef}} + +**Les colonnes CSS** (_CSS Multi-column Layout_ en anglais) forment un module CSS qui définit le comportement d'une disposition en colonnes, qui permet de décrire comment le contenu doit être réparti entre les colonnes et qui détaille comment sont gérées les espaces et les règles entre les colonnes. + +## Exemple simple + +Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}}  sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. + +{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}} + +## Liens avec le module de spécification CSS Fragmentation + +La disposition en colonnes est fortement liée aux [média paginés](/fr/docs/Web/CSS/CSS_Pages) pour lesquels chaque colonne devient un fragment (de la même façon qu'une page imprimée devient un fragment d'un document). Aussi, les propriétés désormais définies dans le module de spécification [CSS Fragmentation](/fr/docs/Web/CSS/CSS_Fragmentation) sont nécessaires afin de contrôler la façon dont le contenu est scindé entre les colonnes. + +## Référence + +### Propriétés relatives à la disposition en colonnes + +- {{cssxref("column-count")}} +- {{cssxref("column-fill")}} +- {{cssxref("column-gap")}} +- {{cssxref("column-rule")}} +- {{cssxref("column-rule-color")}} +- {{cssxref("column-rule-style")}} +- {{cssxref("column-rule-width")}} +- {{cssxref("column-span")}} +- {{cssxref("column-width")}} +- {{cssxref("columns")}} + +### Propriétés relatives à la fragmentation + +- {{cssxref("break-after")}} +- {{cssxref("break-before")}} +- {{cssxref("break-inside")}} +- {{cssxref("orphans")}} +- {{cssxref("widows")}} + +## Guides + +- [Concepts de base relatifs à la disposition en colonnes](/fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes) + - : Un aperçu du module de spécification CSS pour la disposition avec plusieurs colonnes. +- [Mettre en forme les colonnes](/fr/docs/Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes) + - : Comment utiliser les règles liées aux colonnes et gérer l'espace entre les colonnes. +- [Équilibrer le remplissement des colonnes](/fr/docs/Web/CSS/CSS_Columns/Répartir_entre_les_colonnes) + - : Comment répartir un élément sur plusieurs colonnes et comment contrôler la façon dont les colonnes sont remplies. +- [Gérer le dépassement](/fr/docs/Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes) + - : Comprendre ce qui se produit quand un élément dépasse de la colonne à laquelle il appartient et ce qui se produit lorsqu'il y a trop de contenu pour un conteneur en colonnes. +- [Gérer la fragmentation du contenu en multi-colonnes](/fr/docs/Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes) + - : Une introduction au module de spécification CSS Fragmentation et à la façon dont le contenu est coupé entre les colonnes. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Multicol')}} | {{Spec2('CSS3 Multicol')}} | Définition initiale. | + +## Voir aussi + +Les autres modules liées aux dispositions possibles en CSS : + +- [Les boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS) +- [Les grilles CSS (_CSS Grid_)](/fr/docs/Web/CSS/CSS_Grid_Layout) diff --git a/files/fr/web/css/css_columns/spanning_columns/index.md b/files/fr/web/css/css_columns/spanning_columns/index.md index 9aa5652293..4725775476 100644 --- a/files/fr/web/css/css_columns/spanning_columns/index.md +++ b/files/fr/web/css/css_columns/spanning_columns/index.md @@ -7,58 +7,56 @@ tags: translation_of: Web/CSS/CSS_Columns/Spanning_Columns original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes.

+Dans ce guide, nous verrons comment répartir les éléments sur plusieurs colonnes et comment contrôler le remplissage des colonnes. -
-

Note : Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés.

-
+> **Note :** Les fonctionnalités décrites dans cet article ne sont pas aussi bien prises en charge que celles décrites dans les deux articles précédents. Pour plus d'informations, nous vous invitons à vous référer aux tableaux de compatibilité à la fin des pages décrivant chacune des propriétés. -

Étendre sur plusieurs colonnes

+## Étendre sur plusieurs colonnes -

Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur all. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes.

+Afin qu'un élément s'étende sur plusieurs colonnes, on peut utiliser la propriété {{cssxref("column-span")}} avec la valeur `all`. Ainsi, l'élément concerné s'étendra sur l'ensemble des colonnes. -

N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur.

+N'importe quel élément descendant du conteneur multi-colonnes peut être étendu de cette façon, que ce soit un titre qui est un élément fils direct ou un titre contenu dans une section contenue dans le conteneur. -

Dans l'exemple qui suit, on a column-span: all appliqué sur l'élément h2 qui s'étend ainsi sur toutes les colonnes.

+Dans l'exemple qui suit, on a `column-span: all` appliqué sur l'élément `h2` qui s'étend ainsi sur toutes les colonnes. -

{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/spanning/h2-span.html", '100%', 800)}} -

Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu.

+Dans ce deuxième exemple, le titre est à l'intérieur de l'élément {{HTMLElement("article")}} mais le contenu est bien réparti comme voulu. -

{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/spanning/nested-h2-span.html", '100%', 800)}} -

Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu.

+Lorsqu'un élément est étendu, il brise le flux des colonnes et un nouvel ensemble de boîtes de colonnes sont créées. Ce n'est pas le contenu qui « reprend » sous l'élément étendu. -

Les limites de column-span

+### Les limites de `column-span` -

Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour column-span : none qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et all qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes.

+Avec la spécification de niveau 1, seules deux valeurs sont autorisées pour `column-span` : `none` qui est la valeur initiale et qui indique que l'élément ne s'étendra pas (il restera sur une colonne) et `all` qui indiquera que l'élément s'étendra sur l'ensemble des colonnes. Ainsi, on ne pourra pas étendre spécifiquement un élément sur deux ou trois colonnes. -

Quelques points d'attention

+### Quelques points d'attention -

Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes.

+Si l'élément qui s'étend est à l'intérieur d'un élément qui possède des marges, du remplissage et une bordure ou une couleur d'arrière-plan, on pourra avoir l'élément qui s'étend et qui recouvre le reste. Aussi, attention à bien gérer ce cas lorsqu'on étend un élément sur plusieurs colonnes. -

{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/multicol/spanning/mpb-span.html", '100%', 800)}} -

De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser column-span avec précaution pour éviter ces effets indésirables.

+De plus, si un élément qui s'étend sur les colonnes se retrouve plus loin dans le contenu, on peut avoir un comportement hasardeux s'il n'y a pas assez de contenu après l'élément étendu pour créer d'autres colonnes. Aussi, mieux vaudra utiliser `column-span` avec précaution pour éviter ces effets indésirables. -

Équilibrer et remplir les colonnes

+## Équilibrer et remplir les colonnes -

Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée.

+Lorsque toutes les colonnes possèdent environ la même quantité de contenu, on parle d'un ensemble équilibré. On pourra jouer sur le remplissage et l'équilibrage des colonnes lorsque la quantité de contenu est inférieure à la quantité d'espace fournie, notamment lorsque le conteneur a une hauteur donnée. -

La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est balance. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que les médias paginés, seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré.

+La valeur initiale de la propriété {{cssxref("column-fill")}}, dans une disposition multi-colonnes, est `balance`. Cette valeur signifie que les colonnes doivent être aussi équilibrées que possible. Pour les contextes fragmentés tels que [les médias paginés](/fr/docs/Web/CSS/CSS_Pages), seul le dernier fragment est équilibré. Cela signifie que c'est sur la dernière page du document que l'ensemble des colonnes sera équilibré. -

La valeur balance-all permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier).

+La valeur `balance-all` permet quant à elle d'avoir des colonnes équilibrées sur l'ensemble des fragments (et pas uniquement sur le dernier). -

Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image.

+Dans cet exemple, on a des colonnes qui contiennent une image et du texte qui sont équilibrées. L'image ne peut pas être divisée et est placée dans la première colonne puis les colonnes suivantes contiennent du texte sur la même hauteur que l'image. -

{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/balancing/balance.html", '100%', 550)}} -

auto est une autre valeur qui peut être utilisée avec column-fill. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié column-fill pour utiliser auto et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin.

+`auto` est une autre valeur qui peut être utilisée avec `column-fill`. Avec cette valeur, plutôt que d'équilibrer les colonnes, celles-ci sont remplies les unes après les autres. Dans ce dernier exemple, on a modifié `column-fill` pour utiliser `auto` et les colonnes sont désormais remplies dans l'ordre en suivant la hauteur du conteneur multi-colonnes. On a ainsi quelques colonnes vides à la fin. -

{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/balancing/auto.html", '100%', 550)}} -

On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés.

+On notera que l'équilibrage des colonnes n'est pas pris en charge de façon homogène par les navigateurs. Aussi, si vous l'utilisez, vérifiez vos résultats dans les différents navigateurs pour contrôler l'effet obtenu. Vous pouvez aussi consulter les tableaux de compatibilité des navigateurs à la fin des pages de chacune des propriétés. -

Dans le prochain guide, nous verrons comment gérer le dépassement au sein d'un conteneur multi-colonnes, à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir.

+Dans le prochain guide, nous verrons [comment gérer le dépassement au sein d'un conteneur multi-colonnes](/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol), à l'intérieur des colonnes et lorsqu'il y a plus de contenu que le conteneur peut en avoir. diff --git a/files/fr/web/css/css_columns/styling_columns/index.md b/files/fr/web/css/css_columns/styling_columns/index.md index 58cf3879e6..c9c25dc039 100644 --- a/files/fr/web/css/css_columns/styling_columns/index.md +++ b/files/fr/web/css/css_columns/styling_columns/index.md @@ -8,42 +8,42 @@ tags: translation_of: Web/CSS/CSS_Columns/Styling_Columns original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes.

+Les boîtes de colonne créées au sein des conteneurs multi-colonnes sont des boîtes anonymes et leur mise en forme est donc limitée. Elle n'est toutefois pas inexistante. Dans ce guide nous verrons comment modifier l'espace entre les colonnes et comment mettre en forme une ligne entre les colonnes. -

Peut-on mettre en forme les boîtes des colonnes ?

+## Peut-on mettre en forme les boîtes des colonnes ? -

Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes.

+Malheureusement, ce n'est pas possible actuellement. Il est impossible de cibler les boîtes anonymes des colonnes de quelque façon que ce soit. On ne peut donc pas changer la couleur d'arrière-plan d'une colonne donnée ou agrandir une colonne plus qu'une autre. De futures versions du module de spécification permettront peut-être de réaliser cela un jour mais nous devons pour le moment nous cantonner à paramétrer l'espacement entre les colonnes et à mettre en forme les lignes séparatrices entre les colonnes. -

L'espaceement : la propriété column-gap

+## L'espaceement : la propriété `column-gap` -

L'espacement entre les colonnes est contrôlé par la propriété column-gap. Cette propriété était initialement définie dans le module de spécification Multi-column Layout mais est désormais définie dans le module de spécification Box Alignment (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que les grilles CSS).

+L'espacement entre les colonnes est contrôlé par la propriété `column-gap`. Cette propriété était initialement définie dans le module de spécification _Multi-column Layout_ mais est désormais définie dans le module de spécification _[Box Alignment](/fr/docs/Web/CSS/CSS_Box_Alignment)_ (dont le but est d'unifier la gestion des espacements entre les boîtes, que ce soit pour les colonnes ou pour d'autres types de disposition telles que [les grilles CSS](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)). -

Dans une disposition multi-colonne, la valeur initiale de la propriété column-gap est 1em. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de column-gap est 0. Le mot-clé normal est une valeur qui permet d'obtenir un écart de 1em.

+Dans une disposition multi-colonne, la valeur initiale de la propriété `column-gap` est `1em`. Cela signifie que les colonnes ne se touchent pas les unes les autres. Pour les autres méthodes de disposition, la valeur initiale de `column-gap` est 0. Le mot-clé `normal` est une valeur qui permet d'obtenir un écart de 1em. -

Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour column-gap. Dans l'exemple qui suit, on a ainsi paramétré column-gap avec la valeur 40px.

+Il est possible de modifier l'espacement en utilisant n'importe quelle unité de longueur pour `column-gap`. Dans l'exemple qui suit, on a ainsi paramétré `column-gap` avec la valeur 40px. -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}}

+{{EmbedGHLiveSample("css-examples/multicol/styling/column-gap.html", '100%', 750)}} -

Les valeurs autorisées pour column-gap sont de type <length-percentage>, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes.

+Les valeurs autorisées pour `column-gap` sont de type ``, cela signifie que les pourcentages sont également autorisés. Lorsque de telles valeurs sont utilisées, elles sont calculées relativement à la largeur du conteneur multi-colonnes. -

Créer un délimiteur entre les colonnes : column-rule

+## Créer un délimiteur entre les colonnes : `column-rule` -

La spécification définit les propriétés column-rule-width, column-rule-style and column-rule-color et fournit une propriété raccourcie column-rule. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour border-style pourra être utilisée pour column-rule-style.

+La spécification définit les propriétés `column-rule-width`, `column-rule-style` and `column-rule-color` et fournit une propriété raccourcie `column-rule`. Ces propriétés fonctionnent de la même façon que les propriétés relatives à la bordure. Toute valeur valide pour `border-style` pourra être utilisée pour `column-rule-style`. -

Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu.

+Ces propriétés sont appliquées à l'élément qui est le conteneur multi-colonnes. Aussi, toutes les colonnes disposeront du même délimiteur. Les lignes sont uniquement dessinées entre les colonnes et pas sur les bords extérieurs. Les lignes sont également uniquement dessinées entre les colonnes qui ont du contenu. -

Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est rebeccapurple, sans utiliser la propriété raccourcie.

+Dans le prochain exemple, on a ajouté une ligne en pointillée, épaisse de 5 pixels et dont la couleur est `rebeccapurple`, sans utiliser la propriété raccourcie. -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule.html", '100%', 550)}} -

On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes.

+On notera que la ligne n'occupe pas d'espace supplémentaire. Autrement dit, une ligne plus épaisse ne « repoussera » pas les colonnes de part et d'autre. La ligne est superposée sur l'espace occupé par l'espacement entre les colonnes. -

Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels.

+Dans le prochain exemple, on utilise une ligne très large de 40 pixels et un espacement qui mesure uniquement 10 pixels. On peut alors voir que la ligne est dessinée sous le contenu des colonnes. Pour avoir un espace de chaque côté de la ligne, il faut avoir un espacement supérieur à 40 pixels. -

{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/multicol/styling/column-rule-wide.html", '100%', 550)}} -

Résumé

+## Résumé -

Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment propager les éléments du conteneur sur l'ensemble des colonnes.

+Voici comment mettre en forme les colonnes avec les contraintes actuelles. Dans le prochain guide, nous verrons comment [propager les éléments du conteneur sur l'ensemble des colonnes](/fr/docs/Web/CSS/CSS_Columns/Spanning_Columns). diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md index 4dd83dfefd..faf44e11f3 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md @@ -8,71 +8,74 @@ tags: translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

La disposition multi-colonnes étend le mode de disposition en bloc et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal.

+La **disposition multi-colonnes** étend _le mode de disposition en bloc_ et permet de définir simplement plusieurs colonnes de texte. Lorsqu'on lit un texte, si les lignes sont trop longues, il faudra trop de temps aux yeux pour revenir au début de la ligne et passer à la ligne suivante : on perdra alors la ligne sur laquelle on était. Ainsi, pour utiliser efficacement l'espace fourni par un grand écran, on préfèrera utiliser des colonnes de largeur fixe, disposée côte à côte, à la façon d'un journal. -

Utiliser les colonnes CSS

+## Utiliser les colonnes CSS -

Le nombre de colonnes et leur largeur

+### Le nombre de colonnes et leur largeur -

Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}.

+Deux propriétés CSS permettent de définir quand et comment les colonnes apparaissent : {{cssxref("column-count")}} et {{cssxref("column-width")}}. -

On utilisera la propriété column-count pour définir le nombre de colonnes qu'on souhaite avoir.

+On utilisera la propriété `column-count` pour définir le nombre de colonnes qu'on souhaite avoir. -

Utilisation de column-count

+#### Utilisation de `column-count` -
CSS
+##### CSS -
#col {
+```css
+#col {
   column-count: 2;
 }
-
+``` -
HTML
+##### HTML -
<div id="col">
-  <p>
+```html
+

+  

     Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna
     aliqua.
-  </p>
-  <p>
+  

+  

     Ut enim ad minim veniam, quis nostrud exercitation ullamco
     laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-  <p>
+  

+  

     Duis aute irure dolor in reprehenderit in voluptate velit
     esse cillum dolore eu fugiat nulla pariatur.
-  </p>
-  <p>
+  

+  

     Excepteur sint occaecat cupidatat non proident, sunt in
     culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</div>
-
+ 

+ +``` -
Résultat
+##### Résultat -

{{EmbedLiveSample('Utilisation_de_column-count','100%')}}

+{{EmbedLiveSample('Utilisation_de_column-count','100%')}} -

Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes.

+Si on utilise un navigateur qui permet d'utiliser ce module CSS, on aura un contenu affiché sur 2 colonnes. -

La propriété column-width permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété column-count n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible.

+La propriété `column-width` permet quant à elle de définir la largeur minimale d'une colonne. Si la propriété `column-count` n'est pas utilisée, le navigateur créera automatiquement autant de colonnes que le permet la largeur disponible. -

Utilisation de column-width

+#### Utilisation de `column-width` -
CSS
+##### CSS -
#wid {
+```css
+#wid {
   column-width: 100px;
 }
-
+``` +##### HTML -
HTML
- -
<div id="wid">
+```html
+

   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation
@@ -81,31 +84,33 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-</div>
-
+ +``` -
Résultat
+##### Résultat -

{{EmbedLiveSample('Utilisation_de_column-width','100%')}}

+{{EmbedLiveSample('Utilisation_de_column-width','100%')}} -

En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes.

+En utilisant une disposition multi-colonnes, le contenu est automatiquement réparti entre les colonnes. -

La propriété raccourcie columns

+#### La propriété raccourcie `columns` -

La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés.

+La plupart du temps, on souhaitera utiliser l'une de ces deux propriétés ({{cssxref("column-count")}} ou {{cssxref("column-width")}}). Comme les valeurs de ces deux propriétés ne se « chevauchent » pas, on pourra utiliser la propriété raccourcie {{cssxref("columns")}} qui synthétisent ces deux propriétés. -

Ainsi, la déclaration column-width:12em pourra être remplacée de la façon suivante :

+Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon suivante : -
CSS
+##### CSS -
#col_short {
+```css
+#col_short {
   columns: 12em;
 }
-
+``` -
HTML
+##### HTML -
<div id="col_short">
+```html
+

   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation
@@ -114,49 +119,54 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-</div>
-
+ +``` -
Résultat
+##### Résultat -

{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}}

+{{EmbedLiveSample('La_propriété_raccourcie_columns','100%')}} -

De même, on pourra remplacer la déclaration column-count: 4 avec ce bloc :

+De même, on pourra remplacer la déclaration `column-count: 4` avec ce bloc : -
#columns_4{
+```css
+#columns_4{
   columns: 4;
 }
-
+``` -

Enfin, pour synthétiser les instructions column-width:8em et column-count:12, on pourra utiliser les instructions suivantes :

+Enfin, pour synthétiser les instructions `column-width:8em` et `column-count:12`, on pourra utiliser les instructions suivantes : -
#columns_12 {
+```css
+#columns_12 {
   columns: 12 8em;
 }
-
+``` -

Équilibrage de la hauteur

+### Équilibrage de la hauteur -

La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale.

+La spécification CSS pour ce module indique que la hauteur des colonnes doit être équilibrée. Autrement dit, le navigateur doit définir la hauteur des différentes colonnes afin que la hauteur du contenu dans chaque colonne soit environ égale. -

Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée.

+Toutefois, dans certaines situations, on veut pouvoir définir la hauteur maximale des colonnes de façon explicite. Ainsi, lorsque la hauteur est contrainte, on peut utiliser les propriétés {{cssxref("height")}} ou {{cssxref("max-height")}} afin que chaque colonne mesure au plus la taille indiquée avant qu'une nouvelle colonne soit créée. -

L'espacement entre les colonnes

+### L'espacement entre les colonnes -

Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est 1em. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes.

+Entre chaque colonne, on aura un espace horizontal. La valeur recommandée (et souvent utilisée par défaut) est `1em`. Cette taille peut être ajustée si nécessaire en utilisant la propriété {{cssxref("column-gap")}} sur le bloc découpé en colonnes. -

Utilisation de column-gap

+#### Utilisation de `column-gap` -
CSS
+##### CSS -
#column_gap {
+```css
+#column_gap {
   column-count: 5;
   column-gap: 2em;
-}
+} +``` -
HTML
+##### HTML -
<div id="column_gap">
+```html
+

   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation
@@ -165,23 +175,21 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
   occaecat cupidatat non proident, sunt in culpa qui officia
   deserunt mollit anim id est laborum
-</div>
-
+ +``` -
Résultat
+##### Résultat -

{{EmbedLiveSample('Utilisation_de_column-gap','100%')}}

+{{EmbedLiveSample('Utilisation_de_column-gap','100%')}} -

Amélioration progressive

+## Amélioration progressive -

Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents.

+Les propriétés liées à la disposition multi-colonnes seront simplement ignorées par les navigateurs qui ne prennent pas en charge cette fonctionnalité. On peut donc simplement créer une disposition qui n'utilisera qu'une colonne pour les anciens navigateurs et qui tirera parti de cette fonctionnalité dans les navigateurs plus récents. -

Conclusion

+## Conclusion -

Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité.

+Les colonnes CSS permettent aux développeurs web de mieux utiliser l'espace disponible à l'écran. Avec un peu d'imagination et en connaissant cette fonctionnalité d'équilibrage vertical automatique, on peut trouver de nombreux usages pour cette fonctionnalité. -

Voir aussi

+## Voir aussi - +- [https://weblogs.mozillazine.org/roc/a...18_for_we.html](https://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html) -- cgit v1.2.3-54-g00ecf