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 --- .../layout_cookbook/breadcrumb_navigation/index.md | 42 ++++--- files/fr/web/css/layout_cookbook/card/index.md | 72 ++++++------ .../css/layout_cookbook/center_an_element/index.md | 48 ++++---- .../css/layout_cookbook/column_layouts/index.md | 126 +++++++++------------ .../contribute_a_recipe/cookbook_template/index.md | 59 +++++----- .../layout_cookbook/contribute_a_recipe/index.md | 108 ++++++++---------- .../web/css/layout_cookbook/grid_wrapper/index.md | 64 +++++------ files/fr/web/css/layout_cookbook/index.md | 87 +++----------- .../list_group_with_badges/index.md | 46 ++++---- .../web/css/layout_cookbook/media_objects/index.md | 87 ++++++-------- .../fr/web/css/layout_cookbook/pagination/index.md | 71 ++++++------ .../css/layout_cookbook/split_navigation/index.md | 38 +++---- .../css/layout_cookbook/sticky_footers/index.md | 66 +++++------ 13 files changed, 392 insertions(+), 522 deletions(-) (limited to 'files/fr/web/css/layout_cookbook') diff --git a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md index 395d6d0e69..b86cd42074 100644 --- a/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/fr/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -7,42 +7,38 @@ tags: translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation original_slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb --- -
{{CSSRef}}
+{{CSSRef}} -

La navigation avec un fil d'Ariane (breadcrumb) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.

+La navigation avec un fil d'Ariane (_breadcrumb_) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ. -

Links displayed inline with separators

+![Links displayed inline with separators](breadcrumb-navigation.png) -

Spécifications sommaires

+## Spécifications sommaires -

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

+Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages. -

Exemple appliqué

+## Exemple appliqué -

