Les checkboxes (cases à cocher) sont épatantes, surtout quand vous les combinez avec un CSS astucieux. Cet article vise à montrer quelques petites choses créatives qu’on peut réaliser avec les checkboxes, et _sans JavaScript_.

<h2>La formule de base</h2>

Tout commence avec un peu de HTML :

    //HTML
    <input id="toggle" type="checkbox">
    <label for="toggle">

Rien de bien spécial ici. L’attribut `for` sur le `<label>` correspond à l’`id` qu’on retrouve sur `<input>`, par conséquent lorsqu’on clique sur `<label>` on bascule l’état de la case à cocher `<input>`. C’est important parce que la prochaine étape va consister à cacher la case `<input>`.

    //CSS
    input {
      position: absolute;
      left: -9999px;
    }

Pourquoi ne pas utiliser `display: none`&nbsp;? Parce qu’il serait ignoré par les lecteurs d’écran et la navigation par tabulation. La méthode de décalage de la position permet de garder `<input>` dans le circuit, mais hors écran.

Cacher `<input>` nous facilite le travail. Nous devons toutefois transmettre l’état coché/non coché, ce que nous pouvons faire avec `<label>`. Et c’est ici qu’on commence à s’amuser.

    //CSS
    input:checked + label {
      /* nos styles */
    }

Nous utilisons un mélange de [pseudo-classe :checked](https://developer.mozilla.org/fr/docs/Web/CSS/:checked) et de [combinateur adjacent](/articles/combinateurs-et-pseudo-classes-css/#combinateur-adjacent) (_adjacent sibling_) pour dire ceci&nbsp;: “quand la checkbox est cochée (_checked_), trouver le `<label>` immédiatement consécutif et appliquer nos styles”. Vous pouvez même utiliser des pseudo-éléments ([:before et :after](/articles/les-pseudo-elements-css-before-et-after/)) à l’intérieur de `<label>` pour plus de créativité encore.

    //CSS
    input:checked + label::before {
      /* styles pour un indicateur "on" */
    }

Très bien. Voyons tout cela en action. Cette démo utilise la formule basique dont nous venons de parler pour transformer les cases à cocher habituelles en quelque chose de plus impressionnant.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RPZZPe" src="//codepen.io/lonekorean/embed/RPZZPe?height=300&amp;theme-id=light&amp;slug-hash=RPZZPe&amp;user=lonekorean&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/lonekorean/pen/RPZZPe/">
  Checkbox Trickery: Simple Toggle</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que ce qu’il y a de bien, c’est que ça reste des checkboxes. Utilisez-les dans un formulaire et elles le soumettront exactement comme il faut&nbsp;: nous avons modifié leur apparence, pas leur comportement.

<h2 class="softTitleBlue">Cacher et montrer du contenu</h2>

Jusqu’ici, nous avons simplement appliqué quelques styles à `<label>` mais nous pouvons aller plus loin que cela. Cette démo cache et révèle dynamiquement des sections du formulaire en fonction des choix de l’utilisateur.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NqvvGK" src="//codepen.io/lonekorean/embed/NqvvGK?height=640&amp;theme-id=light&amp;slug-hash=NqvvGK&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" 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/lonekorean/pen/NqvvGK/">
  Checkbox Trickery: Form Disclosure</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

La pseudo-classe `:checked` fonctionne avec les boutons radio de la même façon qu’avec les cases à cocher. Voici le code HTML correspondant aux boutons radio “Comment avez-vous entendu parler de nous&nbsp;?” (_How did you hear about us?_)&nbsp;:

    //HTML
    <input id="how-friend" name="how" type="radio">
    <label for="how-friend" class="side-label">From a friend</label>

    <input id="how-internet" name="how" type="radio">
    <label for="how-internet" class="side-label">Somewhere on the internet</label>

    <input id="how-other" name="how" type="radio">
    <label for="how-other" class="side-label">Other...</label>

    <div class="how-other-disclosure">
      <label for="how-other-explain" class="top-label">Please explain</label>
      <textarea id="how-other-explain"></textarea>
    </div>

Le style des boutons radio est réalisé dans `<label>` via une combinaison de `:before` (pour le cercle externe) et `:after` (pour le point vert). Révéler ou cacher `:after` lorsqu’un bouton radio est coché ou décoché est très facile&nbsp;:

    //CSS
    .side-label::after {
      display: none;

      /* autres styles */
    }

    input:checked + .side-label::after {
      display: block;
    }

La `<div>` est cachée jusqu’à ce que le bouton radio “Other...” soit coché. Cette fois-ci, la `<div>` est cachée via `display: none` car je veux que le contenu soit ignoré par les lecteurs d’écran jusqu’à ce qu’il soit effectivement révélé. Le CSS permettant de révéler le contenu de la `<div>` lorsque le bouton radio est coché est le suivant&nbsp;:

    //CSS
    #how-other:checked ~ .how-other-disclosure {
      display: block;
    }

