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 --- .../basic_concepts_of_multicol/index.html | 93 ---------- .../basic_concepts_of_multicol/index.md | 93 ++++++++++ .../handling_content_breaks_in_multicol/index.html | 73 -------- .../handling_content_breaks_in_multicol/index.md | 73 ++++++++ .../handling_overflow_in_multicol/index.html | 50 ------ .../handling_overflow_in_multicol/index.md | 50 ++++++ files/fr/web/css/css_columns/index.html | 93 ---------- files/fr/web/css/css_columns/index.md | 93 ++++++++++ .../css/css_columns/spanning_columns/index.html | 64 ------- .../web/css/css_columns/spanning_columns/index.md | 64 +++++++ .../web/css/css_columns/styling_columns/index.html | 49 ------ .../web/css/css_columns/styling_columns/index.md | 49 ++++++ .../using_multi-column_layouts/index.html | 187 --------------------- .../using_multi-column_layouts/index.md | 187 +++++++++++++++++++++ 14 files changed, 609 insertions(+), 609 deletions(-) delete mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html create mode 100644 files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html create mode 100644 files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md delete mode 100644 files/fr/web/css/css_columns/index.html create mode 100644 files/fr/web/css/css_columns/index.md delete mode 100644 files/fr/web/css/css_columns/spanning_columns/index.html create mode 100644 files/fr/web/css/css_columns/spanning_columns/index.md delete mode 100644 files/fr/web/css/css_columns/styling_columns/index.html create mode 100644 files/fr/web/css/css_columns/styling_columns/index.md delete mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/fr/web/css/css_columns/using_multi-column_layouts/index.md (limited to 'files/fr/web/css/css_columns') diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html deleted file mode 100644 index 344caf8221..0000000000 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Concepts de base pour la disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol -original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes ---- -
{{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.

- -

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.

- -

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

- - - -

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

- -

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 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.

- -

{{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.

- -

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.

- -

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.

- -

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

- -

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).

- -

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.

- -

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

- -

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.

- -

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;
-}
- -

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;
-}
- -

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;
-}
- -

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.

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 new file mode 100644 index 0000000000..344caf8221 --- /dev/null +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md @@ -0,0 +1,93 @@ +--- +title: Concepts de base pour la disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +original_slug: Web/CSS/CSS_Columns/Concepts_base_multi-colonnes +--- +
{{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.

+ +

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.

+ +

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

+ + + +

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

+ +

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 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.

+ +

{{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.

+ +

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.

+ +

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.

+ +

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

+ +

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).

+ +

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.

+ +

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

+ +

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.

+ +

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;
+}
+ +

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;
+}
+ +

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;
+}
+ +

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.

diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html deleted file mode 100644 index fd6bd631ba..0000000000 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Gérer la rupture du contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol -original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes ---- -
{{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.

- -

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 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 :

- - - -

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 :

- - - -

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)}}

- -

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 :

- - - -

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)}}

- -

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.

- -

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.

- -

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

- -

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.

- -

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_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md new file mode 100644 index 0000000000..fd6bd631ba --- /dev/null +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -0,0 +1,73 @@ +--- +title: Gérer la rupture du contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +original_slug: Web/CSS/CSS_Columns/Gérer_rupture_contenu_entre_colonnes +--- +
{{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.

+ +

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 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 :

+ + + +

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 :

+ + + +

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)}}

+ +

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 :

+ + + +

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)}}

+ +

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.

+ +

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.

+ +

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

+ +

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.

+ +

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.html b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html deleted file mode 100644 index e37d560b61..0000000000 --- a/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Gestion du dépassement en multi-colonnes -slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol -original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes ---- -
{{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.

- -

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.

- -

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)}}

- -

- -

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)}}

- -

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) ?

- -

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.

- -

{{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).

-
- -

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.

- -

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)}}

- -

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.

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 new file mode 100644 index 0000000000..e37d560b61 --- /dev/null +++ b/files/fr/web/css/css_columns/handling_overflow_in_multicol/index.md @@ -0,0 +1,50 @@ +--- +title: Gestion du dépassement en multi-colonnes +slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes +--- +
{{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.

+ +

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.

+ +

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)}}

+ +

+ +

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)}}

+ +

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) ?

+ +

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.

+ +

{{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).

+
+ +

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.

+ +

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)}}

+ +

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.

diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html deleted file mode 100644 index 80a7ed7f0a..0000000000 --- a/files/fr/web/css/css_columns/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Colonnes CSS -slug: Web/CSS/CSS_Columns -tags: - - Aperçu - - CSS - - CSS Multi-column Layout - - 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 :

- - diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md new file mode 100644 index 0000000000..80a7ed7f0a --- /dev/null +++ b/files/fr/web/css/css_columns/index.md @@ -0,0 +1,93 @@ +--- +title: Colonnes CSS +slug: Web/CSS/CSS_Columns +tags: + - Aperçu + - CSS + - CSS Multi-column Layout + - 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 :

+ + diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html deleted file mode 100644 index 9aa5652293..0000000000 --- a/files/fr/web/css/css_columns/spanning_columns/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Répartir et équilibrer le contenu entre les colonnes -slug: Web/CSS/CSS_Columns/Spanning_Columns -tags: - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Spanning_Columns -original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes ---- -
{{CSSRef}}
- -

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.

-
- -

É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.

- -

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.

- -

