From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- .../css_columns/basic_concepts_of_multicol/index.html | 2 +- .../handling_content_breaks_in_multicol/index.html | 2 +- .../handling_overflow_in_multicol/index.html | 4 ++-- files/fr/web/css/css_columns/index.html | 4 ---- .../web/css/css_columns/spanning_columns/index.html | 2 +- .../fr/web/css/css_columns/styling_columns/index.html | 2 +- .../css_columns/using_multi-column_layouts/index.html | 19 ++----------------- 7 files changed, 8 insertions(+), 27 deletions(-) (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 index 4b69af66e0..344caf8221 100644 --- 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 @@ -9,7 +9,7 @@ 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.

+

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

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 index 96f2191770..fd6bd631ba 100644 --- 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 @@ -9,7 +9,7 @@ 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.

+

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

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 index 1cb00b72cd..e37d560b61 100644 --- 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 @@ -9,7 +9,7 @@ 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.

+

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

@@ -19,7 +19,7 @@ original_slug: Web/CSS/CSS_Columns/Gestion_dépassement_multi-colonnes

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

diff --git a/files/fr/web/css/css_columns/index.html b/files/fr/web/css/css_columns/index.html index b66e0686ea..80a7ed7f0a 100644 --- a/files/fr/web/css/css_columns/index.html +++ b/files/fr/web/css/css_columns/index.html @@ -26,7 +26,6 @@ translation_of: Web/CSS/CSS_Columns

Propriétés relatives à la disposition en colonnes

-
  • {{cssxref("column-count")}}
  • {{cssxref("column-fill")}}
    • @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Columns
  • {{cssxref("column-width")}}
  • {{cssxref("columns")}}
-

Propriétés relatives à la fragmentation

-
  • {{cssxref("break-after")}}
  • {{cssxref("break-before")}}
    • @@ -51,7 +48,6 @@ translation_of: Web/CSS/CSS_Columns
  • {{cssxref("orphans")}}
  • {{cssxref("widows")}}
-

Guides

diff --git a/files/fr/web/css/css_columns/spanning_columns/index.html b/files/fr/web/css/css_columns/spanning_columns/index.html index fe5533f9ab..9aa5652293 100644 --- a/files/fr/web/css/css_columns/spanning_columns/index.html +++ b/files/fr/web/css/css_columns/spanning_columns/index.html @@ -9,7 +9,7 @@ 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.

+

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.

diff --git a/files/fr/web/css/css_columns/styling_columns/index.html b/files/fr/web/css/css_columns/styling_columns/index.html index 9cf822a190..58cf3879e6 100644 --- a/files/fr/web/css/css_columns/styling_columns/index.html +++ b/files/fr/web/css/css_columns/styling_columns/index.html @@ -10,7 +10,7 @@ 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.

+

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 ?

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 index b704ab6a8b..4dd83dfefd 100644 --- 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 @@ -31,7 +31,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
HTML
-
<div id="col">
   <p>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit,
@@ -52,7 +51,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   </p>
 </div>
-
Résultat
@@ -66,16 +64,14 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
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
@@ -87,7 +83,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   deserunt mollit anim id est laborum
 </div>
-
Résultat
@@ -103,16 +98,13 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
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
@@ -124,7 +116,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   deserunt mollit anim id est laborum
 </div>
-
Résultat
@@ -132,21 +123,17 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes

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

@@ -169,7 +156,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
HTML
-
<div id="column_gap">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
@@ -181,7 +167,6 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes
   deserunt mollit anim id est laborum
 </div>
-
Résultat
@@ -198,5 +183,5 @@ original_slug: Web/CSS/CSS_Columns/Utiliser_une_disposition_multi-colonnes

Voir aussi

-- cgit v1.2.3-54-g00ecf