Jusqu’à présent, nous avons utilisé le combinateur adjacent `+` (plus), mais il est temps d’introduire [le combinateur général](https://la-cascade.io/combinateurs-et-pseudo-classes-css/#combinateur-general) `~` (tilde). Il fonctionne un peu de la même manière, mais sur des frères (_siblings_) non adjacents, comme notre `<div>`.

<h2>Arborescence de dossiers</h2>

Nous pouvons réutiliser les techniques de la démo précédente pour créer un widget d’arborescence de dossiers.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNEEpB" src="//codepen.io/lonekorean/embed/eNEEpB?height=640&amp;theme-id=light&amp;slug-hash=eNEEpB&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" 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/lonekorean/pen/eNEEpB/">
  Checkbox Trickery: Folder Tree</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML d’un dossier individuel est donné ci-dessous. Le `<label>` est le dossier et les deux éléments `<a>` sont les “fichiers” à l’intérieur.

    //HTML
    <div>
      <input id="n-1" type="checkbox">
      <label for="n-1">Blue</label>
      <div class="sub">
        <a href="#link">Mana Leak</a>
        <a href="#link">Time Warp</a>
      </div>
    </div>

Des icônes de [Font Awesome](http://fortawesome.github.io/Font-Awesome/) sont utilisées pour indiquer l’état _checked_ (ouvert) ou _unchecked_ (fermé).

    //CSS
    label::before, a::before {
      display: block;
      position: absolute;
      top: 6px;
      left: -25px;
      font-family: ’FontAwesome’;
    }

    label::before {
      content: ’\f07b’; /* closed folder */
    }

    input:checked + label::before {
      content: ’\f07c’; /* open folder */
    }

    a::before {
      content: ’\f068’; /* dash */
    }

Le contenu situé à l’intérieur d’un dossier est montré ou caché via le combinateur général `~`. C’est pourquoi on a une `<div>` supplémentaire pour envelopper chaque dossier, afin d’éviter que le combinateur ne se propage son effet et n’ouvre les autres dossiers.

    //CSS
    input:checked ~ .sub {
      display: block;
    }

Évidemment, les dossiers peuvent être imbriqués. Cliquez sur le dossier “Multicolor” pour en voir un exemple.

Enfin, disons un mot sur notre bouton Reset.

    //HTML
    <input type="reset" value="Collapse All">

Les boutons de Reset de formulaires ne sont plus vraiment utilisés de nos jours, mais nous avons ici un bon cas d’usage. Si nous cliquons dessus, toutes les cases à cocher retournent à leur état initial non-coché, ce qui ferme tous les dossiers. Cool&nbsp;!

<h2>Listes scindées</h2>

Cette démo partage les items en deux listes distinctes, selon qu’ils sont cochés ou non.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xGLLwX" src="//codepen.io/lonekorean/embed/xGLLwX?height=660&amp;theme-id=light&amp;slug-hash=xGLLwX&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" 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/lonekorean/pen/xGLLwX/">
  Checkbox Trickery: To-Do List</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML ressemble à ceci :

    //HTML
    <div class="items">
      <input id="item1" type="checkbox" checked>
      <label for="item1">Create a to-do list</label>

      

      <h2 class="done" aria-hidden="true">Done</h2>
      <h2 class="undone" aria-hidden="true">Not Done</h2>
    </div>

Le mécanisme de séparation des listes est obtenu via [Flexbox](/tags/flexbox/). Voici le CSS correspondant&nbsp;:

    //CSS
    .items {
      display: flex;
      flex-direction: column;
    }

    .done {
      order: 1;
    }

    input:checked + label {
      order: 2;
    }

    .undone {
      order: 3;
    }

    label {
      order: 4;
    }

CSS Flexbox nous permet de réordonner directement les éléments grâce à la propriété `order`. La valeur de la propriété passe de `4` à `2` lorsque la checkbox est cochée, ce qui la déplace de la partie inférieure “Not Done” vers la partie supérieure “Done”.

Malheureusement, la navigation via le clavier ainsi que [de nombreux lecteurs d’écran](http://sprungmarker.de/wp-content/uploads/css-a11y-group/css-a11y-flexbox.html) suivront l’ordre des éléments dans le DOM, même s’ils ont été visuellement réordonnés avec flexbox. Du coup, les titres “Done” et “Not Done” sont sans utilité pour les lecteurs d’écran —&nbsp;c’est pourquoi j’ai ajouté `aria-hidden="true"` pour eux, mieux vaut qu’ils soient ignorés plutôt que de créer de la confusion. À part cela, la liste scindée est opérationnelle via le clavier et les lecteurs d’écran annonceront l’état d’un item (checked/unchecked).

Si vous êtes intrigués par les compteurs à droite de “Done” et “Not Done”, ils sont générés par des [CSS counters](https://developer.mozilla.org/fr/docs/Web/CSS/Compteurs_CSS), voyez [cet article](http://codersblock.com/blog/fun-times-with-css-counters/) pour plus de détails.

<h2>Filtrage de groupes</h2>

C’est notre dernière démo. Nous allons voir comment mettre en valeur un tri croisé de données correspondant à un critère de sélection.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YXxxyj" src="//codepen.io/lonekorean/embed/YXxxyj?height=660&amp;theme-id=light&amp;slug-hash=YXxxyj&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" 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/lonekorean/pen/YXxxyj/">
  Checkbox Trickery: Group Filter</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voici le HTML abrégé. Remarquez que l’attribut `data-teams` est une liste d’attributs `id` de boutons radio séparés par un espace. C’est ainsi qu’on fait correspondre les personnages et les équipes.

    //HTML
    <input id="original" type="radio" name="team" checked>
    <label for="original">Original X-Men</label>

    

    <br>
    <ul class="characters">
      <li id="angel" data-teams="original force factor hellfire">
        <h2>Angel</h2>
        <img src="ct-angel.png" alt="">
      </li>

      
    </ul>

En ce qui concerne l’accessibilité, j’utilise des attributs `alt` vides parce que les noms de personnages sont déjà dans les balises `<h2>` —&nbsp;il n’est donc pas nécessaire, ni souhaitable, de les répéter. De plus, puisque je ne cache pas les éléments `<img>` (ils sont seulement rétrécis et décolorés), cela permet aux lecteurs d’écrans de “sauter” les personnages non sélectionnés, il me suffit de cacher la balise `<h2>`.

Voici le CSS qui fait ressortir les personnages lorsque leur équipe est sélectionnée&nbsp;:

    //CSS
    #original:checked ~ .characters [data-teams~="original"] h2,
    #force:checked ~ .characters [data-teams~="force"] h2,
    #factor:checked ~ .characters [data-teams~="factor"] h2,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
      /* styles to show character name */
    }

    #original:checked ~ .characters [data-teams~="original"] img,
    #force:checked ~ .characters [data-teams~="force"] img,
    #factor:checked ~ .characters [data-teams~="factor"] img,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] img {
      /* styles to show character avatar */
    }

Ok, je reconnais que ces sélecteurs sont un peu touffus, mais en fait ce n’est pas si compliqué. Analysons la ligne 1 par exemple. Si on l’exprime en bon français, ça donne ceci&nbsp;: lorsque l’élément ayant une `id` ‘original’ est coché, chercher le ou les éléments frères (_general sibling_) ayant la classe de ‘personnages’ (_characters_) et contenant un attribut `data-teams` dans lequel se trouve ‘original’, puis aller chercher la balise `<h2>` située à l’intérieur.
On répète avec ‘force’, ‘factor’ et ‘hellfire’ dans les lignes 2 à 4. Enfin, on reproduit le schéma dans le second bloc, mais cette fois-ci pour `<img>` à la place de `<h2>`.

<h3>En guise de conclusion</h3>

J’espère que vous avez eu autant de plaisir à jouer avec ces démos que j’en ai eu à les créer. C’était une expérience très intéressante de voir qu’on pouvait tirer quelque chose d’un élément aussi modeste que les cases à cocher. Je n’ai rien contre l’utilisation de JavaScript, lorsqu’elle est appropriée, mais c’est sympa de voir tout ce qu’on peut accomplir sans JS. Merci d’avoir lu cet article&nbsp;!

Astuces CSS avec checkbox


Le web est plus fort lorsqu’il est divers&nbsp;: plus il est accessible, meilleur est ce qu’il nous offre. L’attribut `alt` est un exemple déjà ancien de ce que nous pouvons faire pour améliorer l’accessibilité, mais pour bien écrire un texte alternatif pour vos images il est utile de connaître quelques règles.

## L'attribut alt

Qu'est-ce que l'attribut `alt` ? c'est la **représentation alternative d’une image sous forme de texte**. Si une image ne se charge pas ou si elle est bloquée, la valeur de l’attribut `alt` s’affichera à la place. Les utilisateurs d’outils pour l'accessibilité pourront entendre le texte lu à haute voix ou lire sa transcription en braille. Optimiser `alt` est également utile pour le SEO, car il fait partie des informations permettant aux moteurs de recherche de déterminer le contenu d’une image et d’associer votre site aux termes de recherche.

L’attribut `alt` (souvent appelé par erreur la “balise tag”) est obligatoire pour tous les éléments `<img>` de votre site. La plupart du temps, la façon la plus simple de rédiger un texte alternatif est **d’écrire ce que vous diriez si vous faisiez le description de l’image à quelqu’un**. Par exemple la photographie en tête de cet article pourrait être décrite ainsi&nbsp;:

```
<img src="singel.jpg" alt="Crépuscule à Jordaan, Amsterdam, Hollande">
```

Ou encore (et mieux) :

```
<img src="singel.jpg" alt="Une rangée de maisons aux fenêtres illuminées le long d’un canal à Amsterdam">
```

D’une manière générale, plus le texte est descriptif, meilleur il est.

### Exceptions à alt : les logos

**Si le contenu principal d’une image est un texte, les règles changent**. Les images bitmap présentant un texte intégré, comme celle-ci&nbsp;:

<figure role="group"><img src="/images/festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577"/></figure>

…devrait avoir **une valeur d’attribut `alt` reflétant directement le texte de l’image**.

```
<img src="festa-del-rederentore.png" alt="Festa Del Rederentore, Venezia ~ Dal 1577">
```

La raison en est simple : la plupart des lecteurs d’écran ne savent pas bien reconnaître et traduire le texte d’une image, celui-ci est donc impénétrable à la fois pour les moteurs de recherche et pour les personnes malvoyantes. En plaçant le texte dans `alt`, vous faites la traduction pour eux.

_NB&nbsp;: vous verrez souvent ce genre de balisage pauvre, Ne faites pas cela&nbsp;_:

```
<img src="logo.gif" alt="Logo">
```

C’est aussi une excellente raison d’utiliser le [SVG](/tags/svg/) en ligne pour les logos. Correctement construit, un logo SVG sera un vrai texte, lisible par tous. Il est important de noter que si le texte est dispersé en plusieurs chemins SVG, sa valeur sémantique est perdue. Une solution alternative (et peut-être meilleure) est de conserver la partie graphique du logo en SVG et d’écrire le reste dans le balisage auquel on appliquera un style. Bien sûr les deux options doivent être examinées en tenant compte du temps que prendra le chargement d’une police de caractères embarquée.

### alt vide

Il y a deux cas dans lesquels on peut laisser vide l’attribut `alt`&nbsp;:

- l’image est purement décorative, c’est à dire qu’elle n’a pas de valeur informative;
- l’image est décrite de manière appropriée par un élément sémantique qui la suit immédiatement, généralement une légende `<figcaption>`.

Si vous voulez que votre page reste valide, `alt` doit malgré tout être présent dans `<img>`, et pour indiquer qu’il est vide on lui donne la valeur `""` (guillemets ouvrant et fermant sans espace entre les deux).

```
<img src="flourish.png" alt="">
```

Une autre solution en HTML5 est de laisser l’attribut `alt` sans valeur&nbsp;:

```
<img src="flourish.png" alt>
```

Dans certaines occasions rares, la valeur de `alt` peut être très proche du [texte en légende (`<figcaption>`)](http://thenewcode.com/413/Captioning-images-in-HTML5), dans ce cas le texte alternatif est redondant et peut être laissé vide.

```
<figure>
	<img src="rio-di-san-barnaba.jpg" alt>
	<figcaption>Photograph down the canal of the Rio di San Barnaba, Venice</figcaption>
</figure>
```

Les différences peuvent être subtiles : `alt` **décrit** une image, alors que `<figcaption>` **intitule** le contenu de l’élément `<figure>`. Dans la plupart des cas, les deux seront différents et devraient donc être conservés&nbsp;:

```
<figure>
	<img src="doge-portrait.jpg" alt="Peinture à l'huile représentant un homme âgé portant un couvre-chef et un manteau brodé">
	<figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption>
</figure>
```

<figure role="group"><img src="/images/Giovanni_Bellini-_portrait_of_Doge_Leonardo_Loredan.jpeg" alt="Peinture à l'huile représentant le doge Loredan dans des vêtements formels sur un fond bleu clair.  Il porte un couvre-chef typique des doges de Venise. La dignité du caractère est suggérée par la fixité, le détachement solennel par le contact non-visuel avec le spectateur."/><figcaption>Portrait du Doge Leonardo Loredan par Giovanni Bellini</figcaption></figure>

### Ne confondez pas alt et title

On trouve parfois des balisages qui appliquent la même valeur à `alt` et à `title`. En général, c’est une mauvaise idée. Le texte de title, qui apparaît en pop-up, est rarement vu par les utilisateurs car il faut quelques secondes avant qu’il ne surgisse, et il ne sera pas lu par les outils d’accessibilité sauf si l’élément est en focus.

### Positionnement de alt

Les lecteurs d’écran lisent le texte de `alt` en ligne avec le reste du contenu, par conséquent il est souhaitable d’écrire le texte descriptif dans un flux contextuel, en particulier si l’image est flottée.

### Ne négligez pas les autres media

`alt` est presque exclusivement associé aux images, mais cela ne signifie pas que le texte descriptif des autres formats de media doive être négligé&nbsp;: les vidéos et les audios devraient par exemple utiliser [les sous-titres WebVTT](http://thenewcode.com/580/Make-Online-Video-Accessible-And-Searchable-With-WebVTT).

<i>Photo par <a href="https://www.flickr.com/people/bcnbits">MorBCN</a>, sous licence Creative Commons</i>.


Bien utiliser l'attribut alt


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

Citer en HTML, un guide complet

Ça n’a pas l’air évident à première vue, mais les éléments HTML sont générés en 3D. Alignés sur les axes des x et des y, les éléments peuvent en outre reposer sur l’axe des z, qui contrôle leur CSS dans la troisième dimension.



<figure role="group"><img src="/images/les_3_dimensions-compressor.jpeg" alt="les trois axes x, y et z"/></figure>

Les marges, les float et autres propriétés permettant de décaler un élément contrôlent la façon dont un élément est positionné sur les axes des x et des y. Mais seule la propriété CSS `z-index` permet de contrôler la façon dont il repose sur l’axe des z.

<h2>La propriété z-index</h2>

La propriété `z-index` spécifie deux choses&nbsp;:

- le [niveau d’empilement](/articles/comment-fonctionne-z-index/#niveau) de l’élément courant
- et si l’élément courant établit un nouveau [contexte d’empilement](/articles/comment-fonctionne-z-index/#contexte)

**La propriété ne s’applique qu’aux [éléments positionnés](/articles/le-positionnement-css/). Autrement dit, les éléments qui ont une `position` soit `relative`, soit `absolute`, soit `fixed`**.

La propriété `z-index` peut prendre trois valeurs&nbsp;:

<table class="specificTable">
  <thead>
    <tr>
      <th>Valeur</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>auto</code></td>
      <td>Fixe le niveau d’empilement à 0 et ne crée pas de nouveau contexte d’empilement</td>
    </tr>
    <tr>
      <td><code>&lt;integer&gt;</code></td>
      <td>Le niveau d’empilement est un nombre entier <strong>et</strong> un nouveau contexte d’empilement est créé</td>
    </tr>
    <tr>
      <td><code>inherit</code></td>
      <td>Le niveau d’empilement est hérité de l’élément parent, ce qui ne crée pas de nouveau contexte d’empilement</td>
    </tr>
  </tbody>
</table>

```
z-index: auto | <integer> | inherit
```

<h2 id="niveau">Niveau d’empilement</h2>

Le niveau d’empilement est la valeur attribuée à l’élément courant sur l’axe des z. Plus le nombre est élevé, plus l’élément se situe haut dans l’empilement et donc plus près de la surface de l’écran.



<figure role="group"><img src="/images/stacking_level-compressor.png" alt="4 niveaux d’empilement, de 1 en bas à 4 en haut"/></figure>

S’il n’est pas spécifié par la propriété `z-index`, le niveau d’empilement d’un élément est établi [en fonction de sa place dans le document](https://developer.mozilla.org/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index). Les éléments déclarés plus tard dans le document ont un niveau d’empilement plus élevé par défaut.

<h2>Calculer le niveau d’empilement</h2>

En plus du z-index spécifié, le niveau d’empilement est contrôlé par un certain nombre de facteurs. Les éléments sont empilés dans l’ordre suivant.

<table class="specificTable">
  <thead>
    <tr>
      <th>Position</th>
      <th>Description</th>
      <th>CSS</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 (en bas)</td>
      <td>L’élément qui crée le contexte d’empilement</td>
      <td><code>z-index: &lt;integer&gt;</code></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Éléments enfants ayant des niveaux d’empilement négatifs</td>
      <td><code>z-index: &lt;negative integer&gt;</code> <br> <code>position: relative | absolute | fixed</code></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Élément enfants dans le flux, pas en ligne, non positionnés</td>
      <td><code>display: /* not inline */</code> <br> <code>position: static</code></td>
    </tr>
    <tr>
      <td>4</td>
      <td>Éléments enfants flottants non positionnés</td>
      <td><code>float: left | right</code> <br> <code>position: static</code></td>
    </tr>
    <tr>
      <td>5</td>
      <td>Éléments enfants dans le flux, en ligne, non positionnés</td>
      <td><code>display: /* inline */</code> <br> <code>position: static</code></td>
    </tr>
    <tr>
      <td>6</td>
      <td>Éléments enfants avec niveau d’empilement égal à 0</td>
      <td><code>z-index: auto | 0</code> <br> <code>position: relative | absolute | fixed</code></td>
    </tr>
    <tr>
      <td>7 (en haut)</td>
      <td>Éléments enfants avec des niveaux d’empilement positifs</td>
      <td><code>z-index: &lt;positive integer&gt;</code> <br> <code>position: relative | absolute | fixed</code></td>
    </tr>
  </tbody>
</table>

<h2 id="contexte">Contexte d’empilement</h2>

Lorsque nous spécifions le niveau d’empilement d’un élément à l’aide de la propriété `z-index`, nous ne spécifions pas toujours le niveau d’empilement de l’élément par rapport à chaque autre élément de la page. **Le niveau d’empilement de l’élément est seulement défini par rapport à son contexte d’empilement**.

Cela peut conduire à des situations bizarres où un élément ayant un z-index plus élevé ne se retrouve pas au-dessus d’un élément ayant un z-index plus bas.

Le contexte d’empilement peut être expliqué à l’aide des règles suivantes.

<h3>1 - Le contexte d’empilement par défaut est l’élément racine</h3>

Le contexte d’empilement par défaut pour tout document HTML est l’élément racine `<html>`. C’est pourquoi, à moins qu’un nouveau contexte d’empilement ne soit créé, le niveau d’empilement d’un élément est par défaut en relation avec celui de tous les autres éléments de la page.

<h3>2 - Créez un nouveau contexte d’empilement avec la propriété z-index</h3>

Nous créons un nouveau contexte d’empilement en donnant une valeur au z-index d’un élément. Cela a pour effet, d’une part de donner ce niveau d’empilement à cet élément, d’autre part de créer un nouveau contexte d’empilement.

Le nouveau contexte d’empilement s’applique à tous les enfants de cet élément. Leurs niveaux d’empilement sont maintenant situés à l’intérieur de ce contexte d’empilement et non dans le contexte racine.

Dans l’exemple qui suit, `.foo` appartient au contexte d’empilement 1, alors que `.bar` appartient au contexte d’empilement 2.



<figure role="group"><img src="/images/stacking-context-compressor.png" alt="l’élément foo est dans le contexte racine, bar est au-dessus"/><meta itemprop="width" content="780"></figure>

<h3>3 - Les éléments ne peuvent pas être empilés au-dessus (ou en-dessous) du niveau de leur élément parent</h3>

Lorsque le niveau d’empilement de l’élément parent est défini, ses enfants ne peuvent pas être empilés au-dessus ou en-dessous de ce niveau (par rapport au contexte d’empilement de l’élément parent).

Dans l’exemple ci-dessous, même si `.bar` a un z-index plus élevé que `.baz`, il est toujours affiché en-dessous. Cela est dû au fait que dans le contexte d’empilement 1, `.bar` ne peut pas dépasser le niveau d’empilement 1.

```
.foo { z-index: 1; }
.bar { z-index: 1000; }
.baz { z-index: 2; }
```



<figure role="group"><img itemprop="url" src="/images/stacking-context-2-compressor.png" alt=""/></figure>

```
//HTML
<div class="foo">
  .foo
  <div class="bar">
    .bar
  </div>
</div>
<div class="baz">
  .baz
</div>
```

et le CSS :

```
body {
  background-color: rgb(230, 230, 230);
}
.foo {
  background-color: green;
  height: 300px;
  width: 500px;
  position: relative;
  z-index: 1;
}
.bar {
  background-color: blue;
  height: 200px;
  width: 200px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.baz {
  background-color: red;
  height: 250px;
  width: 300px;
  position: absolute;
  top: 150px;
  left: 400px;
  z-index: 2;
}
.foo,
.bar,
.baz {
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
}
```

Voir également :

- [Le contexte d'empilement](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) sur MDN
- [CSS isolation property](https://developer.mozilla.org/fr/docs/Web/CSS/isolation)

Comment fonctionne z-index

Comprendre WAI-ARIA, un guide complet

Contrôler l'affichage du texte

Dans l’arbre qui représente notre document, [chaque élément est une boîte rectangulaire](http://www.w3.org/TR/CSS2/box.html). Le modèle de boîte CSS décrit ces boîtes et leurs composants.

<h2>Les bases du modèle de boîte</h2>

Dans un document HTML, chaque boîte rectangulaire est constituée de quatre zones&nbsp;: la zone du contenu, celle du padding, celle de la bordure et celle de la marge.

Prenons un exemple.

```
//HTML
<div class="box">
  
  Lorem ipsum dolor sit amet.
  
</div>
```

Donnons un style à cette boîte :

```
//CSS
.box {
  width: 300px;
  height: 300px;

  padding: 50px; /* padding area */
  margin: 50px; /* margin area */
  border: 50px solid grey; /* border area */
}
```

<h3>La zone du contenu</h3>

La zone du contenu est la partie occupée par le contenu de l’élément HTML. Cela peut être du texte, une image ou tout autre media. Le contour est appelé “contour du contenu” ou “contour intérieur”.

<figure role="group"><img src="/images/1-content-compressor.jpeg" alt="texte dans une boîte rectangulaire délimitée par un contour"/><figcaption>Content edge, le contour du contenu</figcaption></figure>

<h3>La zone du padding</h3>

La zone du padding est l’espace que nous spécifions entre le contenu et la bordure. Son contour est appelé “contour de padding”.

<figure role="group"><img src="/images/1-padding-compressor.jpeg" alt="texte dans une boîte rectangulaire délimitée par un contour et entourée par un padding lui-même délimité par un contour"/><figcaption>Padding edge, le contour de padding</figcaption></figure>

<h3>La zone de bordure</h3>

La zone de bordure est constituée par l’épaisseur de la bordure. Son contour est appelé “contour de bordure”.

<figure role="group"><img src="/images/1-border-compressor.jpeg" alt=""/><figcaption>Border edge, le contour de bordure</figcaption></figure>

<h3>La zone de marge</h3>

La zone de marge est l’espace situé en dehors de la bordure. Bien que ne faisant pas strictement partie de l’élément lui-même, elle est prise en compte lorsque nous considérons l’espace occupé par l’élément dans la page. Son contour est appelé “contour de marge” ou “contour extérieur”.

<figure role="group"><img src="/images/1-margin-compressor.jpeg" alt=""/><figcaption>Margin edge, le contour de marge</figcaption></figure>

Pour [les éléments de niveau block](/articles/la-difference-entre-block-et-inline/), nous pouvons contrôler la hauteur et la largeur des boîtes rectangulaires avec les propriétés CSS `height` et `width`. Cependant, vu le nombre de zones pour chaque élément, nous devons spécifier (ou calculer) ce que nous entendons par “largeur” et “hauteur” de l’élement. C’est ici qu’intervient la propriété `box-sizing`.

<h2>La propriété box-sizing</h2>

La propriété box-sizing définit lequel parmi les quatre contours nous utilisons pour déterminer la largeur et la hauteur de notre élément. Selon la zone que nous spécifions, la zone de contenu pourra être ajustée.

La propriété `box-sizing` accepte quatre valeurs, `content-box`, `padding-box`, `border-box` et `inherit`. Pour illustrer les différences entre chacune, appliquons-les à notre exemple de `.box`.

<h3>content-box</h3>

<mark>largeur = zone du contenu</mark>

C’est la valeur par défaut. Elle définit la largeur de l’élément, dans notre cas 300px, comme étant égale à la largeur de la zone de contenu. L’épaisseur du padding et de la bordure font que l’élément est globalement plus large que 300px. La largeur de l’élément (au sens strict) est maintenant de 500px et l’espace occupé total est de 600px en comptant la marge.

<figure role="group"><img src="/images/2-content-compressor.jpeg" alt=""/></figure>

<h3>padding-box</h3>

<mark>largeur = zone du contenu + zone de padding</mark>

Cette valeur intègre l’épaisseur du padding dans le calcul de la largeur de l’élément. La zone de contenu est ajustée à 200px de large pour y arriver.

<figure role="group"><img src="/images/2-padding-compressor.jpeg" alt=""/></figure>

Remarque : Cette valeur est [uniquement supportée par Firefox](http://caniuse.com/#feat=css3-boxsizing), car elle a été supprimée de la spécification. Les autres navigateurs utiliseront la valeur par défaut, content-box, si vous utilisez padding-box.

<h3>border-box</h3>

<mark>largeur = zone du contenu + zone de padding + zone de bordure</mark>

Cette valeur intègre à la fois la bordure et le padding dans le calcul de la largeur de l’élément. Dans notre exemple, la largeur de la zone de contenu est maintenant réduite à 100px.

<figure role="group"><img src="/images/2-border-compressor.jpeg" alt=""/></figure>

<h3>inherit</h3>

Cette valeur donne au box-sizing de l’élément la valeur du box-sizing de son élément parent.

<h2>Contrôler le modèle de boîte</h2>

La méthode de dimensionnement de la boîte que vous utiliserez dépendra de la façon dont vous préférez concevoir votre élément. La plupart des gens, y compris moi-même, préfèrent utiliser la valeur `border-box` qui est la façon la plus logique de définir les dimensions de l’élément.

Pour écraser la valeur par défaut `content-box`, j’utilise ce reset recommandé par [Paul Irish](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) dans mon fichier reset.css.

```
html {
  /* Set border-box as the global default */
  box-sizing: border-box;
}

*, *:before, *:after {
  /* Allow each element to override */
  box-sizing: inherit;
}
```

Contrôler le modèle de boîte

Créer des sphères en CSS

Créer des systèmes de menu accessibles


Les cubes CSS sont une bonne démonstration de l’évolution de CSS ces dernières années, depuis les simples directives relatives aux couleurs et aux dimensions du début jusqu’au langage actuel nous permettant de créer des visuels profonds et créatifs. Ajoutez-y l’animation et vous avez un travail abouti.

Jusqu’à présent, les tutoriels que j’ai trouvés pour créer des cubes en CSS sont longs et mélangent un peu tout, alors j’ai décidé d’écrire cet article qui vous donnera les infos basiques pour créer ce cube. Pour l’idée, je me suis basé sur cette belle réalisation de Mircea Georgescu&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/mirceageorgescu/pen/roblc/">
  CSS only spinning cubes</a> by Mircea Georgescu <a href="https://codepen.io">CodePen</a></span>
</div>

**[Voir la démo de David Walsh](https://davidwalsh.name/demo/css-cube.php)**

## Le HTML

L’élément cube, qui est un container, sera lui-même enveloppé dans une autre `div`.

```
//HTML
<div class="wrap">
	<div class="cube">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</div>
```

Chaque face du cube aura son propre élément. Comme vous pouvez l’imaginer, CSS va faire un travail de fou pour le disposer comme il faut.

## Le CSS

Procédons pas à pas, en prenant chaque élément significatif. Le premier élément à avoir du sens est le container de l’animation —&nbsp;il fournira une [perspective CSS](https://developer.mozilla.org/fr/docs/Web/CSS/perspective) pour l’élément en 3D&nbsp;:

```
.wrap {
	perspective: 800px;
	perspective-origin: 50% 100px;
}
```

La perspective en CSS est [très bien expliquée par MDN](https://developer.mozilla.org/fr/docs/Web/CSS/perspective), je ne répèterai pas leur présentation, mais pour mieux comprendre la perspective, je vous recommande de jouer avec les valeurs de la propriété `perspective` et de voir comment cela affecte la démo. Passons maintenant au container du cube qui contiendra toutes les faces&nbsp;:

```
.cube {
	position: relative;
	width: 200px;
	transform-style: preserve-3d;
}
```

Le cube aura 200px de large, il aura un positionnement relatif de façon à ce que les faces positionnées absolument restent dans les limites. Nous allons aussi utiliser `preserve-3d` pour que notre élément reste en 3D. Avant d’entrer dans le détail des règles relatives aux faces, nous appliquons quelques styles généraux à chaque face&nbsp;:

```
.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
}
```

Maintenant que nous avons déterminé la position et les dimensions des faces, nous pouvons ajouter les transformations des faces individuelles&nbsp;:

```
.back {
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
	transform: translateZ(100px);
}
```

Les valeurs de `rotateY` font pivoter les faces pour montrer le texte à l’angle voulu, tandis que le `translateZ` déplace les éléments d’avant en arrière à l’intérieur de l’empilement. `translateY` est peut-être encore confus pour vous, mais considérez qu’il permet d’élever ou d’abaisser une face pour montrer l’effet 3D à travers les panneaux transparents. Chaque face a ses propres réglages de translation qui la place au bon endroit, là encore je vous conseille de jouer avec ces valeurs pour voir à quoi cela correspond pour chacune.

**[Voir la démo](https://davidwalsh.name/demo/css-cube.php)**

## Rotation horizontale du cube

Évidemment, à quoi servent tous ces éléments 3D s’il n’y a pas d’animation&nbsp;? Réponse&nbsp;: à rien. Alors, voici les étapes qu’il nous reste à franchir pour animer notre cube horizontalement&nbsp;:

```
@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

.cube {
	animation: spin 5s infinite linear;
}
```

Sans doute plus simple que vous ne l’imaginiez, pas vrai&nbsp;? Le texte apparaît comme il faut grâce à la rotation que nous avons implémentée au départ, et j’ai utilisé une animation keyframe au cas où nous voudrions ajouter des choses plus sexy à l’avenir.

## Rotation verticale du cube

Pour faire tourner le cube verticalement, il suffit de changer l’animation en prenant l’axe des Y, pas vrai&nbsp;? Eh bien, malheureusement non. Les panneaux, tels qu’ils sont actuellement, montreraient le texte à l’envers dans certains cas, donc il nous faut revoir la rotation de certains éléments.

```
@keyframes spin-vertical {
	from { transform: rotateX(0); }
	to { transform: rotateX(-360deg); }
}

.cube-wrap.vertical .cube {
	margin: 0 auto; /* keeps the cube centered */

	transform-origin: 0 100px;
	animation: spin-vertical 5s infinite linear;
}

.cube-wrap.vertical .top {
	transform: rotateX(-270deg) translateY(-100px);
}

.cube-wrap.vertical .back {
	transform: translateZ(-100px) rotateX(180deg);
}

.cube-wrap.vertical .bottom {
	transform: rotateX(-90deg) translateY(100px);
}
```

...et il nous faut bien sûr changer l’animation.

## Aplatir le cube

Pour supprimer l’aspect 3D du cube et simplement afficher un bloc à chaque fois, supprimez la perspective et l’origine du container&nbsp;:

```
.wrap {
	/* suppression de la perspective */
	perspective: none;
	perspective-origin: 0 0;
}
```

Maintenant, seule une face s’affiche.

**[Voir la démo](https://davidwalsh.name/demo/css-cube.php)**

J’espère que cet article a suffisamment simplifié la façon dont un cube 3D est constitué en CSS et qu’il vous aura donné envie de créer les vôtres. Et ne vous découragez pas si vous rencontrez des problèmes, ça m’est arrivé également&nbsp;! J’espère voir bientôt ce que vous aurez inventé&nbsp;!


Créer un cube en CSS

Il existe quatre valeurs applicables (en théorie) à n’importe quelle propriété CSS. Ce sont les valeurs explicites par défaut —&nbsp;`initial`, `inherit`, `unset` et `revert`. Ces valeurs nous permettent de donner des valeurs par défaut avec nuance. Même si elles ne sont pas universellement supportées, il est utile de les connaître et de comprendre leurs différences.

<h2>Initial</h2>

La valeur `initial` est la valeur par défaut de la propriété, telle qu’elle est définie par la [spécification CSS officielle](https://www.w3.org/TR/CSS/). Par exemple pour un élément `<p>`, `text-align` est `left` et `display` est `inline`.

```
//HTML
<p style="text-align: initial;
          display: initial;
          background-color: rgba(255,219,58, 0.3)">
  Hello, world!
</p>
```



<figure><img src="/images/initial-compressor.png" alt=""/></figure>

Compatibilité navigateurs : [La compatibilité](http://caniuse.com/#feat=css-initial-value) est excellente, à l’exception d’IE et Opera Mini.

<h2>Inherit</h2>

La valeur `inherit` représente la valeur prise par le parent immédiat de l’élément HTML pour la même propriété.

```
<div style="border: 2px solid plum;">
  <div style="border: inherit; background-color: rgba(255,219,58, 0.3);">
      Hello, world!
  </div>
</div>
```



<figure><img src="/images/inherit-1-compressor.png" alt="La div intérieure hérite du style de la div parent"/></figure>

Si la propriété n’est pas explicitement définie pour l’élément parent, c’est le comportement de `revert` qui se produira. CSS ne remontera pas dans l’arbre des éléments parents pour trouver une valeur explicitement définie pour cette propriété.

```
<div style="border: 2px solid plum;">
  <div>
    <div style="border: inherit; background-color: rgba(255,219,58, 0.3);">
           Hello, world!
    </div>
  </div>
</div>
```



<figure><img src="/images/inherit-2-compressor.png" alt="La div enfant n’hérite pas de son grand-parent"/></figure>

<h2>Unset</h2>

La valeur `unset` est une sorte de mélange de `initial` et `inherit`.

Certaines propriétés, si elles ne sont pas définies explicitement, prendront pour valeur par défaut `inherit`. Par exemple, si nous définissons la `color` d’un élément, elle s’applique à tous les éléments enfants par défaut. Par contre, d’autres propriétés, telles que `border`, n’héritent pas par défaut.

```
<div style="border: 2px solid plum; color: cornflowerblue;">
  <div style="background-color: rgb(200, 200, 200)">
    Hello, world
  </div>
</div>
```



<figure role="group"><img src="/images/unset-compressor.png" alt=""/><figcaption>La propriété color est héritée, mais pas la propriété border</figcaption></figure>

Compatibilité navigateurs : [La compatibilité](http://caniuse.com/#feat=css-unset-value) est bonne, à l’exception d’IE, iOS Safari et Opera Mini.

<h2>Revert</h2>

La valeur `revert`, autrefois appelée `default`, représente toute valeur que prendrait la propriété si aucune valeur ne lui était donnée.

Si aucune valeur n’est donnée à une propriété dans la feuille de style de l’auteur (les styles que nous appliquons en tant qu’auteurs), voici les étapes suivies par le navigateur pour trouver une valeur&nbsp;:

1. Vérifier s’il existe des [styles définis par l’utilisateur](http://www.kloh.ch/le-pouvoir-des-feuilles-de-style-utilisateur-143)
2. Si rien n’est trouvé, vérifier la feuille de style user agent (styles définis par le navigateur)
3. Si rien n’est trouvé, appliquer l’équivalent de `unset`

Par exemple, un style fréquemment ajouté aux éléments `<div>` par les feuilles de style user agent est `display: block;` même si la valeur initiale de `display` est `inline`. Voici ce qui se passe quand `revert` est utilisé —&nbsp;et la comparaison avec `initial`.

```
<div style="display: revert;
            background-color: rgba(255,219,58, 0.3)">
  Hello, world! (revert)
</div>
<div style="display: initial;
            background-color: rgba(255,219,58, 0.3)">
  Hello, world! (initial)
</div>
```



<figure><img src="/images/revert-compressor.png" alt="la div revert est affichée en mode bloc, la div initial est affichée en mode inline"/></figure>

Compatibilité : pour une information à jour à la lecture de cet article, [consultez Can I Use](http://caniuse.com/#feat=css-revert-value).

CSS Initial, Inherit, Unset et Revert

[Aaron Gustafson](https://twitter.com/AaronGustafson) a récemment envoyé [un tweet](https://twitter.com/AaronGustafson/status/788073583528538112) à [Indiegogo](https://www.indiegogo.com/) dans lequel il faisait remarquer que leurs pages de commandes n'étaient pas utilisables une fois imprimées.



<figure><img src="/images/aaron_tweet.png" alt="impression toute pourrie d'une page de formulaire de indiegogo"/></figure>

Ce message m'a fait prendre conscience qu'il y avait un bail que je n'avais pas optimisé une page pour l'impression (ni même pensé à vérifier).  
Peut-être est-ce dû à mon obsession que tout fonctionne parfaitement pour toutes les formes et dimensions d'écrans, peut-être au fait que j'imprime rarement des pages web, le fait est que j'avais complètement oublié les feuilles de style d'impression (print style sheets) et... c'est pas bien.

Il est important d'optimiser nos pages web pour l'impression papier si nous souhaitons que nos sites soient le plus accessibles possible, quel que soit le medium. Nous ne devrions pas faire [trop de suppositions](https://adactio.com/journal/11409) quant à nos utilisateurs et à leur comportement. Les gens continuent d'imprimer les pages web. Pensez par exemple aux articles de journaux ou de blogs, aux recettes de cuisine, aux informations de contact, aux plans, aux sites immobiliers... Quelqu'un quelque part essaiera un jour d'imprimer une de vos pages.

<blockquote cite="/auteurs/heydon-pickering"><p>J'ai laissé tomber les imprimantes il y a longtemps parce qu'elles tombaient toujours en panne après 10 minutes. Mais tout le monde n'est pas comme moi...</p>
<p><cite><a href="/auteurs/heydon-pickering">Heydon Pickering</a> (Inclusive Design Patterns)</cite></p></blockquote>

Si vous êtes dans la même situation que moi, j'espère que cet article vous aidera à remettre les choses en place. Et si vous n'avez pas encore optimisé vos pages pour l'impression avec CSS, les conseils qui suivent vont vous y aider.

## 1. Intégrer les styles d'impression

La meilleure façon de procéder est d'intégrer les styles liés à l'impression dans votre CSS, via une règle `@media`.

```css
body {
  font-size: 18px;
}
@media print {
  /* les styles d'impression commencent ici */
  body {
    font-size: 28px;
  }
}
```

Une autre façon de faire consiste à intégrer les styles dans votre HTML, mais la requête supplémentaire n'est pas une bonne pratique en termes de performances.

```html
<link media="print" href="print.css" />
```

## 2. Tester

Inutile d'imprimer une page à chaque petit changement.
Selon votre navigateur, vous pouvez exporter la page au format PDF, faire une prévisualisation de la page ou même débugger directement dans le navigateur.

### Émulation d'impression dans Firefox

Pour cette dernière option, sur Firefox il suffit d'ouvrir la barre d'outils développeurs (Developper Toolbar Shift + F2 ou Tools > Web Developper > Developper Toolbar) et d'entrer media emulate print dans le champ de saisie situé en bas de la fenêtre du navigateur, et de faire enter. L'onglet actif se comportera comme si le media type était print jusqu'à ce que vous fermiez la page ou que vous la rafraîchissiez.

### Émulation d'impression dans Chrome

Dans Chrome, ouvrez DevTools (CMD + Opt + I (macOS) ou Ctrl + Shift + I (Windows) ou View > Developer > Developer Tools) puis le menu déroulant de la console (Esc), dans "more tools" choisir "Rendering", choisir Emulate CSS Media et "Print".



<figure><img src="/images/chrome.png" alt="émulation d'impression dans chrome"/></figure>

## 3. Unités absolues

Les unités absolues sont mauvaises pour l'affichage à l'écran mais excellentes pour l'impression. Dans les feuilles de style d'impression il est recommandé d'utiliser les unités absolues telles que cm, mm, in, pt ou pc.

```css
section {
  margin-bottom: 2cm;
}
```

## 4. Règles spécifiques

La règle `@page` permet de définir des propriétés spécifiques à la page, telles que les dimensions, l'orientation et les marges. C'est très pratique si par exemple vous souhaitez que toutes vos pages aient une certaine marge :

```css
@media print {
  @page {
    margin: 1cm;
  }
}
```

La règle `@page` est définie dans le module [Paged Media](https://www.w3.org/TR/css-page-3/), où l'on trouve des choses passionnantes, comme la possibilité de sélectionner la première page imprimée ou les pages vides, de positionner des éléments dans les coins de pages et [bien d'autres choses](https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/) encore.
Vous pouvez même l'utiliser pour [réaliser des livres](https://alistapart.com/article/building-books-with-css3/).

## Contrôler les sauts de pages

Les pages imprimées n'étant pas infinies, contrairement aux pages web, leur contenu devra le cas échéant donner lieu à un saut de page. Nous disposons de 5 propriétés pour contrôler ce qui se passe dans ce cas.

### Le saut de page se situe avant un élément

Si nous voulons qu'un certain élément se trouve toujours au début d'une page, nous pouvons forcer un saut de page avec `page-break-before`.

```css
section {
  page-break-before: always;
}
```

Voir (en français) le détail de la propriété sur MDN : [page-break-before](https://developer.mozilla.org/fr/docs/Web/CSS/page-break-before).

### Le saut de page se situe après un élément

`page-break-after` nous permet de forcer ou d'éviter un saut de page après un élément.

```css
h2 {
  page-break-after: always;
}
```

Voir le détail de la propriété sur MDN : [page-break-after](https://developer.mozilla.org/fr/docs/Web/CSS/page-break-after).

### Le saut de page se situe à l'intérieur d'un élément

Cette propriété est intéressante si vous voulez éviter qu'un élément ne soit partagé entre deux pages.

```css
ul {
  page-break-inside: avoid;
}
```

Voir le détail de la propriété sur MDN : [page-break-inside](https://developer.mozilla.org/fr/docs/Web/CSS/page-break-inside).

## Veuves et orphelines

Parfois vous n'aurez pas besoin de forcer un saut de page, mais au moins de contrôler la façon dont plusieurs lignes sont affichées sur la page courante ou sur la suivante.  
Par exemple, si la dernière ligne d'un paragraphe ne tient pas sur la page, on imprimera deux lignes sur la page suivante, même si l'avant-dernière ligne n'était pas concernée. C'est parce que la propriété qui contrôle ce comportement — widows — est réglée par défaut sur la valeur 2. Nous pouvons la modifier.

```css
p {
  widows: 4;
}
```

Si c'est l'inverse et que seule une ligne tient sur la page courante, tout le paragraphe pourra être imprimé sur la page suivante. la propriété responsable est orphans et sa valeur par défaut est 2 également.

```css
p {
  orphans: 3;
}
```

Le code ci-dessus signifie que au moins 3 lignes doivent tenir sur la page courante, sinon le paragraphe entier sera imprimé sur la page suivante.

Attention, vérifiez bien le résultat dans votre navigateur, tous les navigateurs n'ont pas le même comportement. J'ai créé un [codepen](https://codepen.io/matuzo/pen/oYvBjN) avec quelques exemples, et une [version debug](https://cdpn.io/pen/debug/oYvBjN) pour tester plus facilement). Les propriétés et valeurs [ne fonctionnent pas toutes dans tous les navigateurs](https://caniuse.com/css-page-break), vérifiez vos styles d'impression avec plusieurs navigateurs.

NdT : pour plus d'infos sur les veuves et les orphelines, vous pouvez consulter l'article de Dudley Storey traduit dans La Cascade : [CSS, aider la veuve & l'orpheline](/articles/css-aider-la-veuve-et-lorphelin).

## 6. Remettre les compteurs à zéro

Il peut être souhaitable de remettre certains styles "à zéro" pour l'impression, comme `background-color`, `box-shadow` ou `color` par exemple. Voici un extrait du CSS de HTML5-boilerplate pour les styles d'impression :

```css
*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
```

Les feuilles de style d'impression sont un des rares exemples où il est tout à fait correct d'utiliser `!important`.

## 7. Supprimer le contenu inutile

Pour éviter un gaspillage d'encre et de papier, il est important de supprimer ce qui n'a pas de sens à l'impression, comme certains aspects de pure présentation, les publicités, la navigation, etc. avec `display: none`.

Vous pourriez même ne montrer que le contenu principal et cacher tout le reste :

```css
body > *:not(main) {
  display: none;
}
```

## 8. Révéler les URLs des liens

Les liens imprimés ne servent à rien si l'on ne sait pas où ils mènent. Il est très facile d'afficher la cible d'un lien à côté du texte.

```css
a[href]:after {
  content: ' (' attr(href) ')';
}
```

Bien sûr, cela affichera les liens relatifs, les liens absolus vers votre site, les ancres, etc... Peut-être qu'un truc comme ça fera mieux l'affaire :

```css
a[href^='http']:not([href*='monsiteweb.com']):after {
  content: ' (' attr(href) ')';
}
```

Oui, je sais... Bon, ces lignes signifient "afficher la valeur de l'attribut `href` à côté de chaque lien contenant un attribut `href` commençant par http mais n'ayant pas pour valeur monsiteweb.com.

## 9. Révéler les abréviations

Rappel : Les abréviations devraient être enveloppées dans un élément `<abbr>` et le nom entier inclus dans l'attribut `title`.

NdT : voir le détail.
Les mettre en clair à l'impression peut être intéressant :

```css
abbr[title]:after {
  content: ' (' attr(title) ')';
}
```

## 10. Forcer l'impression du background

Normalement les navigateurs n'imprimeront pas les couleurs et images de background si vous ne le leur demandez pas. Vous pouvez forcer l'impression via la propriété non encore standardisée `print-color-adjust`&nbsp;:

```css
header {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
```

## 11. Media Queries

Si vous avez inclus des media queries comme celle qui suit, soyez conscient que les règles CSS de cette media query ne s'appliqueront pas à la feuille de style d'impression.

```css
@media screen and (min-width: 48em) {
  /* media type limité à écran */
}
```

Et pourquoi donc, direz-vous ? Eh bien parce que les règles CSS ne s'appliquent que si la `min-width` est de `48em` et le media-type est `screen`. Si vous supprimez le mot-clé `screen`, la media query est seulement limitée à `min-width`.

```css
@media (min-width: 48em) {
  /* tous les media types */
}
```

## 12. Imprimer des cartes

Les versions actuelles de Firefox et Chrome peuvent imprimer des cartes mais pas Safari. Certains services fournissent des cartes statiques que vous pouvez utiliser à la place.

```css
.map {
  width: 400px;
  height: 300px;
  background-image: url('http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true');
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
```

## 13. QR Codes

Vous trouverez des astuces intéressantes dans [cet article de Smashing Magazine](https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/#print-qr-codes-for-easy-url-references). L'une d'elles consiste à fournir un QR code pour les pages imprimées de façon à éviter aux utilisateurs d'avoir à taper l'URL pour retourner à la version live de la page.

### Bonus 1 : Imprimer des pages non-optimisées

Pendant mes recherches, j'ai trouvé un outil intéressant, créé entre autres par Chris Coyier, pour l'impression de pages non-optimisées. Avec [Printlimitator](https://css-tricks.github.io/The-Printliminator/) vous pouvez supprimer des éléments en cliquant dessus.  
Il y a [une démo sur YouTube](https://www.youtube.com/watch?v=Dt8hpqEIL1c) et le projet est sur [Github](https://github.com/CSS-Tricks/The-Printliminator).

### Bonus 2 : Gutenberg

Si vous aimez les frameworks, vous pouvez essayer [Gutenberg](https://github.com/BafS/Gutenberg), il vous facilitera la vie pour tout ce qui concerne l'impression.

### Bonus 3 : Hartija

Un autre framework pour les feuilles de style d'impression, par Vladimir Carrer, appelé [Hartija](https://github.com/vladocar/Hartija---CSS-Print-Framework).

Et voilà !

---

#### Ressources complémentaires en anglais

- [CSS Tips and Tricks: Add External URLs to Print Stylesheets](https://www.youtube.com/watch?v=jF-OQ-BrIAM), vidéo par Corey Schafer
- [Tips and tricks for print style sheets](https://www.smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/)
- [Faster way to develop and test print stylesheets - Stackoverflow](https://stackoverflow.com/questions/9519556/faster-way-to-develop-and-test-print-stylesheets-avoid-print-preview-every-time)
- [Designing For Print With CSS](https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/), par Rachel Andrews

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

- [Faire une feuille de style print pour l'impression](https://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html), par Alsacréations

NdT : Cet article a été mis à jour en 2016, 2018 et 2019.

CSS : n'oubliez pas l'impression papier!


CSS est comme la langue d’Ésope, la meilleure et la pire des choses. Elle fonctionne généralement bien, mais elle présente des inconvénients qui amènent parfois certains à se demander [si nous avons vraiment encore besoin de CSS](https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/). Je les rejoins quelquefois —&nbsp;mais je pense également que la cascade n’est pas la seule responsable et que nous devons souvent nous battre contre la spécifité. Il est difficile de ne pas rencontrer de problèmes de spécificité, à peu près aussi difficile que de prononcer le mot.

Dans cet article, je vais essayer de montrer que la cascade peut être votre amie et nous allons voir quelques façons de réduire le besoin d’écraser des styles et donc de réduire les problèmes de spécificité.

<h2>Astuce 1 :</h2>

> _Pour chaque propriété CSS que vous écrivez, essayez de la remonter aussi haut que possible vers la racine de l’arbre. En d’autres termes&nbsp;:_ back to the :root.

Par exemple, si notre site a une side bar et que nous voulons y insérer une petite bio. Le balisage ressemblerait à ceci&nbsp;:

```HTML
  <body>
    <main class=“Posts”>
    <aside class=“SideBar”>
      <nav class=“Nav”>
      <p class=“Bio”>
```

...et le CSS :

```CSS
  Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
  }
```

Ça pourrait marcher. Mais si nous regardons la `nav` qui est déjà dans la side bar, il y a des chances que certains des styles soient identiques, dans notre cas, ce serait `font-size` et `color`. Donc, retirons ces propriétés de `nav` et de `.Bio` et ajoutons-les à l’élément parent, la side bar.

```CSS
  .SideBar {
    font-size: .8em;
    color: #888;
  }
```

De plus, il se trouve que cette `line-height: 1.5;` est déjà définie pour nos articles. Donc, puisqu’il semble que toute la page utilise la même hauteur de ligne, retirons-la des éléments Bio et Post et remontons-la au niveau du nœud racine.

```CSS
  :root {
    line-height: 1.5;
  }
```

C’est du simple bon sens direz-vous, mais il est souvent tentant de styler un nouvel élément sans même regarder si les éléments frères définissent la même chose. Cela se produit également lorsqu’on fait un copier/coller de styles d’une autre section ou lorsqu’on récupère des bouts de code trouvés sur le web. La refactorisation prendra un tout petit peu plus de temps mais votre CSS sera bien plus sain.

<figure role="group"><img src="/images/roots-1.png" alt="image d’un arbre divisé en deux, d’un côté chaque feuille est stylée, de l’autre uniquement les branches, pour le même effet"/><figcaption>Stylez les branches, pas chaque feuille !</figcaption></figure>

<h2>Astuce 2 :</h2>

> _Certaines propriétés doivent être stylées de manière combinée_.

Un bon exemple de cela est le combo `color` et `background-color`. Sauf s’il ne s’agit que d’ajustements mineurs, c’est généralement une bonne idée de les modifier ensemble. Lorsqu’on ajoute une couleur d’arrière-plan à un élément HTML, il peut ne contenir aucun texte, toutefois il est très probable qu’un élément enfant en contiendra. Par conséquent, si nous définissons les couleurs d’arrière-plan et de premier plan ensemble, nous pouvons être sûrs que nous n’aurons jamais de problèmes de lisibilité ou de contraste. De plus, si nous changeons la couleur d’arrière-plan, nous n’avons pas à faire la chasse à toutes les couleurs de texte qui doivent être modifiées, elles sont là, au même endroit.

<figure role="group"><img src="/images/roots-2.png" alt=""/><figcaption>Capture d’écran de <a href="http://jxnblk.com/colorable/demos/text/">Colorable</a></figcaption></figure>

<h2>Astuce 3 :</h2>

> _Utilisez des valeurs “dynamiques”, comme `currentColor` et `em`_.

Parfois il est plus malin d’utiliser la `color` du texte pour d’autre propriétés. Par exemple, pour `border`, pour `box-shadow` ou pour le `fill` des icônes [SVG](/tags/svg/). Au lieu de les définir directement, vous pouvez [utiliser currentColor](/articles/la-premiere-variable-css-currentcolor) et ce sera la même propriété `color`. Et comme `color` hérite par défaut, vous pourriez même n’avoir à le changer qu’à un seul endroit.

De la même manière, les `em` sont mappés à `font-size` et vous permettent de redimensionner ce que vous voulez, simplement en modifiant la font size de :root.

<figure><img src="/images/cssconf-size.gif" alt=""/></figure>

<h2>Astuce 4 :</h2>

> _Écrasez les styles user-agent pour qu’ils héritent de leurs parents_.

Des contrôles de formulaires comme les boutons, ou les inputs sont stylés par le navigateur d’une certaine façon. On peut les écraser avec `inherit` pour qu’ils s’adaptent à votre style.

```CSS
  button,
  input,
  select,
  textarea {
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    font-weight: inherit;
  }
```

L’exemple ci-dessus est repris de [sanitize.css](https://github.com/csstools/sanitize.css/). [normalize.css](https://necolas.github.io/normalize.css/) fait la même chose, donc si vous avez l’un des deux, vous êtes couverts.

Vous pouvez également essayer de restyler d’autres inputs comme des curseurs, des boutons radio, des cases à cocher, etc. Et comme nous l’avons vu ci-dessus, en utilisant `currentColor` on leur donne automatiquement la propriété `color`. On peut les faire passer d’un thème lumineux à un thème sombre sans avoir rien d’autre à changer.

<figure><img src="/images/cssconf-color3.gif" alt=""/></figure>

<h2>Conclusion</h2>

Tout cela est très cool, mais à qui est-ce que cela s’adresse&nbsp;? Bien sûr, ce n’est pas adapté à toutes les situations. Je dirais que les sites web simples en seront les premiers bénéficiaires. Mais même lorsqu’on utilise un préprocesseur, ça ne fait pas de mal de réduire encore un peu la quantité de CSS produite, voire d’éviter de créer certaines variables.

Cela s’accorde bien aussi à l’approche “une classe pour chaque objectif” de [Tachyons](http://tachyons.io/). Cela peut aider à réduire la complexité et le nombre de classes nécessaires.

Un autre intérêt pourrait apparaître avec les propriétés personnalisés, autrement dit les variables CSS. Contrairement aux variables utilisées dans les préprocesseur, lorsqu’on écrase une propriété personnalisée cela n’affecte que la portée (_scope_) du sélecteur courant. Donc, dans un certain sens ce seront des “variables en cascade”. Mais il faut que je voie ça de plus près en pratique.

PS&nbsp;: il est possible que cet article ait été inspiré par [ce tweet](https://twitter.com/kaelig/status/616902099457175552) de [Kaelig](https://twitter.com/kaelig).

NdT: voyez également (comme toujours) [la page MDN](https://developer.mozilla.org/fr/docs/Web/CSS/:root).


CSS :root, le retour aux racines

## Introduction

Les éléments HTML peuvent être dotés d'attributs qui servent à tout, depuis l'ajout d'informations sur l'accessibilité jusqu'au contrôle stylistique.

```html


<div class="names" role="region" aria-label="Names"></div>
```

Ce qui est _déconseillé_, c'est d'_inventer_ vos propres attributs, ou de réaffecter des attributs existants pour une fonctionnalité sans rapport.

```html

<div highlight="true"></div>


<div width="large"></div>
```

C'est pas bien, et pour des tas de raisons. Votre HTML devient invalide, ce qui peut ne pas avoir de conséquences négatives réelles, mais vous prive de ce sentiment rassurant et flou d'avoir un HTML valide. La raison la plus convaincante est que le **HTML est un langage vivant** et ce n'est pas parce que des attributs et des valeurs ne font rien aujourd'hui qu'ils ne feront rien demain.

Bonne nouvelle cependant : vous pouvez créer vos propres attributs. Il vous suffit de les préfixer avec `data-*` et ensuite vous êtes libre de faire ce qui vous plaît&nbsp;!

## Syntaxe

Il est très pratique de pouvoir créer nos propres attributs HTML et d'y placer nos propres informations. Et c'est possible&nbsp;! c'est même exactement ce que sont les **data attributes** ([attributs de données](https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes)). Ils sont comme ceci&nbsp;:

```html

<div data-foo></div>


<div data-size="large"></div>


<li data-prefix="Attention au HTML ici."></li>
<li>
  
  <aside data-some-long-attribute-name><aside></aside></aside>
</li>
```

Les data attributes sont souvent appelés attributs `data-*`, car ils sont toujours formatés de cette façon. Le mot `data`, puis un tiret `-`, puis un autre texte que vous pouvez inventer.

### Pouvez-vous utiliser l'attribut data seul ?

```html
<div data=""></div>
```

Cela ne va probablement pas faire de mal, mais vous n'obtiendrez pas l'API JavaScript que nous verrons plus tard dans ce guide. Vous vous créez essentiellement un attribut pour vous-même, ce qui, comme je l'ai mentionné dans l'introduction, est _déconseillé_.

#### Ce qu'il ne faut pas faire avec les data attributes

Stockez du contenu qui doit être accessible. Si le contenu doit être vu ou lu sur une page, ne le mettez pas seulement dans des data attributes, mais assurez-vous que ce contenu se trouve quelque part dans le contenu HTML.

```html

<div data-name="Chris Coyier"></div>


<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>
```

Voici plus d'informations sur le [masquage des choses](/articles/cacher-des-elements-avec-css).

## Stylisation avec des data attributes

CSS peut [sélectionner des éléments HTML sur la base d'attributs](https://css-tricks.com/almanac/selectors/a/attribute/) et de leurs valeurs.

```css
/* Sélectionner tout élément ayant cet attribut de données et cette valeur */
[data-size='large'] {
  padding: 2rem;
  font-size: 125%;
}

/* Vous pouvez l'étendre à un élément, une classe ou n'importe quoi d'autre */
button[data-type='download'] {
}
.card[data-pad='extra'] {
}
```

Cela peut être convaincant. Les principaux _hooks_ de style en HTML/CSS, ce sont les **classes**, et bien que les classes soient excellentes (elles ont une spécificité moyenne et de belles méthodes JavaScript via `classList`), un élément en est doté ou non, c'est l'un ou l'autre, (essentiellement _activé_ ou _désactivé_). Avec les attributs `data-*`, vous obtenez cette capacité d'activation/désactivation, **_et_** la possibilité de sélectionner en fonction de la valeur qu'il possède au même niveau de spécificité.

```css
/* Sélectionne si l'attribut est présent du tout */
[data-size] {
}

/* Sélectionne si l'attribut a une valeur particulière */
[data-state='open'],
[aria-expanded='true'] {
}

/* Sélecteur "Commence par", ce qui signifie que cela correspond à "3" ou à tout ce qui commence par 3, comme "3.14" */
[data-version^='3'] {
}

/* "Contient" signifie que la valeur contient la chaîne de caractères n'importe où à l'intérieur */
[data-company*='google'] {
}
```

### La spécificité des sélecteurs d'attributs

C'est exactement la même chose qu'une classe. Nous pensons souvent à la spécificité comme à une valeur en quatre parties&nbsp;:

style en ligne, IDs, classes/attributs, balises.

Ainsi, un sélecteur d'attribut seul est **0, 0, 1, 0**. Un sélecteur comme celui-ci&nbsp;:

```css
div.card[data-foo='bar'] {
}
```

... serait **0, 0, 2, 1** — le 2 est dû au fait qu'il y a une classe (`.card`) et un attribut (`[data-foo="bar"]`), et le 1 est dû au fait qu'il y a une balise (`div`).



<figure role="group"><img src="/images/specificity-selector.webp" alt="schéma montrant la spécificité : une div (spécificité = 1) avec une classe (specificité = 1) et un attribut de données avec une valeur (spécificité = 1)"/><figcaption>Illustration d'un sélecteur CSS incluant un attribut data.</figcaption></figure>

Les sélecteurs d'attributs ont moins de spécificité qu'un ID, plus qu'un élément/balise, et la même chose qu'une classe.

### Valeurs d'attributs insensibles à la casse

Au cas où vous auriez besoin de corriger d'éventuelles incohérences de capitalisation dans vos data attributes, le sélecteur d'attribut dispose d'une variante insensible à la casse pour cela.

```html

[data-state="open" i] { }
```

C'est le petit `i` à l'intérieur du sélecteur entre crochets.

### Utilisation visuelle des data attributes

CSS vous permet d'extraire la valeur de l'attribut de données et de l'afficher si nécessaire.

```css
/* <div data-emoji="✅"> */

[data-emoji]::before {
  content: attr(data-emoji); /* Retourne '✅' */
  margin-right: 5px;
}
```

### Exemple de cas d'utilisation du style

Vous pourriez utiliser des data attributes pour spécifier le nombre de colonnes que vous souhaitez pour un conteneur de grille.

```html
<div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_rNaEvgp" src="//codepen.io/chriscoyier/embed/rNaEvgp?height=500&amp;theme-id=light&amp;slug-hash=rNaEvgp&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="https://codepen.io/chriscoyier/pen/rNaEvgp">
  Data Attribute Based Columns</a> de chriscoyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Accéder aux data attributes en JavaScript

Comme tout autre attribut, vous pouvez accéder à la valeur avec la méthode générique `getAttribute`.

```js
let value = el.getAttribute('data-state')

// Vous pouvez également définir la valeur.
// Returns data-state="collapsed"
el.setAttribute('data-state', 'collapsed')
```

Mais les data attributes ont également leur propre API spéciale. Admettons que vous ayez un élément avec plusieurs data attributes (ce qui est tout à fait ok) :

```html
<span
  data-info="123"
  data-index="2"
  data-prefix="Dr. "
  data-emoji-icon="🏌️♀️"
></span>
```

Si vous avez une référence à cet élément, vous pouvez définir (_set_) et obtenir (_get_) les attributs comme suit :

```js
// GET
span.dataset.info // 123
span.dataset.index // 2

// SET
span.dataset.prefix = 'M. '
span.dataset.emojiIcon = '🎪'
```

Notez l'utilisation du camelCase dans la dernière ligne. Elle convertit automatiquement les attributs de style kebab en HTML, comme `data-this-little-piggy`, en style camelCase en JavaScript, comme `dataThisLittlePiggy`.

Cette API n'est sans doute pas aussi agréable que [`classList`](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) avec ses méthodes claires d'ajout, de suppression, de basculement (_toggle_) et de remplacement, mais c'est mieux que rien.

Vous avez également accès aux ensembles de données en ligne :

```html
<img src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
```

### Données JSON à l'intérieur des data attributes

```html
<ul>
  <li
    data-person='
    {
      "nom" : "Chris Coyier",
      "job" : "Personne Web"
    }
  '
  ></li>
</ul>
```

Hé, pourquoi pas ? Ce n'est qu'une chaîne de caractères et il est possible de la formater en [JSON](/articles/json-pour-les-debutants) valide (attention aux guillemets et autres). Vous pouvez extraire ces données et les parser selon vos besoins.

```js
const el = document.querySelector('li')

let json = el.dataset.person
let data = JSON.parse(json)

console.log(data.name) // Chris Coyier
console.log(data.job) // Personne Web
```

### Cas d'utilisation de JavaScript

Le concept est que vous pouvez utiliser les data attributes pour mettre dans le HTML des informations auxquelles JavaScript peut avoir besoin d'accéder pour faire certaines choses.

Un cas courant serait lié à la fonctionnalité de la base de données. Disons que vous avez un bouton "J'aime" :

```html
<button data-id="435432343">♡</button>
```

Ce bouton pourrait être doté d'un _click handler_ qui exécute une requête Ajax vers le serveur pour incrémenter le nombre de _j'aime_ dans une base de données à chaque clic. Il sait quel enregistrement mettre à jour car il l'obtient du data attribute.

### Spécifications

- [Sélecteurs niveau 4](https://drafts.csswg.org/selectors-4/#attribute-selectors) (projet)
- [Sélecteurs niveau 3](https://drafts.csswg.org/selectors-3/#attribute-selectors) (recommandé)
- [Sélecteurs de niveau 2](https://www.w3.org/TR/CSS2/selector.html#attribute-selectors), révision 1 (définition initiale)

Data attributes, guide complet

Des styles de listes créatifs


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)


[Emmet](http://emmet.io/), anciennement connu comme Zen Coding, est le plugin d'éditeur de texte qui vous fera gagner le plus de temps, ceci en transformant instantanément de simples abréviations en snippets de code complexes.

Si vous préférez regarder une vidéo (en anglais) plutôt que de lire, voici [un résumé de mes astuces préférées](http://www.youtube.com/watch?feature=player_embedded&v=sxW-V24MTXI). (NdT: et pour un article plus centré sur Emmet et CSS, consultez [un turbo dans votre CSS](/articles/emmet-un-turbo-dans-votre-css/)).

## Comment ça marche ?

Il faut bien l'admettre, écrire en HTML demande du temps, avec toutes ces balises, ces attributs, guillemets, parenthèses, etc. La plupart des éditeurs de texte proposent une complétion de code, qui est certes très utile, mais il reste encore beaucoup à taper. Emmet transforme de simples abréviations en code complexe.

## Abréviations HTML

### Initialiser

Commencer avec un nouveau document HTML prend moins d'une seconde. Il suffit de taper `!` ou `html:5` puis faire "tabulation" ou "enter" selon votre éditeur de texte (dans un document vierge préalablement enregistré avec une extension `.html` ) et vous verrez apparaître un doctype HTML5 structuré avec quelques éléments de base.

<figure><img src="/images/01initializers.gif" alt="exemple gif de transformation de raccourcis en code"/></figure>

- `html:5` ou `!` pour un doctype HTML5
- `html:xt` pour un doctype transitionnel XHTML
- `html:4s` pour un doctype strict HTML4

### Ajouter des classes, id, texte et attributs

La syntaxe d'Emmet pour décrire les éléments reprend les sélecteurs CSS, il est donc facile de s'y habituer. Essayez de combiner un nom d'élément (p.ex. `p` ) et un identifiant (p.ex. `p#description` ).

<figure><img src="/images/02classes_ids.gif" alt="exemple gif de transformation de p#foo en p id='foo' et p.foo en p class='foo'"/></figure>

Vous pouvez mixer classes et id, p.ex. `p.bar#foo` donnera&nbsp;:

    <p class="bar" id="foo"></p>

Voyons maintenant comment définir le contenu et les attributs de vos balises HTML. Pour le contenu on utilise des accolades, `h1{foo}` est transformé en&nbsp;:

    <h1>foo</h1>

Les attributs sont indiqués entre crochets, `a[href=#]` donnera&nbsp;:

    <a href="#"></a>

<figure><img src="/images/03texts_attrs.gif" alt="exemple gif de transformation de h1{foo} en h1 et le titre foo"/></figure>

### Emboîtements

En emboîtant nos abréviations, nous pouvons construire une page entière de code en n'écrivant qu'une seule ligne. L'opérateur "descendant" (child), représenté par `>` vous permet d'emboîter les éléments. L'opérateur sibling (pour les éléments de même niveau dans le DOM), représenté par `+` vous permet de placer les éléments les uns à côté des autres. Enfin, l'opérateur ascensionnel, représenté par `^` vous permet de remonter d'un niveau dans l'arbre.

<figure><img src="/images/04nesting.gif" alt="h1+h2 donnent deux éléments consécutifs, p>span donnent deux éléments emboîtés"/></figure>

Dans les exemples ci-dessus,

- `h1` et `h2` se suivent, j'utilise donc `+`
- `span` est enchâssé dans `p` , j'utilise donc `>`
- après avoir emboîté `span` dans `p` , je veux continuer à écrire mon code sur une seule ligne, je dois sortir de l'emboîtement, ce que je fais en utilisant `^`

### Regroupements

Pour profiter vraiment des emboîtements sans que votre code ne devienne une bouillie d'opérateurs, le mieux est de les regrouper - comme en mathématiques - en utilisant des parenthèses. Par exemple `(.foo>h1)+(.bar>h2)` est traduit ainsi&nbsp;:

    <div class="foo">

  		<h1></h1>
	</div>
	<div class="bar">
  		<h2></h2>
	</div>

<figure><img src="/images/05grouping.gif" alt="exemple gif de transformation des éléments complexes ci-dessus"/></figure>

### Noms d'éléments implicites

Pour déclarer un élément et une classe, il suffit de taper `div.item` ce qui génèrera `<div class="item"></div>`.

Autrefois, on pouvait omettre le nom d'élément pour un `div` , il n'y avait qu'à taper `.item` et cela générait `<div class="item"></div>`. Emmet est plus intelligent. Il va chercher le nom de l'élément parent à chaque fois que vous utilisez un nom d'élément implicite. Si vous déclarez `.item` à l'intérieur d'une `<ul>` , il génèrera `<li class="item"></li>` au lieu de `<div class="item"></div>`.

<figure><img src="/images/06implicit_tags.gif" alt="exemple gif de transformation des éléments ci-dessus, selon le contexte"/></figure>

Voici une liste de noms d'éléments implicites :

- `li` pour `ul` et `ol`
- `tr` pour `table` , `tbody` , `thead` et `tfoot`
- `td` pour `tr`
- `option` pour `select` et `optgroup`

### Multiplication

Vous pouvez choisir le nombre de fois qu'un élément doit apparaître, en utilisant l'opératuer `*`. Ainsi, `ul>li*3` est traduit par&nbsp;:

    <ul>

  		<li></li>
  		<li></li>
  		<li></li>
	</ul>

<figure><img src="/images/07multiplication.gif" alt="exemple gif de transformation des éléments ci-dessus ul et li"/></figure>

### Numérotation

Et si l'on voulait ajouter une numérotation ? Il suffit d'insérer l'opérateur `$` dans le nom de l'élément ou de l'attribut, ou dans la valeur de l'attribut, pour obtenir cette numérotation. Si vous tapez `ul>li.item$*3` , le résultat sera&nbsp;:

    <ul>

  		<li class="item1"></li>
  		<li class="item2"></li>
  		<li class="item3"></li>
	</ul>

<figure><img src="/images/08numbering.gif" alt="exemple gif de transformation des éléments ci-dessus ul et li numérotés"/></figure>

---

## Abréviations CSS

### Valeurs

Emmet vous aide également pour CSS. Vous pouvez injecter des valeurs directement dans des abréviations CSS. Imaginons que vous vouliez définir une largeur. Tapez `w100` et cela vous donnera&nbsp;:

    width: 100px;

<figure><img src="/images/09values.gif" alt="exemple gif de transformation des éléments margin, width, height"/></figure>

Il y a d'autres unités que les pixels. Tapez `h10p+m5e` et voici ce qui sera affiché&nbsp;:

    height: 10%;
    margin: 5em;

### Opérateurs additionnels

Vous connaissez déjà de nombreuses abréviations intuitives, telles que `@f` qui donne&nbsp;:

    @font-face {
      font-family:;
      src: url();
    }

Certaines propriétés, comme `background`, `background-image` , `border-radius` , `font` , `@font-face` , `text-outline` , `text-shadow` possèdent quelques options supplémentaires que vous pouvez activer en utilisant le signe `+`. Par exemple, `@f+` donnera&nbsp;:

    @font-face {
      font-family: 'FontName';
      src: url('FileName.eot');
      src: url('FileName.eot?#iefix') format('embedded-opentype'),
      url('FileName.woff') format('woff'),
      url('FileName.ttf') format('truetype'),
      url('FileName.svg#FontName') format('svg');
      font-style: normal;
      font-weight: normal;
    }

<figure><img src="/images/10extra.gif" alt="exemple gif de transformation des éléments ci-dessus, deux caractères tapés donnent une liste impressionnante"/></figure>

Amusez-vous à voir ce que ça donne avec d'autres propriétés en tapant leur abréviation et `+` : par exemple `bg+` etc.

### Recherche floue

Le module CSS utilise les correspondances partielles pour retrouver des abréviations inconnues. Lorsque vous tapez une abréviation inexistante, Emmet essaie de trouver la définition de snippet la plus proche, par exemple `ov:h` , `ov-h` , `ovh` et `oh` génèreront le même résultat&nbsp;:

    overflow: hidden;

<figure><img src="/images/11fuzzy_search.gif" alt="exemple gif de transformation des éléments ci-dessus, plusieurs versions donnent le même résultat"/></figure>

### Préfixes constructeurs

CSS est génial, mais ces préfixes constructeurs sont une vraie plaie. Enfin, plus maintenant : Emmet a des abréviations pour eux aussi. Par exemple, l'abréviation `trs` donnera&nbsp;:

    -webkit-transform: ;
    -moz-transform: ;
    -ms-transform: ;
    -o-transform: ;
    transform: ;

<figure><img src="/images/12vendor_prefixes.gif" alt="exemple gif de transformation des éléments ci-dessus, ajout de préfixes constructeurs"/></figure>

Vous pouvez également ajouter des préfixes à n'importe quel élément, il suffit d'utiliser le préfixe `-`. Ainsi, `-super-foo`sera traduit par&nbsp;:

    -webkit-super-foo: ;
    -moz-super-foo: ;
    -ms-super-foo: ;
    -o-super-foo: ;
    super-foo: ;

Et si vous ne voulez pas tous ces préfixes mais seulement certains. Pas de problème, vous pouvez définir exactement la compatibilité navigateur souhaitée. Par exemple, `-wm-trf` donnera&nbsp;:

    -webkit-transform: ;
    -moz-transform: ;
    transform: ;

avec :

- w → -webkit-
- m → -moz-
- s → -ms-
- o → -o-

### Dégradés

Puis en est à ces caractéristiques ennuyeuses de CSS, nous ne pouvons pas ne pas parler des dégradés. Ces longues définitions peuvent être facilement remplacées par une abréviation concise et à toute épreuve. Tapez `lg(left, #fff 50%, #000)` , et voilà ce que obtiendrez&nbsp;:

    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
    background-image: -webkit-linear-gradient(left, #fff 50%, #000);
    background-image: -moz-linear-gradient(left, #fff 50%, #000);
    background-image: -o-linear-gradient(left, #fff 50%, #000);
    background-image: linear-gradient(left, #fff 50%, #000);

<figure><img src="/images/13gradient.gif" alt="exemple gif de transformation des éléments complexes ci-dessus"/></figure>

## Extras

### Lorem ipsum

Plus besoin de ces services tiers qui génèrent du texte "Lorem ipsum", vous pouvez maintenant le faire directement dans votre éditeur de texte. Utilisez les abréviations `lorem` ou `ipsum` . Vous pouvez même spécifier le nombre de mots dont vous avez besoin, par exemple `lorem10` génèrera&nbsp;:

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

<figure><img src="/images/14lorem.gif" alt="exemple gif de transformation des éléments ci-dessus, lorem ipsum de longueur variable"/></figure>

Lorem peut être concaténé avec les autres éléments, ainsi `p*3>lorem5` génèrera&nbsp;:

    <p>Lorem ipsum dolor sit amet.</p>
    <p>Voluptates esse aliquam asperiores sunt.</p>
    <p>Fugiat eaque laudantium explicabo omnis!</p>

## Customization

Emmet propose tout un tas de réglages fins, vous pouvez utiliser trois fichiers pour cela&nbsp;:

- Pour mettre à jour un snippet ou pour en ajouter un de votre cru, éditez [snippets.json](http://docs.emmet.io/customization/snippets/).
- Pour changer le comportement des filtres et actions d'Emmet, essayez avec [preferences.json](http://docs.emmet.io/customization/preferences/).
- Pour définir comment vous souhaitez qu'apparaisse le HTML ou le XML généré, éditez [syntaxProfiles.json](http://docs.emmet.io/customization/syntax-profiles/).

## Et plus encore !

Ce n'est que le début. Emmet offre bien d'autres fonctions, comme [l'encodage et le décodage d'images](http://docs.emmet.io/actions/base64/), [l'ajout ou la mise à jour des attributs `width` et `height`pour les images](http://docs.emmet.io/actions/update-image-size/), [l'incrementation de nombres](http://docs.emmet.io/actions/inc-dec-number/) etc.

Visitez le [site](http://emmet.io/), consultez la [documentation](http://docs.emmet.io/) et l'[anti-sèche](http://docs.emmet.io/cheat-sheet/) bien pratique.

## Compatibilité éditeurs de texte

Si vous vous demandez "est-ce que ça marchera avec mon éditeur de texte", la réponse est "Oui mon ami", un grand nombre d'éditeurs de texte sont compatibles et j'espère que le vôtre se trouve dans la liste&nbsp;:

- [Sublime Text 2](https://github.com/sergeche/emmet-sublime)
- [TextMate 1.x](https://github.com/emmetio/Emmet.tmplugin)
- [Eclipse/Aptana](https://github.com/emmetio/emmet-eclipse)
- [Coda 1.6 et 2.x](https://github.com/emmetio/Emmet.codaplugin)
- [Espresso](https://github.com/emmetio/Emmet.sugar)
- [Chocolat](https://github.com/sergeche/emmet.chocmixin) (disponible via la boîte de dialogue “Install Mixin”)
- Komodo Edit/IDE (disponible via Tools → Add-ons)
- Notepad++
- PSPad
- [CodeMirror2/3](https://github.com/emmetio/codemirror)
- [Brackets](https://github.com/emmetio/brackets-emmet)
- Textarea
- [phpstorm](http://www.jetbrains.com/phpstorm/)

### Liens utiles

[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)  
[Emmet, un turbo dans votre CSS](/articles/emmet-un-turbo-dans-votre-css/), par Josh Medeski  
[Raccourcis et astuces Emmet](/articles/une-liste-de-raccourcis-emmet/), par Matt MacFadyen et Jordan Moore


Goodbye, Zen Coding. Hello, Emmet!

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

Guide des animations SVG (SMIL)

Introduction à RDFa, 1ère partie


J'ai rencontré un problème dernièrement avec le contenu textuel d'un de mes `<button>` qui n'apparaissait pas dans l'arbre d'accessibilité ([accessibility tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree), _NdT&nbsp;: un arbre un peu similaire au [DOM](/articles/le-dom-cest-quoi-exactement/) mais comportant uniquement les éléments utiles aux technologies d'assistance_) et par conséquent n'était pas visible pour les lecteurs d'écran. Après débogage, je me suis rendue compte que la raison en était que j'animais un texte visuellement en modifiant son opacité et, surtout, la propriété CSS `visibility`.

C'était clairement un loupé, vu ce que j'ai écrit précédemment sur la façon de [cacher des éléments avec CSS](/articles/cacher-des-elements-avec-css/). Cela m'a amenée à repenser au comportement de la propriété `visibility`, en particulier à sa valeur `hidden`, dans sa relation avec les différentes sortes de "visibilités" —&nbsp;visuelle, spatiale, technologies d'assistance, interactions. Quand nous utilisons le terme "visibilité", nous pensons à la vision, mais la propriété `visibility` ne concerne pas que la visibilité "visuelle".

<h2>visibility: hidden et la visibilité visuelle</h2>

Lorsque nous considérons le domaine de la vision, la règle `visibility: hidden` a l'effet attendu, l'élément devient plus ou moins "invisible".

```
Il a disparu ! ---> <span style="visibility: hidden;">J'ai disparu !</span> eh oui
```

<p>Le résultat :</p>
<p>Il a disparu ! ---&gt; <span style="visibility: hidden;">J'ai disparu !</span> eh oui</p>

Pour comprendre exactement ce qui se passe, revenons sur le [chemin critique du rendu](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=FR). Typiquement, une fois déterminés les styles de la page, trois choses se passent&nbsp;:

- Mise en page - quel espace prend l'élément dans la page ?
- Peinture - quelle est la valeur de chaque pixel ?
- Composite - dans quel ordre sont peints les pixels ?

Pour un élément auquel s'applique la règle `visibility: hidden`, on pourrait penser que les navigateurs optimiseraient le travail de rendu en ne tenant pas compte des étapes 2 et 3 puisqu'aucun pixel ne sera affiché là où l'élément devrait se trouver. Bien que rien ne soit dit dans la spécification sur une telle optimisation, il est utile d'imaginer un tel mécanisme pour penser au fonctionnement de la règle.

<h2>visibility: hidden et espace</h2>

Il est techniquement exact de dire qu'un élément est invisible lorsque la règle `visibility: hidden` lui est appliquée, cependant on peut objecter qu'il occupe toujours l'espace sur la page.

Comme mentionné précédemment, un élément ne passe peut-être pas par les étapes 2 & 3, peinture et composite, mais il n'échappe pas à l'étape 1 de mise en page. Autrement dit, même si les pixels ne sont pas peints, ils occupent toujours de l'espace dans la page —&nbsp;un peu comme Harry Potter et sa cape d'invisibilité, vous ne le voyez pas mais il est toujours là.

Prenons trois éléments `<div>` de 100 px chacun, et appliquons la règle `visibility: hidden` au deuxième.

```
<style>
    div {
        width: 100px;
        display: inline-block;
        background-color: #ffdb3a;
    }
</style>

<div>Un</div>
<div style="visibility: hidden;">Deux</div>
<div>Trois</div>
```

<div style="width: 100px; text-align: center; background: #ffdb3a; color: black; display: inline-block;">Un</div>
<div style="width: 100px; text-align: center; background: #ffdb3a; display: inline-block; visibility: hidden;">Deux</div>
<div style="width: 100px; text-align: center; background: #ffdb3a; color: black; display: inline-block;">Trois</div><br/><br/>

Bien que "visuellement caché", on ne peut pas dire que l'élément du milieu soit réellement invisible puisqu'il occupe toujours l'espace.

<h2>visibility: hidden et interactivité</h2>

Du fait qu'un élément occupe toujours l'espace, même s'il est techniquement "caché", on pourrait penser que la règle `visibility: hidden` a le même effet que `opacity: 0`. En réalité, la règle `visibility: hidden` est beaucoup plus proche de `display: none`.

Toute interaction avec des éléments tels que des formulaires ou des liens sera impossible.

Considérons le `<button>` ci-dessous qui devrait envoyer une alerte sur un clic.

```
Il a disparu ! --->
<button style="visibility: hidden;"
        onclick="alert('Hello!')">J'ai disparu !</button>
<--- On ne peut pas cliquer dessus !
```

<p>Il a disparu ! ---&gt; <button style="visibility: hidden;" onclick="alert('Hello!')">J'ai disparu !</button> &lt;--- On ne peut pas cliquer dessus !</p>

Le bouton a beau conserver son espace physique, il a perdu son interactivité.

<h2>visibility: hidden et technologies d'assistance</h2>

La principale raison pour laquelle la règle `visibility: hidden` ne concerne pas que le domaine de la vision est qu'elle affecte également les technologies d'assistance. Lorsque nous appliquons `visibility: hidden` à un élément, la règle le supprime de l'arbre d'accessibilité, ce qui le rend invisible aux technologies telles que les lecteurs d’écran.

Prenons par exemple le problème que j'ai rencontré. J'ai un `<button>` et une `<span>` imbriquée.

```
<button>
    <span style="visibility: hidden">Button label here</span>
</button>
```

Si nous jetons un coup d'oeil aux propriétés d'accessibilité de l'élément dans DevTool, nous voyons que le `<button>` semble ne pas avoir de label et par conséquent n'a pas de nom accessible.

<button>
    <span style="visibility: hidden">Button label here</span>
</button>

<figure><img src="/images/devtool-with-accessibility-panel-compressor.png" alt="Copie d'écran de Chrome DevTool lorsqu'on inspecte le bouton ci-dessus dont le nom n'est pas accessible"/></figure>

Conclusion : la propriété `visibility` semble n'affecter que l'aspect visuel des éléments, mais nous avons vu qu'elle fait bien plus que cela.


La propriété CSS visibility et l'accessibilité


<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><img src="/images/HTML-to-Render-Tree-to-Final-compressor.png" 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><img src="/images/node-tree-example-compressor.png" 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><img src="/images/corrected-html-compressor.png" 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><img src="/images/dom-with-p-compressor.png" 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><img src="/images/rendertree-without-p-compressor.png" 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><img src="/images/Pseudo-element-in-devtools-inspector.png" 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 ?


Il existe bien des façons de sélectionner des éléments en CSS. La plus basique est la sélection par nom de balise, comme `p { }`. Presque tout ce qui est plus spécifique qu'un sélecteur de balise utilise des [attributs](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes) —&nbsp;`class` et `id` permettent tous deux de sélectionner ces attributs sur les éléments HTML. Mais la classe et l'ID ne sont pas les seuls attributs que les développeurs peuvent choisir. Nous pouvons utiliser n'importe quel **attribut** d'un élément comme sélecteur.

La sélection d'attributs a une syntaxe spéciale. En voici un exemple :

```css
a[href="https://css-tricks.com"]
{
  color: #e18728;
}
```

Il s'agit d'un **sélecteur à correspondance exacte** qui ne sélectionnera que les liens dont la valeur exacte de l'attribut `href` est "https://css-tricks.com".

## Les sept différents types

Les sélecteurs d'attributs sont sensibles à la casse par défaut (voir [correspondance insensible à la casse ci-dessous](#caseinsensitive)), et sont écrits entre crochets `[]`.

Il existe sept types différents de correspondances avec un sélecteur d'attribut, et la syntaxe est différente pour chacun. Les sélecteurs d'attributs les plus complexes reposent sur la syntaxe du sélecteur de correspondance exacte&nbsp;: ils commencent tous par le nom de l'attribut et se terminent par un signe égal suivi de la ou des valeurs de l'attribut, généralement entre guillemets. Ce qui se trouve entre le nom de l'attribut et le signe égal est ce qui fait la différence entre les sélecteurs.

```css
[data-value] {
  /* L'attribut existe */
}

[data-value='foo'] {
  /* L'attribut a cette valeur exacte */
}

[data-value*='foo'] {
  /* La valeur de l'attribut contient cette valeur quelque part */
}

[data-value~='foo'] {
  /* L'attribut contient cette valeur quelque part dans une liste séparée par un espace */
}

[data-value^='foo'] {
  /* La valeur de l'attribut commence par ceci */
}

[data-value|='foo'] {
  /* La valeur de l'attribut commence par ceci dans une liste séparée par un tiret */
}

[data-value$='foo'] {
  /* La valeur de l'attribut se termine par ceci */
}
```

**La valeur contient** : la valeur de l'attribut contient un terme comme seule valeur, une valeur dans une liste de valeurs ou comme partie d'une autre valeur. Pour utiliser ce sélecteur, ajoutez un astérisque (_) avant le signe égal. Par exemple, `img[alt_="art"]` sélectionnera les images dont le texte alt est "art abstrait" et "Le départ de Nimrod", car la valeur "art" se trouve dans le mot "départ".

**La valeur est dans une liste séparée par un espace**&nbsp;: la valeur est soit la seule valeur de l'attribut, soit une valeur entière dans un ensemble de valeurs séparées par un espace. Contrairement au sélecteur "contains", ce sélecteur ne recherchera pas la valeur sous forme de fragment de mot. Pour utiliser ce sélecteur, ajoutez un tilde (`~`) avant le signe égal. Par exemple, `img[alt~="art"]` sélectionnera les images avec le texte alt "art abstrait" et "exposition d'art", mais pas "Le départ de Nimrod" (que le sélecteur "contains" sélectionnerait).

**Valeur commence par** : la valeur de l'attribut commence par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un caret (`^`) avant le signe égal. N'oubliez pas que la sensibilité à la casse compte. Par exemple, `img[alt^="art"]` sélectionnera les images avec le texte alt "exposition d'art" et "motif artistique", mais pas une image avec le texte alt "Arthur Miller" car "Arthur" commence par une majuscule.

**La valeur est la première dans une liste séparée par des tirets** : Ce sélecteur est très similaire au sélecteur "commence par". Ici, le sélecteur correspond à une valeur qui est soit la seule valeur, soit la première d'une liste de valeurs séparées par un tiret. Pour utiliser ce sélecteur, ajoutez un caractère pipe (`|`) (_tuyau_)avant le signe égal. Par exemple, `li[data-years|="1900"]` sélectionnera les éléments de liste dont la valeur de data-years est "1900-2000", mais pas l'élément de liste dont la valeur de data-years est "1800-1900".

**Valeur se terminant par** : la valeur de l'attribut se termine par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un signe dollar (`$`) avant le signe égal. Par exemple, `a[href$="pdf"]` sélectionne tous les liens qui se terminent par .pdf.

<p class="is-style-explanation">Une remarque sur les guillemets : Dans certaines circonstances, vous pouvez ne pas utiliser de guillemets autour de la valeur, mais les règles de sélection sans guillemets sont incohérentes d'un navigateur à l'autre. Les guillemets fonctionnent toujours, donc si vous vous en tenez à leur utilisation, vous pouvez être sûr que votre sélecteur fonctionnera.</p><br/>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_OPobRY" src="//codepen.io/css-tricks/embed/OPobRY?height=600&amp;theme-id=light&amp;slug-hash=OPobRY&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="600" 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/team/css-tricks/pen/OPobRY">
  Attribute Selectors</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Fait amusant : les valeurs sont traitées comme des chaînes de caractères, vous n'avez donc pas besoin d'effectuer un échappement fantaisiste des caractères pour les faire correspondre, comme vous le feriez si vous utilisiez des caractères inhabituels dans un sélecteur de classe ou d'ID.

```css
[class='(╯°□°）╯︵ ┻━┻'] {
  couleur: rouge;
  font-weight: bold;
}
```

<h2 id="caseinsensitive">Correspondance insensible à la casse</h2>

Les sélecteurs d'attributs insensibles à la casse font partie de la spécification <a href="https://www.w3.org/TR/selectors-4/#attribute-case">Selectors Level 4</a> du groupe de travail CSS. Comme mentionné ci-dessus, les chaînes de valeur d'attribut sont par défaut sensibles à la casse, mais peuvent être modifiées en insensibles à la casse en ajoutant `i` juste avant le crochet fermant&nbsp;:

```css
[attribute='value' i] {
  /* Les styles ici s'appliqueront aux éléments avec :
    attribut="valeur"
    attribut="VaLuE"
    attribut="VALUE"
    ...etc
  */
}
```

La correspondance insensible à la casse pourrait être vraiment pratique pour cibler les attributs contenant du texte imprévisible, écrit par les humains. Par exemple, supposons que vous conceviez une bulle de dialogue sur une application de chat et que vous souhaitiez ajouter une "main agitée" à tous les messages contenant le texte "hello" sous une forme ou une autre. Vous pourriez le faire rien qu'avec CSS, en utilisant une correspondance insensible à la casse pour attraper toutes les variations possibles&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ydpvGQ" src="//codepen.io/css-tricks/embed/ydpvGQ?height=300&amp;theme-id=light&amp;slug-hash=ydpvGQ&amp;user=css-tricks&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/andyadams/pen/ydpvGQ">
  Case-insensitive CSS attribute matching</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Combiner tout cela

Vous pouvez combiner un sélecteur d'attribut avec d'autres sélecteurs, tels que tag, class ou ID.

```css
div[attribute='value'] {
  /* règles de style ici */
}

.module[attribute='value'] {
  /* règles de style ici */
}

#header[attribute='value'] {
  /* règles de style ici */
}
```

Vous pouvez même combiner plusieurs sélecteurs d'attributs. Cet exemple sélectionne les images dont le texte alternatif comprend le mot "personne" comme seule valeur ou une valeur dans une liste séparée par un espace, et une valeur src qui comprend la valeur "lorem"&nbsp;:

```css
img[alt~='person'][src*='lorem'] {
  /* règles de style ici */
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_jEvVVb" src="//codepen.io/css-tricks/embed/jEvVVb?height=750&amp;theme-id=light&amp;slug-hash=jEvVVb&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="750" 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/team/css-tricks/pen/jEvVVb">
  Combined Attributes and Attribute-Only Selection</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Sélecteurs d'attributs en JavaScript et jQuery

Les sélecteurs d'attributs peuvent être utilisés dans jQuery comme tout autre sélecteur CSS. En JavaScript, vous pouvez utiliser les sélecteurs d'attributs avec `document.querySelector()` et `document.querySelectorAll()`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_XJPNNg" src="//codepen.io/css-tricks/embed/XJPNNg?height=750&amp;theme-id=light&amp;slug-hash=XJPNNg&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="750" 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/team/css-tricks/pen/XJPNNg">Attribute Selectors in JS and jQuery</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


Attributs

Ajouter une image avec HTML c'est assez facile, n'est-ce pas&nbsp;? c'est juste une simple balise, après tout...

```html
<img src="path/to/image.jpg" />
```

Mais lorsque nous commencons à prendre en considération la performance, les tailles d'écran, l'accessibilité, la densité de pixels ou les préférences de l'utilisateur, on peut finir par se demander si HTML est suffisant à lui seul pour cette tâche... Et la réponse est oui&nbsp;! Le HTML a de nombreuses options et il est suffisamment puissant pour gérer cette tâche. Cet article traitera de ce que nous devons considérer au moment d'ajouter une image à un site avec HTML.

## Considérations de base

### Attribut `alt`

Commençons par un élément très important : votre image a besoin d'un texte alternatif. Ça permettra aux utilisateurs de lecteurs d'écran d'identifier le contenu de l'image, mais ça les aidera également lorsque l'image ne se charge pas (peut-être parce que l'image n'est pas disponible, ou peut-être parce que l'utilisateur a un réseau lent). Sinon, ils ne sauront pas ce qu'est l'image. Cela peut être fait avec l'attribut alt.

```html
<img
  src="path/to/image.jpg"
  alt="Un chat blanc allongé sur un canapé"
/>
```

Gardez à l'esprit que parfois, une image est là à des fins purement décoratives, donc la rendre visible pour les lecteurs d'écran pourrait ne pas être idéal, dans ce cas, nous pouvons utiliser un `alt` vide pour que les lecteurs d'écran ignorent cette image.

```html
<img src="path/to/image.jpg" alt="" />
```

Que doit contenir le texte alternatif ? En général, il doit contenir une description concise de ce que contient l'image. S'il s'agit d'une image contenant des informations importantes (comme le lieu d'un événement ou une infographie complète), ces informations doivent également figurer dans le texte alternatif. Le W3C a créé [un arbre de décision alt](https://www.w3.org/WAI/tutorials/images/decision-tree/) pour nous aider à décider des informations à ajouter.

### Attributs de largeur et de hauteur

L'une des mesures les plus importantes des performances est le **décalage cumulatif de la mise en page** (_Cumulative Layout Shift_, CLS), qui évalue dans quelle mesure le contenu d'un site Web se déplace lorsqu'il est à l'écran. En d'autres termes, un CLS faible signifie que le contenu est assez stable et ne créera aucun problème avec l'interactivité de l'utilisateur. Pour en savoir plus sur ce concept, vous pouvez consulter [cet article sur web.dev à propos de CLS](https://web.dev/cls/).

Le chargement d'images peut créer des problèmes de décalage de mise en page et une façon de les éviter est d'utiliser les attributs `width` et `height` pour les images. Ils indiquent au navigateur la taille intrinsèque de l'image et créent le ratio d'aspect de l'image lors du chargement du site Web, ce qui réduit le décalage de mise en page qu'il peut créer. Voici à quoi cela ressemblerait dans une image.

```html
<img
  src="path/to/image.jpg"
  alt="Un chat blanc couché sur un canapé"
  width="1200"
  height="800"
/>
```

Mais ce n'est pas tout ce que nous pouvons faire pour améliorer les performances de notre site Web avec une balise `img`&nbsp;!

### Chargement paresseux

Nous pouvons avoir beaucoup d'images sur notre site Web, et cela peut affecter son temps de chargement. C'est là qu'intervient le concept de chargement paresseux (**lazy loading**). Ça signifie que l'image ne commencera à se charger que lorsqu'elle se trouvera dans la partie visible de la fenêtre d'affichage. Il fut un temps où cela se faisait avec JavaScript mais maintenant HTML nous offre un moyen de le faire facilement en utilisant l'attribut `loading="lazy"`.

```html
<img
  src="path/to/image.jpg"
  alt="Un chat blanc couché sur un canapé"
  width="1200"
  height="800"
  loading="lazy"
/>
```

Lorsque nous utilisons `loading="lazy"` en tandem avec les attributs `height` et `width`, nous nous assurons que le site Web dispose de suffisamment d'espace pour l'image au moment du chargement, et en même temps, nous ne chargons l'image que si l'utilisateur en a besoin, ce qui est excellent pour les performances&nbsp;!

N'oublions pas cependant que si un utilisateur a désactivé JavaScript, `loading="lazy"` ne fonctionnera pas. Nous devons donc garder à l'esprit d'autres considérations liées aux performances, mais mettons ce sujet en veilleuse pour l'instant.

N'oublions pas non plus que l'utilisation de `loading="lazy"` dans notre élément _Largest Content Painting_ (nous parlerons de cette métrique plus tard) augmentera en fait notre temps de chargement. Soyons donc prudent et testons toujours cet élément pour savoir si cet attribut donne les résultats escomptés.

### figure et figcaption

Parfois, nous devons ajouter des informations supplémentaires qui ne tiendraient pas dans la balise `alt`, comme les crédits de l'image, ou une note importante à son sujet à laquelle nous préférons que tout le monde ait accès. Nous pouvons utiliser la balise `figure` pour envelopper l'`img`, puis ajouter une légende avec la balise `figcaption`.

```html
<figure>
  <img
    src="path/to/image.jpg"
    alt="Un chat blanc couché sur un canapé"
    width="1200"
    height="800"
    loading="lazy"
  />
  <figcaption>
    Les chats persans sont reconnaissables à leurs gros poils, leur
    visage rond et leur museau court
  </figcaption>
  .
</figure>
```

`figcaption` doit être un enfant direct de l'élément `figure`, sinon, il pourrait ne pas être reconnu par les technologies d'assistance. C'est un point que [Manuel](/auteurs/manuel-matuzovic) souligne dans son article [divs are bad!](https://www.matuzo.at/blog/2022/divs-are-bad/).

Garder ces considérations à l'esprit aide beaucoup lorsque nous créons une image, mais ce n'est que la partie émergée de l'iceberg. Lorsque nous commençons à prendre en considération de multiples variables comme les tailles d'écran, les formats d'image et les préférences des utilisateurs, la balise `img` commence à manquer de puissance. C'est là qu'une autre balise entre en jeu pour ajouter plus de fonctionnalités&nbsp;!

## La balise `picture`

Cette balise est un conteneur pour de multiples sources d'images. Selon les conditions que nous y ajoutons, le navigateur commencera à choisir le bon fichier en fonction de multiples facteurs comme la taille du viewport, le format de l'image, la densité des pixels ou les préférences de l'utilisateur. Il agit comme un emballage pour les multiples éléments de source que nous utiliserons pour déterminer la meilleure image.

Commençons par vérifier ce que nous pouvons faire avec cet élément.

### Prise en charge de différents formats d'image

À côté des formats d'image `.png` ou `.jpg`, il existe de nouveaux formats d'image tels que `.avif`, `.webp` ou `.apng` que nous pourrions vouloir utiliser parce qu'ils ne présentent pas de perte de qualité tout en étant beaucoup moins lourds qu'un format plus courant. Cependant, les formats d'image mentionnés précédemment bénéficient d'une prise en charge plus large. Nous pouvons utiliser la balise `source` pour nous permettre d'utiliser des formats d'image plus optimisés en fonction du support du navigateur. Pour cela, nous pouvons utiliser l'attribut `type` dans l'élément `source` pour indiquer le format que nous devons évaluer.

```html
<picture>
  <source srcset="path/to/image.avif" type="image/avif" />
  <source srcset="path/to/image.webp" type="image/webp" />
  <img
    src="path/to/image.jpg"
    alt="Un chat blanc couché sur un canapé"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>
```

Dans ce cas, il commencera à vérifier si le navigateur accepte le format `.avif`, et si ce n'est pas le cas (comme Safari avant la version 16), il vérifiera si le format `.webp` est supporté. Si ce n'est pas le cas, il affichera celui de l'élément `img`. Il existe de nombreux formats d'image. Si vous voulez en savoir plus, vous pouvez consulter [la documentation de MDN](https://developer.mozilla.org/fr/docs/Web/Media/Formats/Image_types) à ce sujet.

Vous vous souvenez que j'ai mentionné que `loading="lazy"` pourrait ne pas être suffisant pour des raisons de performances&nbsp;? Ça nous aidera à prendre en compte la compatibilité navigateur pour charger l'image optimale, créant ainsi un système très robuste pour donner à l'utilisateur la meilleure qualité d'image possible **et** utiliser le moins de bande passante possible. C'est le meilleur des deux mondes, et c'est possible avec seulement du HTML&nbsp;!

### Images responsives

Nous pourrions vouloir montrer une image différente ou une partie différente d'une image en fonction de la taille du viewport. L'élément `picture` peut nous y aider grâce à l'attribut `media`, où nous pouvons utiliser une [requête media](https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries) pour détecter la taille du viewport et ajouter une image différente si nécessaire.

```html
<picture>
  <source
    srcset="path/to/image-mobile.jpg"
    media="(max-width : 600px)"
  />
  <img
    src="path/to/image.jpg"
    alt="Un chat blanc couché sur un canapé"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>
```

Nous pouvons y utiliser n'importe quelle requête média valide. Ainsi, par exemple, `orientation : portrait` et `orientation : landscape` sont des options valides lorsque nous souhaitons afficher une image différente selon que la largeur du viewport est supérieure (ou inférieure) à sa largeur. Il existe de nombreuses possibilités que nous pouvons envisager pour donner la meilleure image à l'utilisateur.

### Préférences de l'utilisateur

Maintenant, c'est très pratique pour les performances et l'expérience utilisateur, mais c'est également utile pour l'accessibilité&nbsp;: nous pouvons vérifier les préférences de l'utilisateur pour aider les personnes souffrant de certains handicaps.  
Par exemple, certaines personnes peuvent avoir des problèmes comme des migraines et préférer utiliser le mode sombre, et une image très lumineuse pourrait déclencher une crise de migraine, donc avoir une version de votre image mieux adaptée au mode sombre serait idéal.

Ou peut-être avons-nous un `gif`, et quelqu'un a désactivé les animations sur son appareil. Nous pourrions vouloir montrer une image statique à la place afin que son expérience ne soit pas affectée. Comment faire&nbsp;?

Comme je l'ai mentionné, nous pouvons utiliser n'importe quelle requête média valide, ce qui inclut les requêtes média qui vérifient les préférences de l'utilisateur comme `prefers-color-scheme` ou `prefers-reduced-motion`. Nous pouvons même les combiner avec des opérateurs logiques pour afficher l'image appropriée. Voyons comment cela fonctionne avec un exemple.

```html
<picture>
  
  <source
    srcset="path/to/image-dm.jpg"
    media="(prefers-reduced-motion : reduce) and (prefers-color-scheme : dark)"
  />
  
  <source
    srcset="path/to/image.jpg"
    media="(prefers-reduced-motion : reduce)"
  />
  
  <source
    srcset="path/to/image-dm.gif"
    media="(prefers-color-scheme : dark)"
  />

  
  <img
    src="path/to/image.gif"
    alt="Un chat qui danse"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>
```

Il est important de noter ici que l'ordre a de l'importance. Il est préférable d'ajouter d'abord les balises ayant des exigences plus spécifiques en matière de requête média pour être sûr qu'elles ne seront pas écrasées par celles qui apparaîtront plus tard. Gardez également à l'esprit que vous pouvez combiner tout ce que vous avez vu, il y a donc beaucoup de possibilités avec les éléments `picture` et `source`.

Cela couvre pratiquement tout ce que vous devez prendre en considération, mais il y a encore quelques points que vous pouvez prendre en compte.

## Considérations supplémentaires

### Densité des pixels et `srcset`

L'attribut `srcset` que nous utilisons dans l'élément `picture` a une syntaxe légèrement différente si nous souhaitons donner une meilleure image en fonction de la densité de pixels de l'appareil. Pour cela, nous pouvons ajouter une liste d'images séparées par des virgules et après l'URL de l'image, nous mettrons le type de densité de pixels que nous voulons prendre en charge avec cette image. Voyons cela avec un exemple&nbsp;:

```html
<picture>
  <source
    srcset="
      path/to/image-mobile.jpg    1x,
      path/to/image-mobile-2x.jpg 2x,
      path/to-image-mobile-3x.jpg 3x
    "
    media="(max-width : 600px)"
  />
  <img
    src="path/to/image.jpg"
    alt="Un chat blanc couché sur un canapé"
    width="1200"
    height="800"
    srcset="path/to/image-2x.jpg 2x, path/to/image-3x.jpg 3x"
    loading="lazy"
  />
</picture>
```

Il y a encore quelque chose que je n'ai pas mentionné et c'est le fait que nous pouvons utiliser l'attribut `srcset` dans l'élément `img`, et cela fonctionne très bien lorsque nous voulons prendre en charge des images en fonction de la densité de pixels de l'appareil. La prochaine fois que vous voudrez apporter des images de meilleure qualité pour les images en fonction de l'appareil, vous savez maintenant comment faire&nbsp;!

### Précharger l'image pour améliorer le LCP

Vous vous souvenez quand j'ai mentionné LCP&nbsp;? Il existe une autre métrique appelée [Largest Content Paint](https://web.dev/lcp/) (LCP) qui mesure le temps nécessaire pour charger la plus grande image (ou bloc de texte) à rendre dans le viewport. Généralement, ce LCP est une grande image. Nous pouvons utiliser d'autres formats d'image pour diminuer la taille du LCP, mais que faire si cela ne suffit pas&nbsp;? Nous avons l'alternative de précharger l'image dans le `head`, ce qui rendra l'image plus rapide, et par extension, améliorera cette métrique. Voici à quoi cela ressemblerait dans notre balise `head`.

```html
<head>
  <link rel="preload" href="path/to/image.jpg" as="image" />
</head>
```

Atention à ne pas abuser de cette technique cependant, car sinon, elle augmentera le temps de chargement de la page. Utilisez-la simplement pour votre ou vos images les plus importantes et testez les performances en conséquence pour vérifier si elle améliore ces métriques.

`décodage="async"``

J'ai déjà mentionné `loading="lazy"`, mais il existe un autre attribut HTML que nous pouvons utiliser pour optimiser le temps de chargement d'un site Web. Alors que `loading="lazy"` décide du **moment** où l'image sera chargée (au moment où elle est proche du viewport), nous avons un autre attribut qui définit **comment** elle sera chargée.

Normalement, tout notre site sera chargé de manière synchrone parce que le navigateur lit le HTML ligne par ligne, donc s'il trouve une grande image, le reste du site ne se téléchargera pas avant que l'image soit chargée. C'est là que `decoding="async"` entre en jeu pour donner une indication au navigateur d'essayer de télécharger l'image et en même temps de télécharger une autre partie du site.

```html
<img
  alt="Un chat blanc allongé sur un canapé"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>
```

L'utilisation des deux, `decoding="async"` et `loading="lazy"`, dans une image contribuera à réduire considérablement le temps de chargement d'un site Web, et le `decoding` est un attribut largement pris en charge.

## Conclusion

Ajouter une image à un site Web est facile... Mais les choses commencent à se compliquer lorsque nous commençons à prendre en compte les considérations de performance et d'accessibilité. Heureusement pour nous, HTML peut nous donner les outils appropriés pour aborder ces considérations sans aucun problème.

J'ai choisi ce sujet pour ce calendrier de l'Avent pour une bonne raison et c'est parce qu'il m'a fait remarquer à quel point le HTML est puissant, robuste et étonnamment complexe. Voir ce que le HTML a à offrir juste pour amener la bonne image sur votre écran avec un effort relativement faible était fascinant et cela m'a donné envie de creuser plus profondément dans ce que le HTML peut faire.

Petit guide pour l'ajout d'images

Portal CSS


On ne trouve pas beaucoup d’information en ligne sur les éléments remplacés HTML. Je n’ai rien trouvé à leur sujet dans les livres sur le développement web que je connais. C’est bien dommage... car si j’avais connu plus tôt les limites des éléments remplacés je me serais épargné bien du stress lorsque j’ai commencé mes expériences de CSS avancé.

Pour l’essentiel, les éléments remplacés sont _des éléments HTML ayant une largeur et une hauteur prédéterminées en l’absence de CSS précis_. Une autre façon de voir les choses est de penser aux éléments remplacés comme à _des balises ayant leur contenu remplacé par une source extérieure_. `<img>` et `<video>` en sont deux exemples évidents, mais on peut y ajouter de nombreux éléments de formulaires tels que `<input>`. Par exemple, lorsque vous insérez le code suivant dans une page&nbsp;:

    <input type=“text”>

...l’_input_ apparaît, sans que vous n’ayez rien à faire, aux dimensions qui conviennent à la saisie d’une ligne unique. Cela ne signifie pas que vous n’avez pas besoin d’ajouter des attributs et valeurs supplémentaires à l’élément, ou que vous ne pouvez pas lui appliquer de CSS, mais simplement que le navigateur _remplace_ cette balise par un objet ayant des dimensions prédéterminées par défaut. La même chose se produit avec `<img>`&nbsp;:

    <img src=“bison.jpg” alt=“Plains bison”>

Sans autre information, `bison.jpg` sera chargé dans la page et la balise `<img>` remplacée par le contenu de ce fichier, aux dimensions originales de l’image.

`<br>`, `<hr>` et `<object>` sont des éléments remplacés, de même que `<input>`, `<button>` et `<textarea>`. En HTML5, `<video>` et `<iframe>` sont également des éléments remplacés, ainsi que (dans certaines circonstances) `<audio>` et `<canvas>`.

Mais puisque l’apparence de ces éléments peut être modifiée via CSS, en quoi le fait que ce soit des _éléments remplacés_ pose-t-il problème&nbsp;? En raison d’une règle essentielle&nbsp;:

> 👉🏿 &nbsp;On ne peut pas appliquer de contenu généré aux éléments remplacés. Autrement dit on ne peut pas leur appliquer les pseudo-éléments `:before` et `:after`.

Pensons-y un instant. Est-ce que ce ne serait pas génial de pouvoir auto-générer des légendes pour nos images en CSS&nbsp;? On a l’information disponible, on a les attributs `alt` et `title`, tout est là et il nous suffirait de faire&nbsp;:

    img:after { content: attr(alt); }

Ce serait parfait ! On pourrait afficher la valeur `title` de l’image directement dans la page et on n’aurait pas à se soucier de `<figcaption>` ou des [listes de définitions](https://demosthenes.info/blog/55/CSS-and-Images-Captioned-Images) (en XHTML)... Mais non, on ne peut pas. La balise `<img>` est _déjà_ un contenu remplacé&nbsp;: on ne peut pas générer plus de contenu.

Un résultat utile en tout cas : si vous n’obtenez rien [en appliquant `:before` ou `:after` à un élément](/articles/les-pseudo-elements-css-before-et-after/), il y a des chances que ce soit parce qu’il s’agit d’un élément remplacé&nbsp;!


Qu'est-ce qu'un élément remplacé ?


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 role="group"><img src="/images/image-strip-compressor.jpeg" 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

Ce qu'une année à apprendre et enseigner l'accessibilité m'a appris

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

Raccourcis et astuces Emmet

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&nbsp;:

```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&nbsp;:

```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><img src="/images/misaligned.webp" 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><img src="/images/aligned.webp" 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

Les propriétés CSS `background` et `background-image` n’acceptent que des images [bitmap](http://thenewcode.com/64/Bitmap-Images-for-the-Web-Formats-and-Optimisation-Options) ou [SVG](/tags/svg) et des valeurs de [couleurs](/tags/couleur/) ou de [dégradés](/articles/les-degrades-css/), il n’est donc pas possible d’y intégrer une vidéo. Cependant, nous pouvons reproduire l’apparence d’une vidéo d'arrière-plan plein écran en forçant son apparition derrière d’autres éléments HTML. Le défi est d’avoir une vidéo plein écran et aussi responsive que nos images de background.

👉🏿&nbsp;_Note&nbsp;: pour illustrer cet article, nous utiliserons une vidéo d'Alexandre Wagner_.

<figure role="group"><img src="/images/polina-1.jpeg" alt=""/><figcaption>Nous utiliserons une vidéo d’<a href="http://www.alexanderwagnerphoto.com/">Alexander Wagner</a></figcaption></figure>

## Quelques considérations préliminaires

Avant de nous lancer dans la réalisation, voici quelques facteurs qu’il convient de garder à l’esprit&nbsp;:

- N’utilisez pas cette technique simplement parce que _vous le pouvez_&nbsp;: **le contenu vidéo doit amplifier le message du site**, évitez les effets cosmétiques vides de sens.
- La vidéo sera sans doute réglée par défaut sur `autoplay`, mais il est préférable de la régler sur mute, et même, idéalement, il vaudrait mieux qu’elle ne comporte **pas de son** du tout. Vous pouvez créer un bouton pour remettre le son avec JavaScript.
- La vidéo devrait afficher une image de rechange pour les navigateurs incompatibles avec HTML5. L’image sera utilisée également comme arrière-plan pour les mobiles : la plupart des smartphones et tablettes ne supportent pas `autoplay`, pour des raisons évidentes.
- La durée est importante&nbsp;: Une vidéo **trop courte** semble répétitive (si elle est diffusée en boucle), et si elle est **trop longue** elle devient une histoire en elle-même, un contenu qui mérite d’être traité comme un élément séparé. Je suggèrerais une durée de 12 à 30 secondes.
- **L’accessibilité** est importante&nbsp;: tout texte placé sur la vidéo devrait offrir un contraste permettant sa lecture. Les utilisateurs doivent accéder facilement à une interface de contrôle pour mettre la vidéo en pause. Idéalement, la vidéo ne devrait passer qu’une seule fois.
- **La bande passante** : la vidéo doit être courte et compressée aussi efficacement que possible. En même temps, elle doit pouvoir se redimensionner sur tous les terminaux. Dans les cas les plus complexes, vous pourriez envisager d'utiliser des [media queries en ligne](http://thenewcode.com/820/Make-HTML5-Video-Adaptive-With-Inline-Media-Queries), ou [matchmedia](http://thenewcode.com/702/matchMedia-Media-Queries-For-JavaScript) de JavaScript pour proposer des qualités différentes de la vidéo en fonction de l'écran. Essayez de ne pas dépasser 5Mb, idéalement restez en-dessous des 500K.

En gardant tous ces facteurs à l'esprit, passons maintenant aux techniques nous permettant de réaliser notre objectif. Nous utiliserons pour cela une courte vidéo d’[Alexander Wagner](http://www.alexanderwagnerphoto.com/), vous pouvez voir le résultat (et le code) sur ce CodePen&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/dudleystorey/pen/knqyK/">
  Fullscreen HTML5 Page Background Video</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

<p>Pour voir la vidéo en plein écran, regardez <a href="http://thenewcode.com/samples/polina.html">cette démo</a>.</p>

## Une approche purement CSS

On construit la vidéo HTML5 comme habituellement&nbsp;:

    <video autoplay loop poster="polina.jpg" id="bgvid">
      <source src="polina.webm" type="video/webm">
      <source src="polina.mp4" type="video/mp4">
    </video>

Attention&nbsp;: l’ordre des fichiers vidéo est vital, Chrome a un bug actuellement qui fait qu’il ne jouera pas une vidéo .webm si le fichier n’est pas le premier dans la liste.

L’image de fallback sera remplacée par la première image de la vidéo une fois celle-ci chargée, donc ce serait une bonne idée de prendre cette première image comme image de fallback.

Pour afficher la vidéo plein écran&nbsp;:

    video#bgvid {
      position: fixed; right: 0; bottom: 0;
      min-width: 100%; min-height: 100%;
      width: auto; height: auto; z-index: -100;
      background: url(polina.jpg) no-repeat;
      background-size: cover;
    }

Les navigateurs anciens ne reconnaîtront pas les formats vidéo, mais ils devraient malgré tout reconnaître la balise `<video>` (à l'exception d'IE8, voir ci-dessous). Pour ces navigateurs, nous créons une `background-image` pour l’élément, en utilisant la même image de remplissage.

### Note sur IE8

Non seulement IE8 ne reconnaît pas la balise `<video>` mais il ne reconnaît aucun nouvel élément de HTML5. C’est un problème puisque nous voulons pouvoir, _a minima_, appliquer un style à l’élément et placer une image de background à l’intérieur. Pour y parvenir, il nous faut deux choses&nbsp;: tout d’abord une ligne de JavaScript, dans une boucle conditionnelle&nbsp;:

    

Ensuite, dans notre CSS, une déclaration qui permette à IE de comprendre qu’il s’agit d’un élément de niveau bloc&nbsp;:

    video { display: block; }

Avec cela, IE8 peut au moins appliquer un style à l’élément `<video>` en y insérant une image de d’arrière-plan.

## Quid des mobiles ?

L’affichage plein écran d’une vidéo de background sur les terminaux mobiles pose plusieurs défis&nbsp;:

1. La plupart des plateformes mobiles (en particulier iOS) refusent l’autoplay des vidéos HTML5 pour éviter des chargements de données potentiellement ruineux.
2. Dans ce cas, la vidéo sera affichée avec un bouton play embarqué, ce qui à son tour...
3. ...peut empiéter sur le fonctionnement de touches du terminal, et rendre impossible le bon fonctionnement de liens présents dans le contenu figurant au-dessus de la vidéo.

Même s’il est possible d’utiliser une détection de vidéo autoplay avec JavaScript, la solution la plus simple est d’utiliser une media query qui substitue complètement la vidéo par l’image de fallback pour les petits écrans. On ajoute à notre CSS précédent&nbsp;:

    @media screen and (max-device-width: 800px) {
    html { background: url(polina.jpg) #000 no-repeat center center fixed; }
    #bgvid { display: none; }
    }

Le plus important ici c'est la media query elle-même, elle devra être modifiée en fonction des attentes du site et de l’espace disponible. Actuellement, elle détecte si l’affichage écran est inférieur à 800px de large, auquel cas elle remplace la vidéo par une image statique d’arrière-plan. Remarquez qu’on ne tient pas compte de Rétina&nbsp;: un iPad3 sera toujours considéré comme ayant 768px alors que sa résolution est bien plus élevée.

## Intégrer l'accessibilité

Les utilisateurs souffrant de [troubles vestibulaires](http://fr.wikipedia.org/wiki/Syst%C3%A8me_vestibulaire) peuvent être désorientés par le mouvement, en particulier lorsqu’ils essaient de lire un texte situé sur une image mouvante. Les utilisateurs souffrant d’autisme (pas nécessairement aigu) peuvent être dérangés par un changement rapide. Pour ces utilisateurs —&nbsp;et pour tous les autres&nbsp;— un bouton pause devrait être clairement visible. Idéalement, la vidéo devrait également s’arrêter et disparaître lorsqu’elle a été jouée entièrement. Pour cela, ajoutons un élément `<button>` à notre page&nbsp;:

    <button id="vidpause">Pause</button>

Puis ce JavaScript en bas de notre page&nbsp;:

    var vid = document.getElementById("bgvid");
    var pauseButton = document.getElementById("vidpause");
    function vidFade() {
      vid.classList.add("stopfade");
    }
    vid.addEventListener('ended', function() {
      // only functional if "loop" is removed
      vid.pause();
      // to capture IE10
      vidFade();
    });
    pauseButton.addEventListener("click", function() {
      vid.classList.toggle("stopfade");
      if (vid.paused) {
        vid.play();
        pauseButton.innerHTML = "Pause";
      } else {
        vid.pause();
        pauseButton.innerHTML = "Paused";
      }
    })

Le JavaScript fait appel à du CSS ajouté à votre feuille de styles (les préfixes constructeurs sont omis pour la clarté, et NDT: vous pouvez les omettre dans votre code en utilisant Autoprefixer&nbsp;:

    video#bgvid { transition: 1s opacity; }
    .stopfade { opacity: .5; }

Bien sûr, il convient également d’ajouter du CSS pour faire disparaître votre élément bouton des terminaux mobiles, selon la solution proposée plus haut, sinon votre utilisateur ne comprendra pas pourquoi il y a un bouton sur une image.

## Alternatives purement JavaScript

Même si à mon avis une solution HTML/CSS est plus intéressante qu’un [framework](http://thenewcode.com/195/Frameworks), sachez qu’il existe au moins [un plugin jQuery](http://syddev.com/jquery.videoBG/) et quelques codes JavaScript solides pour parvenir au même résultat.

### Conclusion

Une vidéo en arrière-plan peut avoir un fort impact sur votre site, mais rappelez-vous toujours qu’un grand pouvoir vous donne de grandes responsabilités&nbsp;: utilisez ces fonctionnalités judicieusement.

[Regardez la démo plein écran](http://thenewcode.com/samples/polina.html).

👉🏿 Un autre article intéressant sur le sujet :

[Une vidéo d’arrière-plan sur toute la page en HTML et CSS](http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html), la traduction (légèrement adaptée) de l’article de Florent Verschelde par Victor Brito sur Alsacréations.

La Cascade

html

Ressources complémentaires sur HTML

Pour débuter

Pour approfondir

Custom Elements, Polymer