From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../bas_de_page_adh\303\251rant/index.html" | 73 ++++++++++++ files/fr/web/css/layout_cookbook/carte/index.html | 81 +++++++++++++ .../layout_cookbook/centrer_un_element/index.html | 59 ++++++++++ .../cookbook_template/index.html" | 62 ++++++++++ .../contribuer_\303\240_une_recette/index.html" | 104 +++++++++++++++++ .../disposition_en_colonnes/index.html | 129 +++++++++++++++++++++ .../css/layout_cookbook/grid_wrapper/index.html | 83 +++++++++++++ files/fr/web/css/layout_cookbook/index.html | 84 ++++++++++++++ .../liste_groupes_avec_indicateurs/index.html | 53 +++++++++ .../css/layout_cookbook/media_objects/index.html | 89 ++++++++++++++ .../navigation_breadcrumb/index.html | 49 ++++++++ .../navigation_segment\303\251e/index.html" | 48 ++++++++ .../web/css/layout_cookbook/pagination/index.html | 81 +++++++++++++ 13 files changed, 995 insertions(+) create mode 100644 "files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" create mode 100644 files/fr/web/css/layout_cookbook/carte/index.html create mode 100644 files/fr/web/css/layout_cookbook/centrer_un_element/index.html create mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" create mode 100644 "files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" create mode 100644 files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html create mode 100644 files/fr/web/css/layout_cookbook/grid_wrapper/index.html create mode 100644 files/fr/web/css/layout_cookbook/index.html create mode 100644 files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html create mode 100644 files/fr/web/css/layout_cookbook/media_objects/index.html create mode 100644 files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html create mode 100644 "files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" create mode 100644 files/fr/web/css/layout_cookbook/pagination/index.html (limited to 'files/fr/web/css/layout_cookbook') diff --git "a/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" new file mode 100644 index 0000000000..be032d79cd --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/bas_de_page_adh\303\251rant/index.html" @@ -0,0 +1,73 @@ +--- +title: Bas de page adhérant +slug: Web/CSS/Layout_cookbook/Bas_de_page_adhérant +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Sticky_footers +--- +
{{CSSRef}}
+ +

Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (viewport) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

+ +

A sticky footer pushed to the bottom of a box

+ +

Spécifications sommaires

+ +

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

+ + + +

Recette

+ +

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

+ +
+

Note : Télécharger cet example

+
+ +
+

Note : Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec min-height: 100% afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser {{cssxref("min-height")}} avec la valeur 100vh sur l'élément {{htmlelement("body")}} qu'on utilise comme conteneur de grille.

+
+ +

Choix effectués

+ +

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément .wrapper a une hauteur minimale de 100%, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

+ +

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste 1fr et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec 1fr, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

+ +

Méthodes alternatives

+ +

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (flexbox) pour avoir une note de bas de page adhérante.

+ +

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

+ +

On commence de la même façon mais on utilise display:flex plutôt que display:grid sur .wrapper. On définit flex-direction avec la valeur column afin d'avoir une organisation verticale. Pour le contenu principal, on utilise flex-grow: 1 et pour les deux autres éléments, on utilise flex-shrink: 0. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

+ +

Compatibilité des navigateurs

+ +

grid-template-rows

+ +

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

+ +

flex-direction

+ +

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

+ +

flex-grow

+ +

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

+ +

flex-shrink

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/carte/index.html b/files/fr/web/css/layout_cookbook/carte/index.html new file mode 100644 index 0000000000..f363a49f0d --- /dev/null +++ b/files/fr/web/css/layout_cookbook/carte/index.html @@ -0,0 +1,81 @@ +--- +title: Carte +slug: Web/CSS/Layout_cookbook/Carte +tags: + - CSS + - CSS Grid + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Card +--- +

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

+ +

Three card components in a row

+ +

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.

+ +

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.

+ +

Recette

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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 :

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

+ +

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.

+
+ +

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.

+ +

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

+ +

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

+ +

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.

+ +

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

+ + + +

grid-template-columns

+ +

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

+ +

grid-template-rows

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/centrer_un_element/index.html b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html new file mode 100644 index 0000000000..c4d1fb52c3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/centrer_un_element/index.html @@ -0,0 +1,59 @@ +--- +title: Centrer un élément +slug: Web/CSS/Layout_cookbook/Centrer_un_element +tags: + - Alignement + - CSS + - Layout + - centrer + - flexbox + - recettes +translation_of: Web/CSS/Layout_cookbook/Center_an_element +--- +
{{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.

+ +

an element centered inside a larger box

+ +

Spécifications sommaires

+ +

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

+ +

Recette

+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

Choix effectués

+ +

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.

+ +

À 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

+ +

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

+ +

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

+ +

justify-content

+ +

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

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" new file mode 100644 index 0000000000..7223cde7ef --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/cookbook_template/index.html" @@ -0,0 +1,62 @@ +--- +title: Cookbook template +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette/Cookbook_template +tags: + - CSS + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe/Cookbook_template +--- +

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

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

+ +

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.

+ +

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.

+ +

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

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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.

+ +

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.

+ +

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.

+ +

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

+ + + +

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

+ +

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

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" new file mode 100644 index 0000000000..b356d20339 --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/contribuer_\303\240_une_recette/index.html" @@ -0,0 +1,104 @@ +--- +title: Contribuer à une recette +slug: Web/CSS/Layout_cookbook/Contribuer_à_une_recette +tags: + - CSS + - Guide + - MDN + - Meta +translation_of: Web/CSS/Layout_cookbook/Contribute_a_recipe +--- +
{{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.

+ +

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.

+ +
+

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

+ +

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. Construire le motif

+ +

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.

+ +

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.

+ +

2. Créer un exemple interactif

+ +

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.

+ +

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.

+ +

Voici les quelques éléments importants.

+ +

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.

+ +

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

+ +

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

+ +

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.

+ +

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.

+ +

Quelques conseils

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

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

+ +

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.

+ +

4. Réaliser une pull request avec votre exemple

+ +

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.

+ +

5. Créer la page sur MDN

+ +

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.

+ +

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.

+ +
+

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

+
+ +

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

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html new file mode 100644 index 0000000000..140cc9a35a --- /dev/null +++ b/files/fr/web/css/layout_cookbook/disposition_en_colonnes/index.html @@ -0,0 +1,129 @@ +--- +title: Disposition en colonnes +slug: Web/CSS/Layout_cookbook/Disposition_en_colonnes +tags: + - CSS + - Guide + - Multi-col + - flexbox + - grid +translation_of: Web/CSS/Layout_cookbook/Column_layouts +--- +
{{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.

+ +

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

+ +

Prérequis

+ +

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

+ + + +

Les « recettes »

+ +

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

+ +

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.

+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera une disposition multi-colonnes lorsque :

+ + + +

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.

+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

On utilisera les boîtes flexibles pour :

+ + + +

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.

+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

On utiliser les grilles CSS lorsque :

+ + + +

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

+ + + +

column-width

+ +

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

+ +

column-rule

+ +

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

+ +

flex

+ +

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

+ +

flex-wrap

+ +

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

+ +

grid-template-columns

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/grid_wrapper/index.html b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html new file mode 100644 index 0000000000..0e2ed6385f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/grid_wrapper/index.html @@ -0,0 +1,83 @@ +--- +title: Envelopper une grille +slug: Web/CSS/Layout_cookbook/Grid_wrapper +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Grid_wrapper +--- +
{{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.

+ +

Spécifications sommaires

+ +

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

+ +

Recette

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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

+ +

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

+ +

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 {
+  max-width: 1200px;
+  margin: 0 auto; // on centre le conteneur en horizontal
+  display: grid;
+  /* Other grid code goes here */
+}
+
+/* On retire max-width et les marges si le navigateur */
+/* prend en charge les grilles */
+@supports (display: grid) {
+  .grid {
+    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 :

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

+ +

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

+ +

Compatibilité des navigateurs

+ + + +

grid-template-columns

+ +

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

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/layout_cookbook/index.html b/files/fr/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..dc96a66da3 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/index.html @@ -0,0 +1,84 @@ +--- +title: CSS Layout cookbook +slug: Web/CSS/Layout_cookbook +tags: + - CSS + - Guide + - recettes +translation_of: Web/CSS/Layout_cookbook +--- +
{{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.

+ +
+

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.

+
+ +

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

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.

diff --git a/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html new file mode 100644 index 0000000000..6c3f1d171f --- /dev/null +++ b/files/fr/web/css/layout_cookbook/liste_groupes_avec_indicateurs/index.html @@ -0,0 +1,53 @@ +--- +title: Liste de groupes avec indicateurs +slug: Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs +tags: + - CSS + - Guide + - Intermédiaire +translation_of: Web/CSS/Layout_cookbook/List_group_with_badges +--- +

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

+ +

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

+ +

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.

+ +

Exemple appliqué

+ +

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

+ +

Note : Télécharger l'exemple.

+ +

Choix effectués

+ +

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

+ +

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

+ +

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

+ +

align-items

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/media_objects/index.html b/files/fr/web/css/layout_cookbook/media_objects/index.html new file mode 100644 index 0000000000..129ba33c40 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/media_objects/index.html @@ -0,0 +1,89 @@ +--- +title: Objets avec média +slug: Web/CSS/Layout_cookbook/Media_objects +tags: + - CSS + - Guide + - Recette +translation_of: Web/CSS/Layout_cookbook/Media_objects +--- +
{{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).

+ +

+ +

Spécifications sommaires

+ +

Voici ce qu'on souhaite obtenir :

+ + + +

Recette

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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.

+ +

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

+ +

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.

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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

+ + + +

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

+ + + +

grid-template-areas

+ +

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

+ +

float

+ +

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

+ +

Voir aussi

+ + + +

 

diff --git a/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html new file mode 100644 index 0000000000..8ba8d1ea7e --- /dev/null +++ b/files/fr/web/css/layout_cookbook/navigation_breadcrumb/index.html @@ -0,0 +1,49 @@ +--- +title: Fil d'Ariane (breadcrumb) +slug: Web/CSS/Layout_cookbook/Navigation_Breadcrumb +tags: + - CSS + - Navigation +translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation +--- +
{{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 qui permette de revenir à la page de départ.

+ +

Links displayed inline with separators

+ +

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.

+ +

Exemple appliqué

+ +

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

+ +
+

Note : Télécharger cet exemple

+
+ +

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.

+ +

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.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

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

+ +

Voir aussi

+ + diff --git "a/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" new file mode 100644 index 0000000000..24cc872422 --- /dev/null +++ "b/files/fr/web/css/layout_cookbook/navigation_segment\303\251e/index.html" @@ -0,0 +1,48 @@ +--- +title: Navigation segmentée +slug: Web/CSS/Layout_cookbook/Navigation_segmentée +tags: + - CSS + - Navigation + - flexbox +translation_of: Web/CSS/Layout_cookbook/Split_Navigation +--- +
{{CSSRef}}
+ +

Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

+ +

Items separated into two groups.

+ +

Spécifications sommaires

+ +

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

+ +

Exemple appliqué

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

Choix effectués

+ +

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

+ +

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et pousse le bloc au milieu.

+ +

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe push à n'importe quel élément de la liste.

+ +

Compatibilité des navigateurs

+ + + +

Boîtes flexibles

+ +

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

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/layout_cookbook/pagination/index.html b/files/fr/web/css/layout_cookbook/pagination/index.html new file mode 100644 index 0000000000..5ab2bf1d11 --- /dev/null +++ b/files/fr/web/css/layout_cookbook/pagination/index.html @@ -0,0 +1,81 @@ +--- +title: Pagination +slug: Web/CSS/Layout_cookbook/Pagination +tags: + - CSS + - Guide + - Recette + - flexbox +translation_of: Web/CSS/Layout_cookbook/Pagination +--- +

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

+ +

Links to sets of pages in a paged listing

+ +

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.

+ +

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

+ +

Recette

+ +

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

+ +
+

Note : Télécharger cet exemple.

+
+ +

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

+ +

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

+ +

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 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  column-gap: 2px;
+}
+
+ +

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

+ +

On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut aria-hidden sur les flèches de pagination.

+ +

Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.

+ +

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

+ + + +

justify-content

+ +

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

+ +

column-gap in Flex layout

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

Voir aussi

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