{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/breadcrumb-navigation.html", '100%', 530)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/breadcrumb-navigation--download.html) -

Choix effectués

+## Choix effectués -

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

+L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance. -

Accessibilité

+## Accessibilité -

On utilise ici les attributs aria-label et aria-current afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

+On utilise ici les attributs `aria-label` et `aria-current` afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Boîtes flexibles

+### Boîtes flexibles -

{{Compat("css.properties.flex")}}

+{{Compat("css.properties.flex")}} -

Voir aussi

+## Voir aussi - +- [Les boîtes flexibles CSS](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) +- [Fournir un fil d'Ariane](https://www.w3.org/TR/WCAG20-TECHS/G65.html) +- [Utiliser l'attribut `aria-current`](https://tink.uk/using-the-aria-current-attribute/) diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md index 7e92b24421..eea4811054 100644 --- a/files/fr/web/css/layout_cookbook/card/index.md +++ b/files/fr/web/css/layout_cookbook/card/index.md @@ -9,72 +9,68 @@ tags: translation_of: Web/CSS/Layout_cookbook/Card original_slug: Web/CSS/Layout_cookbook/Carte --- -

{{CSSRef}}

+{{CSSRef}} -

Dans ce guide, nous verrons comment créer des cartes (cards en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes.

+Dans ce guide, nous verrons comment créer des cartes (_cards_ en anglais), disposant éventuellement d'un pied de page, qui peuvent être organisée en listes. -

Three card components in a row

+![Three card components in a row](cards.png) -

Spécifications sommaires

+## Spécifications sommaires -

Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page.

+Une carte peut contenir différents éléments tels qu'un titre, une image, un contenu texte et un pied de page. -

Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte.

+Chaque carte devrait avoir la même hauteur et les pied de page devrait être placés en bas de la carte. -

Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions.

+Lorsqu'on ajoute des cartes à un ensemble de cartes, celles-ci devraient s'organiser sur deux dimensions. -

Recette

+## Recette -

{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/card.html", '100%', 1720)}} -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/card--download.html). -

Choix effectués

+## Choix effectués -

Chaque carte est organisée en utilisant une grille CSS bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS :

+Chaque carte est organisée en utilisant [une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) bien qu'elle ne soit que sur une seule dimension. Cela permet en effet d'utiliser le dimensionnement du contenu pour les pistes de la grille. Pour avoir une grille avec une seule colonne, on utilise ce fragment de CSS : -
.card {
+```css
+.card {
   display: grid;
   grid-template-rows: max-content 200px 1fr;
-}
+} +``` -

La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de 1fr. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant.

+La piste pour le titre est définie avec {{cssxref("max-content")}} ce qui empêche de l'étirer. On décide ensuite que l'image puisse occuper la piste au maximum sur 200 pixels. On définit ensuite la prochaine piste (où le contenu texte se trouve) avec une dimension de `1fr`. Autrement dit, la piste dédiée au contenu occupera tout l'espace restant. -

Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte.

+Si la carte possède un pied de page, celui-ci sera dimensionné automatiquement car les lignes ajoutées sur la grille implicite sont dimensionnés automatiquement. Aussi, le pied de page sera suffisamment grand pour contenir l'ensemble de son texte. -
-

Note : Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (subgrid), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème.

-
+> **Note :** Les éléments de différentes cartes ne seront pas alignés les uns avec les autres car chaque carte est une grille indépendante. La fonctionnalité de sous-grille (_subgrid_), proposée pour la version de niveau 2 du module de spécification CSS Grid, pourrait apporter une solution à ce problème. -

Méthodes alternatives

+## Méthodes alternatives -

On pourrait également utiliser les boîtes flexibles pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément.

+On pourrait également utiliser [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) pour organiser le contenu d'une carte. Dans cette configuration, il faut laisser la zone dédiée au contenu s'étendre et ne pas rendre les autres éléments flexibles. On pourrait ainsi obtenir simplement cette disposition. Les grilles permettent de dimensionner les pistes au niveau du conteneur, pour les boîtes flexibles, il faut dimensionner chaque élément séparément. -

Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser une disposition multi-colonnes où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré).

+Pour l'organisation de l'ensemble des cartes (et pas des cartes individuelles), on pourrait également utiliser les boîtes flexibles mais on aurait alors la dernière carte qui occuperait tout le reste d'une ligne et qui serait potentiellement plus larges que les autres cartes. Une autre méthode consisterait à utiliser [une disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns) où les cartes s'empileraient sur les différentes colonnes (un point qui peut être souhaitable ou indésirable selon l'effet désiré). -

Voir la recette sur les colonnes pour observer ces méthodes en action.

+Voir [la recette sur les colonnes](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) pour observer ces méthodes en action. -

Accessibilité

+## Accessibilité -

Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article Inclusive Components: Card (en anglais), écrit par Heydon Pickering, pour des explications détaillées à ce propos.

+Selon le contenu des cartes, il est possible voire souhaitable d'appliquer quelques traitements pour améliorer l'accessibilité. Voir l'article [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/), écrit par Heydon Pickering, pour des explications détaillées à ce propos. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété. -

grid-template-columns

+### grid-template-columns -

{{Compat("css.properties.grid-template-columns")}}

+{{Compat("css.properties.grid-template-columns")}} -

grid-template-rows

+### grid-template-rows -

{{Compat("css.properties.grid-template-rows")}}

+{{Compat("css.properties.grid-template-rows")}} -

Voir aussi

+## Voir aussi - +- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} +- [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/) diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md index 713d277510..13c7c36aa0 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.md +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md @@ -11,48 +11,44 @@ tags: translation_of: Web/CSS/Layout_cookbook/Center_an_element original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- -
{{CSSRef}}
+{{CSSRef}} -

Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (flexbox), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification Box Alignment.

+Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_. -

an element centered inside a larger box

+![an element centered inside a larger box](cookbook-center.png) -

Spécifications sommaires

+## Spécifications sommaires -

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

+Centrer un élément à la fois horizontalement et verticalement dans un autre élément. -

Recette

+## Recette -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html) -

Choix effectués

+## Choix effectués -

Pour centrer une boîte dans une autre, on a donné au contenant une propriété display: flex.

+Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`. -

Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur center pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur center pour centrer horizontalement.

+Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. -

À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
- Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

+À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. +Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété.

+Les différentes méthodes de layout ont chacune leur compatibilité avec les navigateurs. Les tableaux ci-dessous détaillent le support de base pour chaque propriété. -

align-items

+### `align-items` -

{{Compat("css.properties.align-items")}}

+{{Compat("css.properties.align-items")}} -

justify-content

+### `justify-content` -

{{Compat("css.properties.justify-content")}}

+{{Compat("css.properties.justify-content")}} -

Voir aussi

+## Voir aussi - +- [L'alignement des boîtes avec Flexbox](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [CSS Box alignment guide](/fr/docs/Web/CSS/CSS_Box_Alignment) diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.md b/files/fr/web/css/layout_cookbook/column_layouts/index.md index 8dfa422ffd..a6c52ced06 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.md +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.md @@ -10,119 +10,101 @@ tags: translation_of: Web/CSS/Layout_cookbook/Column_layouts original_slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes --- -
{{CSSRef}}
+{{CSSRef}} -

Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options.

+Vous aurez souvent à créer des dispositions organisées en colonnes. CSS fournit différentes méthodes pour parvenir à de telles dispositions. Les grilles CSS ou les boîtes flexibles ou encore les dispositions multi-colonnes peuvent être utilisées et choisir l'une de ces méthodes dépend de ce que l'on veut obtenir. Dans ce guide, nous verrons ces différentes options. -

three different styles of layouts which have two columns in the container.

+![three different styles of layouts which have two columns in the container.](cookbook-multiple-columns.png) -

Prérequis

+## Prérequis -

Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes :

+Il existe plusieurs « motifs » qu'on peut vouloir réaliser avec des colonnes : - +- Un fil continu qui se divise en colonne, à la façon d'un journal papier. +- Une seule ligne d'éléments divisée en colonnes qui ont la même hauteur. +- Plusieurs lignes et colonnes qui sont alignées. -

Les « recettes »

+## Les « recettes » -

Selon le scénario souhaité, on utilisera différentes méthodes de disposition.

+Selon le scénario souhaité, on utilisera différentes méthodes de disposition. -

Un fil continu de contenu - Disposition multi-colonnes

+### Un fil continu de contenu - Disposition multi-colonnes -

En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier.

+En créant des colonnes avec une disposition multi-colonne, le texte pourra former un flux continu qui remplira chacune des colonnes à la suite des autres. Les colonnes auront toutes la même taille et il ne sera pas possible de cibler une colonne en particulier ou le contenu d'une colonne en particulier. -

L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}.

+L'espacement entre les colonnes peut être géré avec la propriété {{cssxref("column-gap")}} et il est possible d'ajouter une ligne de délimitation grâce à {{cssxref("column-rule")}}. -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-multicol.html", '100%', 720)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-multicol--download.html) -

On utilisera une disposition multi-colonnes lorsque :

+On utilisera une disposition multi-colonnes lorsque : - +- On souhaite organiser le texte à la façon d'un journal imprimé +- On a un ensemble de petits éléments qu'on souhaite fragmenter en colonnes +- Il n'est pas nécessaire de cibler une colonne en particulier pour des raisons de mise en forme. -

Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles

+### Une seule ligne fragmentée en cellules de même taille — Utilisation des boîtes flexibles -

Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur row. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes.

+Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en colonnes grâce à la propriété {{cssxref("flex-direction")}} utilisée avec la valeur `row`. Toutefois, une boîte flexible cible les éléments à l'intérieur du conteneur flexible et placera chaque enfant direct dans une nouvelle colonne. On a donc un comportement différent de celui vu précédemment avec les multi-colonnes. -

À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge.

+À l'heure actuelle, il n'existe pas de méthode qui permette de créer une ligne entre les objets flexibles et la prise en charge des navigateurs pour les propriétés {{cssxref("column-gap")}} et {{cssxref("row-gap")}} est limitée. Pour créer un espace entre les éléments, il faudra donc utiliser une marge. -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox.html", '100%', 720)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html) -

Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur wrap sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois.

+Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur.  Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox-wrapping--download.html) -

On utilisera les boîtes flexibles pour :

+On utilisera les boîtes flexibles pour : - +- Organiser des lignes ou colonnes d'objets indépendantes +- Aligner les objets sur l'axe orthogonal au sens de lecture +- Les cas où l'alignement d'une ligne sur l'autre n'est pas important -

Aligner des objets en lignes et colonnes — Utilisation d'une grille

+### Aligner des objets en lignes et colonnes — Utilisation d'une grille -

Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions.

+Si on souhaite organiser des objets sur des lignes et sur des colonnes, alors on choisira une grille CSS. La disposition à l'aide d'une grille permet d'organiser les éléments fils d'un contener de la même façon que les boîtes flexibles mais on peut également aligner les lignes et les colonnes. Aussi, si les boîtes flexibles sont une méthode unidimensionnelle, les grilles CSS permettent de jouer sur les deux dimensions. -

{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/columns-grid.html", '100%', 720)}} -
-

Note : Télécharger cet exemple

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-grid--download.html) -

On utiliser les grilles CSS lorsque :

+On utiliser les grilles CSS lorsque : - +- On a des éléments/objets à organiser sur plusieurs lignes et colonnes +- On souhaite pouvoir aligner les éléments sur les deux axes -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété. -

column-width

+### column-width -

{{Compat("css.properties.column-width")}}

+{{Compat("css.properties.column-width")}} -

column-rule

+### column-rule -

{{Compat("css.properties.column-rule")}}

+{{Compat("css.properties.column-rule")}} -

flex

+### flex -

{{Compat("css.properties.flex")}}

+{{Compat("css.properties.flex")}} -

flex-wrap

+### flex-wrap -

{{Compat("css.properties.flex-wrap")}}

+{{Compat("css.properties.flex-wrap")}} -

grid-template-columns

+### grid-template-columns -

{{Compat("css.properties.grid-template-columns")}}

+{{Compat("css.properties.grid-template-columns")}} -

Voir aussi

+## Voir aussi - +- [Guide pour les dispositions multi-colonnes](/fr/docs/Web/CSS/CSS_Columns) +- [Guide pour les boîtes flexibles (_flexbox_)](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) +- [Guide pour les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md index ac5e39c3e9..769108c896 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md @@ -7,57 +7,52 @@ tags: translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template --- -

{{CSSRef}}

+{{CSSRef}} -
-

Note : Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.

-

Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle. -

+> **Note :** Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette. +> +> _Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle._ -

Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.

+_Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette._ -

Spécifications sommaires

+## Spécifications sommaires -

Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.

+_Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire._ -

Recette

+## Recette -

Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.

+_Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin._ -

{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}} -

Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.

+_Il faut modifier le lien pour cibler la version téléchargeable de votre exemple._ -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/center--download.html). -

Choix effectués

+## Choix effectués -

Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.

+_Expliquez ici les décisions prises pour réaliser cette  recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ -

Méthodes de recours ou alternatives

+## Méthodes de recours ou alternatives -

S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.

+_S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici._ -

Accessibilité

+## Accessibilité -

Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.

+_Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette._ -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété. -

Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant align-items.

+_Inclure ici les données de compatibilité pour les principales propriétés utilisées. Comme exemple, voici comment faire pour inclure les données concernant `align-items`._ -

align-items

+### align-items -

{{Compat("css.properties.align-items")}}

+{{Compat("css.properties.align-items")}} -

Voir aussi

+## Voir aussi - +- _Liste de liens sur les propriétés concernées : {{Cssxref("example-property")}}_ +- _Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte_ +- _Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail._ diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index e5a16b419a..62d542e3ef 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -9,97 +9,85 @@ tags: translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe original_slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette --- -
{{CSSRef}}
+{{CSSRef}} -

Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés.

+Si vous souhaitez contribuer en ajoutant une recette à celles présentées dans cette section de MDN, nous vous expliquons ici quelles étapes suivre pour que vos exemples soient publiés. -

Qu'est-ce qu'une « bonne » recette ?

+## Qu'est-ce qu'une « bonne » recette ? -

Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web. Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin.

+**Une bonne recette consiste en la version la plus simple possible d'un motif utile pour concevoir une page web.** Chaque ligne de CSS écrite dans la recette doit servir à illustrer le motif. Tout ce qui est purement décoratif pour l'exemple doit être exclus. L'idée est que la recette puisse servir de base à n'importe qui et de pouvoir appliquer ses propres styles sur l'exemple si besoin. -
-

Note : Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais.

-
+> **Note :** Quant à la traduction et aux recettes en anglais, une recette (l'exemple interactif, la version téléchargeable et la page MDN) doit d'abord être créée en anglais avant de pouvoir être mise à disposition en français. La suite de ce guide explique en français ce qu'il faut réaliser mais la majeure partie du contenu produit devra être en anglais. -

Les étapes pour la publication

+## Les étapes pour la publication -

Une recette se décompose comme suit :

+Une recette se décompose comme suit : -
    -
  1. Un exemple interactif, stocké sur le dépôt GitHub des exemples CSS
    2. -
  2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS.
    3. -
  3. Une page MDN, rattachée à la section Livre de recettes CSS qui contient : -
      -
    1. Les spécifications sommaires
      2. -
    2. La recette
      3. -
    3. Les choix effectués
      4. -
    4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive)
      5. -
    5. Les points relatifs à l'accessibilité
      6. -
    6. La compatibilité des navigateurs
      7. -
    7. D'éventuelles ressources additionnelles
      8. -
    -
    4. -
+1. Un exemple interactif, stocké [sur le dépôt GitHub des exemples CSS](https://github.com/mdn/css-examples) +2. Une version téléchargeable de cet exemple, également stockée sur le dépôt des exemples CSS. +3. Une page MDN, rattachée à la section [Livre de recettes CSS](/fr/docs/Web/CSS/Layout_cookbook) qui contient : -

1. Construire le motif

+ 1. Les spécifications sommaires + 2. La recette + 3. Les choix effectués + 4. Les éventuelles méthodes alternatives (utiles pour l'amélioration progressive) + 5. Les points relatifs à l'accessibilité + 6. La compatibilité des navigateurs + 7. D'éventuelles ressources additionnelles -

Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple.

+### 1. Construire le motif -

Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens.

+Avant de passer de l'exemple à la recette, commencez par écrire votre motif sous la forme d'une simple page HTML. Pensez à ce que vous voulez démontrer/illustrer et visez un résultat aussi simple que possible. Évitez d'utiliser des conventions CSS spécifiques qui ne seraient pas nécessairement connues et qui pourraient complexifier inutilement l'exemple. -

2. Créer un exemple interactif

+Assurez-vous que le code HTML et CSS soit valide et testez le dans différents navigateurs. Vous pouvez tout à fait utiliser des propriétés CSS qui ne sont pas prises en charge par l'ensemble des navigateurs. Vous pourrez inclure les informations de compatibilité dans la page dédiée. Dans certains cas, il pourra être utile de fournir une deuxième version de l'exemple qui illustre des techniques qui permettent de prendre en charge des navigateurs plus anciens. -

Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs.

+### 2. Créer un exemple interactif -

Créez un fork du dépôt des exemples CSS puis étudiez le dossier css-cookbook. Ce dernier contient un fichier cookbook-template.html dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire css-cookbook avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties.

+Les exemples interactifs que vous voyez sur ces recettes et dans d'autres articles MDN permettent aux visiteurs de modifier le code et d'en voir le résultat sans être submergé⋅e de code superflu. Votre recette pourra utiliser un ou plusieurs exemples interactifs. -

Voici les quelques éléments importants.

+Créez un _fork_ du [dépôt des exemples CSS](https://github.com/mdn/css-examples) puis étudiez le dossier `css-cookbook`. Ce dernier contient un fichier [cookbook-template.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template.html) dont vous pouvez repartir pour réaliser votre exemple. Enregistrez le nouveau fichier dans le répertoire `css-cookbook` avec un nom pertinent. Le modèle de base est commenté afin de vous aider à situer les différentes parties. -

Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels.

+Voici les quelques éléments importants. -

Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif.

+Il y a une feuille de style pour les panneaux des éditeurs, quelques règles pour la mise en forme de base et un fichier JavaScript qui contient les fonctionnalités de l'éditeur. Ces fichiers doivent être laissés tels quels. -

Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe preview puis dans l'élément textarea playable-html.

+Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les éléments que le visiteur n'a pas besoin de voir ou de changer pour modifier l'exemple. Le second correspond à ce qui pourra être modifié dans l'exemple. Généralement, on ajoute l'ensemble du CSS provenant de l'exemple dans le premier bloc puis on choisit les règles qu'on souhaite reproduire dans le deuxième bloc. Les règles du deuxième bloc doivent être celles qui illustrent l'essence de l'exemple et qu'un utilisateur pourra modifier afin d'en voir l'effet sur le motif. -

Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  playable-css.

+Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe `preview` puis dans l'élément `textarea` `playable-html`. -

Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter center.html qui est utilisé sur la page Comment centrer un élément.

+Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section  `playable-css`. -

Si vous avez créé un fork du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page.

+Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) qui est utilisé sur la page [Comment centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element). -

Quelques conseils

+Si vous avez créé un _fork_ du dépôt et que vous avez les fichiers CSS et JavaScript avec votre exemple, vous pouvez ouvrir la page dans un navigateur et l'ensemble devrait fonctionner de la même manière que lorsqu'il sera inclus dans une page. -
    -
  1. N'indentez pas le code CSS et HTML à l'intérieur des textarea par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir center.html par exemple).
    2. -
  2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente.
    3. -
  3. Vous pouvez ajuster la hauteur des textarea en modifiant la hauteur dans les styles inline/en incise.
    4. -
+#### Quelques conseils -

3. Créer une version téléchargeable

+1. N'indentez pas le code CSS et HTML à l'intérieur des `textarea` par rapport à l'ensemble du document HTML mais reprenez l'indentation depuis la première colonne (voir [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) par exemple). +2. Si vous avez besoins d'images, placez les dans le dossier avec les exemples. Vous pouvez également utiliser une des images déjà présente. +3. Vous pouvez ajuster la hauteur des `textarea` en modifiant la hauteur dans les styles _inline_/en incise. -

L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant --download au nom. Ainsi, center.html possède une version téléchargeable intitulée center--download.html. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à body et qui sont dans la feuille de style intégrée. Vous pouvez consulter cookbook-template--download.html comme exemple et point de départ.

+### 3. Créer une version téléchargeable -

4. Réaliser une pull request avec votre exemple

+L'exemple intégré à la page contient tout le code mais seule la partie nécessaire est affichée. Faites une copie du fichier en ajoutant `--download` au nom. Ainsi, `center.html` possède une version téléchargeable intitulée `center--download.html`. Ce fichier devra ressembler à l'exemple initial et contenir une version basique du motif, sur une seule page HTML. Il peut être utile d'inclure les règles CSS applliquées à `body` et qui sont dans la feuille de style intégrée. Vous pouvez consulter [cookbook-template--download.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/cookbook-template--download.html) comme exemple et point de départ. -

Ouvrez une pull request depuis votre fork vers le dépôt des exemples CSS. Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la pull request, veuillez écrire une présentation de cette recette et des concepts que vous illustrez.

+### 4. Réaliser une _pull request_ avec votre exemple -

5. Créer la page sur MDN

+Ouvrez une _pull request_ depuis votre _fork_ vers le [dépôt des exemples CSS](https://github.com/mdn/css-examples). Nous pourrons ainsi vous aider à apporter les modifications nécessaires pour la créations de la page. De plus, l'exemple devra être fusionné afin de pouvoir être affiché sur une page. Dans la _pull request_, veuillez écrire une présentation de cette recette et des concepts que vous illustrez. -

Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et des permissions pour la création de page. Vous pourrez alors créer une page comme sous-page de la section. Cette page modèle pourra vous servir de point de départ pour votre contenu.

+### 5. Créer la page sur MDN -

Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs.

+Une fois l'exemple fusionné, vous pouvez créer l'article correspondant sur MDN. Pour cela, vous aurez besoin d'un compte et [des permissions pour la création de page](/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages#Getting_page_creation_permissions). Vous pourrez alors créer une page comme sous-page de la section. [Cette page modèle pourra vous servir de point de départ pour votre contenu](/en-US/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template). -
-

Note : Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter la page modèle en français.

-
+Le modèle explique le contenu de chaque section. Vous pouvez également consulter les recettes existantes comme références. Si vous cliquez sur le bouton d'édition en haut de page, vous pourrez ainsi accéder au contenu « brut » de la page et voir comment les macros sont utilisées afin d'intégrer les données de compatibilité ou les exemples interactifs. -

Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide.

+> **Note :** Si vous souhaitez effectuer la traduction d'une recette existante, vous pouvez consulter [la page modèle en français](/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template). -

Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur le forum Discourse de MDN ou à venir discuter sur IRC (ces deux canaux sont principalement anglophones).

+Si vous avez besoin d'une aide générale sur l'utilisation de MDN, vous pouvez consulter les pages d'aide. -

Voir aussi

+Si vous avez des questions ou que vous souhaitez que quelqu'un vérifie votre page, n'hésitez pas à demander sur [le forum Discourse de MDN](https://discourse.mozilla.org/c/mdn) ou à venir [discuter sur IRC](/fr/docs/MDN/Rejoindre_la_communauté/Conversations#Chat_sur_IRC) (ces deux canaux sont principalement anglophones). - +## Voir aussi + +- [Page modèle d'une recette](/fr/docs/Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template) +- [Dépôt git des exemples CSS](https://github.com/mdn/css-examples) diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md index 249e8fa898..c48dd59563 100644 --- a/files/fr/web/css/layout_cookbook/grid_wrapper/index.md +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.md @@ -7,33 +7,32 @@ tags: - Recette translation_of: Web/CSS/Layout_cookbook/Grid_wrapper --- -
{{CSSRef}}
+{{CSSRef}} -

Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.

+Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés. -

Spécifications sommaires

+## Spécifications sommaires -

Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.

+Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords. -

Recette

+## Recette -

{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/grid-wrapper.html", '100%', 720)}} -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/grid-wrapper--download.html). -

Choix effectués

+## Choix effectués -

Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}.

+Cette recette utilise la fonction {{cssxref("minmax()")}} afin de définir les tailles des pistes pour la propriété {{cssxref("grid-template-columns")}}. -

Les deux colonnes extérieures ont une taille maximale de 1fr, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.

+Les deux colonnes extérieures ont une taille maximale de `1fr`, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille. -

Méthodes de recours ou alternatives

+## Méthodes de recours ou alternatives -

Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir max-width et des marges horzontales avec auto afin que le contenu soit centré horizontalement :

+Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir `max-width` et des marges horzontales avec `auto` afin que le contenu soit centré horizontalement : -
.grid {
+```css
+.grid {
   max-width: 1200px;
   margin: 0 auto; // on centre le conteneur en horizontal
   display: grid;
@@ -47,33 +46,34 @@ translation_of: Web/CSS/Layout_cookbook/Grid_wrapper
     max-width: none;
     margin: 0;
   }
-}
+} +``` -

Pour qu'un élément soit isolé et colle au bord du viewport, on peut utiliser cette astuce de Una Kravets :

+Pour qu'un élément soit isolé et colle au bord du _viewport_, on peut utiliser cette astuce de [Una Kravets](https://una.im/) : -
.item {
+```css
+.item {
   width: 100vw;
   margin-left: 50%;
   transform: translate3d(-50%, 0, 0);
-}
+} +``` -

On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.

+On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS. -

Accessibilité

+## Accessibilité -

Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir les grilles CSS et l'accessibilité pour plus de détails).

+Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir [les grilles CSS et l'accessibilité](/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility) pour plus de détails). -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

grid-template-columns

+### `grid-template-columns` -

{{Compat("css.properties.grid-template-columns")}}

+{{Compat("css.properties.grid-template-columns")}} -

Voir aussi

+## Voir aussi - \ No newline at end of file +- {{Cssxref("grid-template-columns")}} +- [Les grilles CSS sur MDN](/fr/docs/Web/CSS/CSS_Grid_Layout) +- Article :[ Les grilles CSS, plus de flexibilité avec `minmax()` (en anglais)](https://css-irl.info/more-flexibility-with-minmax/) +- Article : [Isoler des éléments sur une grille CSS (en anglais)](https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/) diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index f3debbc018..9a7a809a9d 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -7,78 +7,27 @@ tags: - recettes translation_of: Web/CSS/Layout_cookbook --- -
{{CSSRef}}
+{{CSSRef}} -

Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.

+Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement. -
-

Note : Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.

-
+> **Note :** Si vous débutez en CSS, nous vous conseillons de consulter [notre module sur l'apprentissage de la disposition en CSS](/fr/docs/Apprendre/CSS/CSS_layout). Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes. -

Les recettes

+## Les recettes - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RecetteDescriptionMéthodes de disposition utilisées
Objets avec médiaUne boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page).Grilles CSS, {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}}
ColonnesComment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu.Grilles CSS, Disposition multi-colonnes, Flexbox
Centrer un élémentComment centrer un élément horizontalement et verticalement.Flexbox, Alignement des boîtes
Bas de page adhérantCréer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (viewport) lorsque le contenu est plus petit que la zone ou le conteneur.Grilles CSS, Flexbox
Navigation segmentéeUn motif de navigation où certains liens sont séparés des autres.Flexbox, {{cssxref("margin")}}
Navigation avec un fil d'Ariane (breadcrumb)Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages.Flexbox
Liste de groupes avec indicateursAfficher une liste d'éléments avec chacun un indicateur numérique.Flexbox, Alignement des boîtes
PaginationComment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple).Flexbox, Alignement des boîtes
CarteUn composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes.Grilles CSS
Envelopper une grille (grid wrapper)Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords.Grilles CSS
+| Recette | Description | Méthodes de disposition utilisées | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [Objets avec média](/fr/docs/Web/CSS/Layout_cookbook/Media_objects) | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), {{cssxref("float")}} pour une méthode de recours, dimensionnement avec {{cssxref("fit-content")}} | +| [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | +| [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | +| [Carte](/fr/docs/Web/CSS/Layout_cookbook/Carte) | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | +| [Envelopper une grille (_grid wrapper_)](/fr/docs/Web/CSS/Layout_cookbook/Grid_wrapper) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) | -

Contribuer en créant une recette

+## Contribuer en créant une recette -

MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! Voir cette page pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.

+MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! [Voir cette page](/fr/docs/Web/CSS/Layout_cookbook/Contribuer_à_une_recette) pour un modèle ainsi que les règles à suivre pour créer votre propre exemple. diff --git a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md index 98a8a06891..d840eda9cf 100644 --- a/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md +++ b/files/fr/web/css/layout_cookbook/list_group_with_badges/index.md @@ -8,47 +8,43 @@ tags: translation_of: Web/CSS/Layout_cookbook/List_group_with_badges original_slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs --- -

{{CSSRef}}

+{{CSSRef}} -

Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (badge).

+Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (_badge_). -

A list of items with a badge indicating a count displayed to the right of the text.

+![A list of items with a badge indicating a count displayed to the right of the text.](list-group-badges.png) -

Spécifications sommaires

+## Spécifications sommaires -

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

+Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu. -

Exemple appliqué

+## Exemple appliqué -

{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/list-group-badges.html", '100%', 720)}} -
-

Note : Télécharger l'exemple.

-
+> **Note :** [Télécharger l'exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/list-group-badges--download.html). -

Choix effectués

+## Choix effectués -

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

+Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition. -

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété justify-content avec la valeur space-between. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

+Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété `justify-content` avec la valeur `space-between`. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte. -

Pour aligner le contenu horizontalement, on utilise la propriété align-items afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser align-items: flex-start à la place.

+Pour aligner le contenu horizontalement, on utilise la propriété `align-items` afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser `align-items: flex-start` à la place. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails.

+Les différentes méthodes utilisées ici peuvent avoir une prise en charge différentes par les navigateurs. Se référer à chacun des tableaux pour avoir plus de détails. -

justify-content

+### justify-content -

{{Compat("css.properties.justify-content")}}

+{{Compat("css.properties.justify-content")}} -

align-items

+### align-items -

{{Compat("css.properties.align-items")}}

+{{Compat("css.properties.align-items")}} -

Voir aussi

+## Voir aussi - +- [Alignement des boîtes avec les boîtes flexibles](/fr/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [Aligner des objets dans un conteneur flexible](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.md b/files/fr/web/css/layout_cookbook/media_objects/index.md index 8c2ca3ae1e..ecab120c44 100644 --- a/files/fr/web/css/layout_cookbook/media_objects/index.md +++ b/files/fr/web/css/layout_cookbook/media_objects/index.md @@ -7,81 +7,68 @@ tags: - Recette translation_of: Web/CSS/Layout_cookbook/Media_objects --- -
{{CSSRef}}
+{{CSSRef}} -

Le motif Media Object (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. Intitulé ainsi par Nicole Sullivan, cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite).

+Le motif _Media Object_ (qu'on peut traduire en « objet avec média ») est un motif qu'on rencontre fréquemment sur le Web. [Intitulé ainsi par Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/), cela fait référence à une boîte organisée en deux colonnes dont l'une contient une image d'un côté et un texte descriptif de l'autre (par exemple l'image de profil de quelqu'un à gauche et un billet à droite). -

+![](media-object.png) -

Spécifications sommaires

+## Spécifications sommaires -

Voici ce qu'on souhaite obtenir :

+Voici ce qu'on souhaite obtenir : - +- Un empilement des deux zones sur mobile et deux colonnes sur ordinateur +- L'image peut être à gauche ou à droite +- L'image peut être petite ou grande +- Les objets avec média peuvent être imbriqués +- L'objet avec média devrait dégager l'espace pour le contenu, quel que soit le côté le plus grand. -

Recette

+## Recette -

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects.html", '100%', 1200)}} -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects--download.html). -

Choix effectués

+## Choix effectués -

On a ici choisi d'utiliser une grille pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet.

+On a ici choisi d'utiliser [une grille](/fr/docs/Web/CSS/CSS_Grid_Layout) pour réaliser cet objet. cela permet de contrôler les deux dimensions lorsqu'on en a besoin. Ainsi, si on a besoin d'un pied de page avec un contenu au dessus, le pied de page peut être poussé sous l'objet. -

La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant fit-content avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne.

+La grille permet également d'utiliser {{cssxref("fit-content")}} pour la piste contenant l'image. En utilisant `fit-content` avec une taille maximale de 200 pixels, lorsqu'on a une petite image (une icône), la piste est réduite à la taille de cette image. Si l'image est plus grande, la piste ne sera pas plus large que 200 pixels, de plus, l'image ayant {{cssxref("max-width ")}} avec 100%, elle sera redimensionnée afin de pouvoir tenir dans la colonne. -

En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a max-width qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans.

+En utilisant {{cssxref("grid-template-areas")}} pour dessiner la disposition, on peut voir le motif dans la feuille de style CSS. La grille est définie lorsqu'on a `max-width` qui vaut au moins 500 pixels et on a donc un empilement pour les plus petits écrans. -

En ajoutant une classe media-flip, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée.

+En ajoutant une classe `media-flip`, on fournit une disposition alternative qui permet de changer le côté sur lequel l'image est affichée. -

Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image.

+Lorsqu'on imbrique un objet dans un autre, il faut le placer dans la deuxième piste en mode normal et sur la première lorsqu'on choisit d'inverser le côté de l'image. -

Méthodes alternatives

+## Méthodes alternatives -

Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants.

+Il existe différentes méthodes alternatives permettant d'obtenir ce résultat selon les navigateurs que vous souhaitez prendre en charge. Une méthode assez générique consiste à placer l'image en flottante à gauche et d'ajouter un dégagement sur la boîte afin qu'elle contienne bien tous les éléments flottants. -

{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/media-objects-fallback.html", '100%', 1200)}} -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/media-objects-fallback--download.html). -

Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements.

+Une fois que les éléments flottants sont des éléments de grille, les dégagements ne s'appliquent plus et il n'est donc pas nécessaire de retirer quoi que ce soit sur les dégagements. -

En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement).

+En revanche, il faudra retirer les marges appliquées aux objets et les largeurs superflues pour la grille (la propriété {{cssxref("gap")}} permet de contrôler l'espace entre et les pistes gèrent le reste du dimensionnement). - +## Compatibilité des navigateurs -

Compatibilité des navigateurs

+Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété. -

Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en charge différente selon les navigateurs, se référer à chacun des tableaux suivant pour plus de détails sur la prise en charge de chaque propriété.

+### grid-template-areas -

grid-template-areas

+{{Compat("css.properties.grid-template-areas")}} -

{{Compat("css.properties.grid-template-areas")}}

+### float -

float

+{{Compat("css.properties.float")}} -

{{Compat("css.properties.float")}}

+## Voir aussi -

Voir aussi

- - - -

 

+- [Les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) +- [L'amélioration progressive et les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement) +- [Utiliser les zones nommées des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) +- [`fit-content`](/fr/docs/Web/CSS/fit-content) +- [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas) diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index eacc793faa..e9c268fc39 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -8,72 +8,69 @@ tags: - flexbox translation_of: Web/CSS/Layout_cookbook/Pagination --- -

{{CSSRef}}

+{{CSSRef}} -

Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

+Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page). -

Links to sets of pages in a paged listing

+![Links to sets of pages in a paged listing](pagination.png) -

Spécifications sommaires

+## Spécifications sommaires -

Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.

+Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément {{htmlelement("nav")}} et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne. -

Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.

+Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu. -

Recette

+## Recette -

{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}} -
-

Note : Télécharger cet exemple.

-
+> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html). -

Choix effectués

+## Choix effectués -

Pour obtenir ce résultat, on utilise les boîtes flexibles avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}.

+Pour obtenir ce résultat, on utilise [les boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) avec une conteneur flexible imbriqué dans un autre. L'élément {{htmlelement("nav")}} est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété {{cssxref("justify-content")}}. -

La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux.

+La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété {{cssxref("margin")}} pour espacer les éléments entre eux. -

Méthodes alternatives

+## Méthodes alternatives -

Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.

+Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles. -
.pagination {
+```css
+.pagination {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   column-gap: 2px;
 }
-
+``` -

Accessibilité

+## Accessibilité -

Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute aria-label="pagination" sur l'élément <nav>.

+Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute `aria-label="pagination"` sur l'élément `