{{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.

- -

{{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.

- -

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.

- -

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.

- -

{{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.

- -

É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.

- -

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 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.

- -

{{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.

- -

{{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.

- -

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.

diff --git a/files/fr/web/css/css_columns/spanning_columns/index.md b/files/fr/web/css/css_columns/spanning_columns/index.md new file mode 100644 index 0000000000..9aa5652293 --- /dev/null +++ b/files/fr/web/css/css_columns/spanning_columns/index.md @@ -0,0 +1,64 @@ +--- +title: Répartir et équilibrer le contenu entre les colonnes +slug: Web/CSS/CSS_Columns/Spanning_Columns +tags: + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Spanning_Columns +original_slug: Web/CSS/CSS_Columns/Répartir_entre_les_colonnes +--- +
{{CSSRef}}
+ +

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.

+
+ +

É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.

+ +

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.

+ +

{{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.

+ +

{{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.

+ +

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.

+ +

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.

+ +

{{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.

+ +

É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.

+ +

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 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.

+ +

{{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.

+ +

{{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.

+ +

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.

diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html deleted file mode 100644 index 58cf3879e6..0000000000 --- a/files/fr/web/css/css_columns/styling_columns/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Mettre en forme les colonnes -slug: Web/CSS/CSS_Columns/Styling_Columns -tags: - - CSS - - CSS Multi-column Layout - - Guide -translation_of: Web/CSS/CSS_Columns/Styling_Columns -original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes ---- -
{{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.

- -

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.

- -

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).

- -

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.

- -

{{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.

- -

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.

- -

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.

- -

{{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.

- -

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)}}

- -

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.

diff --git a/files/fr/web/css/css_columns/styling_columns/index.md b/files/fr/web/css/css_columns/styling_columns/index.md new file mode 100644 index 0000000000..58cf3879e6 --- /dev/null +++ b/files/fr/web/css/css_columns/styling_columns/index.md @@ -0,0 +1,49 @@ +--- +title: Mettre en forme les colonnes +slug: Web/CSS/CSS_Columns/Styling_Columns +tags: + - CSS + - CSS Multi-column Layout + - Guide +translation_of: Web/CSS/CSS_Columns/Styling_Columns +original_slug: Web/CSS/CSS_Columns/Mettre_en_forme_les_colonnes +--- +
{{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.

+ +

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.

+ +

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).

+ +

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.

+ +

{{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.

+ +

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.

+ +

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.

+ +

{{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.

+ +

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)}}

+ +

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.

diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html b/files/fr/web/css/css_columns/using_multi-column_layouts/index.html deleted file mode 100644 index 4dd83dfefd..0000000000 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Utiliser une disposition multi-colonnes -slug: Web/CSS/CSS_Columns/Using_multi-column_layouts -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts -original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes ---- -
{{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.

- -

Utiliser les colonnes CSS

- -

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")}}.

- -

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

- -

Utilisation de column-count

- -
CSS
- -
#col {
-  column-count: 2;
-}
-
- -
HTML
- -
<div id="col">
-  <p>
-    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
- -

{{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.

- -

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

- -
CSS
- -
#wid {
-  column-width: 100px;
-}
-
- - -
HTML
- -
<div id="wid">
-  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
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  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
- -

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

- -

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

- -

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.

- -

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

- -
CSS
- -
#col_short {
-  columns: 12em;
-}
-
- -
HTML
- -
<div id="col_short">
-  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
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  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
- -

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

- -

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

- -
#columns_4{
-  columns: 4;
-}
-
- -

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

- -
#columns_12 {
-  columns: 12 8em;
-}
-
- -

É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.

- -

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

- -

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

- -
CSS
- -
#column_gap {
-  column-count: 5;
-  column-gap: 2em;
-}
- -
HTML
- -
<div id="column_gap">
-  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
-  ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  Duis aute irure dolor in reprehenderit in voluptate velit
-  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
- -

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

- -

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.

- -

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é.

- -

Voir aussi

- - 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 new file mode 100644 index 0000000000..4dd83dfefd --- /dev/null +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md @@ -0,0 +1,187 @@ +--- +title: Utiliser une disposition multi-colonnes +slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes +--- +
{{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.

+ +

Utiliser les colonnes CSS

+ +

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")}}.

+ +

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

+ +

Utilisation de column-count

+ +
CSS
+ +
#col {
+  column-count: 2;
+}
+
+ +
HTML
+ +
<div id="col">
+  <p>
+    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
+ +

{{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.

+ +

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

+ +
CSS
+ +
#wid {
+  column-width: 100px;
+}
+
+ + +
HTML
+ +
<div id="wid">
+  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
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  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
+ +

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

+ +

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

+ +

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.

+ +

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

+ +
CSS
+ +
#col_short {
+  columns: 12em;
+}
+
+ +
HTML
+ +
<div id="col_short">
+  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
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  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
+ +

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

+ +

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

+ +
#columns_4{
+  columns: 4;
+}
+
+ +

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

+ +
#columns_12 {
+  columns: 12 8em;
+}
+
+ +

É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.

+ +

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

+ +

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

+ +
CSS
+ +
#column_gap {
+  column-count: 5;
+  column-gap: 2em;
+}
+ +
HTML
+ +
<div id="column_gap">
+  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
+  ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  Duis aute irure dolor in reprehenderit in voluptate velit
+  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
+ +

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

+ +

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.

+ +

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é.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf