Pourquoi vous ne devriez jamais utiliser px pour définir la taille de police dans CSS

Guide de l'accessibilité du clavier: HTML et CSS (1ère partie)

Comprendre WAI-ARIA, un guide complet

Des styles de listes créatifs

Grille CSS et formes personnalisées, 1

Utiliser :has() comme sélecteur de parent et bien plus

Zoomer les images dans une grille

CSS Grid : grille implicite et placement automatique


Vous n'utilisez peut-être pas (ou plus) le XHTML, mais lorsque vous écrivez du HTML, vous êtes peut-être plus influencé par le XHTML que vous ne le pensez. Vous écrivez très probablement du HTML _à la manière de XHTML_.

Qu'est-ce que _la façon XHTML_ d'écrire du HTML, et qu'est-ce que _la façon HTML_ d'écrire du HTML ? Voyons cela.

## HTML, XHTML, HTML

Dans les années 1990, il y avait le HTML. Dans les années 2000, il y a eu le XHTML. Puis, dans les années 2010, nous sommes revenus au HTML. C'est une histoire simple...

Les dates approximatives des spécifications sont également révélatrices : HTML "1" 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999 ; XHTML 1.0 2000, XHTML 1.1 2001 ; "HTML5" [2007](https://en.wikipedia.org/wiki/HTML5#Timeline).

Le XHTML est devenu populaire lorsque tout le monde croyait que le XML et ses dérivés étaient l'avenir. "XML tout court". Pour le HTML, cela a eu un effet profond et durable&nbsp;: celui de nous apprendre à l'écrire à la façon XHTML.

## La façon XHTML d'écrire le HTML

La méthode XHTML est bien documentée, car XHTML 1.0 la décrit en détail dans sa section "[Différences avec HTML 4](https://www.w3.org/TR/xhtml1/#diffs)"&nbsp;:

- Les documents doivent être bien formés.
- Les noms des éléments et des attributs doivent être en minuscules.
- Pour les éléments non vides, les balises de fin sont obligatoires.
- Les valeurs des attributs doivent toujours être citées.
- La [minimisation des attributs](https://www.w3.org/TR/xhtml1/#h-4.5) n'est pas prise en charge.
- Les éléments vides doivent être fermés.
- Le traitement des espaces blancs dans les valeurs d'attributs est effectué conformément à XML.
- Les éléments de script et de style doivent comporter des sections CDATA.
- Les exclusions SGML ne sont pas autorisées.
- Les éléments ayant des attributs id et name, comme a, applet, form, frame, iframe, img et map, ne doivent utiliser que id.
- Les attributs ayant des ensembles de valeurs prédéfinies sont sensibles à la casse.
- Les références aux entités comme les valeurs hexadécimales doivent être en minuscules.

Cela vous semble-t-il familier ? À l'exception du balisage du contenu CDATA, ainsi que du traitement des exclusions SGML, vous suivez probablement toutes ces règles. **Toutes ces règles**.

Bien que le XHTML soit mort, nombre de ces règles n'ont jamais été remises en question. Certaines ont même été élevées au rang de "bonnes pratiques" pour le HTML.

C'est la façon XHTML d'écrire du HTML, et son impact durable sur le domaine.

## La façon d'écrire du HTML

Une façon de nous ramener en arrière est de reformuler négativement les règles imposées par le XHTML. Faisons cela (sans la partie SGML, car [HTML n'est plus basé sur SGML](https://html.spec.whatwg.org/multipage/parsing.html#parsing)) :

- Les documents peuvent ne pas être bien formés.
- Les noms des éléments et des attributs peuvent ne pas être en minuscules.
- Pour les éléments non vides, les balises de fin ne sont pas toujours nécessaires.
- Les valeurs des attributs ne sont pas toujours citées.
- La minimisation des attributs est prise en charge.
- Les éléments vides n'ont pas besoin d'être fermés.
- Le traitement des espaces blancs dans les valeurs d'attributs n'est pas réalisé conforment à XML.
- Les éléments de script et de style n'ont pas besoin de sections CDATA.
- Les éléments ayant des attributs `id` et `name` ne peuvent pas utiliser uniquement id.
- Les attributs dont les valeurs sont prédéfinies ne sont pas sensibles à la casse.
- Les références aux entités comme les valeurs hexadécimales peuvent ne pas être uniquement en minuscules.

Supprimons les points ésotériques et ceux qui ne semblent pas pertinents. Il s'agit de la gestion des espaces blancs XML, des sections CDATA, du doublement des valeurs des attributs de nom, de la casse des ensembles de valeurs prédéfinis et des références d'entités en hexadécimal :

- Les documents peuvent ne pas être bien formés.
- Les noms des éléments et des attributs peuvent ne pas être en minuscules.
- Pour les éléments non vides, les balises de fin ne sont pas toujours requises.
- Les valeurs des attributs ne sont pas toujours citées.
- La minimisation des attributs est prise en charge.
- Les éléments vides n'ont pas besoin d'être fermés.

Si l'on fait abstraction de ces règles, on a beaucoup moins l'impression de travailler avec du XML, mais plutôt avec du HTML. Mais nous n'avons pas encore terminé.

"Les documents peuvent ne pas être bien formés" semble suggèrer qu'il serait _acceptable_ que le code HTML soit invalide. Il était tout à fait cohérent que XHTML soit pointilleux sur la conformité de la forme en raison de sa gestion stricte des erreurs (par XML). Mais même si les documents HTML fonctionnent encore lorsqu'ils contiennent de graves problèmes de syntaxe et de conformité, il n'est _pas utile_, ni pour le professionnel ni pour notre domaine d'user et d'abuser de cette résilience. (J'ai déjà plaidé cette cause dans mon article "[In Critical Defense of Frontend Development](https://meiert.com/en/blog/critical-frontend-development/)".

La *façon HTML* ne suggére donc pas que "les documents peuvent ne pas être bien formés". Il devrait également être clair que non seulement les balises de fin, mais aussi celles de début ne sont pas toujours nécessaires. Si nous reformulons et réorganisons, voici l'essentiel :

- Les balises de début et de fin ne sont pas toujours nécessaires.
- Les éléments vides n'ont pas besoin d'être fermés.
- Les noms des éléments et des attributs peuvent être en minuscules ou en majuscules.
- Les valeurs des attributs ne sont pas toujours entre guillemets.
- La minimisation des attributs est prise en charge.

## Exemples

Comment cela se présente-t-il en pratique ? Pour les balises de début et de fin, sachez que de nombreuses balises sont facultatives. Un paragraphe et une liste, par exemple, s'écrivent comme ceci en XHTML :

```xhtml
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
  <li>Praesent augue nisl</li>
  <li>Lobortis nec bibendum ut</li>
  <li>Dictum ac quam</li>
</ul>
```

En HTML, vous pouvez l'écrire avec ce code (qui est parfaitement valide)&nbsp;:

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>
```

Les développeurs ont également appris à écrire les éléments vides comme ceci : `<br />`. C'est encore une chose que le XHTML a apporté au HTML, mais la barre oblique n'ayant aucun effet sur les éléments vides, vous n'avez besoin que de ceci&nbsp;: `<br>`.

En HTML vous pouvez tout écrire en majuscules :

```html
<A HREF="https://css-tricks.com/">CSS-Tricks</A>
```

Bon, évidemment, on dirait que vous criez et vous n'aimerez sans doute pas cela, mais enfin il n'est pas interdit de l'écrire comme ça.

Lorsque vous voulez condenser ce lien, le HTML vous offre la possibilité de [laisser de côté certains guillemets](https://meiert.com/en/blog/optional-html/#toc-quotes) :

```html
<A HREF=https://css-tricks.com/>CSS-Tricks</A>
```

Note : _En règle générale, lorsque la valeur de l'attribut ne contient pas d'espace ou de signe égal, il est possible de supprimer les guillemets._

Enfin, le HTML-HTML -&nbsp;et non le XHTML-HTML&nbsp;- permet également de minimiser les attributs. C'est-à-dire qu'au lieu de marquer un élément `input` comme requis et en lecture seule, comme ceci&nbsp;:

```html
<input type="text" required="required" readonly="readonly" />
```

Vous pouvez minimiser les attributs :

```html
<input type="text" required readonly />
```

Si vous profitez non seulement du fait que les guillemets ne sont pas nécessaires, mais aussi du fait que le texte est la valeur par défaut de l'attribut type ici (il existe d'autres combinaisons attribut-valeur inutiles), vous obtenez un exemple qui montre le HTML dans toute sa beauté minimale&nbsp;:

```html
<input required readonly />
```

## Écrire du HTML, à la manière du HTML

Ce qui précède n'est pas une représentation de ce qu'était le HTML dans les années 90. À l'époque, le HTML était chargé d'éléments `<table>` pour la mise en page, rempli de code de présentation, largement invalide (comme c'est encore le cas aujourd'hui), et la compatibilité des agents utilisateurs était très variable. Pourtant, c'est l'essence même de ce que nous aurions voulu conserver si XML et XHTML n'étaient pas arrivés.

Si vous êtes ouvert à une suggestion de ce à quoi pourrait ressembler une manière plus complète et contemporaine d'écrire le HTML, j'en ai une&nbsp;! (Le HTML étant mon principal domaine d'intérêt, je complète ce texte par des liens vers certains de mes articles).

1. **Respectez la syntaxe et la sémantique**.
   - [Validez votre HTML](https://meiert.com/en/blog/the-frontend-developer-test/), et n'envoyez que du HTML valide, utilisez [le validateur du W3C](https://validator.w3.org/nu/)
2. **Utilisez les options que vous offre le HTML, du moment que vous le faites de manière cohérente**.
   - N'oubliez pas que les noms des éléments et des attributs peuvent être en minuscules ou en majuscules.
3. **Limitez l'utilisation du HTML au strict minimum**
   - Rappelez-vous que le balisage de présentation et de comportement doit être traité par CSS et JavaScript.
   - Rappelez-vous que les balises de début et de fin ne sont [pas toujours nécessaires](https://meiert.com/en/blog/optional-html/#toc-tags).
   - Rappelez-vous que les éléments vides n'ont pas besoin d'être fermés.
   - N'oubliez pas que certains attributs ont des valeurs par défaut qui permettent d'[omettre ces paires attribut-valeur](https://meiert.com/en/blog/optional-html/#toc-attribute-values).
   - N'oubliez pas que les valeurs des attributs n'ont [pas toujours besoin d'être entre guillemets](https://meiert.com/en/blog/optional-html/#toc-quotes).
   - N'oubliez pas que la minimisation des attributs est prise en charge.

Ce n'est pas une coïncidence si cela ressemble aux [trois règles de base du HTML](https://meiert.com/en/blog/rules-for-html/), si cela fonctionne selon le principe qu'un [poids réduit de fichier conduit également à des sites plus rapides](https://meiert.com/en/blog/html-performance/), et si cela suit l'[école du développement web minimal](https://meiert.com/en/blog/minimal-web-development/). Rien de tout cela n'est nouveau -&nbsp;notre domaine pourrait simplement décider de le redécouvrir. Des outils sont également disponibles&nbsp;: [html-minifier](https://github.com/kangax/html-minifier) est probablement le plus connu et le plus à même de gérer toutes les optimisations HTML.

Vous avez appris le HTML à la manière du XHTML. HTML n'est pas XHTML. Redécouvrez le HTML et participez à l'élaboration d'une nouvelle méthode moderne d'écriture du HTML, qui reconnaît le XML sans en faire un dogme intangible.


Écrire HTML à la manière HTML (pas XHTML)

Au début de cette année, j'ai auto-publié un ebook intitulé _Understanding JavaScript Promises_ ([téléchargeable gratuitement](https://ebooks.humanwhocodes.com/promises)). Je n'avais pas l'intention d'en faire un livre imprimé, mais pas mal de personnes m'ayant contacté pour me demander une version imprimée, j'ai décidé de l'auto-publier également. Je me disais qu'il ne serait pas trop compliqué d'utiliser HTML et CSS pour générer un PDF et l'envoyer à l'imprimeur. Ce que je n'avais pas encore réalisé, c'est que je n'avais pas de solution pour gérer une partie importante d'un livre imprimé : la table des matières.

## La composition d'une table des matières

À la base, une table des matières est assez simple. Chaque ligne représente une partie d'un livre ou d'une page Web et indique où vous pouvez trouver ce contenu. En général, les lignes contiennent trois parties :

1. Le titre du chapitre ou de la section
2. Des amorces (c'est-à-dire des points, des tirets ou des lignes) qui relient visuellement le titre au numéro de page.
3. Le numéro de page

On peut facilement générer une table des matières à l'aide d'outils de traitement de texte comme Microsoft Word ou Google Docs, mais comme mon contenu était en format Markdown, puis transformé en HTML, ce n'était pas une bonne option pour moi. Je voulais quelque chose d'automatisé qui fonctionne avec HTML pour générer la table des matières dans un format adapté à l'impression. Je voulais également que chaque ligne soit un lien afin de pouvoir l'utiliser dans les pages Web et les PDF pour naviguer dans le document. Je voulais aussi que le titre et le numéro de page soient précédés de points.

J'ai donc commencé à faire des recherches.

Je suis tombé sur deux excellents articles de blog sur la création d'une table des matières avec HTML et CSS. Le premier, intitulé "[Build a Table of Contents from your HTML](https://pagedjs.org/posts/build-a-table-of-contents-from-your-html/)", est signé Julie Blanc. Julie a travaillé sur [PagedJS](https://pagedjs.org/), un polyfill pour les fonctionnalités de médias paginés manquantes dans les navigateurs Web qui formate correctement les documents pour l'impression. J'ai commencé par l'exemple de Julie, mais j'ai trouvé qu'il ne fonctionnait pas vraiment pour moi. J'ai ensuite trouvé le billet de Christoph Grabo intitulé "[Responsive TOC leader lines with CSS](https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/)", qui présentait le concept d'utilisation de CSS Grid (par opposition à l'approche basée sur les `float` de Julie) pour faciliter l'alignement. Une fois de plus, cependant, son approche ne correspondait pas tout à fait à mes besoins.

Mais après avoir lu ces deux articles, j'ai eu le sentiment d'avoir une compréhension suffisante des problèmes de mise en page pour me lancer dans mon propre projet. J'ai utilisé des éléments des deux articles du blog et j'ai ajouté quelques nouveaux concepts HTML et CSS à mon approche pour arriver à un résultat qui me convient.

## Choix du balisage

Lorsque j'ai décidé du balisage correct d'une table des matières, j'ai surtout pensé à la sémantique correcte. Fondamentalement, une table des matières consiste à associer un titre (chapitre ou sous-section) à un numéro de page, presque comme une paire clé-valeur. Cela m'a conduit à deux options :

La première option consiste à utiliser un tableau (`<table>`) avec une colonne pour le titre et une colonne pour la page.
Ensuite, il y a l'élément liste de définition (`<dl>`), souvent inutilisé et oublié. Il fait également office de carte clé-valeur. Ainsi, une fois encore, la relation entre le titre et le numéro de page serait évidente.

Ces deux options semblaient bonnes jusqu'à ce que je me rende compte qu'elles ne fonctionnent vraiment que pour les tables des matières à un seul niveau, c'est-à-dire uniquement si je voulais avoir une table des matières contenant uniquement les noms des chapitres. En revanche, si je voulais afficher les sous-sections dans la table des matières, je n'avais pas de bonnes options. Les éléments de tableau ne sont pas très adaptés aux données hiérarchiques et, bien que les listes de définitions puissent techniquement être imbriquées, la sémantique ne semblait pas correcte. Je suis donc retourné à la planche à dessin.

J'ai décidé de m'inspirer de l'approche de Julie et d'utiliser une liste ; cependant, j'ai opté pour une liste ordonnée (`<ol>`) au lieu d'une liste non ordonnée (`<ul>`). Je pense qu'une liste ordonnée est plus appropriée dans ce cas. Une table des matières représente une liste de chapitres et de sous-titres dans l'ordre dans lequel ils apparaissent dans le contenu. L'ordre a de l'importance et ne doit pas se perdre dans le balisage.

Malheureusement, l'utilisation d'une liste ordonnée implique la perte de la relation sémantique entre le titre et le numéro de page. L'étape suivante consistait donc à rétablir cette relation dans chaque élément de la liste. Le moyen le plus simple de résoudre ce problème est d'insérer le mot "page" avant le numéro de page. De cette façon, la relation entre le numéro et le texte est claire, même sans autre distinction visuelle.

Voici un squelette HTML simple qui a servi de base à mon balisage&nbsp;:

```html
<ol class="toc-list">
  <li>
    <a href="#link_to_heading">
      <span class="title">Chapître ou titres de sous-sections</span>
      <span class="page">Page 1</span>
    </a>

    <ol>
      
    </ol>
  </li>
</ol>
```

## Application de styles à la table des matières

Une fois que j'ai établi le balisage que je prévoyais d'utiliser, l'étape suivante consistait à appliquer certains styles.

Tout d'abord, j'ai supprimé les numéros générés automatiquement. Vous pouvez choisir de conserver les numéros générés automatiquement dans votre propre projet si vous le souhaitez, mais il est fréquent que les livres aient des avant et après-mots non numérotés inclus dans la liste des chapitres, ce qui rend les numéros générés automatiquement incorrects.

Pour mon cas, je remplirais les numéros de chapitre manuellement, puis j'ajusterais la mise en page de façon à ce que la liste de premier niveau n'ait pas de remplissage (ce qui l'aligne sur les paragraphes) et que chaque liste intégrée soit indentée de deux espaces. J'ai choisi d'utiliser une valeur de remplissage de 2 ch parce que je n'étais pas encore tout à fait sûr de la police que j'allais utiliser. L'unité de longueur ch permet au remplissage d'être relatif à la largeur d'un caractère - quelle que soit la police utilisée - plutôt qu'à une taille absolue en pixels qui pourrait donner un aspect incohérent.

Voici le CSS que j'ai obtenu :

```css
.toc-list,
.toc-list ol {
  list-style-type: none;
}

.toc-list {
  padding: 0;
}

.toc-list ol {
  padding-inline-start: 2ch;
}
```

[Sara Soueidan](https://www.sarasoueidan.com/) m'a fait remarquer que les navigateurs WebKit suppriment la sémantique des listes lorsque `list-style-type` est `none`. J'ai donc dû ajouter `role="list"` dans le HTML pour la préserver :

```html
<ol class="toc-list" role="list">
  <li>
    <a href="#link_to_heading">
      <span class="title">Chapître ou titres de sous-sections</span>
      <span class="page">Page 1</span>
    </a>

    <ol role="list">
      
    </ol>
  </li>
</ol>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GRQWEox" src="//codepen.io/nzakas/embed/GRQWEox?height=450&amp;theme-id=light&amp;slug-hash=GRQWEox&amp;user=nzakas&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/nzakas/pen/GRQWEox">
  Table of Contents - Start</a> de Nicholas C. Zakas dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Stylisation du titre et du numéro de page

La liste étant stylisée à mon goût, il était temps de passer au style d'un élément individuel de la liste. Pour chaque élément de la table des matières, le titre et le numéro de page doivent être sur la même ligne, avec le titre à gauche et le numéro de page aligné à droite.

Vous vous dites peut-être : "Pas de problème, c'est à ça que sert le flexbox !" Vous n'avez pas tort ! Flexbox permet en effet d'obtenir un alignement correct du titre et de la page. Mais il y a quelques problèmes d'alignement délicats lorsque les leaders sont ajoutés, j'ai donc opté pour l'approche de Christoph qui utilise une grille, ce qui est un bonus car cela aide aussi avec les titres multilignes. Voici le CSS pour un article individuel :

```css
.toc-list li > a {
  text-decoration: none;
  display: grid;
  grid-template-columns: auto max-content;
  align-items: end;
}

.toc-list li > a > .page {
  text-align: right;
}
```

La grille comporte deux colonnes, dont la première est automatiquement dimensionnée pour remplir toute la largeur du conteneur, moins la deuxième colonne, qui est dimensionnée au contenu maximal. Le numéro de page est aligné sur la droite, comme il est de coutume dans une table des matières.

La seule autre modification que j'ai apportée à ce stade a été de masquer le texte "Page". Ce texte est utile pour les lecteurs d'écran, mais inutile sur le plan visuel. J'ai donc utilisé une [classe traditionnelle de type "visually-hidden"](https://css-tricks.com/inclusively-hidden/#screen-reader-only) pour le masquer :

```css
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
```

Et, bien entendu, le HTML doit être mis à jour pour utiliser cette classe :

```html
<ol class="toc-list" role="list">
  <li>
    <a href="#link_to_heading">
      <span class="title">Chapître ou titres de sous-sections</span>
      <span class="page"><span class="visually-hidden">Page</span> 1</span>
    </a>

    <ol role="list">
      
    </ol>
  </li>
</ol>
```

Cette base étant posée, je suis passé à la question des lignes pointillées entre le titre et la page.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_mdXWwmL" src="//codepen.io/nzakas/embed/mdXWwmL?height=450&amp;theme-id=light&amp;slug-hash=mdXWwmL&amp;user=nzakas&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/nzakas/pen/mdXWwmL">
  Table of Contents - Étape 2</a> de Nicholas C. Zakas dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Création de lignes pointillées

Les lignes pointillées sont si courantes dans les médias imprimés que vous vous demandez peut-être pourquoi le CSS ne les prend pas déjà en charge. La réponse est : c'est le cas. Enfin, plus ou moins...

Il existe en fait une fonction `leader()` définie dans la spécification [CSS Generated Content for Paged Media](https://www.w3.org/TR/css-gcpm-3/#leaders). Toutefois, comme c'est le cas pour la plupart des spécifications relatives aux médias paginés, cette fonction n'est implémentée dans aucun navigateur, ce qui l'exclut de toute option (du moins au moment où j'écris ces lignes). Elle n'est même pas répertoriée sur [caniuse.com](https://caniuse.com/), sans doute parce que personne ne l'a implémentée et qu'il n'y a aucun plan ou signe indiquant qu'ils le feront.

Heureusement, Julie et Christoph ont déjà abordé ce problème dans leurs articles respectifs. Pour insérer les lignes pointillées, ils ont tous deux utilisé un pseudo-élément `::after` dont la propriété de contenu est définie comme une très longue chaîne de points, comme ceci :

```css
.toc-list li > a > .title {
  position: relative;
  overflow: hidden;
}

.toc-list li > a .title::after {
  position: absolute;
  padding-left: 0.25ch;
  content: ' . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . ';
  text-align: right;
}
```

Le pseudo-élément `::after` est placé dans une position absolue pour le sortir du flux de la page et éviter qu'il ne revienne à la ligne. Le texte est aligné sur la droite parce que nous voulons que les derniers points de chaque ligne soient alignés sur le numéro en fin de ligne. (Nous reviendrons plus tard sur les complexités de cette question.) L'élément `.title` est configuré pour avoir une position relative afin que le pseudo-élément `::after` ne sorte pas de sa boîte. Pendant ce temps, le débordement est masqué pour que tous ces points supplémentaires soient invisibles. Le résultat est une jolie table des matières avec des lignes pointillées.

Cependant, il y a encore autre chose à prendre en considération.

Sara m'a également fait remarquer que tous ces points sont considérés comme du texte par les lecteurs d'écran. Et du coup, qu'est-ce qu'on entend&nbsp;? "Introduction point point point point..." jusqu'à ce que tous les points soient annoncés. C'est une expérience terrible pour les utilisateurs de lecteurs d'écran.

La solution consiste à insérer un élément supplémentaire dont l'`aria-hidden` est réglé sur `true`, puis à utiliser cet élément pour insérer les points. Ainsi, le HTML devient :

```html
<ol class="toc-list" role="list">
  <li>
    <a href="#link_to_heading">
      <span class="title"
        >Chapître ou titres de sous-sections<span
          class="leaders"
          aria-hidden="true"
        ></span
      ></span>
      <span class="page"><span class="visually-hidden">Page</span> 1</span>
    </a>

    <ol role="list">
      
    </ol>
  </li>
</ol>
```

Et le CSS devient :

```css
.toc-list li > a > .title {
  position: relative;
  overflow: hidden;
}

.toc-list li > a .leaders::after {
  position: absolute;
  padding-left: 0.25ch;
  content: ' . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . '
    '. . . . . . . . . . . . . . . . . . . . . . . ';
  text-align: right;
}
```

Désormais, les lecteurs d'écran ignoreront les points et épargneront aux utilisateurs la frustration d'entendre l'annonce de plusieurs points.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ZEreyJb" src="//codepen.io/nzakas/embed/ZEreyJb?height=450&amp;theme-id=light&amp;slug-hash=ZEreyJb&amp;user=nzakas&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/nzakas/pen/ZEreyJb">
  Table of Contents - Étape 3</a> de Nicholas C. Zakas dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Touches finales

À ce stade, le composant table des matières est plutôt bien conçu, mais il pourrait bénéficier de quelques petites retouches. Pour commencer, la plupart des livres décalent visuellement les titres des chapitres de ceux des sous-sections. J'ai donc mis les éléments de premier niveau en gras et introduit une marge pour séparer les sous-sections des chapitres qui suivent :

```css
.toc-list > li > a {
  font-weight: bold;
  margin-block-start: 1em;
}
```

Ensuite, je voulais nettoyer l'alignement des numéros de page. Tout se passait bien lorsque j'utilisais une police à largeur fixe, mais pour les polices à largeur variable, les points de repère peuvent finir par former un motif en zigzag lorsqu'ils s'adaptent à la largeur d'un numéro de page. Par exemple, les numéros de page comportant un 1 sont plus étroits que les autres, ce qui entraîne un désalignement des points d'amorce par rapport aux points des lignes précédentes ou suivantes.

<figure role="group"><img src="/images/misaligned.webp" width="254" height="243" alt=""/></figure>

Pour résoudre ce problème, j'ai réglé [`font-variant-numeric`](https://css-tricks.com/almanac/properties/f/font-variant-numeric/) sur `tabular-nums` afin que tous les chiffres soient traités avec la même largeur. En fixant également la largeur minimale à `2ch`, je me suis assuré que tous les chiffres à un ou deux chiffres étaient parfaitement alignés. (Si votre projet compte plus de 100 pages, il est préférable de fixer cette valeur à `3ch`). Voici le CSS final pour le numéro de page :

```css
.toc-list li > a > .page {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
```

<figure role="group"><img src="/images/aligned.webp" width="254" height="253" alt=""/></figure>

Et voilà, la table des matières est complète !

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_rNJaeMo" src="//codepen.io/nzakas/embed/rNJaeMo?height=450&amp;theme-id=light&amp;slug-hash=rNJaeMo&amp;user=nzakas&amp;default-tab=result" scrolling="no" frameborder="0" height="450" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/nzakas/pen/rNJaeMo">
  Table of Contents - Final</a> de Nicholas C. Zakas dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Conclusion

La création d'une table des matières avec rien d'autre que du HTML et du CSS a été un défi plus important que prévu, mais je suis très satisfait du résultat. Non seulement cette approche est suffisamment souple pour s'adapter aux chapitres et aux sous-sections, mais elle permet de gérer les sous-sous-sections sans mettre à jour le CSS. L'approche globale fonctionne sur les pages Web où vous souhaitez créer des liens vers les différents emplacements du contenu, ainsi que sur les PDF où vous souhaitez que la table des matières renvoie à différentes pages. Et bien sûr, elle est également très belle à l'impression si vous souhaitez l'utiliser dans une brochure ou un livre.

Je tiens à remercier Julie Blanc et Christoph Grabo pour leurs excellents articles de blog sur la création d'une table des matières, car ils m'ont été d'une aide précieuse lorsque j'ai commencé. J'aimerais également remercier Sara Soueidan pour ses commentaires sur l'accessibilité pendant que je travaillais sur ce projet.

Une table des matières parfaite avec HTML et CSS

Supposons que nous ayons ce HTML :

```html
<section>
  <p>Little</p>
  <p>Piggy</p>
  
</section>
```

Les deux CSS qui suivent feront exactement la même chose&nbsp;:

```css
p:nth-child(2) {
  color: red;
}
```

```css
p:nth-of-type(2) {
  color: red;
}
```

Pourtant, il y aura une différence évidemment.

La définition de notre sélecteur `:nth-child`, en bon français, signifie _sélectionne un élément si_&nbsp;:

1. c'est un élément paragraphe
2. c'est le deuxième enfant de son élément parent

La définition de notre sélecteur `:nth-of-type`, en bon français, signifie&nbsp;:

1. sélectionne le deuxième paragraphe enfant de son élément parent

`:nth-of-type` est donc, comment dire... _moins conditionnel_.

Supposons que notre balisage soit maintenant :

```html
<section>
  <h1>Words</h1>
  <p>Little</p>
  <p>Piggy</p>
  
</section>
```

Ceci ne fonctionne plus :

```css
p:nth-child(2) {
  color: red;
} /*  incorrect */
```

Ceci fonctionne :

```css
p:nth-of-type(2) {
  color: red;
} /* fonctionne */
```

Par "incorrect", je veux dire que le sélecteur `:nth-child` sélectionne maintenant le mot "Little" au lieu de "Piggy" parce que cet élément est à la fois 1) le second enfant et 2) un élément paragraphe. Par "fonctionne", je veux dire que "Piggy" est toujours sélectionné parce qu'il est _le deuxième paragraphe dans cet élément parent_.

Si j'ajoutais un titre `<h2>` après le titre principal `<h1>`, le sélecteur `:nth-child` _ne sélectionnerait rien du tout_ puisque maintenant le deuxième enfant n'est plus un paragraphe, et donc le sélecteur ne trouve rien.  
Le `:nth-of-type`, lui, fonctionne comme attendu.

Mon sentiment est que `:nth-of-type` est moins fragile et plus utile en général, même si `:nth-child` est plus souvent utilisé (semble-t-il). Combien de fois vous êtes-vous demandé "je veux sélectionner le deuxième enfant d'un élément parent s'il se trouve être un paragraphe"&nbsp;? Parfois, peut-être, mais il est plus probable que vous vouliez "sélectionner le deuxième paragraphe" ou "sélectionner chaque troisième rangée d'un tableau", qui sont des cas où `:nth-of-type` est un choix plus solide (là encore, de mon point de vue).

J'ai l'impresson que mes moments de "Grrrr... mais pourquoi ce sélecteur `:nth-child` ne marche pas&nbsp;?!" viennent du fait que j'ai qualifié le sélecteur avec un tag et que le numéro d'ordre de l'enfant ne correspond pas à ce tag. Par conséquent, lorsque j'utilise `:nth-child`, je me rends compte qu'il est préférable de spécifier le parent et de laisser `:nth-child` non qualifié.

```css
dl :nth-child(2) {
} /* est mieux que */
dd:nth-child(2) {
} /* ceci */
```

Mais bien sûr tout dépend de la situation exacte.

Vous pouvez jouer avec [ce super outil de test](https://css-tricks.com/examples/nth-child-tester/) ! Voir également [la page MDN de :last-of-type](https://developer.mozilla.org/fr/docs/Web/CSS/:last-of-type) et [la page MDN de :nth-child](https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child)

La différence entre :nth-child et :nth-of-type


Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le _contenu d'une div_ est assez simple, il suffit de donner à la propriété `text-align` la valeur `center`, mais lorsqu'on parle de centrer _la div elle-même_ les choses deviennent plus délicates, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur.

<figure role="group"><img src="/images/Big_Lewbowski_World_Of_Pain_New_Brown_Shirt-compressor.jpeg" width="386" height="386" alt="citation du film The Big Lebowski, you are entering a world of pain"/></figure>

L'objectif de cet article est de montrer comment, avec quelques astuces CSS, on peut centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Steve Pear s'intéresse ici spécifiquement au **centrage d'une div**, pour une introduction complète au **centrage du contenu** d'une div, consultez l'article_ [Centrer en CSS, un guide complet](/articles/centrer-en-css-un-guide-complet), _de Chris Coyier&nbsp;: le centrage du contenu d'une div n'est pas aussi simple que le dit Steve Pear&nbsp;!_

## Centrer une div dans une page, les bases

Cette méthode fonctionne avec n'importe quel navigateur.

    .center-div {
         margin: 0 auto;
         width: 100px;
    }

Le résultat dans CodePen (vous pouvez cliquer sur HTML et CSS pour en voir le contenu ou sur _edit on CodePen_ pour le modifier)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_voseD" src="//codepen.io/Tipue/embed/voseD?height=270&amp;theme-id=light&amp;slug-hash=voseD&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="270" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/voseD/">
  Centering a div in a page, basic</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La valeur `auto` de la propriété `margin` donne aux marges gauche et droite l'espace restant disponible dans la page. Il faut bien se rappeler de donner une propriété `width` à votre div.

## Centrer une div dans une div, à l'ancienne

Cela fonctionne avec à peu près tous les navigateurs.

    .outer-div {
         padding: 30px;
    }
    .inner-div {
         margin: 0 auto;
         width: 100px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

Le résultat dans CodePen&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_apDLG" src="//codepen.io/Tipue/embed/apDLG?height=320&amp;theme-id=light&amp;slug-hash=apDLG&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/apDLG/">
  Centering a div within a div, old-school</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La marge `auto` frappe encore, et la div intérieure doit avoir une propriété `width`.

<figure role="group"><img src="/images/world-of-pain-1.jpeg" width="610" height="343" alt="image tirée du film The Big Lebowski"/><figcaption>“On vous l'avait bien dit les gars...”</figcaption></figure>

## Centrer une div dans une div avec inline-block

Avec la méthode [inline-block](/articles/la-difference-entre-block-et-inline/), la div intérieure n'a pas besoin de propriété `width`. Fonctionne avec tous les navigateurs raisonnablement modernes.

    .outer-div {
         padding: 30px;
         text-align: center;
    }
    .inner-div {
         display: inline-block;
         padding: 50px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_Ednlt" src="//codepen.io/Tipue/embed/Ednlt?height=320&amp;theme-id=light&amp;slug-hash=Ednlt&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/Ednlt/">
  Centering a div within a div with inline-block</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La propriété `text-align` ne fonctionne qu'avec les éléments inline. La valeur `inline-block` affiche la div intérieure comme un élément inline _et_ block, ce qui permet à la propriété `text-align` de la div extérieure de centrer la div intérieure.

## Centrer une div dans une div, horizontalement et verticalement

On utilise l'astuce `margin auto` pour centrer une div dans le sens horizontal et vertical, et cela fonctionne avec tous les navigateurs modernes.

    .outer-div {
         padding: 30px;
    }
    .inner-div {
         margin: auto;
         width: 100px;
         height: 100px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

Le résultat dans CodePen&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_vsKif" src="//codepen.io/Tipue/embed/vsKif?height=320&amp;theme-id=light&amp;slug-hash=vsKif&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/vsKif/">
  Centering a div within a div, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir des propriétés `width` et `height`. Cette méthode ne fonctionne pas si la div extérieure a une hauteur fixe.

## Centrer verticalement une div avec transform

Cette méthode utilise `transform` pour centrer verticalement tout contenu à l'intérieur d'une div. On fait appel à un élément HTML vide qui sert de conteneur, ici j'ai choisi `<p>`.

```
.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}

// HTML
    <div class="center-div">
    	<p>Esse augue dolor</p>
    </div>
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NXwGqB" src="//codepen.io/Tipue/embed/NXwGqB?height=350&amp;theme-id=light&amp;slug-hash=NXwGqB&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="350" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/NXwGqB">
  Vertical center in a div with transform</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La valeur `perspective` réduit le flou (_blurring_) sur un affichage haute-définition. Pour une meilleure compatibilité avec les navigateurs anciens, vous pouvez utiliser les préfixes constructeurs comme `-webkit-transform` et `-ms-transform`. Ce dernier remonte jusqu'à IE9.

## Centrer une div en bas de page

Ici, on utilise `margin auto` et une div externe [positionnée absolument](/articles/le-positionnement-css). Fonctionne avec tous les navigateurs modernes.

    .outer-div {
         position: absolute;
         bottom: 30px;
         width: 100%;
    }
    .inner-div {
         margin: 0 auto;
         width: 100px;
         height: 100px;
         background-color: #ccc;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_bwLDh" src="//codepen.io/Tipue/embed/bwLDh?height=300&amp;theme-id=light&amp;slug-hash=bwLDh&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/bwLDh/">
  Centering a div at the bottom of a page</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir une propriété `width`. La distance la séparant du bas de page est définie grâce à la propriété `bottom` de la div extérieure.

Pour centrer une div en haut de page, remplacez la propriété `bottom` par `top`.

## Centrer une div dans une page, horizontalement et verticalement

On utilise là encore `margin auto`, et une div extérieure positionnée absolument. Fonctionne avec tous les navigateurs modernes.

    .center-div {
         position: absolute;
         margin: auto;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         width: 100px;
         height: 100px;
         background-color: #ccc;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_CBbna" src="//codepen.io/Tipue/embed/CBbna?height=300&amp;theme-id=light&amp;slug-hash=CBbna&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/CBbna/">
  Centering a div in a page, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div doit avoir les propriétés `width` et `height`.

## Centrer une div dans une page, responsive

La largeur de la div est responsive, elle s'adapte à la largeur du viewport. Fonctionne sur tous les navigateurs.

```
.center-div
{
     margin: 0 auto;
     max-width: 700px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_sGHuI" src="//codepen.io/Tipue/embed/sGHuI?height=300&amp;theme-id=light&amp;slug-hash=sGHuI&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/sGHuI">
  Centering a div in a page, responsive</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div centrée doit avoir une propriété `max-width`.

## Centrer une div dans une div responsive

La div intérieure est responsive. Fonctionne avec tous les navigateurs.

```
.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     max-width: 700px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_yAbdC" src="//codepen.io/Tipue/embed/yAbdC?height=320&amp;theme-id=light&amp;slug-hash=yAbdC&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/yAbdC">
  Centering a div within a div, inner div responsive</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir une propriété `max-width`.

## Centrer deux divs responsives, côte à côte

Deux divs côte à côte, toutes les deux sont responsives. Fonctionne avec tous les navigateurs.

```
.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
@media screen and (max-width: 600px)
{
     .left-div, .right-div
     {
          max-width: 100%;
     }
}

//HTML

<div class="container">
    <div class="left-div">
    </div>
    <div class="right-div">
    </div>
</div>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_pjdgad" src="//codepen.io/Tipue/embed/pjdgad?height=320&amp;theme-id=light&amp;slug-hash=pjdgad&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/pjdgad">
  Centering two responsive divs, side by side</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

Pour cela on utilise juste deux éléments `inline-block` dans un conteneur centré. Notez qu'on fait également appel à la media query de CSS. Lorsque la taille d'écran est inférieure à 600px, la propriété `max-width` de chacune des divs est fixée à 100%.

## Flexbox et le centrage de div

<figure role="group"><img src="/images/dudeism-compressor.jpeg" width="500" height="250" alt="image tirée du film The Big Lebowski"/></figure>

Le nouveau modèle de mise en page Flexbox simplifie le centrage. L'exemple ci-dessous centre une div horizontalement et verticalement.

```
.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_QbrvYe" src="//codepen.io/Tipue/embed/QbrvYe?height=300&amp;theme-id=light&amp;slug-hash=QbrvYe&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/QbrvYe">
  Flexbox, div centered</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La propriété `height` du conteneur peut être ce qu'on veut, du moment qu'elle est plus large que la div centrée. Dans cet exemple, nous utilisons `vh`, qui est la hauteur de la fenêtre du navigateur, le viewport, plutôt que la hauteur de la page.

## Centrer une div dynamique, horizontalement et verticalement

Cette méthode utilise la propriété `display` avec une valeur de `table`, ce qui lui donne le comportement d'un élément `table` et centre la div horizontalement et verticalement. La div centrée peut avoir un contenu dynamique, et donc une hauteur ou une largeur variable. Elle peut être responsive.

```
.outer-div
{
     display: table;
     position: absolute;
     height: 100%;
     width: 100%;
}
.mid-div
{
     display: table-cell;
     vertical-align: middle;
}
.center-div
{
     margin: 0 auto;
     width: 300px;
     height: 100px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PEEOYp" src="//codepen.io/Tipue/embed/PEEOYp?height=300&amp;theme-id=light&amp;slug-hash=PEEOYp&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/PEEOYp">
  Centering a dynamic div, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

Les propriétés `width` et `height` de la div centrée peuvent être ce que vous voulez.

---

<h2 class="ressourcesComplementaires">Ressources complémentaires</h2>

Consultez également dans La Cascade :

- [Alignement en CSS, guide complet](/articles/alignement-en-css-guide-complet)
- [Centrer en CSS, guide complet](/articles/centrer-en-css-un-guide-complet)
- [CSS Flexbox et l'alignement, guide complet](/articles/css-flexbox-et-lalignement-guide-complet)


Centrer un bloc div, guide complet

Plus j’utilise [flexbox](/tags/flexbox/), plus revient la même règle&nbsp;: `justify-content: space-between`. Dans cet article, je vais vous montrer mon approche des questions de mise en page avec flexbox et l’utilité de `space-between` pour résoudre efficacement quelques difficultés épineuses.

<h2>space-between</h2>

`space-between` est une des valeurs possibles de la propriété [justify-content](https://developer.mozilla.org/fr/docs/Web/CSS/justify-content). Elle dispose tous les items flex de manière régulière le long de l’axe principal. L’espace résiduel éventuel est distribué de manière égale _entre_ les items. Un peu comme des items flottants à gauche et à droite, mais vous n’avez pas besoin de _clear_ et vous pouvez le faire horizontalement ou verticalement. C’est un pattern qu’on retrouve à peu près tout le temps.

Ce qui est cool avec `space-between` c’est que les items que vous disposez conservent leur dimension intrinsèque. Cela vous permet d’avoir un markup (balisage) vraiment efficace, qui ne requiert pas d’utiliser des éléments contenants —&nbsp;en fait, la plupart du temps vous pouvez simplement positionner vos items avec flex et c’est bon.

Comme pour tout, à mon avis rien ne vaut une bonne démo. Imaginons que nous avons un super projet d’appli de tournoi Super Smash Bros et un designer nous remet ceci&nbsp;:

<figure role="group"><img src="/images/super-smash-bros-1-compressor.png" width="360" height="640" alt="tableau de scores"/></figure>

Voici comment je m’y prendrais pour construire la section header —&nbsp;la partie avec les images des combattants, les icônes, leurs noms, le score, etc.&nbsp;— avec flexbox et `space-between`.

<h3>Figure 1 - Décomposer le problème de layout</h3>

<figure role="group"><img src="/images/super-smash-bros-2-compressor.jpeg" width="576" height="414" alt="décomposition de l'image en ses éléments"/></figure>

La première chose que je fais lorsque je m’attaque à un problème de mise en , c’est de décomposer tous ses éléments. On a l’image de background, que nous pouvons traiter avec un positionnement absolu et sortir du flow.

Il nous reste à positionner le contenu supérieur par-dessus l’image. Nous avons deux régions&nbsp;:

1. une section en haut avec quelques boutons icônes, l’un à gauche, l’autre à droite.
2. une section en bas comportant le nom du combattant , le score final, des icônes, etc.

Pour ces deux sections, l’axe principal est vertical. Avec `display: flex` et `flex-direction: column` puis `justify-content: space-between`, on fixe les items flex en haut et en bas du header.

Pour illustrer la façon dont ça marche, j’ai indiqué une hauteur donnée pour les sections, mais normalement on peut simplement laisser la dimension du contenu situé à l’intérieur d’un item flex déterminer sa taille. Plus tard dans ces exemples je retirerai la hauteur fixe. Voici une démo.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/EjVjJV/">
  Figure 1</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

_Note : Nous devons laisser le background en dehors du contexte flex, car il y a un [bug dans Firefox](https://github.com/philipwalton/flexbugs/issues/18) qui fait que `space-between` applique de l’espace à des éléments positionnés absolument. Pour éviter ce bug, j’ai enveloppé le contenu dans un élément positionné absolument —&nbsp;.header-content&nbsp;— et indiqué le contexte flex à l’intérieur_

<h3>Figure 2 - Flexibiliser et grouper les items</h3>

<figure role="group"><img src="/images/super-smash-bros-3-compressor.jpeg" width="564" height="356" alt="icônes de navigation, partage, menu"/></figure>

Maintenant, attaquons-nous à la section du haut. Cette fois-ci, les items sont fixés sur les côtés du header, mais selon un axe horizontal. Indiquons `display: flex` dans cette section pour créer notre contexte flex. Nous n’avons pas besoin de définir explicitement la `flex-direction` parce que la valeur est `row`, ou horizontal, par défaut. On utilise à nouveau `justify-content: space-between` pour fixer les items sur les côtés. Les deux icônes sur la droite sont enveloppées dans un élément pour les fixer ensemble sur le côté droit. C’est une façon commode et efficace de grouper des items flex. Dans l’enveloppe de droite, nous pouvons utiliser une autre astuce sympa de flexbox, `display: inline-flex`. Tout se passe comme si on mettait `display: inline-block` sur chacun des items pour leur permettre d’être les uns à côté des autres, mais contrairement à `inline-block`, nous n’avons pas besoin de le définir sur chaque item et il ne nous reste pas d’espace à éliminer entre les items.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/YXyXbQ/">
  Figure 2</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 3 - L’efficacité de space-between</h3>

<figure role="group"><img src="/images/super-smash-bros-4-compressor.jpeg" width="512" height="373" alt="partie du bas"/></figure>

Et maintenant, la partie du bas. Ce sont juste deux boîtes superposées. Comme avec les enveloppes de la partie du haut, nous n’avons rien de particulier à faire avec ces items. À nouveau, je donnerai une hauteur déterminée pour la démonstration, mais on pourrait tout aussi bien laisser cette section prendre les dimensions de son contenu.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/doYoxW/">
  Figure 3</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 4</h3>

<figure role="group"><img src="/images/super-smash-bros-5-compressor.jpeg" width="526" height="342" alt=""/></figure>

La partie du haut de la section inférieure est semblable au header. Les items sont fixés de chaque côté de l’axe horizontal. Est-ce que vous trouvez qu’on se répète&nbsp;? J’espère bien que oui&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/bdVVbm/">
  Figure 4</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 5</h3>

<figure role="group"><img src="/images/super-smash-bros-6-compressor.jpeg" width="506" height="442" alt=""/></figure>

La partie du bas de la section inférieure comporte des items fixés de chaque côté et un item au milieu. Là encore, `space-between` est l’outil qu’il nous faut : un troisième item à l’intérieur d’un contexte flex est positionné au milieu. Trop fort&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/waKKBY/">
  Figure 5</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 6 - Tous ensemble maintenant !</h3>
Et voici tous les éléments réunis et stylés.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/GJppMX/">
  le résultat final</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

Et voici les mêmes, avec l’image de background, un SVG que j’ai créé pour avoir des couleurs qui se mélangent dynamiquement. Restez branché pour en savoir plus à ce sujet&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/MwabGx/">
  le résultat vraiment final</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

Guide de Flexbox : space-between, l'oublié


La possibilité de faire disparaître et apparaître des éléments sur une page fait partie intégrante du design responsif. Selon ce que vous voulez obtenir, il existe plusieurs façons de masquer un élément avec CSS. Dans cet article, je vais explorer les propriétés à notre disposition et les avantages et désavantages de chacune.

<h2>Les Propriétés</h2>

<h3>Display</h3>

[Comme je l’ai déjà mentionné](/articles/controler-le-modele-de-boite/), à l’intérieur d’un document HTML chaque élément est une boîte rectangulaire. Cacher un élément HTML à l’aide de la propriété `display` signifie que cette boîte rectangulaire n’est pas générée du tout.

Bien que l’élément soit toujours dans notre markup (comme vous pouvez le voir en inspectant la page), il n’existe pour ainsi dire pas dans la page. Aucune partie du modèle de boîte —&nbsp;la surface du contenu, celles du padding, de la bordure ou de la marge&nbsp;— n’est générée ou n’apparaît sur la page.

Tout contenu situé à l’intérieur de l’élément ou de ses enfants est fonctionnellement inexistant. S’il s’agit d’un élément actionnable, par exemple un bouton ou une ancre, on ne peut pas l’activer. L’élément, et tout ce qu’il contient, est également ignoré par les lecteurs d’écran.

```
.foo {
  display: none;
}
```

<figure role="group"><img src="/images/display-position-compressor.png" width="780" height="354" alt="L’élément foo disparaît et les autres éléments prennent sa place"/></figure>

<h3>Visibility</h3>

Avec la propriété `visibility`, la “boîte rectangulaire” est générée, mais elle n’est pas rendue à l’écran. Du fait que la boîte est générée, les quatre surfaces constituant la boîte affectent toujours la disposition du reste de la page, cependant sans que les quatre surfaces soient visibles à l’écran.

Mis à part le fait que la boîte soit générée, l’utilisation de la propriété visibility pour cacher un élément est semblable à la propriété display.

```
.foo {
  visibility: hidden;
}
```

<figure role="group"><img src="/images/visibility-opacity-compressor.png" width="780" height="350" alt="L’élément foo disparaît mais les autres éléments restent à leur place"/></figure>

<h3>Opacity</h3>

La propriété opacity n’a d’impact que sur la façon dont un élément apparaît visuellement —&nbsp;plus exactement sur sa transparence.

Lorsque l’opacité d’un élément est à sa valeur minimum, bien qu’il soit invisible à l’écran ses fonctionnalités demeurent, comme s’il avait une couleur solide. Par conséquent, l’élément occupe toujours son espace, il est lu par les lecteurs d’écran et on peut interagir avec lui.

```
.foo {
  opacity: 0;
}
```

<figure role="group"><img src="/images/visibility-opacity-compressor.png" width="780" height="350" alt="L’élément foo disparaît, les autres éléments restent à leur place et sont actionnables"/></figure>

<h3>Position</h3>

La propriété `position` n’est pas faite a priori pour masquer ou afficher les éléments d’une page. On l’a utilisée à cet effet parce qu’on avait besoin de cacher un élément et de le soustraire de la disposition de la page _tout en conservant la possibilité qu’il soit lu par les lecteurs d’écran et qu’il soit actionnable si besoin_.

Il y a deux manières de combiner la propriété position avec d’autres propriétés pour parvenir à cet effet.

Combiné avec les propriétés `top` et `left`, l’élément est déplacé en dehors du viewport et il est donc hors de vue.

```
.foo {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
```

Une autre façon de faire, imaginée par [Jeff Burnz](http://adaptivethemes.com/using-css-clip-as-an-accessible-method-of-hiding-content), consiste à utiliser la propriété `clip` pour redimensionner la boîte rectangulaire à une taille insignifiante, ce qui la l’escamote fonctionnellement.

```
.foo {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* syntaxe pour IE6 & IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
```

Avec les deux méthodes, le résultat est identique&nbsp;:

<figure role="group"><img src="/images/display-position-compressor.png" width="780" height="354" alt="L’élément foo disparaît et les autres éléments prennent sa place"/></figure>

Bien que ces solutions relèvent un peu du bidouillage, elles sont actuellement la meilleure manière de faire disparaître un élément de l’écran tout en conservant ses fonctions.

<h3>En résumé</h3>

<table class="specificTable">  
  <thead><tr><th>&nbsp;</th><th>display</th><th>visibility</th><th>opacity</th><th>position</th></tr></thead><tbody><tr><td>Le modèle de boîte est-il généré ?</td><td><span class="checkmark red">✗</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark green">✓</span></td></tr><tr><td>La boîte affecte-t-elle le layout ?</td><td><span class="checkmark red">✗</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark red">✗</span></td></tr><tr><td>La boîte est-elle visible ?</td><td><span class="checkmark red">✗</span></td><td><span class="checkmark red">✗</span></td><td><span class="checkmark red">✗</span></td><td><span class="checkmark red">✗</span></td></tr><tr><td>L’élément est-il lu par les lecteurs d’écran ?</td><td><span class="checkmark red">✗</span></td><td><span class="checkmark red">✗</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark green">✓</span></td></tr><tr><td>L’élément est-il actionnable (cliquable, focusable) ?</td><td><span class="checkmark red">✗</span></td><td><span class="checkmark red">✗</span></td><td><span class="checkmark green">✓</span></td><td><span class="checkmark green">✓</span></td></tr></tbody></table>

👉🏿 _Note complémentaire du traducteur (d'après un [article de David Walsh](https://davidwalsh.name/html5-hidden))_

HTML5 a ajouté quelques attributs intéressants comme placeholder, download et autofocus. Un autre attribut nouveau est `hidden`. Appliqué à un élément, il se comporte comme CSS `display: none;` l'élément disparaît et son espace avec, il sort du flux. Il suffit pour cela d'écrire&nbsp;:

```
<div hidden>
	Tu ne me vois plus !
</div>
```

Si un navigateur ne supporte pas cet attribut, on peut le styler via:

```
*[hidden] { display: none; }
```

Pourquoi utiliser l'attribut `hidden` ? Il est plus sémantiquement correct et devrait aider plus efficacement les lecteurs d'écran.

Pour faire réapparaître l'élément, il suffit d'utiliser la propriété `display` avec n'importe laquelle des valeurs acceptées, sauf `none`.


Cacher des éléments avec CSS

Alignement en CSS, un guide complet


Cet article s'adresse à ceux qui ont découvert les trucs cools qu'on peut faire avec les pseudo-éléments et veulent mieux connaître cette technique. La spécification CSS contient [d'autres pseudo-éléments](http://reference.sitepoint.com/css/pseudoelements), mais je me concentrerai ici sur `:before` et `:after` et pour la simplicité je parlerai de "pseudo-éléments" en me référant spécifiquement à ces deux-là. (<span aria-hidden="true" data-icon="&#9758;"></span>&nbsp;_NdT&nbsp;: pour plus d'infos sur les pseudo-éléments et pseudo-classes, vous pouvez consulter [cet article](/articles/combinateurs-et-pseudo-classes-css/) ici-même_).

## Que fait un pseudo-élément ?

Il fait exactement ce que son nom implique&nbsp;: il crée un élément factice et l'insère avant ou après le contenu de l'élément que vous avez ciblé.

Un pseudo-élément ne change rien dans le document lui-même, en fait il insère des éléments "fantômes" qui sont visibles par l'utilisateur et auxquels on peut appliquer un style CSS.

## Syntaxe basique

Les pseudo-éléments `:before` et `:after` sont très simples à coder, en voici un exemple&nbsp;:

    #exemple:before {
       content: "#";
    }

    #exemple:after {
       content: ".";
    }

Il y a deux choses à noter à propos de cet exemple. D'abord, nous ciblons ici le même élément en utilisant `#exemple:before` et `#exemple:after`. À proprement parler, ce sont les pseudo-éléments dans ce code.

Ensuite, sans la propriété `content` , les pseudo-éléments ne servent à rien. Si le sélecteur pseudo-élément est nécessaire pour cibler l'élément, il n'est pas pour autant suffisant, vous n'insérerez rien tant que vous n'aurez pas ajouté la propriété `content`.

Dans l'exemple que nous venons de voir, on insère un symbole # avant le contenu de l'élément ayant l'id `exemple` et un point après.

## À propos de la syntaxe

Vous pourriez tout aussi bien laisser la propriété `content` vide et traiter le pseudo-élément comme une boîte vide&nbsp;:

    #example:before {
       content: "";
       display: block;
       width: 100px;
       height: 100px;
    }

Toutefois, vous ne pouvez pas supprimer la propriété `content`, le pseudo-élément ne fonctionnerait pas. A minima, la propriété `content` doit contenir des "" vides.

Vous avez peut-être remarqué qu'on peut aussi utiliser la syntaxe `::before` et `::after`. Pour faire bref, il n'y a pas de différence entre les deux syntaxes, c'est juste une façon de différencier les pseudo-éléments et les pseudo-classes en CSS3 mais vous pouvez oublier cette syntaxe.

## Caractéristiques du contenu inséré

Comme déjà mentionné, le contenu inséré n'est pas visible dans les sources de la page (si vous cherchez sur DevTools), il n'est visible que dans le CSS.

De plus, l'élément inséré est par défaut [un élément inline](/articles/la-difference-entre-block-et-inline/). Pour lui donner une hauteur, un padding, des marges, etc, vous devrez le définir explicitement comme un élément block.

Cela nous amène à une brève description de la façon d'appliquer un style à nos pseudo-éléments. Regardons ce graphique tiré de mon éditeur de texte&nbsp;:

<figure role="group"><img src="/images/styles-pseudo-elements-compressor.jpeg" width="500" height="324" alt="display, width, height sont les styles qui affectent le pseudo élément"/></figure>

Dans cet exemple, j'ai surligné les styles qui seront appliqués aux éléments insérés avant et après le contenu de l'élément cible. Les pseudo-éléments ont ceci d'unique qu'on insère le contenu _et_ le style dans le même bloc de déclaration.

Notez également que les règles d'héritage CSS s'appliquent aux éléments insérés. Si par exemple vous avez défini une police de caractères `Helvetica, Arial, sans-serif` pour l'élément `body` de votre document, le pseudo-élément héritera de cette police comme n'importe quel autre élément.

De la même façon, les pseudo-éléments n'héritent pas de styles qui ne sont pas naturellement hérités de leurs parents, tels que les paddings et les marges.

## Avant ou après quoi ?

Notre intuition nous dit que le contenu sera inséré avant et après l'élément cible. Mais comme je l'ai déjà suggéré, ce n'est pas le cas.

Le contenu injecté sera un enfant de l'élément cible, mais il sera placé "avant" ou "après" tout autre contenu dans cet élément.

Pour mieux comprendre, prenons un exemple. Tout d'abord le HTML&nbsp;:

    <p class="box">Other content.</p>

Et maintenant le CSS qui insère le pseudo-élément&nbsp;:

    p.box {
       width: 300px;
       border: solid 1px white;
       padding: 20px;
    }

    p.box:before {
       content: "#";
       border: solid 1px white;
       padding: 2px;
       margin: 0 10px 0 0;
    }

Dans le HTML, tout ce qu'on voit est un paragraphe avec une classe `box`, et les mots "Other content" à l'intérieur (c'est ce que vous verriez si vous inspectiez la source). Dans le CSS, le paragraphe a une largeur, un padding et une bordure visible.

Puis nous avons le pseudo-élément. Il insère un symbole # "avant" le contenu du paragraphe. Le CSS qui suit lui donne une bordure, un padding, des marges.

Et voici le résultat dans notre navigateur&nbsp;:

<figure role="group"><img src="/images/autre-contenu-compressor.jpeg" width="500" height="175" alt="symbole inséré avant le paragraphe, le symbole comporte une bordure, un padding et des marges"/></figure>

La boîte extérieure est notre paragraphe. La bordure qui entoure le symbole # représente les limites de notre pseudo-élément. Autrement dit, celui-ci n'est pas inséré "avant" le paragraphe, il est placé avant "Other content" à l'intérieur du paragraphe.

## Insérer du contenu non-textuel

Nous avons vu que nous pouvions donner à la propriété `content` une valeur textuelle - y compris éventuellement une chaîne de caractères vide (""). Mais nous avons encore deux options possibles.

Tout d'abord, nous pouvons inclure une URL qui pointe vers une image, exactement comme nous le ferions pour inclure une image de background dans le CSS&nbsp;:

    p:before {
       content: url(image.jpg);
    }

Remarquez qu'il n'y a pas de guillemets. Si c'était le cas, cela deviendrait une chaîne de caractères et on insèrerait le texte "url(image.jpg)" comme contenu au lieu d'insérer l'image elle-même.

Bien entendu, nous pouvons inclure une [Data URI](https://www.alsacreations.com/article/lire/1439-data-uri-schema.html) à la place de la référence de l'image, tout comme pour un background CSS.

Nous avons également la possibilité d'inclure une fonction sous la forme `attr(X)`. Selon [les termes de la spécification](http://www.w3.org/TR/CSS2/generate.html#propdef-content), "cette fonction retourne sous forme de chaîne de caractères la valeur de l'attribut X pour le sujet du sélecteur".

Par exemple :

    a:after {
       content: attr(href);
    }

Que fait cette fonction `attr()` ? Elle prend la valeur de l'attribut spécifié (href) et la retourne sous forme de texte, qui sera inséré par le pseudo-élément.

Le code ci-dessus aura pour effet d'afficher sur la page la valeur de `href` de chaque élément `<a>` et de le placer immédiatement après chaque élément `<a>`. Un cas d'usage classique concerne la feuille de style "impression", puisque cela permet d'inscrire en clair l'URL après chaque lien sur les documents imprimés.

Nous pourrions aussi utiliser cette fonction pour aller chercher la valeur de l'attribut `title` d'un élément, ou même les valeurs des [microdonnées](http://fr.wikipedia.org/wiki/Microdonnée). Toutefois, s'il serait pratique d'aller chercher le `title` ou le texte `alt` d'une image pour l'afficher sur la page avec un pseudo-élément, ce n'est pas possible. Rappelez-vous que le pseudo-élément doit être un enfant de l'élément auquel il est appliqué. Les images, qui sont des [éléments vides](http://www.w3.org/TR/html-markup/syntax.html#syntax-elements) (void elements), n'ont pas l'éléments enfants, par conséquent cela ne marche pas. Même chose pour tous les éléments vides, tels que `<input>` (NdT&nbsp;: à part ces deux là, les autres ne sont pas très intéressants).

## Accessibilité

Les pseudo-éléments, on l'a vu, n'apparaissent pas dans le DOM, ils ne sont pas réels. De ce fait, les appareils ou logiciels d'assistance pour les personnes ayant des déficiences ne peuvent pas y accéder. Veillez à ne pas utiliser de pseudo-éléments pour générer un contenu indispensable à l'usabilité ou à l'accessibilité de vos pages.

**Ressources intéressantes sur :before et :after**

[A Single Div](http://a.singlediv.com/), des exemples d'illustrations réalisées à partir d'une simple div et de CSS utilisant `:before` et `:after`, très impressionnant&nbsp;!


Pseudo-éléments :before & :after


Box-sizing est une solution alternative au modèle de boîte standard que nous offre CSS. Pour bien comprendre la propriété box-sizing, il faut d'abord bien comprendre le modèle de boîte. En pratique, ils fonctionnent de la même manière mais il y a une différence essentielle —&nbsp;que nous allons approfondir tout à l'heure. Pour l'instant, revoyons notre bon vieux modèle de boîte.

## Le modèle de boîte

Ce modèle découle du fait que les éléments HTML sont pour la plupart des boîtes et que CSS utilise ces boîtes pour les agencer dans votre mise en page. Un élément HTML typique comporte une largeur et une hauteur qui définissent la surface de son contenu, et cette surface est elle-même enveloppée dans des padding, des bordures et des marges, comme on le voir sur cette illustration&nbsp;:

<figure role="group"><img src="/images/boxmodel-1-compressor.png" width="600" height="300" alt="Le modèle de boîte classique"/></figure>

Notez la relation entre ces propriétés&nbsp;: nous avons d'abord le contenu (Content), défini par sa largeur et sa hauteur, que cette dernière soit automatique ou spécifiée, elle est toujours là. Puis il y a le padding, suivi de la bordure, suivi de la marge. Voici une définition plus précise de chacun de ces éléments&nbsp;:

**Content** : le contenu, c'est à dire le texte ou l'image  
**Padding** : crée un espace autour du contenu. Cet espace a le même background que la boîte Content.  
**Border** : une bordure qui entoure le contenu et son padding. Elle peut avoir elle-même son propre background, son épaisseur, sa texture, ses motifs.  
**Margin** : la marge crée un espace autour des éléments précédents, cet espace est toujours transparent et n'est jamais affecté par les background de ces éléments.

Quand nous définissons les dimensions d'un élément, nous ne définissons en fait que les largeur et hauteur du contenu. Pour calculer la largeur et la hauteur totales de cet élément, nous devons aussi inclure le padding, la bordure et la marge.

Voici un exemple :

    //Exemple de dimension d'un élément

    .box {
       width: 100px;
       padding: 10px;
       border: 5px solid black;
       margin: 10px;
    }

La largeur du contenu est de 100px, toutefois l'élément dans son ensemble a une largeur de 150px car nous devons intégrer les dimensions des autres composantes. Attention, il faut compter deux fois la largeur du padding, de la bordure et de la marge puisqu'elles sont de chaque côté de la boîte du contenu.

Dans l'exemple précédent, nous aurions donc&nbsp;:  
100px (largeur du contenu) + 10px (padding gauche) + 10px (padding droite) + 5px (bordure gauche) + 5px (bordure droite) + 10px (marge gauche) + 10px (marge droite) = 150px (largeur totale de l'élément).

## En quoi Box-Sizing est-il différent ?

CSS Box-sizing suit le modèle de boîte dans la mesure où il intègre la surface du contenu d'abord, puis le padding, puis la bordure, MAIS IL N'INCLUT PAS LES MARGES.

Cependant, nous devons définir la largeur ou la hauteur de notre élément, qui est maintenant la largeur ou la hauteur de l'élément **dans son ensemble**. Donc au lieu d'ajouter le padding et la bordure, vous devez les soustraire pour obtenir les dimensions du contenu&nbsp;:

Largeur = la largeur totale de l'élément
et Largeur - padding - bordure = largeur du contenu

Dans l'exemple précédent, nous aurions :
100px (largeur totale de l'élément) - 10px (padding gauche) - 10px (padding droite) - 5px (bordure gauche) - 5px (bordure droite) = 70px (largeur du contenu).

La logique est donc inversée, et pour mieux la comprendre voici les deux modèles mis côte à côte&nbsp;:

<figure role="group"><img src="/images/boxsizing-1-compressor.png" width="600" height="562" alt="comparaison de box model et box sizing"/></figure>

## Comment utiliser Box-Sizing

Pour faire fonctionner box-sizing, il nous faut écrire quelques lignes de code afin de &ldquo;l'activer&rdquo;. Ces lignes peuvent être appliquées à un élément en particulier ou à l'ensemble de votre document. Il faut garder à l'esprit les limitations des navigateurs et utiliser les préfixes constructeurs spécifiques, nous y reviendrons plus tard.

    //Déclaration initiale

    .box {
       box-sizing: border-box; /* Opera/IE 8+ */
    /* box-sizing est appliqué seulement à cette classe */
    }

    * {
     box-sizing: border-box;
    /* box-sizing est appliqué à tous les éléments */
    }

## Syntaxe

Syntaxe de base de box-sizing :

    {box-sizing: content-box|border-box|inherit;}

La syntaxe de base de box-sizing est très simple. Passons en revue les trois valeurs qu'elle peut prendre.

**Content-box** : c'est la valeur par défaut, elle spécifie que les largeur et hauteur définies s'appliquent aux largeur et hauteur du contenu seul, et que le padding, la bordure et les marges sont en dehors de ces dimensions.  
**Border-box** : les largeur et hauteur spécifiées sont celles de l'élément dans son ensemble, en conséquence les dimensions du padding ou des bordures viennent diminuer les dimensions du contenu.  
**Inherit** : comme pour toute valeur héritée, la valeur de box-sizing peut dépendre de celle de son élément parent.

NB : Pour compléter cet article, La Cascade a publié un article plus récent intitulé [Contrôler le modèle de boîte](/articles/controler-le-modele-de-boite/) par Ire Aderinokun, lecture conseillée&nbsp;!

## Support navigateurs

À ce jour, box-sizing est compatible avec tous les principaux navigateurs. Si vous voulez connaître tous les détails, vous pouvez consulter le site [Can I use](http://caniuse.com/css3-boxsizing) qui est toujours à jour.

Les navigateurs actuels sont compatibles avec box-sizing, mais les versions anciennes ne le sont pas, c'est pourquoi, si vous voulez cibler large, il est important d'utiliser les préfixes&nbsp;! (NdT: les choses évoluent vite, pour être sûr d'utiliser les bons préfixes constructeurs, le mieux est d'utiliser Autoprefixer, pour tout savoir sur cet outil super pratique [voir l'article](https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass/6612156-utilisez-autoprefixer-pour-creer-du-code-adapte-a-tous-les-navigateurs) dans openclassroom).

Voici comment écrire le code :

    //Snippet pour les préfixes de box-sizing

    .box {
       box-sizing: border-box; /* Opera/IE 8+ */
       -moz-box-sizing: border-box; /* Firefox, autres Gecko */
       -webkit-box-sizing: border-box; /* Safari/Chrome, autres WebKit */
    }

## Min/Max

Si les préfixes max- et min- ne vous sont pas encore familiers, ils doivent le devenir. Pour en savoir plus vous pouvez cliquer [ici](http://www.w3schools.com/cssref/pr_dim_min-width.asp). Comme vous l'avez deviné, min- et max- peuvent être appliqués à la hauteur et à la largeur d'un élément pour définir la taille minimum et maximum de cet élément. Et box-sizing fonctionne avec ces propriétés aussi.

## Alors, pourquoi l'utiliser&nbsp;?

Si vous avez utilisé le modèle de boîte et si vous y êtes habitués, ce nouveau modèle peut vous paraître étrange. Cependant, si vous ne comprenez pas ou si vous n'aimez pas le modèle de boîte, box-sizing est pour vous.

Et il y a encore un grand avantage à l'utiliser&nbsp;: box-sizing est idéal pour les mises en page fluides.

Prenons un exemple simple. Notre mise en page comprend deux éléments div qui devraient avoir pour dimension 50%. Parfait, mais il nous faut encore soustraire 10% de padding pour séparer les deux. Nous faisons donc le calcul et nous changeons les chiffres. Avec box-sizing rien de tout cela&nbsp;! Nous définissons notre largeur et notre padding et le tour est joué.

En conclusion et pour le dire simplement&nbsp;: les mises en pages ne sont pas toujours simples et s'avèrent souvent des casse-tête. Box-sizing vous fera gagner du temps et vous aidera à coder plus efficacement.


Box-sizing pour les nuls

Flexbox, guide complet


<h2>Comment une page web est-elle construite ?</h2>

Le cheminement d'un navigateur partant d'un document source HTML pour finalement afficher une page stylée et interactive s'appelle le chemin critique du rendu (<i>critical rendering path</i>). Ce processus peut comporter de nombreuses étapes, comme je le montre dans [mon article sur le sujet](https://bitsofco.de/understanding-the-critical-rendering-path/), mais celles-ci peuvent être regroupées en deux grandes étapes. La première consiste en **l'analyse du document** par le navigateur pour déterminer ce qui sera finalement rendu sur la page, et la seconde est **le rendu** par le navigateur.

<figure role="group"><img src="/images/HTML-to-Render-Tree-to-Final-compressor.png" width="828" height="442" alt="la décomposition du processus en deux étapes"/></figure>

La première étape permet de construire l'arbre de rendu (<i>render tree</i>), une représentation sous forme d'arbre des **éléments HTML** qui seront rendus sur la page ainsi que leurs styles associés. Pour cela, le navigateur a besoin de deux choses&nbsp;:

1. le CSSOM, une représentation des styles associés aux éléments
2. le DOM, la représentation des éléments

<h2>Comment le DOM est créé, et à quoi il ressemble</h2>

Le DOM est une représentation du document HTML source. Comme nous le verrons plus loin, il comporte quelques différences, mais il s’agit pour l'essentiel d’une conversion de la structure et du contenu du document HTML en un modèle objet utilisable par divers programmes.

La structure d'objet du DOM est représentée par ce qu'on appelle une "arborescence de noeuds" (<i>node tree</i>). On l'appelle ainsi parce qu'il peut être considéré comme un arbre qui se ramifie en plusieurs branches enfants, chacune pouvant avoir des feuilles. Le premier parent est l'élément racine `<html>`, les "branches" enfants sont les **éléments** imbriqués et les "feuilles" sont le **contenu** des éléments.

Prenons par exemple ce document HTML&nbsp;:

```
<!doctype html>
<html lang="en">
 <head>
   <title>My first web page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>How are you?</p>
  </body>
</html>
```

Ce document peut être représenté comme une arborescence de noeuds&nbsp;:

<figure role="group"><img src="/images/node-tree-example-compressor.png" width="866" height="539" alt=""/></figure>
 
<h2>Ce que n'est pas le DOM</h2>

De l'exemple ci-dessus on pourrait conclure que le DOM est un mapping exact du document source HTML ou de ce que vous voyez dans votre DevTools. Cependant, il y a des différences. Pour bien comprendre ce qu'est le DOM, nous devons d'abord comprendre ce qu'il n'est **pas**.

<h3>Le DOM n'est pas votre HTML source</h3>

Bien que créé à partir du document source HTML, le DOM n'en est pas toujours l'exact reflet. Il peut en différer dans deux cas&nbsp;:

<h4>1. Lorsque le HTML n'est pas valide</h4>
    
Le DOM est une interface pour les documents HTML valides. Pendant le processus de création du DOM, le navigateur peut être amené à corriger des informations invalides.
    
Prenons ce document HTML par exemple :
    
```
<!doctype html>
<html>
Hello, world!
</html>
```

Il manque les éléments `<head>` et `<body>` à ce document, alors qu'ils sont requis dans un HTML valide. Si nous inspectons l'arborescence créée, nous pouvons constater que l'erreur a été corrigée&nbsp;:

<figure role="group"><img src="/images/corrected-html-compressor.png" width="866" height="285" alt=""/></figure>
    
<h4>2. Lorsque le DOM est modifié par JavaScript</h4>

En plus d'être une interface permettant de visualiser le contenu d'un document HTML, le DOM peut être modifié, ce qui en fait une ressource vivante.

Nous pouvons par exemple créer des noeuds supplémentaires via JavaScript.

```
var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
```

Le DOM sera mis à jour, mais bien entendu notre document source HTML restera inchangé.

<h3>Le DOM n'est pas ce que vous voyez dans le navigateur</h3>

Ce que vous voyez dans le viewport de votre navigateur c'est l'arbre de rendu qui, nous l'avons vu, est un mélange de DOM et de CSSOM. Ce qui distingue le DOM de l'arbre de rendu c'est que ce dernier ne comprend que ce qui sera "peint" à l'écran. De ce fait, il exclut les éléments visuellement cachés, par exemple ceux stylés `display: none`.

```
<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>
```

Le DOM comprendra l'élément`<p>`:

<figure role="group"><img src="/images/dom-with-p-compressor.png" width="866" height="418" alt=""/></figure>

Cependant l'arbre de rendu —&nbsp;et donc ce qui est visible dans le viewport&nbsp;— ne comprendra pas cet élément.

<figure role="group"><img src="/images/rendertree-without-p-compressor.png" width="866" height="244" alt=""/></figure>

<h3>Le DOM n'est pas ce que vous voyez dans DevTools</h3>

Cette différence ne tient pas à grand chose car l'inspecteur d'éléments DevTools offre la meilleure approximation du DOM disponible dans le navigateur. Toutefois DevTools inclut des informations qui ne sont pas dans le DOM.

Le meilleur exemple en est [les pseudo-éléments CSS](/articles/les-pseudo-elements-css-before-et-after/) créées via les sélecteurs `::before` et `::after`. Ils font partie du CSSOM et de l'arbre de rendu mais techniquement ils n'appartiennent pas au DOM puisque celui-ci est construit à partir du seul document source HTML, qui ne comprend pas les styles appliqués aux éléments.

Bien que ne faisant pas partie du DOM, les pseudo-éléments apparaissent dans notre inspecteur DevTools&nbsp;:

<figure role="group"><img src="/images/Pseudo-element-in-devtools-inspector.png" width="1522" height="580" alt=""/></figure>
    
C'est la raison pour laquelle les pseudo-éléments ne peuvent pas être ciblés par JavaScript, parce qu'ils ne font pas partie du DOM&nbsp;!
    
<h2>On récapitule</h2>

Le DOM est une interface vers un document HTML. Il est utilisé par les navigateurs dans une première étape pour déterminer ce qui peut être rendu à l'écran, et par JavaScript pour modifier le contenu, la structure ou le style de la page.

Bien que similaire à d'autres formes de documents source HTML, il en diffère en plusieurs points&nbsp;:

- son HTML est toujours valide
- c'est un modèle vivant qui peut être modifié par JavaScript
- il ne comprend pas de pseudo-éléments (p.ex. `::after`)
- il ne comprend pas d'élémens cachés (p.ex. via `display: none`)


Le DOM, c'est quoi exactement ?


J’ai [déjà montré](http://thenewcode.com/495/Make-A-CSS3-Animated-Image-Slider) comment réaliser un carrousel d’images de largeur fixe en CSS. De plus en plus, les développeurs web ont besoin de solutions qui non seulement se redimensionnent selon le viewport, mais aussi offrent de bonnes performances sur les mobiles. La solution responsive détaillée ici est particulièrement adaptée à ces objectifs, car elle se passe totalement de JavaScript et repose uniquement sur CSS.

L’idée est assez proche de mon tutoriel précédent&nbsp;: une “bande d’images” contenant toutes les photos de notre carrousel se déplace à l’intérieur d’une “fenêtre” dont le rôle est d’empêcher qu’on ne voie les éléments qui sont en dehors. Pour cet exemple, nous aurons besoin de quatre images, mais en pratique vous pouvez réaliser une bande contenant autant d’images que vous le souhaitez. La seule condition est que **toutes les images doivent avoir la même taille**.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/ehKpi">
  Responsive CSS Image Slider</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2>Créer un cadre responsif avec une bande d’images</h2>

Tout d’abord nous avons besoin de rendre l’élément carrousel responsif. Pour cela, nous commençons avec le HTML suivant&nbsp;:

    //HTML
    <div id="slider">
      <figure>
        <img src="austin-fireworks.jpg" alt>
        <img src="taj-mahal.jpg" alt>
        <img src="ibiza.jpg" alt>
        <img src="ankor-wat.jpg" alt>
        <img src="austin-fireworks.jpg" alt>
      </figure>
    </div>

(Je laisse l’[attribut `alt`](/articles/articles/bien-utiliser-lattribut-alt/) vide pour la clarté, il faudra le remplir pour l’[accessibilité](/tags/accessibilite/) et pour le SEO). Remarquez que la même image est placée au début et à la fin de la bande, pour permettre à l’animation de faire une boucle en douceur.

Nous donnons à la fenêtre une largeur de 80% pour la rendre responsive, et une largeur maximum (`max-width`) qui correspond à la largeur naturelle d’une image individuelle (1000px dans notre exemple), car nous ne souhaitons pas qu’une image soit agrandie :

    //CSS
    div#slider { width: 80%; max-width: 1000px; }

<figure><img src="/images/image-strip-compressor.jpeg" width="1444" height="301" alt=""/><figcaption>La bande de 5 images, avec à gauche la “fenêtre” contenant une image. La bande fait 5 fois (500%) la largeur de la fenêtre.</figcaption></figure>

Dans notre CSS, la largeur de l’élément `figure` est un pourcentage, qui est un multiple de la `div` qui le contient. Autrement dit, si la bande d’images contient cinq images, et que notre `div` n’en montre qu’une, la `figure` est 5x plus large, c’est à dire 500% la largeur de la `div` container&nbsp;:

    //CSS
    div#slider figure {
      position: relative;
      width: 500%;
      margin: 0;
      padding: 0;
      font-size: 0;
      text-align: left;
    }

La `font-size: 0` aspire l’air autout de l’élément `figure` en retirant tout espace entre les images et autour. `position: relative` permet à la `figure` d’être déplacée facilement pendant l’animation. `text-align: left` est là en raison d’un bug de Safari&nbsp;5 pour Windows.

Nous devons répartir les images de manière régulière à l’intérieur de la bande. Le calcul est très simple&nbsp;: Si nous considérons que l’élément `figure` fait 100% de large, chaque image doit prendre 1/5 de l’espace horizontal&nbsp;:

100% / 5 = 20%

Ce qui nous conduit à la déclaration CSS suivante&nbsp;:

    //CSS
    div#slider figure img { width: 20%; height: auto; float: left; }

(Ici aussi, `float: left` sert à corriger un bug de Win Safari&nbsp;5).

Enfin, nous cachons ce qui dépasse (_overflow_) de la `div`&nbsp;:

    //CSS
    div#slider { width: 80%; max-width: 1000px; overflow: hidden }

<h2>Animer la bande</h2>

Il nous faut maintenant déplacer la bande de droite à gauche. Si on considère que la `div` container fait 100% de large, chaque mouvement de la bande vers la gauche sera mesuré en incréments de cette distance&nbsp;:

    //CSS
    @keyframes slidy {
      0% { left: 0%; }
      20% { left: 0%; }
      25% { left: -100%; }
      45% { left: -100%; }
      50% { left: -200%; }
      70% { left: -200%; }
      75% { left: -300%; }
      95% { left: -300%; }
      100% { left: -400%; }
    }

Chaque image du carrousel sera affichée dans la `div` pour 20% de la durée totale de l’animation, le temps de déplacement étant de 5%.

Il ne nous reste plus qu’à appeler notre animation pour que les choses commencent (le code est indiqué ici sans préfixes constructeurs, pour la simplicité, mais il ne faudra pas les oublier, vous pouvez utiliser Autoprefixer pour cela).

    //CSS
    div#slider figure {
      position: relative;
      width: 500%;
      margin: 0;
      padding: 0;
      font-size: 0;
      left: 0;
      text-align: left;
      animation: 30s slidy infinite;
    }

Comme vous le voyez, réaliser un _responsive carousel_ est à maints égards plus facile qu’un carrousel fixe&nbsp;!

**Note**&nbsp;: Si vous voulez une solution plus facile et plus rapide, [CSSslidy](http://thenewcode.com/871/CSS-Slidy-20-Captions--more) est un petit JavaScript qui auto-génère des keyframes d’animation CSS3 pour n’importe quel ensemble d’images.

Les photos sont utilisées avec la permission de l’excellent [Trey Radcliff](http://www.stuckincustoms.com/).

Vous pouvez retrouver le code de cet article sur Codepen&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/dudleystorey/pen/ehKpi">
  Responsive CSS Image Slider</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>


Un carrousel responsif en pur CSS

JSON pour les débutants

CSS Grid Layout, guide complet

CSS Flexbox et la dimension des boîtes


Le centrage en CSS est souvent un casse-tête. _Pourquoi faut-il que ce soit si difficile ?_ En fait, la difficulté ne vient pas du centrage lui-même mais de la multiplicité des techniques disponibles pour centrer en CSS et qui dépendent chacune de la situation. La vraie difficulté est donc de savoir quelle technique utiliser dans une situation donnée.

Nous allons lister toutes ces situations et en principe vous serez équipé pour la route.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Chris Coyier s'intéresse ici au **centrage en général**, pour une introduction complète au **centrage d'une div**, consultez l'article_ [Centrer un bloc Div, guide complet](/articles/centrer-une-div-guide-complet), _de Steve Pear_.

Si je veux centrer...

## Centrer horizontalement

### Éléments inline ou inline-\* (p.ex. texte ou lien)?

Vous pouvez centrer horizontalement des [éléments inline](/articles/la-difference-entre-block-et-inline/) à l'intérieur d'un élément parent de niveau bloc avec cette ligne simple&nbsp;:

    //CSS
    .center-children {
      text-align: center;
    }

Voici ce que ça donne sur Code Pen (_comme toujours, vous pouvez cliquer sur HTML et CSS pour voir le code, sur Result pour voir le résultat, et sur Edit si vous voulez voir l'original sur Code Pen et jouer avec_)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_HulzB" src="//codepen.io/chriscoyier/embed/HulzB?height=300&amp;theme-id=light&amp;slug-hash=HulzB&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/HulzB/">
  Centering Inline Elements</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ça fonctionnera très bien avec inline, inline-block, inline-table, inline-flex, etc.

### Éléments block ?

Vous pouvez centrer un élément [de niveau bloc](/articles/la-difference-entre-block-et-inline/) en lui donnant une marge gauche et droite automatique, ce qui se traduit par&nbsp;:

    //CSS
    .center-me {
      margin: 0 auto;
    }

NB : Il va de soi que l'élément en question a une largeur déterminée, sinon il prendrait toute la largeur de l'élément parent et n'aurait pas besoin d'être centré.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eszon" src="//codepen.io/chriscoyier/embed/eszon?height=300&amp;theme-id=light&amp;slug-hash=eszon&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="250" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/eszon/">
  Centering Single Block Level Element</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ça marchera quelle que soit la largeur de l'élement bloc que vous voulez centrer ou celle de son élément parent.

### Y a-t-il plus d'un élément block ?

Si vous avez deux éléments blocs, ou plus, à centrer dans une rangée, une bonne solution consistera souvent à changer le type de `display`. Voici deux exemples, le premier utilise `display: inline-block`, le second utilise [Flexbox](/articles/flexbox-guide-complet/)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ebing" src="//codepen.io/chriscoyier/embed/ebing?height=300&amp;theme-id=light&amp;slug-hash=ebing&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="470" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ebing/">
  Centering Row of Blocks</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voilà pour les rangées. Et si vous avez plusieurs éléments blocks empilés les uns sur les autres, la technique de marge automatique fonctionne parfaitement&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_haCGt" src="//codepen.io/chriscoyier/embed/haCGt?height=300&amp;theme-id=light&amp;slug-hash=haCGt&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="380" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/haCGt/">
  Centering Blocks on Top of Each Other</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Centrer verticalement

Le centrage vertical est un peu plus délicat en CSS.

### Éléments inline ou inline-\* (p.ex. texte ou lien)?

#### Est-ce une ligne unique ?

Des éléments inline ou texte peuvent apparaître centrés verticalement parfois simplement parce qu'il y a un padding top et bottom égal&nbsp;:

    //CSS
    .link {
      padding-top: 30px;
      padding-bottom: 30px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ldcwq" src="//codepen.io/chriscoyier/embed/ldcwq?height=300&amp;theme-id=light&amp;slug-hash=ldcwq&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="240" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ldcwq/">
  Centering text (kinda) with Padding</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous ne pouvez pas utiliser le padding et que vous cherchez à centrer un texte qui doit rester sur une ligne unique, le truc est de donner à la propriété `line-height` la même valeur qu'à `height`.

    //CSS
    .center-text-trick {
      height: 100px;
      line-height: 100px;
      white-space: nowrap;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LxHmK" src="//codepen.io/chriscoyier/embed/LxHmK?height=300&amp;theme-id=light&amp;slug-hash=LxHmK&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="340" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/LxHmK/">
  Centering a line with line-height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### Ou des lignes multiples ?

Là aussi on peut obtenir le centrage avec des padding top et bottom égaux.

Si pour une raison quelconque vous ne pouvez pas utiliser cette technique, peut-être l'élément dans lequel est situé le texte est-il une cellule de tableau, ou bien on peut forcer cet élément à se comporter comme s'il était une cellule. La propriété `vertical-align` gère cette situation, puisqu'elle sert habituellement à aligner des contenus situés sur une rangée.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ekoFx" src="//codepen.io/chriscoyier/embed/ekoFx?height=300&amp;theme-id=light&amp;slug-hash=ekoFx&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ekoFx/">
  Centering text (kinda) with Padding</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Une autre solution consiste à [utiliser flexbox](/articles/flexbox-guide-complet/). Centrer un flex-child dans un flex-parent est assez facile&nbsp;:

    //CSS
    .flex-center-vertically {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_uHygv" src="//codepen.io/chriscoyier/embed/uHygv?height=300&amp;theme-id=light&amp;slug-hash=uHygv&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="380" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/uHygv/">
  Vertical Center Multi Lines of Text with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

N'oubliez pas que cela fonctionne uniquement si le container parent a une hauteur fixe (en px, en % ou ce que vous voulez), c'est pourquoi le container ici a une hauteur.

Si vous ne pouvez utiliser aucune de ces techniques, il vous reste encore celle du &ldquo;ghost-element&rdquo;, l'élément fantôme, dans lequel un pseudo-élément prenant toute la hauteur est placé à l'intérieur du container et le texte est aligné verticalement sur lui&nbsp;:

    //CSS
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ofwgD" src="//codepen.io/chriscoyier/embed/ofwgD?height=300&amp;theme-id=light&amp;slug-hash=ofwgD&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ofwgD/">
  Ghost Centering Multi Line Text</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Élements block

#### Connaissez-vous la hauteur de l'élément ?

Il est assez courant de ne pas connaître la hauteur d'un élément, pour des tas de raisons&nbsp;: Si la largeur change, la réorganisation du texte peut changer la hauteur, une modification du style du texte peut également changer la hauteur, de même qu'un ajout de texte... Idem si le <span itemprop="about">ratio d'aspect</span> de votre image est fixe, tout redimensionnement entraînera une modification de sa hauteur.

Mais si vous connaissez sa hauteur, vous pouvez le centrer avec&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_HiydJ" src="//codepen.io/chriscoyier/embed/HiydJ?height=300&amp;theme-id=light&amp;slug-hash=HiydJ&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="440" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/HiydJ/">
  Center Block with Fixed Height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### La hauteur de l'élément est-elle inconnue ?

Si vous ne connaissez pas la hauteur de l'élément, vous pouvez le centrer en le remontant de la moitié de sa hauteur après l'avoir fait descendre de la moitié de la hauteur du contenant&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_lpema" src="//codepen.io/chriscoyier/embed/lpema?height=300&amp;theme-id=light&amp;slug-hash=lpema&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="440" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/lpema/">
  Center Block with Unknown Height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### Pouvez-vous utiliser Flexbox ?

Sans surprise, c'est bien plus facile avec [flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/).

    //CSS
    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_FqDyi" src="//codepen.io/chriscoyier/embed/FqDyi?height=300&amp;theme-id=light&amp;slug-hash=FqDyi&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/FqDyi/">
  Center Block with Unknown Height with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Horizontalement et verticalement

Vous pouvez combiner les techniques qui précèdent pour obtenir des éléments parfaitement centrés. Mais il me semble qu'elles peuvent se regrouper en trois catégories&nbsp;:

### Éléments de hauteur et largeur fixes

Vous pouvez utiliser des marges négatives égales à la moitié de cette hauteur et de cette largeur, un positionnement absolu à 50%/50% centrera l'élément&nbsp;:

    //CSS
    .parent {
      position: relative;
    }

    .child {
      width: 300px;
      height: 100px;
      padding: 20px;

      position: absolute;
      top: 50%;
      left: 50%;

      margin: -70px 0 0 -170px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_JGofm" src="//codepen.io/chriscoyier/embed/JGofm?height=300&amp;theme-id=light&amp;slug-hash=JGofm&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/JGofm/">
  Center Block with Fixed Height and Width</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Éléments de hauteur et largeur inconnues

Si vous ne connaissez pas la largeur ou la hauteur, vous pouvez utiliser la propriété `transform` et une translation négative de 50% dans les deux directions (elle sera basée sur les largeur et hauteur actuelles de l'élément)&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_lgFiq" src="//codepen.io/chriscoyier/embed/lgFiq?height=300&amp;theme-id=light&amp;slug-hash=lgFiq&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/lgFiq/">
  Center Block with Unknown Height and Width</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Pouvez-vous utiliser Flexbox ?

Pour centrer dans les deux directions avec flexbox, vous devez utiliser deux propriétés de centrage&nbsp;:

    //CSS
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_msItD" src="//codepen.io/chriscoyier/embed/msItD?height=300&amp;theme-id=light&amp;slug-hash=msItD&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/msItD/">
  Center Block with Unknown Height and Width with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Conclusion

Centrer horizontalement, centrer verticalement, vous pouvez tout <span itemprop="about">centrer sans problème</span> en CSS&nbsp;!


Centrer en CSS, un guide complet

CSS Flexbox et l'alignement, guide complet


La fonction `calc()` de CSS nous permet de calculer des valeurs de propriétés. Par exemple, au lieu de déclarer des valeurs fixes pour la largeur d'un élément, nous pouvons utiliser `calc()` pour spécifier que la largeur sera le résultat de l'addition de deux valeurs numériques (ou plus).

```
.foo {
    width: calc(100px + 50px);
}
```

<h2>Pourquoi calc( ) ?</h2>

Si vous avez déjà utilisé des préprocesseurs comme Sass, l'exemple qui précède vous est sans doute familier (<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : sinon, voir le [guide de style Sass](https://sass-guidelin.es/fr/)_).

```
.foo {
    width: 100px + 50px;
}

// Ou en utilisant des variables Sass
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}
```

Toutefois, la fonction `calc()` est une meilleure solution, pour deux raisons.

D'abord parce qu'elle permet de mélanger des unités différentes. En particulier, nous pouvons utiliser des pourcentages et des unités de viewport avec des unités absolues telles que les pixels. Par exemple nous pouvons créer une expression qui va soutraire une valeur en pixels à une valeur en pourcentage.

```
.foo {
    width: calc(100% - 50px);
}
```

Dans cet exemple, l'élément `foo` aura toujours une largeur de 50px inférieure à 100% de son élément parent.

Ensuite parce qu'avec `calc()` la valeur calculée est l'expression elle-même et non la valeur résultant de l'expression. Je m'explique&nbsp;: lorsqu'on construit des expressions mathématiques avec les préprocesseurs, la valeur passée au navigateur est la valeur _résultant de l'expression_&nbsp;:

```
// Valeur spécifiée en SCSS
.foo {
    width: 100px + 50px;
}

// Le SCSS est compilé en CSS
// La valeur passée au navigateur :
.foo {
    width: 150px;
}
```

Avec `calc()` la valeur parsée par le navigateur est _l'expression elle-même_&nbsp;:

```
// Valeur spécifiée en CSS
.foo {
    width: calc(100% - 50px);
}

// Valeur calculée dans le navigateur
.foo {
    width: calc(100% - 50px);
}
```

Du coup les valeurs sont dynamiques et s'adaptent aux changements de viewport. Nous pouvons avoir un élément avec une hauteur de viewport moins une valeur absolue, il s'adaptera aux changements du viewport.

<h3>Utiliser calc( )</h2>

On peut utiliser la fonction `calc()` pour additionner, soustraire, multiplier ou diviser des valeurs numériques de propriétés&nbsp;: les data types `<length>`, `<frequency>`, `<angle>`, `<time>`, `<number>`, ou `<integer>`.

Voici quelques exemples :

```
.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}
```

<h3>Imbriquer les calc( )</h3>

On peut même imbriquer les fonctions `calc()`. Les fonctions entre parenthèses seront traitées comme de simples expressions. Si nous prenons par exemple&nbsp;:

```
.foo {
    width: calc( 100% / calc(100px * 2) );
}
```

la valeur calculée de cette fonction sera :

```
.foo {
    width: calc( 100% / (100px * 2) );
}
```

<h3>Compatibilité</h3>

La fonction `calc()` est largement supportée. Pour voir la compatibilité à la date de lecture de cet article, vous pouvez consulter —&nbsp;comme toujours&nbsp;— [CanIUse](https://caniuse.com/#feat=calc).

Si un navigateur n'est pas compatible, toute l'expression propriété-valeur est ignorée. Par conséquent la solution de rechange (_fallback_) est simple à mettre en oeuvre, il suffit de fournir une valeur statique qui sera utilisée à la place.

```
.foo {
    width: 90%; /* Fallback pour les anciens navigateurs */
    width: calc(100% - 50px);
}
```

<h2>Quand utiliser calc( ) ?</h2>

On peut utiliser cette fonction dans diverses situations.

<h3>Exemple 1 - Centrer des éléments</h3>

`calc()` nous offre une solution de plus au problème classique du [centrage horizontal et vertical](/articles/centrer-en-css-un-guide-complet/) des éléments à l'intérieur d'un conteneur. Si nous connaissons les dimensions de l'élément enfant, une solution typique est d'utiliser des marges négatives pour déplacer l'élément de la moitié de sa hauteur et de sa largeur&nbsp;:

```
// Avec un élément .foo ayant pour hauteur et pour largeur 300px
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}
```

Avec la fonction `calc()` nous obtenons le même résultat en n'utilisant que les propriétés `top` et `left`.

```
.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}
```

De telles méthodes sont sans doute moins nécessaires maintenant que nous avons [Flexbox](/tags/flexbox/), cependant dans des cas où Flexbox ne peut être utilisé, par exemple si l'élément doit avoir une position absolue ou fixe, cette méthode reste utile.

<h3>Exemple 2 - Créer une dimension de grille à partir de root</h3>

On peut utiliser la fonction `calc()` pour créer une grille basée sur le viewport avec l'unité `rem`. Pour cela, on définit dans l'[élément racine](https://developer.mozilla.org/fr/docs/Web/CSS/:root) (_root_) la font-size comme une fraction de la largeur du viewport.

```
html {
	font-size: calc(100vw / 30);
}
```

Maintenant `1 rem` correspond à 1/30 de la largeur du viewport. Tous les textes dans notre page seront mis à l'échelle automatiquement en fonction du viewport et la même quantité de texte apparaîtra toujours à l'écran quelle que soit sa taille&nbsp;:

<p>
<video width="780" style="width: 100%;" autoplay="" loop="" muted="" playsinline="" poster="https://res.cloudinary.com/ireaderinokun/image/upload/c_scale,q_59,w_780/v1486662717/ezgif.com-optimize_w09wsb.jpg">
    <source type="video/webm" src="https://res.cloudinary.com/ireaderinokun/image/upload/f_auto/v1486662717/ezgif.com-optimize_w09wsb.webm">
    <img src="https://res.cloudinary.com/ireaderinokun/image/upload/c_scale,q_59,w_780/v1486662717/ezgif.com-optimize_w09wsb.jpg" alt="image d'un écran redimensionné, montrant comment le texte s'adapte tout en restant aux mêmes proportions">
</video>
</p>

Si nous donnons à d'autres éléments non-textuels des dimensions en unités `rem`, ìls se comporteront de la même manière.

<h3>Exemple 3 - Clarté</h3>

Enfin, `calc()` peut s'avérer utile pour rendre les calculs plus évidents à comprendre. Si vous voulez qu'un groupe d'éléments aient pour dimension 1/6 de la largeur de leur conteneur parent, vous pourriez l'écrire ainsi&nbsp;:

```
.foo {
	width: 16.666666667%;
}
```

Mais pour les lecteurs de votre CSS, ce serait bien plus clair ainsi&nbsp;:

```
.foo {
	width: calc(100% / 6);
}
```

**Ressources complémentaires en français**

- [La fonction calc() en CSS](https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html), par Raphaël Goetter
- [calc()](https://developer.mozilla.org/fr/docs/Web/CSS/calc) dans MDN


Comment fonctionne calc()


La [méthode HSL](http://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) de création de couleurs en CSS3 est très bien supportée par les navigateurs modernes mais quelque peu négligée par les codeurs, en raison sans doute de sa différence avec [les autres modèles](/tags/couleur/)&nbsp;:

- Il est facile de traduire d’[hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web) en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu), mais plus difficile de traduire de ces modèles vers HSL.
- Les valeurs Hex et RGB de Photoshop peuvent être transférées directement dans votre CSS, ce qui n’est pas le cas de HSB qui n’est _pas_ la même chose que HSL.
- HSL ne vous offre pas une plus grande palette de couleurs que Hex et RGB, on reste sur la même étendue.

Et pourtant, malgré ces quelques restrictions, HSL est la méthode préférée des designers, voici pourquoi.

<figure role="group"><img src="/images/cercle-chromatique-hsl-compressor.jpeg" width="742" height="577" alt="le cercle chromatique"/></figure>

Tout d’abord, il vous faut un nouveau modèle mental pour la couleur, focalisez-vous sur le cercle chromatique. Vous voyez le rouge, le vert et le bleu&nbsp;: au sommet, le rouge est à 0 degrés, le vert à 120 degrés et le bleu à 240 degrés, ensemble ils partagent le cercle en trois parties égales. À distance égale entre eux se trouvent le jaune, le cyan et le magenta (du système de couleurs CMYK) respectivement à 60, 180 et 300 degrés.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : HSL signifie Hue, Saturation, Luminosity, c’est à dire Teinte, Saturation, Luminosité. Ce sont les trois composantes que nous retrouverons dans le code `hsl`. Pour une solide intro à la terminologie de la théorie des couleurs, vous pouvez consulter [l’excellent article de Cameron Chapman](https://la-cascade.io/theorie-des-couleurs-2-concepts-et-terminologie/). Voyez également la liste de ressources en fin d’article_.

En partant du sommet et en tournant dans le sens des aiguilles d’une montre, nous passons par toutes les couleurs de l’arc en ciel.

La première composante de HSL est donc très facile&nbsp;: c’est la position de la couleur (la “teinte") sur le cercle chromatique, exprimée en degrés.

Pour prendre un exemple, le violet se trouve à mi-chemin du bleu (240°) et du magenta (300°), son code serait donc `hsl(270, 100%, 50%)` (ne vous inquiétez pas pour les autres composantes du code, nous allons voir ça tout de suite). Pour obtenir un violet “plus bleu”, il suffit de revenir en arrière vers le bleu, par exemple en faisant `hsl(255, 100%, 50%)`.

La deuxième composante est la saturation, également décrite comme l’intensité. Plus on s’éloigne du centre, plus l’intensité de la couleur augmente, atteignant le maximum de saturation sur le bord extérieur du cercle. Au contraire, plus on va vers le centre, plus la couleur tend vers le gris. En d’autres termes, le degré de saturation dépend de la distance à laquelle on se trouve du gris. Toutes les couleurs HSL ayant une saturation de 0% ont la même ombre (_shade_) de gris, toutes choses étant égales par ailleurs.

<div className="centeredBold">Valeurs de saturation hsl(45, x%, 50%)</div>

<div class="container-hsl">
<span style="background-color:hsl(45,0%,50%);color:#fff">hsl(45,0%,50%)</span>
<span style="background:hsl(45,25%,50%)">hsl(45,25%,50%)</span>
<span style="background:hsl(45,50%,50%)">hsl(45,50%,50%)</span>
<span style="background:hsl(45,75%,50%)">hsl(45,75%,50%)</span>
<span style="background:hsl(45,100%,50%)">hsl(45,100%,50%)</span></div>

Note : Pour la saturation et la luminosité, le signe % doit _toujours_ être inclus, même si la valeur est égale à 0.

La luminosité, ou “brillance”, spécifie la distance à laquelle la couleur se trouve du blanc et du noir. Un niveau de luminosité de 50% signifie que la couleur est en équilibre parfait entre le clair et le sombre, et demeure inchangée. Si l’on réduit la luminosité, la couleur s’assombrit&nbsp;: toute couleur ayant un niveau de luminosité de 0 est un noir pur. Si l’on augmente la luminosité, la couleur s’éclaircit et à l’extrême (100%) elle est blanche. Entre les deux, vous avez de nombreuses possibilités, comme illustré ci-dessous&nbsp;:

<div className="centeredBold">Valeurs de luminosité hsl(90, 100%, x%)</div>

<div class="container-hsl">
<span style="background-color:hsl(90,100%,0%);color:#fff">hsl(90, 100%, 0%)</span>
<span style="background:hsl(90,100%,25%)">hsl(90, 100%, 25%)</span>
<span style="background:hsl(90,100%,50%)">hsl(90, 100%, 50%)</span>
<span style="background:hsl(90,100%,75%)">hsl(90, 100%, 75%)</span>
<span style="background:hsl(90,100%,100%)">hsl(90, 100%, 100%)</span></div>

Avec un peu de pratique, cette carte mentale de la couleur deviendra instinctive et vous trouverez probablement qu’il est bien plus facile de créer et de manipuler les couleurs spécifiées en HSL. Même si vous choisissez de ne pas toujours l’utiliser, HSL présente quelques avantages spécifiques dans certaines circonstances —&nbsp;nous verrons cela dans [le prochain article](/articles/3-raisons-dutiliser-hsl-pour-vos-couleurs/).

**Note** :

Eric Meyer propose [un diagramme bien utile](http://meyerweb.com/eric/css/colors/hsl-16.html) permettant de traduire les mots-clés de couleurs habituels en valeurs HSL, et Lars Gunther a construit un outil pédagogique intéressant pour [utiliser le cercle chromatique](http://itpastorn.github.io/webbteknik/future-stuff/svg/color-wheel.html).


Utiliser HSL pour vos couleurs


Cet article est la traduction de deux articles de Louis Lazaris parus sur son blog <a href="https://www.impressivewebs.com">Impressive Webs</a>.

En CSS, les éléments peuvent être divisés en quelques catégories. Deux d'entre elles sont les éléments de niveau "block" et de niveau "inline". C'est un de ces domaines qui, lorsqu'on l'a bien compris, peut aider les débutants à passer au niveau supérieur.

## Éléments de niveau Block

Un élément block a les caractéristiques suivantes, non limitatives&nbsp;:

- Si aucune largeur n'est définie, il prendra toute la largeur de son élément parent.
- Il peut avoir des marges et des paddings.
- Si aucune hauteur n'est définie, il prendra la hauteur de ses éléments enfants (en supposant qu'il n'y a pas de "float" ou de positionnement sur des éléments environnants).
- Il ignore la propriété `vertical-align`.

Il est donc inutile pour un élément block de définir une largeur ou de lui donner une `width: 100%` si vous voulez qu'il s'étende sur la largeur de son élément parent. Cela pourrait même avoir des effets indésirables.

Et comme l'indique le quatrième point de la liste ci-dessus, il n'est pas nécessaire non plus de "clearer" un élément block. S'il ne comprend aucun float, le clear sera automatique et il commencera à la "ligne" suivante dans l'affichage de la page.

**Exemples d'éléments block**&nbsp;:

`p`, `div`, `form`, `header`, `nav`, `ul`, `li`, et `h1`.

<figure role="group"><img src="/images/b_i1_block-compressor.jpeg" width="680" height="383" alt="Comportement des éléments block"/></figure>

## Éléments de niveau Inline

Un élément inline a les caractéristiques suivantes, non limitatives&nbsp;:

- Il s'inscrit dans le flux du texte
- et donc ne 'saute' pas à la ligne comme le ferait un élément block
- Il accepte la propriété `white-space`.
- Il ignore les marges top et bottom mais applique les marges left et right, ainsi que tout padding.
- Il ignore les propriétés `width` et `height`.
- S'il est flotté à gauche ou à droite, il devient automatiquement un élément de niveau block, et prend toutes ses caractéristiques.
- Il accepte la propriété `vertical-align`.

Pour se faire une bonne idée de l'élément inline, on peut l'imaginer comme une **boîte qui se comporte comme du texte**. Un texte qui n'est pas interrompu par d'autres éléments s'écoule, lettre après lettre, et si vous ajoutez un élément inline dans le texte, il suivra le flux comme tout autre élément du texte.

**Exemples d'éléments inline**&nbsp;:

`a`, `span`, `b`, `em`, `i`, `cite`, `mark`, et `code`.

<figure role="group"><img src="/images/b_i2_inline-compressor.jpeg" width="680" height="383" alt="comportement d'un élément inline"/></figure>

## Notes complémentaires

Vous aurez remarqué que ces exemples d'éléments block et inline sont très révélateurs&nbsp;: les éléments block sont structurels alors que les éléments inline sont relatifs au texte. C'est une bonne façon de se rappeler qui est qui, même si au commencement cela peut vous paraître confus.

D'une manière générale, vous pouvez inclure n'importe quel élément block à l'intérieur d'un autre élément block. Vous pouvez également inclure n'importe quel élément inline dans un élément block et n'importe quel élément inline dans un autre élément inline. La seule chose qu'on ne puisse pas faire, c'est inclure un élément block à l'intérieur d'un élément inline, à une exception près&nbsp;: l'élément `a` peut envelopper n'importe quel type de contenu, block comme inline ou les deux.

Vous pouvez changer tout élément block en inline et vice-versa, en utilisant la propriété CSS display.

Dernière chose à noter, block et inline existent dans une perspective CSS, du point de vue de HTML5 les divers éléments ont été re-catégorisés pour être plus spécifiques.

### Astuce rapide: éléments remplacés

Au tout début, j'ai dit que block et inline étaient simplement deux types de contenu. D'une manière générale, ce sont en effet les deux types principaux et il n'y a pas besoin de se soucier trop des autres.

Mais il y a ce qu'on appelle [les éléments remplacés](/articles/quest-ce-quun-element-remplace/). Ce sont des éléments dont l'apparence et les dimensions de base sont définies par une ressource extérieure, par exemple des images, des plugins, des éléments d'un formulaire... Ils ne sont ni blocks, ni inline, on pourrait les considérer comme plus proches d'inline, mais avec une structure proche de block...

Quelques exemples d'éléments remplacés&nbsp;: `img`, `object`, `input`, `select`.

## Inline-Block

Voici quelques définitions de la valeur `inline-block` pour la propriété `display`, relevées dans quelques sites de référence&nbsp;:

Pour [Sitepoint](http://reference.sitepoint.com/css/display) : "Avec Inline-block, l'élément génère une boîte block qui est mise en forme comme s'il s'agissait d'une boîte inline".

Pour [QuirksMode](http://quirksmode.org/css/css2/display.html) : "Un inline-block est placé inline (c'est à dire sur la même ligne que le contenu adjacent), mais il se comporte comme un block".

Pour [Robert Nyman](http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/) : "En gros, c'est une manière de mettre les éléments inline tout en préservant leurs capacités d'éléments block, tels que la possibilité de définir une largeur et une hauteur, des marges et paddings top et bottom, etc."

### Démonstration

Voici une image d'`inline-block` à l'oeuvre, qui montre exactement comment il se comporte&nbsp;:

<figure role="group"><img src="/images/b_i3_inline_block_demo-compressor.jpeg" width="550" height="221" alt="démonstration d'inline-block, notamment de hauteur et padding"/></figure>

### Comment l'utiliser ?

Voici quelques cas où inline-block serait utile&nbsp;:

- Pour placer plusieurs éléments de type block sur la même ligne horizontale sans les flotter.
- Pour permettre à un élément de type inline d'avoir une hauteur et une largeur tout en conservant sa nature inline.
- Pour permettre à un élément inline d'avoir des marges ou des paddings.

### Quelques notes complémentaires

L'utilisation de `inline-block` ne va pas sans quelques petits inconvénients. Un élément inline-block est dépendant du `white-space` donc si vous affichez des listes en utilisant inline-block (dans une barre de navigation par exemple), les items de votre liste comporteront des espaces indésirés entre eux. Cela peut ne pas être gênant, auquel cas pas de problème. Sinon, pour retirer cet espace il vous faudra retirer de votre code HTML tout whitespace présent entre les éléments de la liste. Si votre code se présente ainsi&nbsp;:

    <ul>
    	<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
    </ul>

Ou pire :

    <ul>
    	<li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
    </ul>

Ce problème peut évidemment être résolu en ajoutant `font-size: 0` à l'élément `<ul>` puis en augmentant la font-size des éléments de la liste. Mais ces solutions ne sont pas très "propres", je recommenderais donc dans ce cas d'utiliser une solution autre que `inline-block`.

Si vous déclarez plusieurs éléments utilisant `inline-block` et que ces éléments ont des hauteurs variables, vous devrez probablement ajouter quelque chose comme `vertical-align: top` pour garantir un alignement régulier. Voici [une page intéressante](http://www.brunildo.org/test/inline-block.html) qui montre quelques problèmes et solutions relatifs à `inline-block`.

J'ai par ailleurs remarqué que le comportement d'`inline-block` n'était pas le même selon que l'élément était à l'intérieur d'un paragraphe ou pas.

### Compatibilité navigateurs

Sans surprise, `inline-block` fonctionne de la même manière avec tous les navigateurs, sauf IE6 et IE7. Si vous devez absolument avoir une compatibilité avec IE7, il vous faudra définir la propriété `display` comme `inline`, puis utiliser la propriété `hasLayout` d'internet explorer.

---

<h2 class="ressourcesComplementaires">Ressources complémentaires en français</h2>

**Sur Block et Inline** :

[Block et Inline](http://www.ultra-fluide.com/ressources/xhtml/block-inline.xhtml), sur Ultra-Fluide.

**Sur Inline-Block** :

[Display inline-block](http://www.alsacreations.com/article/lire/1209-display-inline-block.html), sur Alsacréations.  
[La propriété CSS display: inline-block](http://jeremie.patonnier.net/post/2010/01/28/La-propri%C3%A9t%C3%A9-CSS-display-inline-block), chez Jérémie.


CSS Block, Inline et Inline-Block


Même si la plupart des designers utilisent un logiciel de création graphique du type Adobe Illustrator ou Sketch pour créer des formes en <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><link itemprop="url" href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics"/><span itemprop="name">[SVG](/tags/svg/)</span></span>, le fait de connaître la syntaxe de base de SVG permet de créer plus facilement et plus précisément des éléments tels que lignes, cercles et rectangles —&nbsp;et parfois, encoder ces éléments à la main est plus rapide et plus efficace qu’un éditeur visuel.

<h2>Cercles</h2>

Regardons par exemple le tracé basique d’un cercle. Pour faire simple, je laisserai pour un prochain article les complications des unités et de leurs variations.

Vous pourriez écrire ce code à l’intérieur d’une balise `<body>` sur une page HTML, ou bien comme un document séparé, enregistré avec l’extension .svg —&nbsp;dans les deux cas le résultat serait visible dans un navigateur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" />
    </svg>

…et le résultat est le suivant :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><circle cx="100" cy="100" r="80" fill="tomato" /></svg>

Quelques points à noter à ce stade :

1. L’élément `circle` doit être “auto-fermant”
2. Le cercle est positionné à partir de son centre (cx pour “centre, axe des x”, cy pour “centre, axe des y”)
3. La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
4. Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste
5. Si l’un de ces attributs n’est pas mentionné, il est supposé être égal à 0 (et noir pour les attributs de présentation impliquant la couleur)
6. le remplissage (_fill_) du cercle peut être spécifié via [le système de couleur CSS](/tags/couleur/) que vous préférez.

Comme les rectangles et les autres éléments SVG, un cercle SVG est constitué de deux “parties”, un remplissage interne et un tracé (_stroke_) externe.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" stroke-width="15" stroke="black" />
    </svg>

Le code du cercle est un peu long et compliqué&nbsp;: nettoyons-le avec un sélecteur de classe&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="80" class="redcirc" />
    </svg>

…et utilisons ce CSS :

    //CSS
    svg {
      width: 200; height: 200;
    }
    .redcirc {
      fill: red;
      stroke: black;
      stroke-width: 15;
    }

Le résultat est le même que dans la version précédente&nbsp;:

<div class="ds-svg-circles"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" class="redcirc" /></svg></div>

Notes :

- Cela ne signifie pas que vous ayez tout d’un coup la possibilité d’appliquer `fill` aux éléments HTML. `fill`, `stroke` et `stroke-width` ne s’appliquent qu’aux éléments SVG. La plupart des attributs de présentation SVG ont un équivalent en propriété CSS, mais pas tous.
- Si vous écrivez votre SVG dans le contexte d’une page HTML, la classe `.redcirc` peut se trouver dans la partie `<head>` de votre document ou dans une feuille de style externe.
- La largeur du trait (_stroke-width_) est répartie de façon égale des deux côtés du contour de l’élément.

Une fois que nous avons ceci, il est très facile de commencer à créer des tracés plus complexes. Je pense que vous voyez déjà où nous allons en venir&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="250" fill="red" />
      <circle cx="250" cy="250" r="200" fill="white" />
      <circle cx="250" cy="250" r="150" fill="red" />
      <circle cx="250" cy="250" r="50" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

Remarquez que les éléments SVG s’empilent [comme les éléments HTML](http://demosthenes.info/blog/136/Stacking-order-and-z-index).

Cependant, nous pouvons être plus malins ! D’une manière générale, moins il y a d’éléments dans un document SVG et mieux on se porte, donc nous pouvons simuler des sections du bouclier en utilisant `stroke` et seulement deux cercles&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="220" fill="white" />
      <circle cx="250" cy="250" r="125" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

combinés avec ce CSS :

    //CSS
    circle {
      stroke-width: 50;
      stroke: red;
    }

<div class="ds-svg-shield"><div class="ds-svg-container"><svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"><title>Captain America’s Shield</title><circle cx="250" cy="250" r="220" fill="white" /><circle cx="250" cy="250" r="125" fill="blue" /><polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209 " /></svg></div></div>

Le résultat est le même que l’original. [La version complète](http://codepen.io/dudleystorey/pen/ZGOKLJ) (ci-dessus) utilise également une variation intéressante de [flexbox](/tags/flexbox/) et de `box-shadow` pour positionner et ombrer le bouclier.

<h2>Ellipses</h2>

La syntaxe de l’ellipse est proche de celle du cercle&nbsp;:

    <svg viewBox="0 0 120 120">
      <ellipse cx="60" cy="60" rx="60" ry="30"/>
    </svg>

Ici, nous avons deux rayons représentant [le demi-grand-axe (_semi-major_) et le demi-petit-axe (_semi-minor_)](http://en.wikipedia.org/wiki/Semi-major_axis) de l’ellipse.

Un trait utile des cercles et des ellipses (et des formes SVG en général) écrites en ligne dans une page est que, contrairement aux éléments HTML, leur “zone active” correspond exactement à leur forme. Donc si nous insérons un lien dans notre ellipse&nbsp;:

    <svg viewBox="0 0 120 120">
      <a xlink:href="http://www.cnn.com">
        <ellipse cx="60" cy="60" rx="50" ry="25" />
      </a>
    </svg>

et que nous combinons ceci avec ce CSS&nbsp;:

    //CSS
    ellipse:hover { fill: red; }

nous obtenons exactement ceci : remarquez la réponse précise en fonction de la position de la souris.

<div class="sd-ellipse"><svg viewBox="0 0 120 120"><a xlink:href="http://www.cnn.com"><ellipse cx="60" cy="60" rx="50" ry="25" /></a></svg></div>

Il est possible de reproduire cette forme en HTML via `border-radius` sur un élément, mais le défi devient insurmontable dès lors que les formes de boutons sont plus compliquées —&nbsp;et c’est l’une des raisons qui font de SVG un excellent format pour les éléments d’interface utilisateur.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/ZGOKLJ">Le bouclier de Captain America</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>


Les bases de SVG : Cercles et ellipses


Quand nous utilisons l’élément `<svg>`, nous créons un fragment constitué de détails multiples, imbriqué dans notre document. Ce fragment a son propre viewport et son propre système de coordonnées, ce qui peut semble compliqué et intimidant lorsqu’on débute avec SVG.

Si vous voulez que votre travail s’affiche correctement, il est utile de comprendre l’espace dans lequel se situe votre SVG, mais cela devient réellement crucial dès lors que vous vous lancez dans un SVG un peu plus complexe, comme [les dégradés](/articles/les-degrades-svg/) et les motifs, où les détails sont fortement liés à un système de coordonnées.

Le sujet est riche, mais je donnerai ici les bases, en indiquant l’objectif et le comportement de SVG viewport et viewBox. J’espère que cette introduction vous donnera des fondations solides pour avancer dans vos créations SVG.

👉🏾 _NdT&nbsp;: Vous pouvez également consulter l'article de Dudley Storey traduit dans la Cascade "[Comprendre SVG viewBox](/articles/comprendre-svg-viewbox/)"_.

<h2>Le viewport</h2>

Le viewport est la partie visible d’un SVG. Un SVG est par nature extensible, il peut être aussi haut et large que nous le voulons, et nous pouvons également déterminer qu’une partie seulement soit visible.

**Le viewport est défini grâce aux attributs `height` et `width` à l’intérieur de l’élément `<svg>`.**

Si nous choisissons de ne pas définir de viewport, les dimensions du viewport seront déterminées par tout autre indicateur présent dans le SVG, par exemple la largeur de l’élément SVG contenant. Cependant, si vous laissez cet information non définie, le risque est que votre SVG soit coupé à l’affichage.

De mon point de vue, plus on donne de détails à l’intérieur de SVG, et mieux notre image se comportera sur tous les navigateurs.

<h2>preserveAspectRatio</h2>

Si le viewport et la `viewBox` n’ont pas le même ration de hauteur et de largeur, l’attribut `preserveAspectRatio` indique au navigateur comment afficher l’image (_NdT&nbsp;: Voir [l'article sur preserveAspectRatio](/articles/comprendre-svg-preserveaspectratio/) qui fait suite à celui-ci_).

Les valeurs de cet attribut sont nombreuses, [Mozilla Developer Network les liste clairement](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio).

Si nous ne spécifions pas de valeur, le réglage par défaut impose une mise à l’échelle uniforme et la viewBox entière est visible dans le viewport.

<h2>Poire exemple</h2>

Prenons une image de poire. Dans ce premier exemple, le viewport et la `viewBox` sont définis avec des valeurs correspondantes, une `width` de 155px et une `height` de 190px. La `viewBox` est définie de façon à couvrir entièrement l’image de la poire et cette image est définie de façon à entrer dans les limites de son container.

Dans l’exemple ci-dessous, vous pourrez constater en jouant avec Codepen que l’élément `<svg>` est défini ainsi&nbsp;:

```
//HTML
...
<svg width="115" height="190" viewBox="0 0 115 190">
...
```

Les `width`et `height` définissent le viewport.

<h3>1 - Dimensions concordantes</h3>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RWOeLO" src="//codepen.io/pierrechoffe/embed/RWOeLO?height=320&amp;theme-id=light&amp;slug-hash=RWOeLO&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/RWOeLO/">
  Dimensions concordantes</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>2 - viewBox réduite</h3>

Si nous réduisons de 50px la hauteur et la largeur de la `viewBox` de notre image, nous réduisons la dimension de la portion de notre poire que nous souhaitons afficher, mais du coup ce qui reste visible est redimensionné de façon à remplir le container.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RWOexO" src="//codepen.io/pierrechoffe/embed/RWOexO?height=300&amp;theme-id=light&amp;slug-hash=RWOexO&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/RWOexO/">
  viewBox réduite</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>3 - viewport agrandi</h3>

Ajoutons maintenant 200px aux `width` et `height` de notre viewport. L’image se redimensionne pour correspondre à ces dimensions. La `viewBox` couvre l’image entière, la poire est entièrement visible. Le viewport contient toute l’image et définit les limites que doit remplir notre poire.

Voici ce que donne notre viewport agrandi&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LpvgQg" src="//codepen.io/pierrechoffe/embed/LpvgQg?height=520&amp;theme-id=light&amp;slug-hash=LpvgQg&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="520" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/LpvgQg/">
  viewport agrandi</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>4 - Changer les valeurs `min`</h3>

À l’intérieur de la `viewBox`, les valeurs `min` définissent l’origine de la `viewBox` dans l’élément parent. En d’autres termes, à quel point, dans la `viewBox`, nous voulons que commence la correspondance avec le viewport. Dans les exemples qui précèdent, les valeurs `min` sont définies comme `0, 0` (c’est à dire en haut à gauche). Modifions-les en `50, 30`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_XmQxEV" src="//codepen.io/pierrechoffe/embed/XmQxEV?height=300&amp;theme-id=light&amp;slug-hash=XmQxEV&amp;user=pierrechoffe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/XmQxEV/">
  Changer les valeurs `min`</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

La `viewBox` (ce qui sera visible) commence maintenant à 50px sur l’axe des x et à 30px sur celui des y. En changeant ces valeurs, nous avons simplement changé la partie de la poire sur laquelle nous voulons nous concentrer.

<h2>Conclusion</h2>

Comprendre et mettre en oeuvre un bon système de coordonnées pour SVG est vraiment utile pour créer et afficher vos réalisations graphiques.

Nous avons passé en revue quelques modifications basiques de SVG viewport et `viewBox` qui je l’espère ont montré toute la puissance et l’utilité d’une bonne définition de l’espace de travail SVG.

👉🏾 Le livre de Joni, “Pocket Guide to Writing SVG” est open source, vous pouvez le [télécharger gratuitement ici](https://svgpocketguide.com/) ou le lire en ligne en suivant le même lien.

<h3><small>Ressources complémentaires en anglais</small></h3>

- [SVG Viewport and viewBox](http://tutorials.jenkov.com/svg/svg-viewport-view-box.html), par Jakob Jenkov

<h3><small>Ressources complémentaires en français</small></h3>

- [Système de coordonnées, transformations et unités](http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-8.html), par Tecfa
- [SVG viewport et viewBox (pour les débutants complets)](https://webdesign.tutsplus.com/fr/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844), par Kezz Bracey


Comprendre SVG viewBox et viewport

_NdT : Deux articles de la Cascade ont déjà présenté [Emmet](http://emmet.io/), l'un de manière globale ([Goodbye Zen Coding, Hello Emmet !](/articles/goodbye-zen-coding-hello-emmet/)), l'autre plus spécifiquement pour CSS ([Emmet, un turbo dans votre CSS](/articles/emmet-un-turbo-dans-votre-css/)). Inutile de vanter à nouveau les mérites d'Emmet pour vous faciliter le travail. Cet article recense les **raccourcis d'Emmet** et rafraîchira notre mémoire&nbsp;!_

_Pour compléter cet article de Matt McFadyen, vous trouverez un article de Jordan Moore (Astuces Emmet) à la suite, à propos de quelques fonctionnalités d'Emmet moins connues_.

## Raccourcis Emmet

(par <small>Matt McFadyen</small>)

Emmet est un plugin pour éditeurs de texte, utile pour accroître votre productivité grâce à de nombreux raccourcis vous épargnant la saisie de code répétitif et ennuyeux. J'utilise Emmet pour automatiser la création de listes, pour la numérotation incrémentée de classes, pour CSS etc. Voici quelques-uns des raccourcis les plus utiles, au cas où vous les auriez oubliés.

Dans les exemples qui suivent, la syntaxe en blanc correspond à Emmet, en tapant la touche tabulation on obtient la syntaxe colorée HTML.

## HTML

### Utiliser > pour ajouter un élément enfant (child)



```
//CSS

  li>p

  <li>
    <p>/p>
  </li>

  ul>li>p

  <ul>
    <li>
      <p></p>
    </li>
  </ul>
```

### Utiliser + pour ajouter un élément frère (sibling)



```
//CSS

  ul>li>p+a

  <ul>
    <li>
      <p></p>
      <a href=""></a>
    </li>
  </ul>
```

### Utiliser \* pour multiplier les éléments



```
//CSS

  ul>li*3>p+img

  <ul>
    <li>
      <p></p>
      <img src="" alt="">
    </li>
    <li>
      <p></p>
      <img src="" alt="">
    </li>
    <li>
      <p></p>
      <img src="" alt="">
    </li>
  </ul>
```

### Utiliser . pour ajouter un nom de classe



```
//CSS

  ul.wrapper

  <ul class="wrapper"></ul>

  .container

  <div class="container"></div>
```

### Utiliser () pour grouper des éléments multiples



```
//CSS

  ul>(header>ul>li*2>a)+footer>p

  <ul>
    <header>
      <ul>
        <li>
          <a href=""></a>
        </li>
        <li>
          <a href=""></a>
        </li>
      </ul>
    </header>
    <footer>
      <p></p>
    </footer>
  </ul>
```

ou encore :

```
//CSS

  ul>(li>p+img+a)+li*2>p+img

  <ul>
    <li>
      <p></p>
      <img src="" alt="">
      <a href=""></a>
    </li>
    <li>
      <p></p>
      <img src="" alt="">
    </li>
    <li>
      <p></p>
      <img src="" alt="">
    </li>
  </ul>
```

### Utiliser {} pour insérer du texte dans un élément



```
  a{clique moi}

    <a href="">clique moi</a>

  p>{Clique }+a{ici}+{ pour continuer}

    <p>Clique <a href="">ici</a> pour continuer</p>
```

### Ajouter une numérotation avec $



```
  ul>li.item$*5

  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>
```

### Commencer la numérotation à X avec $@X



```
  ul>li.item$@3*5

  <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
  </ul>
```

### Ordre décroissant avec $@-



```
  ul>li.item$@-{pizza $@-}*5

  <ul>
    <li class="item5">pizza 5</li>
    <li class="item4">pizza 4</li>
    <li class="item3">pizza 3</li>
    <li class="item2">pizza 2</li>
    <li class="item1">pizza 1</li>
  </ul>
```

### Remonter d'un élément enfant avec ^



```
  div>p>em{hello}^a

  <div>
    <p><em>hello</em></p>
    <a href=""></a>
  </div>
```

#### Ajouter un attribut avec [attr_name="valeur"]



```
  img[src="http://placage.com/300/300" alt="nicCage"]

  <img src="http://placage.com/300/300" alt="nicCage">
```

#### En résumé



```
  div.list>ul>(li.item$>p{paragraph $}
  +img[src="http://placage.com/300/300"])
  +li.item$@2*4>p{paragraph $@2}
  +img[src="http://placage.com/$@1$$/$@5$$"]+a
  ^^^footer>p{Place cage vrs placesheen}

  <div class="list">
    <ul>
      <li class="item1">
        <p>paragraph 1</p>
        <img src="http://placecage.com/300/300" alt="">
      </li>
      <li class="item2">
        <p>paragraph 2</p>
        <img src="http://placecage.com/105/505" alt="">
        <a href=""></a>
      </li>
      <li class="item3">
        <p>paragraph 3</p>
        <img src="http://placecage.com/202/606" alt="">
        <a href=""></a>
      </li>
      <li class="item4">
        <p>paragraph 4</p>
        <img src="http://placecage.com/303/707" alt="">
        <a href=""></a>
      </li>
      <li class="item5">
        <p>paragraph 5</p>
        <img src="http://placecage.com/404/808" alt="">
        <a href=""></a>
      </li>
    </ul>
  </div>
  <footer>
    <p>Place cage vrs placesheen</p>
  </footer>
```

Le premier regroupement contient une `<li>` qui a deux éléments enfants&nbsp;: `<p>` qui contient du texte et `<img>` qui contient un attribut `src`.

Le regroupement suivant contient les `<li>` 2 à 5, en multipliant des listes dont les noms de classe, le contenu de paragraphe, les valeurs d'attributs `src` s'incrémentent selon diverses syntaxes. Chaque `<li>` contient également une ancre, invariable.

Enfin, nous utilisons 3 fois ^ de façon à sortir de `<li>`, puis de `<ul>`, puis de `<div>`, afin d'ajouter notre footer final.

## CSS

Voici une liste de raccourcis courants&nbsp;:

<figure role="group"><img src="/images/em13-compressor.png" alt=""/></figure>

N'oubliez pas que CodePen est compatible avec Emmet !

## Astuces Emmet

(par <small>Jordan Moore</small>)  
<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Pour compléter ce petit rappel, voici un autre article, de_ **Jordan Moore**, _sur quelques fonctionnalités mal connues d'Emmet, qui montrent sa puissance incroyable_.

### Calcul en ligne

Emmet contient un calculateur intégré qui vous permet de résoudre des équations directement à l'intérieur de votre code. Je l'utilise quotidiennement pour convertir des valeurs _px_ en _em_, en particulier pour les valeurs _em_ imbriquées, simplement en tapant `Cmd` `Shift` `Y` sur une équation comme 24/16 (valeur souhaitée en pixels / valeur de base en pixels).

Vous pouvez enchaîner le calcul et les abréviations, par exemple en tapant `mb24/16` et en faisant `Cmd` `Shift` `Y`, puis tabulation, vous obtenez&nbsp;:

    margin-bottom: 1.5em;

### Retrouver une balise

Quelquefois lorsque j'écris mon HTML je cherche une balise fermante que je n'arrive pas à retrouver rapidement. En faisant `Ctrl` `Shift` `T` avec le curseur sur la balise ouvrante (ou fermante), je saute directement à la balise fermante (ou ouvrante) correspondante.

### Commentaires

Pour éviter de me retrouver dans la situation précédente, je recommande d'insérer un commentaire sous vos balises fermantes. Mais écrire le nom de la classe d'un élément encore une fois, et l'intégrer dans les commentaires, est une perte de temps et d'énergie qui n'a de sens que si vous devez revoir votre code - c'est pourquoi on l'oublie souvent.

Emmet rend toutefois cette tâche extrêmement simple, en ajoutant juste un petit snippet à la fin d'une abréviation. Si vous tapez : `.container>ul>li*5>a|c`, vous obtiendrez&nbsp;:

    <div class="container">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
    

Bref, pour obtenir le commentaire (et tout le bénéfice qui vient avec), il vous a suffi d'écrire `|c`.

### Convertir une image en Data URI

Une des fonctionnalités les moins utilisées d'Emmet est sa capacité à convertir les images en Data URI. L'utilisation de Data URI en lieu et place d'une image externe vous permet d'économiser une requête HTTP, ce qui améliore la performance de votre site en réduisant le temps de latence.

Pour convertir une image en Data URI, placez le curseur à l'intérieur de la balise image et faites `Ctrl` `Shift` `D`.

---

### Liens complémentaires

[Documentation Emmet](http://docs.emmet.io/css-abbreviations/)  
[Anti-sèche Emmet (syntaxe, HTML, CSS)](http://docs.emmet.io/cheat-sheet/)  
[Bootstrap en quelques minutes avec Emmet](http://webdesign.tutsplus.com/tutorials/applications/build-bootstrap-in-minutes-using-emmet/) (en anglais)  
[tutoriel vidéo sur Emmet](http://www.grafikart.fr/tutoriels/sublime-text-2/emmet-376), par Grafikart

Note sur les **Raccourcis Emmet** :  
La première partie de cette traduction, l'article de Matt McFadyen, n'est plus disponible en ligne. Il a été traduit avec l'aimable autorisation de l'auteur.  
Copyright Matt McFadyen &copy; 2014.

La Cascade

Articles récents