diff options
Diffstat (limited to 'files/fr/web/css/layout_cookbook/pagination/index.md')
| -rw-r--r-- | files/fr/web/css/layout_cookbook/pagination/index.md | 71 |
1 files changed, 34 insertions, 37 deletions
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 --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p>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).</p> +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). -<p><img alt="Links to sets of pages in a paged listing" src="pagination.png"></p> + -<h2 id="Spécifications_sommaires">Spécifications sommaires</h2> +## Spécifications sommaires -<p>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.</p> +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. -<p>Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.</p> +Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu. -<h2 id="Recette">Recette</h2> +## Recette -<p>{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}}</p> +{{EmbedGHLiveSample("css-examples/css-cookbook/pagination.html", '100%', 720)}} -<div class="note"> -<p><strong>Note :</strong> <a href="https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html">Télécharger cet exemple</a>.</p> -</div> +> **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/pagination--download.html). -<h2 id="Choix_effectués">Choix effectués</h2> +## Choix effectués -<p>Pour obtenir ce résultat, on utilise <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">les boîtes flexibles</a> 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")}}.</p> +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")}}. -<p>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.</p> +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. -<h2 id="Méthodes_alternatives">Méthodes alternatives</h2> +## Méthodes alternatives -<p>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.</p> +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. -<pre class="brush: css">.pagination { +```css +.pagination { list-style: none; margin: 0; padding: 0; display: flex; column-gap: 2px; } -</pre> +``` -<h2 id="Accessibilité">Accessibilité</h2> +## Accessibilité -<p>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 <code>aria-label="pagination"</code> sur l'élément <code><nav></code>.</p> +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>`. -<p>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 <code>aria-hidden</code> sur les flèches de pagination.</p> +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. -<p>Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.</p> +Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité. -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>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é.</p> +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é. -<h3 id="justify-content">justify-content</h3> +### justify-content -<p>{{Compat("css.properties.justify-content")}}</p> +{{Compat("css.properties.justify-content")}} -<h3 id="column-gap_in_Flex_layout">column-gap in Flex layout</h3> +### column-gap in Flex layout -<p>{{Compat("css.properties.column-gap.flex_context")}}</p> +{{Compat("css.properties.column-gap.flex_context")}} -<h2 id="See_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{Cssxref("justify-content")}}</li> - <li>{{Cssxref("column-gap")}}</li> - <li><em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html">Know your ARIA: 'Hidden' vs 'None'</a></em><a href="https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html"> (en anglais)</a></li> - <li><a href="https://webaim.org/techniques/css/invisiblecontent/#techniques">Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)</a></li> - <li><a href="https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939">Écrire du CSS sans oublier l'accessibilité (en anglais)</a></li> - <li><a href="https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination">Guide stylistique d'accessibilité : la pagination</a></li> -</ul> +- {{Cssxref("justify-content")}} +- {{Cssxref("column-gap")}} +- _[Know your ARIA: 'Hidden' vs 'None'](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html)_[ (en anglais)](https://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html) +- [Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)](https://webaim.org/techniques/css/invisiblecontent/#techniques) +- [Écrire du CSS sans oublier l'accessibilité (en anglais)](https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939) +- [Guide stylistique d'accessibilité : la pagination](https://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-pagination) |