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" width="700" height="370" 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" width="512" height="708" 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" width="600" height="300" alt="Le modèle de boîte classique"/></figure>

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

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

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

Voici un exemple :

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

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

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

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

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

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

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

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

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

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

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

## Comment utiliser Box-Sizing

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

    //Déclaration initiale

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

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

## Syntaxe

Syntaxe de base de box-sizing :

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

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

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

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

## Support navigateurs

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

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

Voici comment écrire le code :

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

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

## Min/Max

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

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

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

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

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

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


Box-sizing pour les nuls


Ç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" width="780" height="387" 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" width="780" height="413" 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" width="780" height="431" 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" width="780" height="481" 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;
}
```


Comment fonctionne z-index

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>

> 👉🏿 _largeur = zone du contenu_

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>

> 👉🏿 _largeur = zone du contenu + zone de padding_

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>

> 👉🏿 _largeur = zone du contenu + zone de padding + zone de bordure_

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


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 role="group"><img src="/images/initial-compressor.png" width="780" height="125" 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 l’élément HTML parent immédiat 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 role="group"><img src="/images/inherit-1-compressor.png" width="780" height="185" 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 role="group"><img src="/images/inherit-2-compressor.png" width="780" height="197" 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" width="780" height="196" 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 role="group"><img src="/images/revert-compressor.png" width="780" height="231" 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


[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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 role="group"><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 des animations SVG (SMIL)


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; 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; display: inline-block;">Trois</div>

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 role="group"><img src="/images/devtool-with-accessibility-panel-compressor.png" width="957" height="310" 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 role="group"><img src="/images/HTML-to-Render-Tree-to-Final-compressor.png" width="828" height="442" alt="la décomposition du processus en deux étapes"/></figure>

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

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

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

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

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

Prenons par exemple ce document HTML&nbsp;:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Le DOM, c'est quoi exactement ?

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

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

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

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

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

100% / 5 = 20%

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

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

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

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

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

<h2>Animer la bande</h2>

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

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

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

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

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

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

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

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

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

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


Un carrousel responsif en pur CSS

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

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

## Raccourcis Emmet

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

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

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

## HTML

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



```
//CSS

  li>p

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

  ul>li>p

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

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



```
//CSS

  ul>li>p+a

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

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



```
//CSS

  ul>li*3>p+img

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

### Utiliser . pour ajouter un nom de classe



```
//CSS

  ul.wrapper

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

  .container

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

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



```
//CSS

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

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

ou encore :

```
//CSS

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

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

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



```
  a{clique moi}

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

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

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

### Ajouter une numérotation avec $



```
  ul>li.item$*5

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

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



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

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

### Ordre décroissant avec $@-



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

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

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



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

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

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



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

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

#### En résumé



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

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

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

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

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

## CSS

Voici une liste de raccourcis courants&nbsp;:

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

N'oubliez pas que CodePen est compatible avec Emmet !

## Astuces Emmet

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

### Calcul en ligne

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

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

    margin-bottom: 1.5em;

### Retrouver une balise

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

### Commentaires

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

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

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

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

### Convertir une image en Data URI

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

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

---

### Liens complémentaires

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

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

Raccourcis et astuces Emmet

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" width="854" height="480" 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