10 astuces pour améliorer vos transitions et animations

Nous avons vu dans [l’article précédent](/articles/utiliser-hsl-pour-vos-couleurs/) tout l’intérêt qu’il y avait à utiliser HSL pour créer et manipuler les couleurs, mais il est des domaines où cela présente tellement d’avantages qu’il est presque surprenant que les développeurs n’en profitent pas plus.

<figure role="group"><img src="/images/holi-2x.jpeg" alt="jeune fille recouverte de peinture de toutes les couleurs et tirant la langue"/></figure>

<h2>Créer des prototypes rapides de schémas de couleurs</h2>

[HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumière) est idéal pour la création rapide de [schémas de couleurs](http://en.wikipedia.org/wiki/Color_scheme), en particulier pour les développeurs qui ne maîtrisent pas parfaitement le design ou la théorie des couleurs. <span aria-hidden="true" data-icon="&#9758;"></span> (_NdT : si c’est votre cas, pas d’inquiétude&nbsp;! Vous retrouverez dans la Cascade tout un tas d’articles et de ressources pour maîtriser les couleurs comme un pro, voyez la liste dans la [page du tag "couleur"](/tags/couleur)_). L’utilisation de quelques règles simples permet de créer des choix de couleurs harmonieux qui fonctionnent en toute situation.

Prenons un exemple, disons que vous avez une couleur principale et que vous voulez l’utiliser pour générer rapidement le schéma de couleurs d’un site. Admettons, par exemple, que vous ayez une couleur orange dérivée du logo du client, qui correspond à `hsl(30, 90%, 29%)`.

Pour générer instantanément une couleur complémentaire, il suffit d’ajouter 180 degrés à la valeur de la couleur&nbsp;: dans notre exemple, cela donne `hsl(210, 90%, 29%)`. Facile, non&nbsp;? Et si votre première couleur a une valeur supérieure à 180 degrés, pas de souci, votre navigateur saura “faire le tour du cadran de l’horloge” et convertir les valeurs supérieures à 360 degrés. Il sait même gérer les valeurs négatives.

Pour créer en un tournemain un schéma de couleurs monochromatique&nbsp;: prenez la valeur de saturation et soustrayez un tiers. Notre base de couleur est `hsl(30, 90%, 29%)`, les couleurs additionnelles seront donc `hsl(30, 60%, 29%)` et `hsl(30, 30%, 29%)`.

Pour un schéma de couleurs neutre&nbsp;: soustrayez et/ou ajoutez à la couleur un nombre de degrés identiques à chaque fois, mais jamais supérieur à 90°. Par exemple, à partir d’une couleur de 30°, on obtiendra `hsl(0,90%,29%)` et `hsl(60,90%,29%)`.

Pour un schéma de couleurs triadique, ajoutez 120° à la valeur de la couleur principale.

Bien utilisé, ceci élimine le débat sur la question de savoir “ce qui irait bien avec ça&nbsp;?” et vous aide à générer le design d’un site très rapidement.

<h2>Ajustement rapide de couleurs</h2>

Combien de fois un client vous a-t-il demandé “pourriez-vous éclaircir un peu le background&nbsp;?” Si vous avez spécifié les couleurs en [RGB](http://fr.wikipedia.org/wiki/Rouge_vert_bleu) ou en [Hexadécimal](http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web), il vous faudra ajuster trois composants simultanément, en faisant attention que l’un ne prenne pas plus d’importance que l’autre. Si votre schéma de couleurs est en HSL, rien de plus facile et sûr. Le background orange doit être plus sombre&nbsp;? Vous prenez votre background&nbsp;:

    body { background: hsl(60,100%,50%); }

...et vous réduisez la dernière composante (luminosité) :

    body { background: hsl(60,100%,40%); }

Et voilà ! Et si vous avez utilisé les techniques de schémas de couleurs dont nous avons parlé ci-dessus, il suffit d’ajuster les autres couleurs —&nbsp;tout aussi facilement.

<h2>Créer rapidement des variantes de couleurs</h2>

J’ai travaillé sur un article qui utilise [un dégradé radial](/articles/les-degrades-css/#radial) pour créer une lumière témoin sur le bouton que vous voyez ici (le rendu est meilleur sur Webkit au moment où j’écris ceci), basé sur ce travail de simurai&nbsp;:

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/simurai/pen/rJwpz/">
  Animated Radio Inputs</a> de <a href="/auteurs/simurai">simurai</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si l’on fait abstraction des préfixes constructeurs, le code CSS3 ressemble à ceci&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(0,100%,90%,1) 0%,
        hsla(0,100%,70%,1) 15%,
        hsla(0,100%,60%,.3) 28%,
        hsla(0,100%,30%,0) 70% );
    }



<figure role="group"><img src="/images/red-button-compressor.jpeg" alt=""/><figcaption>Lumière témoin rouge, inspirée de simurai</figcaption></figure>

Si je veux une lumière bleue, tout ce que j’ai à faire c’est de faire tourner la composante couleur du code HSL&nbsp;:

    //CSS
    input {
      background-image:
        radial-gradient( hsla(200,100%,90%,1) 0%,
        hsla(200,100%,70%,1) 15%,
        hsla(200,100%,60%,.3) 28%,
        hsla(200,100%,30%,0) 70% );
    }



<figure role="group"><img src="/images/blue-button-compressor.jpeg" alt=""/><figcaption>Lumière témoin bleue, vite fait !</figcaption></figure>

La nouvelle lumière a la même intensité et la même brillance, dans une couleur différente. Pas besoin de bricoler entre les rouges, les verts et les bleus.

<h2>Quand ne faut-il &nbsp;<em>pas</em>&nbsp; utiliser HSL ?</h2>

Réponse courte : quand votre site doit être visible sur IE8 et avant. Si vous avez besoin de la compatibilité IE, [Sass peut automatiquement transférer les couleurs HSL en hexadécimal](http://thenewcode.com/982/Learning-Sass-With-CodePen-Part-Four-Color)... Donc vous pouvez commencer dès aujourd’hui à profiter de tout ce qu’HSL peut vous apporter&nbsp;!

3 raisons d'utiliser HSL pour vos couleurs


Cela fait maintenant deux ans que j’ai écrit ici (_NdT: dans_ [24Ways](http://24ways.org/)) un article sur [les animations dans un monde sans Flash](http://24ways.org/2012/flashless-animation/). Depuis, les animations ont surgi un peu partout, aussi bien sur des interfaces au design épuré que sur des grilles de type magazine. C’est une époque formidable pour tous les mordus d’animation et d’interaction, les passionnés d’expérience utilisateur (UX), les designers d’interface utilisateur (UI) et toute une troupe d’autres acronymes&nbsp;!

Mais dans notre hâte à expérimenter toutes ces possibilités d’animation, il semble que nous nous posions de moins en moins la question de savoir si nous devrions vraiment les utiliser. Nous passons plus de temps à nous creuser les méninges sur la façon d’animer tous les éléments à 60fps qu’à réfléchir aux moyens d’éviter que les utilisateurs souffrant de [troubles vestibulaires](http://a11yproject.com/posts/understanding-vestibular-disorders/) ne puissent utiliser notre site.

<figure role="group"><img src="/images/Rachel_Nabors_-_Google_1-compressor.jpeg" alt="vos designers ne se sont pas posé la question de savoir s'ils devaient utiliser des animations"/></figure>

J’aime l’animation web. Je la vis, et j'en fais [d’adorables petites choses stupides](http://rachelnabors.com/alice-in-videoland/book/) qui n’auraient pas leur place sur un site qui se respecte. Je sais qu’on peut en abuser. Nous nous sommes tous moqués de la _Flash-turbation_... mais comme nous oublions vite les leçons apprises de cette époque du design web&nbsp;! Les effets de parallax scrolling sont peut-être le _skip intro_ de cette génération. Nous avons certainement appris des choses plus intéressantes dans la période de sobriété [entre Flash et l’API d’animation web](http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/).

Alors voici cinq petits conseils pour nous permettre de prendre un peu de recul par rapport aux excès d’animations. Si nous les gardons bien à l’esprit, nous pouvons faire de 2015 l’année où l’animation web prendra son véritable essor.

## Animez délibérément

Malheureusement, l’animation est considérée par la majorité des designers comme un élément décoratif. Les designers d’interfaces utilisateurs et les développeurs d’interaction comprennent mieux ces choses. Mais lorsque je donne un atelier sur l’_animation pour l’interaction_, je sais que mes étudiants devront mener une rude bataille contre des décideurs qui considèrent cela très joli, mais rangent rapidement le sujet au dernier rang de leurs priorités, quand ils ne l’éliminent pas tout simplement.

Difficile de se défaire de cette tare. Mais tout commence avec la qualité de nos choix&nbsp;: animer de manière délibérée, ou de ne pas animer du tout. Les animations de raccroc causeront toujours plus de mal que de bien. Les utilisateurs risquent de se plaindre qu’elles sont trop lentes ou trop rapides, ou de râler parce qu’ils ne comprennent pas ce qui se passe.

Au dernier Chrome Dev Summit cette année j’ai eu le privilège de m’entretenir avec [Roma Sha, responsable UX pour le design matériel de Polymer](https://www.youtube.com/watch?v=tfSiXRy1vEw) (et la merveilleuse [documentation d’animation](http://www.google.com/design/spec/animation/meaningful-transitions.html#)). Je lui ai demandé quel conseil elle donnerait aux personnes qui utilisent les animations et les transitions dans leur design. Elle m’a fait cette réponse très simple : **animez de manière délibérée**. Si vous ne pouvez pas vous poser un instant pour réfléchir à l’animation et pour prendre des décisions bien informées et bien articulées dans l’intérêt de l’utilisateur, alors mieux vaut ne même pas vous lancer là-dedans. Une animation prend de l’énergie, et une mauvaise animation est pire que pas d’animation du tout.

<figure role="group"><img itemprop="url" src="/images/Rachel_Nabors_-_Google_2.jpeg" alt="Oooh, quel rabat-joie ! Que pourrait-il arriver de mauvais ?"/></figure>

## Il faut plus que 12 principes

Nous essayons toujours de faire des corrélations entre des choses disparates qui suscitent notre intérêt. Depuis peu, il semble que de plus en plus de gens mettent [The Illusion of Life](http://www.amazon.com/gp/product/0786860707) (_NdT: une histoire des animations Disney et des procédés utilisés_) dans leur bibliothèque à côté de [Understanding Comics](http://www.scottmccloud.com/2-print/1-uc/index.html) (_NdT: le manuel de base pour comprendre la bande dessinée_). Ces livres nous donnent des aperçus utiles d’autres industries. Cependant, nous ne devrions jamais confondre un site web et un livre de bandes dessinées ou un dessin animé. Certains de ces concepts, s’ils nous aident à considérer notre travail sous un jour nouveau, sont plus ou moins appropriés au domaine qui est le nôtre.

Je pense en particulier aux _12 principes de l’animation_, mis en avant par les vétérans des studios Disney dans ce beau livre The Illusion of Life. Ces principes sont très utiles pour faire des animations réalistes et accrocheuses, comme une balle qui rebondit ou un écureuil qui trottine, mais ils ne nous orientent pas du tout pour savoir quand ou comment quelque chose doit être animé dans le cadre d’une expérience interactive améliorée, comme par exemple combien de temps un menu déroulant doit prendre pour se dérouler, ou bien si un groupe d’objets manipulables devrait être animé de manière séquentielle ou simultanée.

Les douze principes sont un excellent point de départ, mais nous avons tellement plus à apprendre. J’ai listé au moins [six autres fonctions d’animation interactive](http://alistapart.com/article/web-animation-at-work) applicables à la conception web et d’applications. Lorsque nous pensons à l’animation, nous devrions envisager pourquoi et comment, et non pas seulement aux aspects esthétiques. Ceux-ci ne signifient rien si l’animation est superflue ou source de confusion.

## Utile et nécessaire, _puis_ belle

Chez les Shakers, il y a un proverbe qui dit&nbsp;: “Ne fais pas quelque chose si elle n’est pas à la fois nécessaire et utile; mais si elle est à la fois nécessaire et utile, n’hésite pas à la rendre belle”. S’agissant de l’animation et du web, il y a actuellement très peu de documentation sur ce qui la rend utile ou nécessaire. Nous avons tendance à nous concentrer davantage sur la beauté, l’agrément, l’esthétique. Mais même si l’esthétique est importante, elle occupe la banquette arrière par rapport à l’expérience globale de l’utilisateur.

La première fois que j’ai vu [l’écran de chargement de Pokemon Yellow](//www.youtube.com/embed/m5MrbCGcaUI?rel=0) sur ma GameBoy j’ai été captivée. À partir de la sixième fois, j’écrasais le bouton Start dès que le logo apparaissait à l’écran. Ce qui nous semble plein de charme et de sens lorsque nous travaillons sur un projet peut apparaître tout autrement à nos utilisateurs. Et même lorsqu’une animation adorable est très bien reçue, comme ce fut le cas de l’écran d’ouverture de Pokemon Yellow, trop de répétitions d’une animation jolie mais devenue inutile peut irriter l’utilisateur.

<figure role="group"><img src="/images/animation-ui-illos2.jpeg" alt=""/><figcaption>J’ai trouvé ça mignon la première fois, mais à la 70ème... c’est chiant&nbsp;!</figcaption></figure>

Si une animation n’aide pas l’utilisateur d’une façon ou d’une autre, c’est une utilisation gratuite de la batterie et des cycles de processing. Plutôt que d’animer pour le seul plaisir d’animer, nous devrions être capables d’articuler deux choses que l’animation réalise pour l’utilisateur. Par exemple, prenons cette icône de menu de [Finethought.com](http://finethought.com/) (trouvée grâce à [Use Your Interface](http://useyourinterface.com/post/97576888941)). L’icône fait deux choses lorsqu’elle est cliquée&nbsp;:

1. Elle donne un feedback à l’utilisateur en s’animant, ce qui permet à l’utilisateur de savoir qu’elle a bien été cliquée.
2. Elle montre que sa relation au contenu de la page a changé, en se transformant en bouton de fermeture.

Si nous avons deux bonnes raisons d’animer quelque chose, rien ne s’oppose à ce qu’une troisième raison soit l’agrément de l’utilisateur.

## Aller 4 fois plus vite

Il existe une règle générale dans le monde de l’animation traditionnelle qui s’applique très bien à l’animation web&nbsp;: quelle que soit la durée de ton animation, divise-la en deux. Puis divise-la encore en deux. Lorsque nous travaillons sur une animation pendant des heures, notre notion du temps se dilate, ce qui nous paraît rapide est en réalité insupportablement lent pour la plupart des utilisateurs. En fait, la critique la plus courante actuellement de la part des utilisateurs d’interfaces animées est “c’est trop lent !” Une bonne animation est non bloquante, et pour cela, elle doit aller vite.

Lorsque vos animations sont prêtes à être intégrées au site, réduisez leur durée à 25% de leur vitesse originale&nbsp;: un fade-out de 4 secondes sera parfait en 1 seconde.

## Installer un bouton stop

Quel que soit l’intérêt ou la nécessité de votre animation, il y aura toujours des gens qu’elle rendra physiquement malades. Pour eux, il est important de prévoir une façon de désactiver les animations sur le site.

Heureusement, les designers web pensent déjà à divers moyens de permettre aux utilisateurs de choisir eux-mêmes leur expérience web. Par exemple, ce [site de présentation du film d’animation Little from the Fish Shop](https://www.youtube.com/watch?v=2c3siLM1zlw) permet aux utilisateurs de désactiver la plupart des effets de parallaxe. Même si cela n’annule pas toutes les animations, c’est suffisant pour vous éviter la nausée.

L’animation est un outil puissant dans l’arsenal du web design. Mais la prudence s’impose&nbsp;: si nous abusons de l’animation, elle risque de finir par avoir mauvaise réputation. Si nous la sous-estimons, elle ne sera jamais une priorité. Mais si nous la manions avec sagacité, l’animation est un outil qui nous aidera à construire des sites et des applications plus faciles à utiliser et plus agréables, pour les années qui viennent.

**Faisons de 2015 l’année où les animations web se seront mises au service des utilisateurs**.

<figure role="group"><img src="/images/Rachel_Nabors_-_Google_3-compressor.jpeg" alt="Un dinosaure qui pense 'ils ne créent jamais la même animation deux fois. Comme s'ils testaient les specs. Systématiquement. Ils se rappellent."/></figure>

NdT : _Les illustrations détournées de_ Jurassic Park _n'ont pas été retenues par l'éditeur de l'article original, Rachel Nabors les a amicalement communiquées à La Cascade_.


5 façons d'animer de manière responsable


Le [SVG](/tags/svg/) en ligne peut faire des miracles pour le design responsif tout en réduisant le temps de chargement des pages web et en produisant des icônes propres et à la netteté parfaite —&nbsp;mais il n’est pas sans poser quelques problèmes, parmi lesquels l’accessibilité. L’accessibilité n’était pas une priorité lorsque la spécification originale SVG 1.0 a été publiée il y a 15 ans. Cependant, SVG 1.1 a amélioré les choses et SVG 2.0 devrait à l’avenir mettre l’accessibilité au premier plan.

Pour l’instant, rendre les SVG accessibles demande un peu de travail, mais c’est un processus assez simple si vous suivez ces cinq règles&nbsp;:

<h2>1 - Traitez les liens vers une image SVG comme les bitmaps</h2>

Lorsque vous faites un lien vers un document SVG comme image, l’attribut `alt` est requis&nbsp;:

```HTML
  <img src="coca-cola-logo.svg" alt="Coca-Cola">
```

...comme pour n’importe quelle [image matricielle](http://thenewcode.com/64/Bitmap-Images-for-the-Web-Formats-and-Optimisation-Options)
(_bitmap_).

<h2>2 - Pour SVG en ligne, donnez un titre</h2>

Le `<title>` d’un élément SVG sert le même objectif que le `<title>` d’un document HTML&nbsp;: C’est une brève description du document, ou un conseil. On peut le voir comme le `<alt>` d’un SVG inline.

```HTML
  <header>
    <svg>
      <title>Coca-Cola</title>
      <polyline ... />
    </svg>
  </header>
```

`<title>` peut également être utilisé pour les éléments individuels&nbsp;: plus spécifiquement `<circle>`, `<ellipse>`, `<image>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>` et `<use>`, ainsi que les éléments container SVG tels que `<a>`, `<defs>`, `<g>` et `<symbol>`. `<title>` sera généralement le premier enfant de cet élément. Parfois, ce titre sera _visuellement_ descriptif&nbsp;:

```xml
  <title>Yellow Five-Pointed Star</title>
  <polygon fill="#ff0" points="509,19.6 534.7,71.7 592.1,80 550.5,120.5 560.4,177.7 509,150.7 457.6,177.7 467.5,120.5 425.9,80 483.3,71.7 "/>
```

...et parfois il sera _informationnel_ (c’est à dire qu’il décrit la _finalité_ d’un élément, ou son _sens_).

**Note** : on remarquera que les éléments `<text>` de SVG inline sont dans la plupart des cas complètement accessibles, puisqu’ils contiennent du texte —&nbsp;quels que soient les effets graphiques qui leur sont appliqués&nbsp;— ils n’auront donc pas besoin de `<title>` dans ce cas. Toutefois, si vous transformez votre texte en pures formes vectorielles, il vous _faudra_ fournir un `<title>`.

Comme pour les pages HTML, le texte situé à l’intérieur d’un élément SVG est lu par les outils d’accessibilité dans l’_ordre du document_, et non dans l’ordre de leur _position visuelle à l’écran_.

Si un SVG ne contient qu’un seul élément, un simple `<title>` après la balise ouvrante `<svg>` pourra s’avérer suffisant. Si le document contient plusieurs éléments, vous aurez probablement besoin d’un `<title>` pour chacun ou pour chaque groupe&nbsp;:

```xml
<svg>
  <g>
    <title>Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>
```

Vous pouvez améliorer cette information en associant `<title>` à `aria-labelledby`. Dans le cas d’un élément simple, cela peut renvoyer à l’élément racine `<svg>`&nbsp;:

```xml
<svg aria-labelledby="title">
  <g>
    <title id="title" lang="en">Red Rectangle</title>
    <rect x="0" y="0" width="100" height="50" fill="red" />
  </g>
</svg>
```

Tout comme `<desc>` et d’autres éléments HTML, `<title>` devrait également avoir [un attribut `lang` indiquant la langue utilisée](http://thenewcode.com/474/Language-Support-In-HTML) (voir plus bas).

**Note** : il est possible de naviguer vers les éléments SVG utilisés dans les balises `<img>` comme s’ils étaient des éléments autonomes, ils peuvent également être indexés par les moteurs de recherche en tant de documents séparés, et de ce fait ils devraient aussi contenir un `<title>` et une `<desc>` appropriés _dans le balisage du document SVG original_.

<h2>3 - Donnez une description lorsque nécessaire</h2>

`<desc>` correspond à une description plus longue de votre élément SVG, spécifiant son intention. On peut le voir un peu comme l’équivalent SVG de `figcaption`.

```xml
<svg>
  <g>
    <title>International sales by country</title>
    <title lang="fr">Les ventes internationales par pays</title>
    <desc>Bar chart showing company sales by country, in millions of dollars (US).</desc>
    <desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc>
    <g>
      <text x="20" y="70">US Sales</text>
      <title id="USamount">30 million</title>
      <rect x="0" y="0" width="100" height="50" fill="red" aria-labelledby="USamount" />
    </g>
  <g>
</svg>
```

<text x="20" y="70">French Sales</text><title id="FRamount">50 million</title><rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount" /></g></g></svg><svg width="320" height="150"><g><title>International sales by country</title><title lang="fr">Les ventes internationales par pays</title><desc>Bar chart showing company sales by country, in millions of dollars (US).</desc><desc lang="fr">Diagramme montrant les ventes de l’entreprise par pays, en millions de dollars (US).</desc><g><text x="20" y="120">US Sales</text><title id="USamount">30 million</title><rect x="0" y="50" width="100" height="50" fill="green" aria-labelledby="USamount"></rect></g><g><text x="140" y="120">French Sales</text><title id="FRamount">50 million</title><rect x="150" y="20" width="100" height="80" fill="red" aria-labelledby="FRamount"></rect></g></g></svg>

Cet exemple suppose que vous fournirez également les axes graphiques et les informations chiffrées pour les utilisateurs n’ayant _pas_ de problèmes d’accessibilité&nbsp;: quand c’est possible, exposer l’information sous forme de `<text>` rendra service à _tous_ comme dans l'illustration qui précède.

<h2>4 - Vous n’avez rien à faire si le SVG est purement décoratif</h2>

Si l’élément SVG est utilisé à des fins purement décoratives —&nbsp;un dégradé ou un motif de background par exemple&nbsp;— pas besoin de fournir `<title>`, `<desc>` ni `alt`. (Si vous voulez que votre page soit [validée](http://thenewcode.com/454/Climbing-Mount-Sinai-The-Importance-of-Web-Page-Validation) par les outils de validation, vous devrez mettre un `alt` pour les SVG liés, mais vide pour les éléments décoratifs, c’est à dire `alt=""` ou simplement `alt`).

Par défaut, ni `<desc>` ni `<title>` ne sont rendus visuellement dans le navigateur (bien qu’on puisse leur appliquer un style pour qu’ils le soient)&nbsp;; le texte de `<title>` apparaîtra au survol dans les navigateurs compatibles.  
(<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : vous pouvez faire l’essai avec le diagramme ci-dessus_).

<h2>5 - Ne comptez pas sur votre WYSIWYG pour le faire à votre place<h2>

Malheureusement, Adobe Illustrator ne supporte que très peu l’accessibilité SVG. Il exporte les noms de calques comme des valeurs d’ `id` plutôt que comme une information `<title>`. Inkscape fait mieux en vous permettant d’ajouter et d’éditer `<title>` et `<desc>` pour chaque élément, avec l’inconvénient d’ajouter du code redondant à votre markup. Vous en viendrez sans doute à la conclusion qu’il est préférable d’ajouter un peu de code à la main pour ajouter une pleine accessibilité à un document SVG réalisé avec les outils vectoriels.

<span class="ressourcesComplementaires">**Ressources complémentaires en anglais**</span>

- [Tips for creating accessible SVG](http://www.sitepoint.com/tips-accessible-svg/), par Léonie Watson

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

- [SVG, liens et lecteurs d’écran](http://blog.atalan.fr/svg-liens-et-lecteurs-decran/), sur le blog d’Atalan


5 règles pour rendre SVG accessible


La propriété `align-items` est liée à la mise en page CSS. Elle affecte la façon dont les éléments sont alignés à la fois **dans les mises en page [Flexbox](/articles/flexbox-guide-complet) et [Grid](/articles/css-grid-layout-guide-complet)**.

- [align-items dans Flexbox](/articles/flexbox-guide-complet#align-items)
- [align-items dans Grid](/articles/css-grid-layout-guide-complet#ai)

## Syntaxe

```css
align-items: flex-start | flex-end | center | baseline | stretch;
```

La propriété `align-items` définit le comportement par défaut pour la disposition des éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Imaginez une mise en page flexbox horizontale. Ce flux horizontal est l'axe _principal_, donc align-items est l'alignement _opposé_ à celui-ci, sur l'axe _vertical_. Gardez à l'esprit que ça change évidemment lorsque l'axe principal change, et que l'axe transversal change avec lui.

Vous pouvez considérer `align-items` comme la version `justify-content` pour l'axe transversal (perpendiculaire à l'axe principal).

<p class="is-style-explanation">Le reste de cet article est plutôt axé sur flexbox plutôt que sur grid. Les concepts sont toujours très similaires, mais il existe quelques différences. Par exemple, dans flexbox, les axes peuvent changer, alors que dans grid ils ne le peuvent pas. Ça a pour conséquence par exemple le fait que flexbox a des valeurs comme `flex-start` alors que dans grid, c'est juste `start`.</p>

## Démo (flexbox)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_AvXmrQ/2bfe2c024739bdd4098572f87d1bf585" src="//codepen.io/KittyGiraudel/embed/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585?height=640&amp;theme-id=light&amp;slug-hash=AvXmrQ/2bfe2c024739bdd4098572f87d1bf585&amp;user=KittyGiraudel&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/KittyGiraudel/pen/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585">
  CSS-Tricks: :nth-last-child</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-items


La propriété `align-self` est une sous-propriété du module Flexible Box Layout. Elle permet de remplacer la valeur [align-items](/articles/align-items) pour des éléments flex spécifiques.

La propriété `align-self` accepte les 5 mêmes valeurs que la propriété `align-items`.

## Syntaxe

```css
align-self: auto | flex-start | flex-end | center | baseline | stretch
  .flex-item {
  align-self: flex-end;
}
```

## Démo

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/GBMZKR">
  align-self demo</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-self

Alignement en CSS, un guide complet


Le premier principe d'accessibilité du contenu dans les _[Web Content Accessible Guidelines](https://www.w3.org/TR/WCAG22/)_ est que le contenu doit être **perceptible**. Après tout, vous ne pourrez pas accéder à l'information ou à la fonctionnalité si vous ne savez pas qu'elle est là&nbsp;! Et apparemment, le moyen le plus efficace de s'assurer que les utilisateurs ne pourront pas distinguer votre contenu est de le définir dans une couleur qui ne se démarque pas de son arrière-plan —&nbsp;en d'autres termes, d'avoir un faible contraste de couleur.

Nous pouvons tous rencontrer un problème lié à un contraste insuffisant, pour diverses raisons —&nbsp;par exemple à cause du reflet du soleil sur notre écran&nbsp;— mais le contraste insuffisant d'un texte a un impact _démesuré_ sur les utilisateurs malvoyants tels que ceux qui ont des problèmes de vision ou qui sont daltoniens. Et pourtant, le texte à faible contraste est partout. Le rapport [WebAIM Million pour 2022](https://webaim.org/projects/million/) a révélé que près de 84 % des 1 million de pages d'accueil les plus populaires avaient au moins une violation de contraste insuffisant, avec une moyenne de 31,6 instances distinctes de texte faiblement contrasté par page d'accueil. [Un rapport de 2021 de Deque Systems (PDF)](https://accessibility.deque.com/hubfs/Accessibility-Coverage-Report.pdf#page=6) a révélé que le texte à faible contraste représentait 30 % des défauts d'accessibilité automatiquement détectables, ce qui en fait de loin le défaut d'accessibilité le plus courant.

Corriger l'insuffisance de contraste pourrait grandement contribuer à **rendre le Web plus utilisable**. Nous allons voir comment mesurer le contraste, corriger facilement un faible contraste et assurer un contraste suffisant dans nos sites à l'avenir.

## Obtenez un ratio

Le plus simple pour commencer est d'utiliser un contrôleur de contraste de couleur. Des outils tels que [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) prennent une paire de couleurs que vous leur donnez et vous retournent un rapport de contraste. En attendant, si vous avez déjà déployé votre site et vos couleurs en direct pour le monde, vous pouvez utiliser des outils d'analyse d'accessibilité pleine page tels que l'extension [ax DevTools](https://www.deque.com/axe/devtools/), et ils effectueront des opérations de contraste des couleurs pour chaque bit de texte et d'arrière-plan sur votre page et identifieront les éléments spécifiques de votre page dont le contraste est insuffisant. Dans tous les cas, vous obtiendrez un rapport de contraste des couleurs.

Ces ratios prennent le format `<un certain nombre>:1`, allant de `1:1` (pas de contraste — vous avez comparé une couleur à elle-même) à `21:1` (contraste maximum, uniquement obtenu en comparant le noir et blanc). Plus le premier chiffre est élevé, plus il y a de contraste entre les deux couleurs.

Ce rapport n'est pas vraiment un score de la différence entre les deux couleurs, mais plutôt un score de la façon dont une couleur serait perceptible par dessus l'autre. Par exemple, en tant que personne non daltonienne, les couleurs CSS tomato `#ff6347` et cornflowerblue `#6495ed` me semblent très différentes&nbsp;:

<section class="demo" aria-label="Démo : deux cercles, un rouge tomate et l'autre bleu clair"><div class="swatch tomato"></div><div class="swatch cornflowerblue"></div></section>

Et pourtant, la tomate et le bleuet ont ensemble un très mauvais rapport de contraste des couleurs&nbsp;: seulement environ 1,009:1. C'est à peine mieux que la comparaison de n'importe quelle couleur avec elle-même&nbsp;! Si nous empilons ces couleurs l'une sur l'autre (avec nos excuses anticipées&nbsp;!), nous pouvons voir qu'ensemble elles sont difficiles, voire carrément douloureuses, à lire&nbsp;:

<section class="legibility demo" aria-label="Exemple: Texte de couleur rouge tomate sur un fond de couleur bleu fleur de maïs">
<strong>Qui a envie de lire ça ?</strong>
</section>

Les algorithmes de contraste de couleurs actuelllement disponibles pour obtenir ces rapports n'essaient pas de nous donner la différence mathématique pure entre deux couleurs, mais décrivent plutôt une différence plus subjective entre les deux couleurs, basée sur la perception humaine. Plus précisément, ils comparent la [luminance](https://fr.wikipedia.org/wiki/Luminance) relative des deux couleurs, ce qui revient essentiellement à savoir si une couleur est plus claire ou plus lumineuse que l'autre. Ici, la tomate et le bleuet sont à peu près aussi brillants, c'est pourquoi ils sont difficiles à lire ensemble.

### Utilisation des ratios

Maintenant que nous avons une idée de la façon dont on mesure le contraste entre deux couleurs, comment savons-nous quand le contraste est suffisant&nbsp;?

Dans le [critère de réussite 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) des directives pour l'accessibilité des contenus Web, le World Wide Web Consortium définit deux points de repère clés dont nous devons nous souvenir&nbsp;:

- La plupart des textes ont besoin d'un rapport d'au moins 4,5:1 par rapport à leur arrière-plan.
- Les règles pour les textes plus volumineux sont un peu plus souples —&nbsp;un texte volumineux n'a besoin que de respecter un rapport de 3:1 par rapport à son arrière-plan.

## Comment améliorer votre score

Vous avez donc mesuré votre texte et déterminé qu'il ne répond pas aux exigences de contraste des couleurs. Que pouvez-vous faire pour régler la situation sans chambouler votre design&nbsp;?

En règle générale, j'aborde la correction du contraste des couleurs de deux manières différentes, au cas par cas :

- Choisir des couleurs plus claires et plus foncées
- Agrandir le texte

### Passez du côté Clair/Obscur

Votre approche principale pour résoudre les problèmes de contraste des couleurs consistera à modifier les couleurs sous-jacentes elles-mêmes.

En général cependant, vous vous retrouverez limité dans ce que vous pouvez faire si vous abordez le problème en modifiant les _teintes_ des couleurs. D'une part, les guides de style des marques ou des sites ont généralement des palettes de couleurs assez strictes, et le changement de teintes créera souvent des couleurs qui s'en écartent. D'autre part, comme l'a montré l'exemple précédent de tomate et bleuet, les teintes des couleurs ont souvent un impact très minime sur le rapport entre ces deux couleurs, surtout si ces couleurs ont des luminosités très similaires.

Au lieu de cela, il me semble que rendre une couleur plus claire et/ou l'autre couleur plus foncée a un impact plus profond sur le contraste, tout en restant plus cohérent avec le reste des composantes du design et plus proche de la sensibilité générale du site.

### L'agrandissement est parfaitement acceptable

Un texte plus grand et plus épais a tendance à être beaucoup plus facile à lire, même sur des arrière-plans à faible contraste, qu'un texte plus petit et plus fin. Par exemple, dans l'exemple suivant, les deux lignes de texte sont de la même couleur, mais si vous arrivez à discerner le texte, il sera plus facile d'en distinguer la première ligne, dont les caractères sont plus grands et plus gras :

<section class="gris" aria-label="Exemple: Text gris clair sur un fond gris encore plus clair: le texte en gras est à peu près lisible, le texte en petits caractères est illisible.">
<p><strong>Je suis plutôt plus facile à lire !</strong></p>
<p><small>Je suis bien plus difficile à lire !</small></p>
</section>

C'est à cause de cette différence que le WCAG est un peu plus indulgent pour le texte volumineux, qu'il définit comme un texte d'au moins `18 pt` ou, alternativement, comme un texte en gras et d'au moins `14 pt`. N'oubliez pas que `pt` est une unité de taille de police définie par le navigateur de l'utilisateur (un peu comme `rem`) —&nbsp;ce qui signifie, dans les paramètres par défaut de la plupart des navigateurs, que le seuil est d'environ 24 pixels, ou à la fois "en gras _et_ d'environ 19 pixels". Le texte qui répond à ce critère de dimensionnement n'a besoin que d'un rapport de `3:1` par rapport à son arrière-plan, selon le WCAG.

Vous pourrez parfois utiliser ce seuil plus indulgent à votre avantage, car au lieu de devoir choisir différentes couleurs, vous pourrez peut-être augmenter la taille ou le poids de votre police. Si vous utilisez uniquement cette approche pour atteindre vos seuils minimaux, ce correctif ayant tendance à être très contextuel ne s'appliquera probablement qu'à des éléments tels que les titres. Cependant, l'accessibilité ne consiste pas seulement à atteindre des seuils. Le WCAG est la barre minimale à franchir, mais une fois que vous avez franchi ces seuils minimaux, vous pouvez utiliser des tactiques telles que l'augmentation de la taille de la police, l'augmentation du poids de la police ou le choix d'une police de caractères plus épaisse pour offrir une expérience plus lisible, même s'ils n'améliorent pas votre score de contraste.

## Construire des approches systémiques pour assurer le contraste des couleurs

Ces approches fonctionnent bien pour ajouter des couleurs uniques à une page ou pour corriger un texte à faible contraste mis en évidence par un audit, mais ce n'est pas très durable pour les grands sites ou organisations.

De nombreuses organisations se tournent vers les systèmes de design pour communiquer leurs pratiques UI et UX, y compris leurs palettes de couleurs, ainsi que leurs connaissances institutionnelles sur le moment et la manière dont chaque couleur desdites palettes doit être utilisée. Ces systèmes de design sont un excellent endroit pour coder les connaissances sur les appariements de couleurs acceptables. Par exemple, un système de design peut déterminer des couleurs d'arrière-plan et des couleurs de texte acceptables pour les boutons, et ces couleurs auront certainement été choisies en fonction de rapports de contraste acceptables. Les designers et les développeurs peuvent tirer parti de ces décisions sans même avoir _vraiment besoin_ du contexte d'arrière-plan complet de la façon dont ces couleurs ont été choisies —&nbsp;il y a un [puits de succès](https://blog.codinghorror.com/falling-into-the-pit-of-success/) large et facile.

👉🏽 _NdT : comme rappelé dans l'article en lien ci-dessus, notre objectif n'est pas que l'utilisateur remporte une brillante victoire au terme de multiples épreuves et surprises, mais qu'il_ tombe simplement dans des pratiques gagnantes _en utilisant notre plateforme et nos frameworks. Faciliter les ennuis, c'est courir à l'échec_.

J'ai également entendu parler de systèmes de design qui deviennent encore plus explicites dans la façon dont ils communiquent des associations de couleurs accessibles. Une astuce que j'ai apprise de [Mike Aparicio](https://www.mikeaparicio.com/) réside dans la façon dont il nomme les nuances du coloris d'un système de design. Dans ses systèmes de design, chaque nuance d'une couleur reçoit un nombre de 100 à 900, où 100 est la nuance la plus claire, 600 est la nuance "de base", 900 est la nuance la plus foncée et les autres couleurs sont remplies entre les deux comme de besoin. Ses échelles de couleurs sont calculées de manière à ce que les couleurs "200" et plus claires soient toujours suffisamment claires pour contraster avec la teinte de base "600". Cette règle est assez facile à retenir pour les designers et les développeurs, ce qui garantit qu'ils sont beaucoup plus susceptibles de choisir des appariements acceptables. Vous pouvez l'entendre parler de cette approche sur [Frontend Horse](https://frontend.horse/episode/lets-make-a-design-system) et dans [ma propre émission Some Antics](https://www.youtube.com/watch?v=wX3z42LbfbI).

## Encore quelques éléments à garder en tête à propos du contraste

Les systèmes de rapport de contraste actuels sont assez soigneusement vérifiés, mais il y a quelques limitations, dont les suivantes&nbsp;:

- Les algorithmes actuels ne prennent pas en compte la question de savoir quelle couleur est au premier plan et laquelle est en arrière-plan, même si dans certaines paires de couleurs telles que le marron et le rose, une couleur est définitivement plus appropriée comme premier plan et non comme arrière-plan.
- Le gras de certaines polices de caractères n'est pas toujours très gras, ce qui signifie que vous pouvez répondre à la _lettre_ de l'exigence de texte en gras sans en respecter l'_esprit_.

Une future version des Directives pour l'accessibilité du contenu Web peut utiliser [un algorithme de contraste de couleur différent](https://github.com/Myndex/SAPC-APCA) qui utilise plus de facteurs tels que ceux-ci, mais [cela nécessite encore plus de vérification](https://yatil.net/blog/wcag-3-is-not-ready-yet). Si vous rencontrez certaines de ces limitations dans votre design et si vous pensez que votre design est techniquement conforme, je vous encourage à faire des tests utilisateur si possible, de préférence avec des utilisateurs malvoyants, pour vérifier si votre contenu est ou non lisible pour de vrais gens.

De plus, la couleur peut être une chose difficile à équilibrer&nbsp;! Si vous avez du mal à distinguer différents contenus avec des couleurs, envisagez de vous appuyer sur d'autres leviers et d'utiliser des outils tels que des icônes ou différentes tailles de police pour faire passer votre message&nbsp;! Cela garantit que vous [ne comptez pas uniquement sur la couleur](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) pour transmettre du sens, et la création de moyens redondants pour intégrer des informations dans votre design conduira presque toujours à une expérience plus accessible.

## Points à retenir en conclusion

Les problèmes de contraste des couleurs sont partout, et les éliminer réduirait considérablement les barrières d'accès sur le Web. Au cas par cas, je trouve plus simple de corriger un faible insuffisant en ajustant la luminosité ou l'obscurité des couleurs, plutôt que leur teinte ou leur saturation. Dans _certains_ cas (notamment les textes proéminents tels que les titres), vous pourrez peut-être tirer parti de la taille et de l'épaisseur de la police. À l'avenir, le contraste devrait être traité de manière systémique, typiquement par le biais de systèmes de design codifiés et, idéalement, contrôlé par des tests utilisateurs.


Améliorer un texte à faible contraste

Il existe plusieurs façons d'animer une image svg, depuis la balise `animate` jusqu'aux bibliothèques comme [Snap.svg](http://snapsvg.io) ou [SVG.js](http://www.svgjs.com). Nous allons essayer autre chose ici, en utilisant SVG à l'intérieur de notre HTML et en animant les parties de l'image avec CSS.

Je me suis amusé avec ça dernièrement, [Wufoo](http://www.wufoo.com/landing/1/?utm_source=csstricks&utm_medium=ppc&cmpid=brand&utm_network=d) souhaitant rafraîchir le graphisme de ses pubs sur [CSS-Tricks](http://css-tricks.com). Voici une idée de ce que nous allons réaliser&nbsp;:

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/dvjhn/">
  Wufoo SVG Ad</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## 1. Concevoir la pub

Ça va ressembler à une [leçon de dessin sommaire](http://cdn.css-tricks.com/wp-content/uploads/2014/04/How_to_Draw_Owl.jpg), mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Je souhaitais une pub super simple à partir de leur logo classique, de leurs couleurs etc., auquels j'ajouterais une touche personnelle.

1. Faire sauter les lettres dans la page. Wufoo est un mot marrant, les lettres peuvent s'amuser un peu.
2. Dans le bon vieux temps, on faisait des T-Shirts avec un dinosaure devant, et derrière il y avait "Fast. Smart. Formidable", des caractéristiques que Wufoo partage avec les dinosaures, sans parler du jeu de mots sur FORMidable… (NdT: Wufoo est un outil permettant d'élaborer des formulaires, _form_ en anglais). Faisons apparaître et disparaître ce slogan.
3. Pour aller au bout de notre idée, faisons apparaître la tête d'un dinosaure qui surgit, intrigué, des profondeurs, et disparaît à la vitesse de l'éclair, laissant le mot "fast" s'afficher.

J'ai mis tout ça sur Illustrator&nbsp;:

<figure role="group"><img src="/images/ansvg1-compressor.jpeg" alt="des images conçues sur illustrator"/></figure>

Remarquez que le logo et le texte du slogan sont des formes vectorielles, leur rendu en `<path>` (chemins) SVG sera très simple.

Le texte "Fast." est laissé en tant que texte dans Illustrator. Quand je le sauvegarderai, il sera conservé sous la forme d'élément `<text>`.

## 2. Sauvegarder en format SVG

Illustrator peut le sauvegarder directement en <span itemprop="about">format SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg2-compressor.png" alt="comment sauvegarder sur illustrator"/></figure>

Vous pouvez ouvrir ce fichier SVG dans votre éditeur de texte et voir le <span itemprop="about">code SVG</span>&nbsp;:

<figure role="group"><img src="/images/ansvg3-compressor.png" alt="le contenu complexe du fichier svg"/></figure>

## 3. Nettoyer le SVG, lui ajouter des classes

Pour le nettoyage, vous pouvez utiliser [SVGO](https://github.com/svg/svgo) qui optimisera le fichier, retirera le DOCTYPE et toutes les choses inutiles. Mais ce qui est plus important ici, c'est de donner des classes aux différentes formes, afin que nous puissions les sélectionner dans notre CSS.

    //CSS

    <svg version="1.1" id="wufoo-ad" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">

      
      <rect class="wufoo-background" fill="#D03E27" width="400" height="400" />

      
      <path class="wufoo-letter" fill="#F4F4F4" d="M60.858,129...." />
      <path class="wufoo-letter" fill="#F4F4F4" d="..." />
         

      
      <g class="trex">
         <path ... />
         <path ... />
      </g>

    </svg>

## 4. Insérer le SVG

Vous pouvez copier-coller ce SVG dans votre HTML, à l'endroit où vous voulez que la pub apparaisse. Si vous ne voulez pas que ça embrouille votre template, vous pouvez aussi faire quelque chose comme&nbsp;:

    //HTML

    <aside class="sidebar">

       <div class="module module-ad">

           <?php include("ads/wufoo.svg"); ?>

       </div>

       ...

## 5. Animer !

Nos formes sont maintenant dans le [DOM](/articles/le-dom-cest-quoi-exactement), nous pouvons les cibler et leur appliquer un style comme à n'importe quel autre élément HTML. Allons-y.

Pour commencer, disons que cette animation doit avoir une durée totale de 10&nbsp;secondes.

#### Fade in/out des mots

Le premier événement est l'apparition des mots Fast. Smart. Formidable. Chaque mot sera affiché pendant une seconde. Nous allons donc réaliser une animation dans laquelle chaque mot apparaît pour une durée égale à 10% du temps total&nbsp;:

    //CSS

    @keyframes hideshow {
      0% { opacity: 1; }
      10% { opacity: 1; }
      15% { opacity: 0; }
      100% { opacity: 0; }
    }

Puis ciblons le premier mot et fixons la durée de l'animation à 10 secondes (10% de cette durée = 1 seconde)&nbsp;:

    //CSS

    .text-1 {
      animation: hideshow 10s ease infinite;
    }

Les deux mots suivants seront d'abord cachés (`opacity: 0;`) puis utiliseront exactement la même animation mais avec un délai, pour les faire partir successivement&nbsp;:

    //CSS

    .text-2 {
      opacity: 0;
      animation: hideshow 10s 1.5s ease infinite;
    }
    .text-3 {
      opacity: 0;
      animation: hideshow 10s 3s ease infinite;
    }

La demie seconde supplémentaire entre chaque mot permet un fade out en douceur avant l'apparition du mot suivant.

#### Lettres bondissantes

Passons maintenant aux lettres de WUFOO et à leur petite danse&nbsp;:

<figure role="group"><img src="/images/ansvg4-compressor.gif" alt="les lettres de wufoo s'animent"/></figure>

L'astuce ici est de donner une durée de 5 secondes à notre animation, mais de la faire fonctionner dans un sens puis dans l'autre. De cette façon, elle correspond bien à notre durée totale de 10 secondes, elle se produit au milieu comme nous le souhaitons, et nous n'avons besoin de paramétrer qu'un seul sens.

Chaque lettre a un petit délai, décalé par rapport aux autres&nbsp;:

    //SCSS

    .wufoo-letter {
      animation: kaboom 5s ease alternate infinite;
      &:nth-child(2) {
        animation-delay: 0.1s;
      }
      &:nth-child(3) {
        animation-delay: 0.2s;
      }
      &:nth-child(4) {
        animation-delay: 0.3s;
      }
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
    }
    @keyframes kaboom {
      90% {
        transform: scale(1.0);
      }
      100% {
        transform: scale(1.1);
      }
    }

Pour abréger, j'ai écrit ce code en SCSS et sans y mettre les préfixes constructeurs.

Je trouve que la propriété `animation-delay` devrait pouvoir supporter de façon native une valeur aléatoire, ce serait sympa de voir un délai différent à chaque apparition.

#### Le dinosaure, enfin

Dès que les mots ont disparu, le dinosaure lève la tête. L'animal est construit avec de nombreux `path`, mais nous pouvons le cibler globalement grâce à l'attribut groupe `<g>` qui enveloppe tous ces chemins.

Pour animer une position, [il est préférable d'utiliser translate](http://css-tricks.com/tale-of-animation-performance/) et c'est ce que nous allons faire&nbsp;:

    //CSS

    @keyframes popup {
      0% {
        transform: translateY(150px);
      }
      34% {
        transform: translateY(20px);
      }
      37% {
        transform: translateY(150px);
      }
      100% {
        transform: translateY(150px);
      }
    }

Nous voulons que cette animation "dure" 3 secondes, en fait elle dure 10 secondes mais vous n'en verrez que 3 secondes, car lorsque `translateY(150px)` se déclenche, le dinosaure est enfoui si profond que vous ne voyez rien. Aux alentours de 37% de cette animation (vers 3 secondes) vous le verrez apparaître lentement puis disparaître rapidement vers le bas.

Pour appliquer cette animation, nous devons nous assurer que&nbsp;:

- Le dinosaure est invisible au départ.
- L'animation comporte un délai, de façon à ce que la danse des lettres soit achevée.

        //CSS

        .trex {
          transform: translateY(150px);
          animation: popup 10s 6.5s ease infinite;
        }

Le dinosaure se cache à la dernière seconde lorsque le mot "Fast." revient à l'écran (parce que toutes les animations sont définies comme `infinite` ce qui les relance dès qu'elles sont terminées).

## 6. Une pub responsive et cliquable

Un avantage considérable de SVG est que la qualité de l'image est toujours impeccable quelle que soit la taille. Pour obtenir une image flexible qui conserve son ratio (même équilibre global des proportions), nous pouvons utiliser la bonne vieille technique de la boîte avec padding.

    //HTML

    <div class="wufoo-ad-wrap">
      <svg class="wufoo-ad">
         ...
      </svg>
    </div>

    //CSS

    .wufoo-ad-wrap {
      height: 0;
      padding-top: 100%;
      position: relative;
    }
    .wufoo-ad {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

L'idée ici est que le "wrap" sera toujours un carré parfait, aux dimensions calculées à partir de sa largeur. Nous positionnons ensuite le SVG de façon absolue à l'intérieur de ce carré parfait, qui se redimensionnera avec bonheur.

Puisqu'il s'agit d'une pub, qui doit évidemment être cliquable, on pourrait utiliser `<a href="">` à la place de `<div>` pour le contenant wrap, dans ce cas n'oubliez pas d'ajouter `display: block`.

La [démo finale](http://codepen.io/chriscoyier/pen/dvjhn/) est ici.

Animer un SVG avec CSS

Approfondir la propriété display : la génération de boîtes


Une mise en page `flex` ou `grid` commence par la déclaration `display: flex` ou `display: grid`. Ces méthodes de mise en page sont des valeurs de la propriété [CSS display]('https://developer.mozilla.org/fr/docs/Web/CSS/display'). Nous avons tendance à ne pas beaucoup parler de cette propriété en tant que telle, nous concentrant plutôt sur les valeurs de `flex` ou de `grid`. Cependant, il y a des choses intéressantes à comprendre au sujet de `display` et de la façon dont elle est définie, qui vous faciliteront grandement la vie lorsque vous utiliserez CSS pour votre mise en page.

Dans cet article, le premier d'une série de deux, je vais examiner la manière dont les valeurs de `display` sont définies dans la spécification de niveau 3. Il s'agit d'un changement par rapport à la façon dont nous définissions `display` dans les versions précédentes de CSS. Même s'ils peuvent déranger, de prime abord, ceux d'entre nous qui font du CSS depuis de nombreuses années, je pense que ces changements aident vraiment à expliquer ce qui se passe lorsque nous modifions la valeur `display` d'un élément.

## Éléments block et inline

L'une des premières choses que nous enseignons aux personnes qui découvrent le CSS, ce sont les concepts d'éléments en `block` et `inline`. Nous expliquons que certains éléments de la page sont `display : block` et qu'ils possèdent, de ce fait, certaines caractéristiques. Ils s'étirent dans le sens de la ligne, en occupant tout l'espace disponible. Ils s'ouvrent sur une nouvelle ligne&nbsp;; nous pouvons leur donner une largeur, une hauteur, une marge ainsi qu'un remplissage, et ces propriétés éloigneront d'autres éléments de la page.

Nous savons également que certains éléments sont `display : inline`. Les éléments en ligne sont comme les mots d'une phrase&nbsp;; ils ne provoquent pas un saut à la ligne, ils réservent un caractère d'espace blanc entre eux. Si vous ajoutez des marges et du padding, ces éléments s'afficheront mais ne repousseront pas les autres éléments.

Le comportement des éléments block et inline est fondamental pour CSS et pour qu'un document HTML correctement balisé soit lisible par défaut. Cette disposition est appelée "Block and Inline Layout" (_disposition en bloc et en ligne_) ou “Normal Flow” (_flux normal_), car c'est la façon dont les éléments se disposent si nous ne faisons rien d'autre pour eux.

## Valeurs internes et externes de display

Nous comprenons ces notions de block et inline, mais que se passe-t-il si nous appliquons `display: grid` à un élément ? Est-ce quelque chose de complètement différent&nbsp;? Si nous regardons un composant sur lequel nous avons spécifié `display: grid`, en tant qu'élément parent dans la mise en page il se comporte comme un élément de niveau bloc. L'élément s'étire et occupe tout l'espace disponible dans la dimension en ligne, il commence sur une nouvelle ligne. Il se comporte exactement comme un élément de type bloc en termes de comportement par rapport au reste de la mise en page. Pourtant nous n'avons pas dit `display: block`, n'est-ce pas&nbsp;?

En fait, il s'avère que si. Dans la [spécification Display](https://www.w3.org/TR/css-display-3/), niveau 3, la valeur de `display` est définie par deux mots-clés. Ces mots-clés définissent la valeur **externe** de display, qui sera `inline` ou `block` et définira donc _comment l'élément se comporte dans la mise en page par rapport aux éléments qui l'entourent_. Ils définissent également la valeur **interne** de l'élément —&nbsp;ou comment _les enfants directs_ de cet élément se comportent.

Autrement dit, que lorsque vous écrivez `display: grid`, ce que vous dites réellement c'est `display : block grid`. Vous demandez _un conteneur de grille de niveau bloc_. Un élément qui aura tous les attributs de `block` - vous pouvez lui donner une `height` et une `width`, une `margin` et un `padding`, et il s'étirera pour remplir le conteneur. Les enfants de ce conteneur, cependant, ont reçu la valeur interne de grid et deviennent donc des `items` de grille. Le comportement de ces _[grid items](/articles/css-grid-layout-guide-complet#griditem)_ est défini dans la spécification de grille CSS : la spécification de `display` nous donne un moyen d'indiquer au navigateur que c'est la méthode de mise en page que nous voulons utiliser.

Je pense que cette façon de considérer `display` est extrêmement utile&nbsp;; elle explique de façon claire et directe ce que nous faisons avec les différentes méthodes de mise en page. Si vous deviez spécifier `display: inline flex`, à quoi vous attendriez-vous&nbsp;? Eh bien sans doute à une boîte se comportant comme un élément inline, avec des enfants qui seraient des items flex.

Il y a quelques autres choses qui s'expliquent facilement lorsqu'on envisage `display` de cette nouvelle manière, et je vais en examiner quelques-unes dans la suite de cet article.

## Nous revenons toujours au flux normal

Pour comprendre ces propriétés d'affichage internes et externes, il peut être utile d'observer ce qui se passe si nous ne modifions pas du tout la valeur d'affichage. Si nous écrivons du HTML et que nous l'affichons dans un navigateur, nous obtenons une disposition en bloc et en ligne, ou un flux normal. Les éléments s'affichent comme des éléments bloc ou en ligne.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

L'exemple ci-dessous contient des balises que j'ai transformées en objet média, en faisant en sorte que les `div` `display: flex` (les deux enfants directs) deviennent des items flex, de sorte que l'image se trouve maintenant dans une rangée avec le contenu. Si vous regardez le contenu cependant, il y a un titre et un paragraphe qui s'affichent à nouveau en flux normal. Les enfants directs de l'objet média sont devenus des items flex&nbsp;; leurs enfants reviennent à un flux normal à moins que nous ne changions la valeur de display sur l'item flex. Le conteneur flex lui-même est une boîte de niveau bloc, comme vous pouvez le voir par le fait que la bordure s'étend jusqu'aux bords de son parent.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gyYEPz" src="//codepen.io/rachelandrew/embed/gyYEPz?height=530&amp;theme-id=light&amp;slug-hash=gyYEPz&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="530" 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/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout with Flex Component</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous travaillez ainsi, les éléments de votre page se disposeront d'eux-mêmes avec cette belle disposition de flux normal lisible, plutôt que de lutter contre et d'essayer de tout placer. Vous êtes également moins susceptible de rencontrer des problèmes d'accessibilité, car vous travaillez avec l'ordre du document, ce qui est exactement ce que fait un lecteur d'écran ou une personne qui navigue dans le document via la tabulation.

## Expliquer `flow-root` et `inline-block`

La valeur de `inline-block` est également susceptible d'être familière à ceux d'entre nous qui font du CSS depuis un certain temps. Cette valeur est un moyen d'[obtenir certains comportements de bloc sur un élément inline](/articles/la-difference-entre-block-et-inline). Par exemple, un élément [inline-block]('inline-block') peut avoir une largeur et une hauteur. Un élément avec `display: inline-block` se comporte également d'une manière intéressante en ce qu'il crée un contexte de formatage de type bloc (_Block Formatting Context_, BFC).

Un BFC fait certaines choses utiles en termes de mise en page, par exemple, il contient des floats. Pour en savoir plus sur les contextes de mise en forme des blocs, consultez mon article précédent intitulé "[Understanding CSS Layout And The Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/)". Par conséquent, dire `display: inline-block` vous donne une _boîte inline_ qui établit également un BFC.

Comme vous le découvrirez (si vous lisez l'article susmentionné sur le Contexte de formatage block), il existe une valeur plus récente de display qui crée aussi explicitement un BFC. Il s'agit de la valeur [`flow-root`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root). Cette valeur crée un BFC sur un bloc, plutôt que sur un élément inline.

- `display : inline-block` vous donne un BFC sur une boîte inline.
- `display : flow-root` vous donne un BFC sur une boîte block.

Vous vous dites probablement que tout cela est un peu confus&nbsp;: pourquoi avons-nous deux mots-clés complètement différents ici, et qu'est-il arrivé à la syntaxe à deux valeurs dont nous parlions auparavant&nbsp;? Eh bien cela nous amène justement à ce que je dois maintenant expliquer à propos de `display`&nbsp;: _CSS a un historique dont nous devons tenir compte_ en termes de propriété `display`.

### Valeurs historiques de la propriété display

La spécification CSS2 détaillait les valeurs suivantes pour la propriété `display`&nbsp;:

- `inline`
- `bloc`
- `inline-block`
- `list-item`
- `none`
- `table`
- `inline-table`

Nous avons également défini les diverses propriétés internes du tableau, telles que `table-cell`, dont nous ne nous occuperons pas dans cet article.

Nous avons ensuite ajouté à celles-ci quelques valeurs pour l'affichage, afin de prendre en charge la mise en page flex et grid&nbsp;:

- `grid`
- `inline-grid`
- `flex`
- `inline-flex`

Remarque : la spécification définit également `ruby` et `inline-ruby` pour prendre en charge le texte Ruby, ce que vous pouvez lire dans [la spécification Ruby](https://drafts.csswg.org/css-ruby-1/#ruby-def).

Ce sont toutes des valeurs uniques pour la propriété `display`, définies avant que la spécification ne soit mise à jour. Un aspect fondamental de la construction de CSS est que nous ne devons jamais casser le Web ; **nous ne pouvons pas _simplement_ changer les choses**. Nous ne pouvons pas décider soudainement que tout le monde doit utiliser cette nouvelle syntaxe à deux valeurs et que, par conséquent, tous les sites Web construits avec la syntaxe à une seule valeur se casseront si un développeur ne revient pas en arrière pour les corriger&nbsp;!

En réfléchissant à ce problème, vous apprécierez peut-être cette [liste d'erreurs](https://wiki.csswg.org/ideas/mistakes) dans la conception de CSS qui sont moins des erreurs dans de nombreux cas que des choses qui ont été conçues sans boule de cristal pour voir dans l'avenir&nbsp;! Cependant, le fait est que nous ne pouvons pas casser le Web, c'est pourquoi nous avons cette situation où actuellement les navigateurs supportent un ensemble de valeurs uniques pour l'affichage, et la spécification passe à deux valeurs pour l'affichage.

La façon dont nous contournons cette situation est de spécifier des valeurs anciennes et courtes pour l'affichage, ce qui inclut toutes ces valeurs uniques. Cela signifie qu'un mappage peut être défini entre les valeurs uniques et les nouvelles valeurs à deux mots-clés. Ce qui nous donne le tableau de valeurs suivant :

<table class='specificTable'><thead><tr><th>Valeur Simple</th><th>Valeur en 2 mots</th><th>Description</th></tr></thead><tbody><tr><td><code>block</code></td><td><code>block flow</code></td><td>Block box with normal flow inner</td></tr><tr><td><code>flow-root</code></td><td><code>block flow-root</code></td><td>Block box defining a BFC</td></tr><tr><td><code>inline</code></td><td><code>inline flow</code></td><td>Inline box with normal flow inner</td></tr><tr><td><code>inline-block</code></td><td><code>inline flow-root</code></td><td>Inline box defining a BFC</td></tr><tr><td><code>list-item</code></td><td><code>block flow list-item</code></td><td>Block box with normal flow inner and additional marker box</td></tr><tr><td><code>flex</code></td><td><code>block flex</code></td><td>Block box with inner flex layout</td></tr><tr><td><code>inline-flex</code></td><td><code>inline flex</code></td><td>Inline box with inner flex layout</td></tr><tr><td><code>grid</code></td><td><code>block grid</code></td><td>Block box with inner grid layout</td></tr><tr><td><code>inline-grid</code></td><td><code>inline grid</code></td><td>Inline box with inner grid layout</td></tr><tr><td><code>table</code></td><td><code>block table</code></td><td>Block box with inner table layout</td></tr><tr><td><code>inline-table</code></td><td><code>inline table</code></td><td>Inline box with inner table layout</td></tr></tbody></table>

Pour expliquer comment ça marche, nous prenons l'exemple d'un conteneur de grille. Dans le monde à deux valeurs, nous créerions un conteneur de grille de niveau bloc avec&nbsp;:

```css
.container {
  display: block grid;
}
```

Cependant, le mot-clé _legacy_ fait la même chose :

```css
.container {
  display: grid;
}
```

Si, à la place, nous voulions un conteneur de grille en ligne, dans le monde à deux valeurs, nous utiliserions :

```css
.container {
  display: inline grid;
}
```

et avec les valeurs _legacy_ :

```css
.container {
  display: inline-grid;
}
```

Après ce petit détour historique, nous pouvons maintenant revenir au point de départ de cette conversation et nous pencher sur `display: inline-block`. En regardant le tableau, vous pouvez voir que c'est défini dans le monde à deux valeurs comme `display: inline flow-root`. Il correspond maintenant à `display: flow-root` qui, dans un monde à deux valeurs, serait `display: block flow-root`. Un peu de rangement et de clarification de la façon dont ces choses sont définies. Une refactorisation de CSS, si vous voulez.

## Prise en charge de la syntaxe à deux valeurs par les navigateurs

Pour l'instant, les navigateurs ne prennent pas en charge la syntaxe à deux valeurs pour la propriété display. Le bogue d'implémentation pour Firefox peut être trouvé [ici](https://bugzilla.mozilla.org/show_bug.cgi?id=1038294). L'implémentation —&nbsp;lorsqu'elle aura lieu&nbsp;— consistera essentiellement à aliaser les anciennes valeurs vers les versions à deux valeurs. Il faudra donc attendre un bon moment avant que vous puissiez réellement utiliser ces versions à deux valeurs dans votre code. Cependant, ce n'est pas vraiment le sujet de cet article. Je pense plutôt que le fait d'examiner les valeurs d'affichage à la lumière du modèle à deux valeurs permet d'expliquer une grande partie de ce qui se passe.

Lorsque vous définissez la disposition d'une boîte en CSS, vous définissez ce qui arrive à cette boîte en termes de **comportement par rapport à toutes les autres boîtes de la mise en page**. Vous définissez également le comportement des enfants de cette boîte. Vous pouvez penser de cette manière bien avant de pouvoir déclarer explicitement les valeurs comme deux choses distinctes, car les mots-clés hérités correspondent à ces valeurs, et ça vous aidera à comprendre ce qui se passe lorsque vous modifiez la valeur de `display`.


Approfondir la propriété display : les deux valeurs de display

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


[Dans un précédent article](/articles/backgrounds-svg-les-rayures/), j’ai présenté l’utilisation de [SVG](/tags/svg/) dans des backgrounds “carrelés”. Ces simples lignes et rayures peuvent devenir des formes complexes, et on peut les mélanger à des images bitmap via CSS Blend Modes pour créer des backgrounds “pop art”. Ces techniques permettent de créer des effets visuels plus riches avec un code plus simple et plus de flexibilité que [mon essai précédent](http://thenewcode.com/307/Pop-Art-Web-Page-Backgrounds-Via-CSS3-Gradients-Merged-With-Images) qui faisait appel aux dégradés CSS.

## Motif en échiquier

Pour créer un échiquier avec SVG, il suffit d’utiliser deux [éléments carrés](/les-bases-de-svg-rectangles-et-carres/) disposés diagonalement&nbsp;:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>
```

Ce qui produit :

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <g fill="#ccc">
    <rect width="25" height="25" />
    <rect x="25" y="25" width="25" height="25" />
  </g>
</svg>

<br/>
Appliqué par-dessus une image bitmap&nbsp;:

```css
section#grid {
  background-image: url(checkerboard.svg), url(grace-kelly.jpg);
  background-size: 100px 100px, cover;
  background-blend-mode: overlay;
}
```

Cela nous donne ce bel effet :

  <div class="sd-kelly"></div>

L’image bitmap est dimensionnée pour couvrir la surface de l’élément. Le motif en échiquier se répète tous les 100px à la fois horizontalement et verticalement. Mais plutôt que de recouvrir l’image, il se mélange avec elle dans le mode `overlay` ( _NdT : en fait ici dans le mode `multiply` qui est plus doux_.)

## Motif à pois

La même idée peut être utilisée pour recouvrir une image d’un motif à pois, à l’aide de cinq [cercles SVG](/articles/les-bases-de-svg-cercles-et-ellipses/)&nbsp;: un au centre exact de la [viewbox](/articles/comprendre-svg-viewbox/) et les quatre autres ayant leur centre à chaque coin.

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<style type="text/css">
  circle { fill: #f99; }
</style>
<circle cx="0" cy="0" r="100"/>
<circle cx="300" cy="0" r="100"/>
<circle cx="0" cy="300" r="100" />
<circle cx="300" cy="300" r="100"/>
<circle cx="150" cy="150" r="100"/></svg>
```

Ce qui crée ce pattern :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><style type="text/css">circle{fill:#f99}</style><circle cx="0" cy="0" r="80"></circle><circle cx="300" cy="0" r="80"></circle><circle cx="0" cy="300" r="80"></circle><circle cx="300" cy="300" r="80"></circle><circle cx="150" cy="150" r="80"></circle></svg>

On sauvegarde ce code comme `circle-grid.svg` et on applique le SVG sur l’image bitmap dans le background de l’élément&nbsp;:

```CSS
section#circles {
  background-image: url(kelly-brook-as-gilda.jpg), url(circle-grid.svg);
  background-size: cover, 100px 100px;
  background-blend-mode: multiply;
  }
```

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/PqQmxM/">
  Pop Art Backgrounds with SVG & Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>
  
## Conclusion
  
J’espère que cela vous a donné une idée de la façon dont vous pouvez mettre en œuvre vos propres idées. Il y a bien d’autres possibilités de designs de ce genre, nous les verrons dans de futurs articles.


Backgrounds Pop-Art avec SVG et Blend Modes


Un récent [dossier de travail réalisé par un de mes étudiants](http://tyler-mackenzie.ca/) utilisait une image de background “en écailles”, très intéressante, encodée en base64. J’ai [décodé la texture](https://www.base64decode.org/) puis j’ai apporté quelques améliorations au SVG. Pour compléter, j’ai créé un background hexagonal simple que je partage ici.

<h2>Motif en écailles</h2>

Pour les écailles, le balisage est assez simple&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
    <pattern id="scales" width="30" height="30"
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>
```

Le SVG utilise la technique standard du `<pattern>` que j’ai déjà illustrée dans de précédents articles (par exemple&nbsp;: [motifs japonais](/articles/motifs-svg-japonais), [diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background)) . Moins habituel, le motif utilisé dans le pattern est [un élément “groupe”](/articles/les-bases-de-svg-groupes/).

L’arrière-plan SVG est associé aux styles suivants&nbsp;:

```
svg {
  background: #0F7173;
}
#scales {
  fill: #0F7173;
}
#inner {
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer {
  stroke: #098f92;
  stroke-width: 0.9;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xZyKVp" src="//codepen.io/dudleystorey/embed/xZyKVp?height=300&amp;theme-id=light&amp;slug-hash=xZyKVp&amp;user=dudleystorey&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/dudleystorey/pen/xZyKVp">écailles SVG</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que l’élément SVG et les écailles utilisent la même couleur pour leur `background` et `fill`. Cette technique est répétée dans l’exemple de motifs hexagonaux qui va suivre.

> Le pattern pourait être amélioré en définissant le `stroke` des chemins (_path_) en rgba plutôt qu’en valeurs hexadécimales. On pourrait ainsi les corriger automatiquement si les couleurs de background et de fill des écailles étaient modifiées.

<h2>Motifs hexagonaux</h2>

Le code comprend un balisage minimal pour créer un background hexagonal lié&nbsp;:

```
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">
     <defs>
        <pattern id="hexagons" width="50" height="43.4"
        patternUnits="userSpaceOnUse"
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2"
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />
</svg>
```

Le pattern utilise le CSS suivant&nbsp;:

```
svg {
  background: rgb(125,155,132);
}
polygon {
  fill: rgb(125,155,132);
  stroke-width: 2;
  stroke: #000;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YwdYxq" src="//codepen.io/dudleystorey/embed/YwdYxq?height=300&amp;theme-id=light&amp;slug-hash=YwdYxq&amp;user=dudleystorey&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/dudleystorey/pen/YwdYxq">background SVG hexagones</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>

Là encore, le SVG utilise la même technique consistant à s’appuyer sur les mêmes `background` et `fill` pour l’élément SVG et ses polygones pour “remplir” l’espace vide. Dans cet exemple, j’ai utilisé une série de transformations du pattern pour le placé légèrement “en dehors” de la page.

> Le `translate` est particulièrement important car un hexagone ayant un bord placé contre une bordure du viewport semblera avoir un côté plus long que l’autre.

Les traits (_stroke_) SVG s’étendent de manière égale de chaque côté d’une ligne interne représentant le chemin, par conséquent une augmentation de la valeur `stroke-width` (“épaisseur du trait”) aura pour conséquence de réduire la taille des hexagones.

<h3>Exemples CodePen</h3>

Les exemples CodePen qui précèdent utilisent le code SVG directement dans le HTML pour plus de clarté. En production, le CSS serait intégré au SVG et l’ensemble serait transformé en code base64 qui serait utilisé comme valeur de la propriété `background-image`.


Backgrounds SVG : hexagones et écailles


Indépendantes de la résolution, légères, faciles à éditer, les images vectorielles ont de nombreux avantages sur les [dégradés css](/articles/les-degrades-css/)&nbsp;:

1. La syntaxe SVG pour les rayures est plus simple et moins verbeuse que celle des dégradés CSS.
2. Les backgrounds SVG sont mieux supportés par les navigateurs (SVG est compatible avec IE9 mais les dégradés CSS ne sont supportés qu’à partir de IE10).
3. On peut réaliser des backgrounds bien plus complexes avec SVG qu’avec CSS.

Mais pour être efficaces, les illustrations vectorielles doivent suivre quelques règles&nbsp;:

<h2>Règles générales</h2>

- Tout comme les [backgrounds répétés en bitmap](http://thenewcode.com/991/Cross-Fading-Background-Images), vous avez seulement besoin d’une “tuile” ou d’un “carreau” pour réaliser un carrelage. Un seul `<pattern>` suffit pour construire l’ensemble.
- Votre fichier SVG doit être aussi petit, “léger” et éditable que possible&nbsp;: cela impliquera un peu de travail manuel.
- En général, il est bon de garder au moins une composante couleur de votre background dans votre CSS, pour une meilleure flexibilité.

Nous allons commencer par quelques exemples. Remarquez bien que je me suis concentré sur les backgrounds répétés, les backgrounds simples en SVG sont traités à peu près de la même façon que leurs équivalents en bitmap.

<h2>Rayures simples en SVG</h2>

Un effet de “rayures” simple n’est rien d’autre qu’une surface remplie à côté d’une surface vide, le tout répété à l’infini. Dans le cas de SVG, la manière la plus simple de réaliser cette surface pleine est d’utiliser [un élément rectangle](/articles/les-bases-de-svg-rectangles-et-carres/). Sauvegardez le code suivant dans un fichier `stripe.svg`&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"> <rect width="0.5" height="1" /> </svg>

Remarquez que `viewBox` **ou** les attributs équivalents `width` et `height` peuvent être utilisés pour dimensionner l’élément `<svg>` lorsqu’on crée des images de background.

Ce fichier SVG peut être appliqué au background d’une page web via&nbsp;:

    //CSS
    body { background-image: url(stripe.svg); }

Par défaut, le SVG s’étendra pour couvrir la surface entière de l’élément. Il en résultera une division de la page, moitié noire (le remplissage par défaut du rectangle SVG) et moitié blanche (la couleur de background par défaut de la page web, puisque toute surface non explicitement colorée en SVG est automatiquement transparente).

Pour que ce motif SVG se répète plus d’une fois, nous pouvons modifier la `background-size` dans notre déclaration CSS&nbsp;: une largeur x suivie d’une hauteur y.

     //CSS
    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
    }

Ce qui donne :

<figure role="group"><img src="/images/bw-vertical-stripes.png" alt="rayures verticales noires et blanches"/></figure>

Un aspect sympa et pratique de cette concision de notre illustration SVG c’est qu’elle est très simple à modifier. par exemple, pour la transformer de verticale en horizontale, il suffit de modifier `background-size`&nbsp;:

Rayures horizontales : `body { background-size: 1px 10px; }`  
Rayures verticales : `body { background-size: 10px 1px; }`

Pour plus de versatilité, vous pouvez colorer les rayures grâce à `rgba` ou [HSL](/articles/utiliser-hsl-pour-vos-couleurs/) et renvoyer la question du `background-color` de la page à CSS&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" />
    </svg>

Le CSS :

    body {
      background-image: url(stripe.svg);
      background-size: 20px 20px;
      background-color: #669;
    }

Ce fichier SVG est suffisamment petit pour être inséré en ligne dans le CSS lui-même, ce qui évite une requête HTTP&nbsp;:

    body {
      background-image: url(’data:image/svg+xml;utf8,<svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><rect width="0.5" height="1" fill="hsla(32, 42%, 50%, .5)" /></svg>’);
      background-size: 20px 20px;
    }

Faites bien attention aux guillemets ! Ce SVG utilise des doubles guillemets en interne, ce qui signifie que nous devons utiliser des guillemets simples à l’extérieur pour éviter que notre navigateur s’embrouille.

Vous pouvez également encoder le fichier SVG en base64 et utiliser ce code dans le CSS&nbsp;:

    body { background-image: url(’data:image/svg+xml;base64,
    PHN2ZyB2aWV3Qm94PSIwIDAgMiAxIiB4bWxucz0iaHR0cDovL3d3dy53
    My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5Z
    TWluIG1lZXQiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjIiIGZpbGw
    9ImhzbGEoMzIsIDQyJSwgNTAlLCAuNSkiIC8+PC9zdmc+’); }

C’est évidemment une option, mais elle présente trois désavantages&nbsp;:

- La version Data URI occupe plus d’espace que la version SVG en ligne.
- Le fait de convertir l’image en base64 la rend non éditable. Pour faire un changement, il vous faudra retrouver le fichier SVG original, le modifier, le convertir en base64 et l’ajouter à votre CSS.
- le désencodage de base64 est plus lent sur les plateformes mobiles.

Toutefois, l’utilisation de base64 vous donne un peu plus de compatibilité navigateurs. Au final, c’est à vous de décider.

<h2>Séparer les lignes</h2>
Il est facile de rendre les lignes plus fines ou plus épaisses dans notre exemple, via `background-size`, mais une chose que cela ne changera pas c’est le *ratio* entre l’épaisseur des lignes et l’espace alentour. Pour changer cela, nous retournons à notre SVG et nous rendons notre rectangle plus large ou plus étroit&nbsp;:

    <svg viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
      <rect width=".25" height="1" />
    </svg>

Ce qui produit :

<figure role="group"><img src="/images/yv-vertical-stripes.png" alt="rayures fines jaunes sur fond violet"/></figure>

<h2>Réaliser des motifs plus complexes</h2>

Une fois les bases intégrées, il est aisé de réaliser des variations plus complexes de rayures horizontales et verticales en SVG. Par exemple, un motif guingan (Vichy) serait réalisé via un rectangle de ⅓ de large recouvrant un élément de ⅓ de hauteur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g fill="rgba(0,0,0,0.3)">
        <rect width="100" height="33" />
        <rect width="33" height="100" x="67" />
      </g>
    </svg>

Les mêmes concepts peuvent être utilisés pour créer des plaids et des tartans, mais les plus complexes d’entre eux devraient plutôt utiliser la syntaxe `<pattern>` de SVG que nous pouvons retrouver dans l’article [Diagonales et motifs SVG en background](/articles/diagonales-et-motifs-svg-en-background/).


Backgrounds SVG : les rayures


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 alt”) 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 une photographie de canal à Amsterdam pourrait être décrite ainsi&nbsp;:

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

Ou encore (et mieux) :

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

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

### Exceptions à alt : les logos

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

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

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

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

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

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

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

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

### alt vide

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

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

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

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

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

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

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

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

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

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

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

### Ne confondez pas alt et title

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

### Positionnement de alt

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

### Ne négligez pas les autres media

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

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


Bien utiliser l'attribut alt


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

## Le modèle de boîte

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

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

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

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

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

Voici un exemple :

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

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

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

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

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

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

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

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

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

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

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

## Comment utiliser Box-Sizing

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

    //Déclaration initiale

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

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

## Syntaxe

Syntaxe de base de box-sizing :

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

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

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

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

## Support navigateurs

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

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

Voici comment écrire le code :

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

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

## Min/Max

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

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

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

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

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

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


Box-sizing pour les nuls


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

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

<h3>Display</h3>

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

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

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

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

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

<h3>Visibility</h3>

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

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

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

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

<h3>Opacity</h3>

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

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

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

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

<h3>Position</h3>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

👉🏿 NdT : [Vincent Valentin](https://codepen.io/vincent-valentin/) a créé dans Codepen [un tableau hyper complet](https://codepen.io/vincent-valentin/full/JjGmxzV) des techniques d'escamotage (cacher, supprimer, désactiver...) et de leurs implications, à lire absolument&nbsp;!


Cacher des éléments avec CSS


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

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

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

Si je veux centrer...

## Centrer horizontalement

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

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

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

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

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

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

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

### Éléments block ?

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

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

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

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

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

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

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

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

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

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

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

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

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

## Centrer verticalement

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

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

#### Est-ce une ligne unique ?

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

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

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

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

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

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

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

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

#### Ou des lignes multiples ?

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

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

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

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

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

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

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

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

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

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

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

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

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

### Élements block

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

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

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

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

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

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

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

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

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

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

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

#### Pouvez-vous utiliser Flexbox ?

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

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

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

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

## Horizontalement et verticalement

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

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

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

    //CSS
    .parent {
      position: relative;
    }

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

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

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

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

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

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

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

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

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

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

### Pouvez-vous utiliser Flexbox ?

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

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

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

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

## Conclusion

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


Centrer en CSS, un guide complet


Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le _contenu d'une div_ est simple, mais centrer _la div elle-même_ est plus délicat, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur.

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

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

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

## Centrer une div dans une page, les bases

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

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

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

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

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

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

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

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

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

    //HTML

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

Le résultat dans CodePen&nbsp;:

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

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

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

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

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

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

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

    //HTML

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

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

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

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

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

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

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

    //HTML

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

Le résultat dans CodePen&nbsp;:

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

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

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

## Centrer verticalement une div avec transform

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

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

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

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

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

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

## Centrer une div en bas de page

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

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

    //HTML

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

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

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

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

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

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

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

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

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

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

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

## Centrer une div dans une page, responsive

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

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

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

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

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

## Centrer une div dans une div responsive

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

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

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

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

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

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

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

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

//HTML

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

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

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

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

## Flexbox et le centrage de div

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

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

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

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

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

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

## Centrer une div dynamique, horizontalement et verticalement

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

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

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

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

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

---

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

Consultez également dans La Cascade :

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


Centrer un bloc div, guide complet

Citer en HTML, un guide complet

## Les combinateurs

Comme leur nom le suggère, les combinateurs aident à combiner différents sélecteurs pour former de nouveaux sélecteurs, plus spécifiques.

Il existe quatre types de combinateurs ciblant les relations parent/enfants et frères existant entre les éléments.

### Combinateur descendant E F

Ce premier combinateur est représenté par un _espace_ entre deux éléments, par exemple ul / espace / li&nbsp;:

    ul li

Ce combinateur cible un élément F qui est un descendant de l'élément E. Les combinateurs de descendants ne se limitent pas aux enfants, ils ciblent tous les descendants.

    //HTML

    <ul>
      <li>List Item 1</li>
      <li>List Item 2
        <ol>
          <li>List Item 2-1</li>
          <li>List Item 2-2</li>
        </ol>
      </li>
      <li>List Item 3</li>
    </ul>

    //CSS

    ul li {background: red;}

Toutes les listes auront un background rouge, car chacune est un descendant (enfant ou petit-enfant) de la liste non-ordonnée.

<figure  role="group"><img src="/images/combination-lock-3.jpeg" alt="Un cadenas à code"/></figure>

### Combinateur enfant E > F

Cible un élément F qui est l'enfant d'un élément E. À la différence du combinateur précédent, F doit être un enfant direct de E.

Avec le même HTML que ci-dessus et le CSS&nbsp;:

    ul>li {background: red;}

seuls les List Item 1, 2 et 3 auront un background rouge, car ils sont les enfants de ul, alors que les items 2-1 et 2-2 sont ses petits-enfants.

### Combinateur adjacent E + F

Cible un élément F immédiatement précédé par un élément E. Le mot adjacent est important&nbsp;: seul le **premier** élément après E sera ciblé.

    //HTML

    <h1>Heading</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    //CSS

    h1+p {font-size: 1.5em;}

Seul le paragraphe 1 aura le style spécifié.

### Combinateur général siblings E ~ F

Cible un élément F précédé par un élément E. À la différence du combinateur adjacent qui cible uniquement le premier frère, celui-ci cible tous les frères (siblings).

Avec le même HTML que ci-dessus et le CSS&nbsp;:

    h1~p {font-size: 1.5em;}

tous les paragraphes auront le même style défini ci-dessus.

### Au-delà des sélecteurs simples

Remarquez bien que vous n'êtes pas limités aux sélecteurs simples. Tous les sélecteurs, y compris les sélecteurs d'attributs, peuvent être employés d'un côté ou de l'autre du combinateur&nbsp;:

    ul a[title]
    li#first>a[rel="external"]
    h1+p.intro
    h2.myclass~p[class="intro"]

<span id="pseudo"></span>

## Les pseudo-classes

Il existe beaucoup de pseudo-classes, le W3C les a regroupées ainsi&nbsp;:

- pseudo-classes dynamiques
- pseudo-classes cibles
- pseudo-classes de langage
- pseudo-classes d'éléments UI (interface utilisateur)
- pseudo-classes de négation
- pseudo-classes structurelles

Vous en connaissez (et utilisez) certaines.

<figure  role="group"><img src="/images/css-selectors.jpeg" alt="des cartes éparpillées sur une table, avec des noms de pseudo-classes écrits."/></figure>

### Pseudo-classes dynamiques

Ce groupe-ci, je suis certain que vous le connaissez déjà. Il s'agit des pseudo-classes relatives aux liens et aux actions utilisateurs.

#### Pseudo-classes de liens

**E:link** cible un élément E qui est la source d'un lien non encore visité.  
**E:visited>** cible un élément E qui est la source d'un lien ayant été visité.

#### Pseudo-classes d'action utilisateur

Ciblent un élément E lors de certaines actions utilisateurs.

**E:active** lorsque le lien est actif (c.à.d lorsqu'on a cliqué dessus)  
**E:hover** lorsque le visiteur passe la souris sur le lien  
**E:focus** lorsque le lien a un focus actif

Je suppose que vous les connaissez suffisamment pour que je n'aie pas besoin d'approfondir. Une chose à garder en mémoire toutefois&nbsp;: lorsque vous utilisez :link, :visited, :hover et :active sur un même élément, rappelez-vous qu'ils doivent être listés dans cet ordre, et pour cela rappelez-vous LoVeHAte&nbsp;!

#### Pseudo-classe de cible

Si vous avez déjà créé une ancre en ajoutant un # à une url, alors vous avez déjà créé une pseudo-classe de cible dans votre html.

**E:target** cible un élément E qui est la cible (appelée ancre) de l'url à laquelle on se réfère.

    //HTML

    <a href="domaine.com/cette-page.html#un-endroit-dans-la-page">...</a>

    

    <span id="un-endroit-dans-la-page"></span>

    //CSS

    span:target {background: yellow;}

Le code ci-dessus place un background jaune derrière le span.

Un cas d'usage intéressant est lorsqu'on veut aider notre lecteur qui a cliqué sur un lien à trouver tout de suite le contenu (le mot, le paragraphe…) correspondant à ce lien.

#### Pseudo-classes de langage

**E:lang(fr)** cible un élément E dans le langage spécifié (ici "fr" = français)

//HTML

    <body lang=fr>
      <p>Je suis français.</p>
    </body>

    //CSS

    p:lang(fr) {color: red;}

Si vous utilisez des langues multiples dans une page, vous avez la possibilité de cibler spécifiquement un texte dans telle ou telle langue.

#### Pseudo-classes d'UI

Pour améliorer l'usabilité des formulaires, on ajoute souvent des contraintes comme permettre ou interdire l'affichage de certains champs en fonction de ce que le visiteur a déjà rempli. Par défaut, les éléments html ne sont ni activés (enabled) ni désactivés (disabled). JavaScript sert typiquement à cela, mais on peut aussi le faire manuellement (quitte à les modifier dynamiquement ensuite).

**E:enabled** cible un élément d'interface utilisateur E qui est activé.

**E:disabled** cible un élément d'interface utilisateur E qui est désactivé.

**E:checked** cible un élément d'interface utilisateur E qui est "checké", comme un bouton-radio ou une checkbox.

//HTML

    <form>
      Preferred Contact:
        <input type="radio" id="prefer" value="email" checked="checked" /> Email
        <input type="radio" id="prefer" value="phone" /> Phone
      Email: <input type="text" id="email" enabled="enabled" />
      Phone: <input type="text" id="phone" disabled="disabled" />
    </form>

    //CSS

    :enabled {color: green;}
    :disabled {color: red;}
    :checked {background: yellow;}

Ici, le rouge et le vert sont utilisés pour signaler aux visiteurs les éléments du formulaire disponibles. Les items checkés ont un background jaune, pour rendre plus visible leur statut de "déjà fait".

Il est probable que nous utiliserions Javascript pour changer les attributs enabled et disabled, selon la méthode choisie par l'utilisateur.

#### Pseudo-classe de négation

La [pseudo-classe de négation](/articles/la-pseudo-classe-de-negation/) fait exactement ce à quoi on peut s'attendre. Avec elle, on cible tout ce qui n'est pas le sélecteur nié.

**[E:not(S)](../not/)** cible un élément E qui n'est pas égal au sélecteur S spécifié entre parenthèses.

    //HTML
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>

    //CSS
    div:not(.two) {color: orange;}

Le CSS appliquera une couleur orange au texte des première et troisième div, qui n'ont pas la classe "two". C'est simple, mais ça peut devenir rapidement complexe, attention.

Vous trouverez certainement d'autres façons de cibler les éléments que vous voulez sans utiliser le sélection de négation, mais une négation peut remplacer beaucoup de sélecteurs à elle toute seule, elle peut donc être appropriée dans certains cas.
<span id="pseudo-classes"></span>

## Les pseudo-classes structurelles

Les pseudo-classes structurelles ont été introduites afin de pouvoir cibler des éléments html à partir d'informations tirées du [DOM](/articles/le-dom-cest-quoi-exactement/) qui ne peuvent être facilement représentées par de simples sélecteurs ou combinateurs.

Vous en utilisez peut-être déjà certaines. Elles vous éviteront souvent d'ajouter des id ou classes inutiles.

**E:root** cible un élément E qui est la racine du document. En html il s'agit toujours de l'élément html.

    :root {background: blue;}
    html {background: blue;}

Ces lignes de CSS sont fonctionnellement équivalentes. Ok, ce n'est peut-être pas la plus utile des pseudo-classes structurelles, en tout cas c'est la plus simple à expliquer&nbsp;!

**E:nth-child(n)** cible un élément E qui est le n-ième enfant de son parent.

Supposons que nous ayons une table comportant de nombreuses lignes.

    tr:nth-child(4) {background: #ccc;}

Le CSS ci-dessus indique qu'il faut trouver la quatrième ligne et lui donner un background gris clair.

On utilise souvent la pseudo-classe nth-child pour colorer alternativement les lignes d'une table.

    tr:nth-child(2n+1) {background: #ccc;}
    tr:nth-child(2n) {background: #eee;}

2n+1 représente les lignes impaires et 2n les lignes paires. On peut aussi utiliser les valeurs impaire (odd) et paire (even).

    tr:nth-child(odd) {background: #ccc;}
    tr:nth-child(even) {background: #eee;}

Bien entendu vous n'est pas limité à 2&nbsp;:

    tr:nth-child(10n+1) {background: #ccc;}

Ici, les 11e, 21e, 31e, etc lignes auront un background gris clair.

**E:nth-last-child(n)** cible un élément E qui est le n-ième enfant de son parent, en comptant à partir du dernier enfant.

nth-last-child fonctionne comme nth-child, mais en commençant par le dernier élément de la liste. Reprenons notre exemple de table&nbsp;:

    tr:nth-last-child(1) {background: #ccc;}

Ici, c'est la dernière ligne qui aura un background gris clair,

    tr:nth-last-child(4) {background: #ccc;}

et ici c'est la 4ème ligne en partant du bas qui aura ce background.

On peut utiliser les même valeurs&nbsp;:

    tr:nth-last-child(2n+1) {background: #ccc;}
    tr:nth-last-child(2n) {background: #eee;}

    tr:nth-last-child(odd) {background: #ccc;}
    tr:nth-last-child(even) {background: #eee;}

Ces deux façons d'écrire ont le même résultat, des lignes paires et impaires avec un background différent. Il n'est pas sûr que nth-last-child soit la meilleure pseudo-classe pour cet effet, mais vous pouvez l'utiliser.

Une utilisation plus spécifique à nth-last-child est de cibler un ou plusieurs éléments à la fin d'une liste.

<figure  role="group"><img src="/images/ps3numbers-4.jpeg" alt="quelques chiffres dans des nuages"/></figure>

**:nth-of-type et :nth-last-of-type**  
Les autres pseudo-classes structurelles sont des variations de ce qui précède, donc nous allons simplement voir leurs applications spécifiques.

**E:nth-of-type(n)** cible un élément E qui est le n-ième frère du même type.

**E:nth-last-of-type(n)** cible un élément E qui est le n-ième frère du même type, en partant du dernier.

nth-of-type et nth-last-of-type fonctionnent de la même façon que nth-child et nth-last-child, la différence étant qui nous ciblons un type d'élément spécifique et non pas n'importe quel enfant.

On utilise les pseudo-classes "of-type" lorsque le parent de l'élément qu'on cible a plusieurs types d'éléments enfants&nbsp;:

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

    //CSS
    p:nth-of-type(2) {font-size: 1.2em;}
    p:nth-last-of-type(1) {font-size: 1.2em;}

Je suis sûr que vous voyez quels paragraphes sont ciblés par le CSS ci-dessus. Et la raison pour laquelle on utilise ici les "of-type" est que les éléments situés dans la div sont de types différents.

**:first-child et :last-child**  
Ce sont en fait des raccourcis pour nth-child(1) et nth-last-child(1), et comme ces deux pseudo-classes, ils sous-entendent que les enfants sont de même type.

**E:first-child** cible un élément E qui est le premier enfant de son parent.

**E:last-child** cible un élément E qui est le dernier enfant de son parent.

On utilise souvent ces pseudo-classes dans les barres de navigation lorsqu'on veut donner un style au premier ou au dernier élément du menu pour les différencier des autres. Ou bien, il arrive fréquemment qu'on ajoute une bordure gauche ou droite aux éléments du menu pour les séparer, mais il faut du coup en ajouter (ou retirer) une d'un côté ou de l'autre. li:last-child ou li:first-child sont pratiques pour y arriver.

**:first-of-type et :last-of-type**  
Ce sont les équivalents fonctionnels de nth-of-type(1) et nth-last-of-type(1). Ils fonctionnent de la même façon que first-child et last-child, sauf qu'ils ciblent des éléments d'un type particulier.

**E:first-of-type** cible un élément E qui est le premier frère de son type.

**E:last-of-type** cible un élément E qui est le dernier frère de son type.

Utilisation typique pour ces pseudo-classes : appliquer un style au premier paragraphe à l'intérieur d'une div, d'un article ou d'une section.

**:only-child et :only-of-type**  
Ciblent des éléments qui n'ont qu'un enfant.

**E:only-child** cible un élément E qui est le seul enfant de son parent.

**E:only-of-type** cible un élément E qui est le seul de son type dans sa fratrie.

**:empty**

**E:empty** cible un élément E qui n'a pas d'enfants, ni de texte. C'est une façon de cibler les attributs vides. Par exemple, il ne ciblerait pas&nbsp;:

    <p>Voici un texte</p>

mais il ciblerait&nbsp;:

    <p></p>

Pour finir, si l'anglais n'est pas un problème voici [une formidable vidéo de Chris Coyier](https://www.youtube.com/watch?v=Konn2NMmSXw) présentant les pseudo-classes et pseudo-éléments.

## Les pseudo-éléments

Parfois nous aimerions appliquer un style à des **éléments** mais nous ne pouvons le faire à partir d'informations tirée du [DOM](/articles/le-dom-cest-quoi-exactement). Nous résolvons le problème en ajoutant un élément (un span par exemple) auquel nous donnons une classe. Dans certains cas, le recours aux **pseudo-éléments** s'avère plus simple.

Nous en avons quatre :

- **:first-line**
- **:first-letter**
- **:before**
- **:after**

**E:first-line** cible la première ligne formatée d'un élément E.

    p:first-line {text-transform: uppercase;}

Le CSS ci-dessus change la première ligne de tous les paragraphes, et bien sûr la _première ligne de texte_ est dynamique si votre mise en page est flexible.

**E:first-letter** cible la première lettre d'un élément E.

Une utilisation évidente serait la création de [lettrines](http://fr.wikipedia.org/wiki/Lettrine)&nbsp;:

    <p class="intro">This is the first paragraph</p>

    //CSS
    p.intro:first-letter {
        font-size:4em;
        font-weight:bold;
        color: #f00;
        float:left;
    }

**E:before et E:after** ciblent un contenu généré avant ou après un élément E.

Une utilisation courante est l'ajout de guillemets stylisés avant et après une citation&nbsp;:

    <blockquote></blockquote>

    //CSS
    blockquote::before {content: "\2018";}
    blockquote::after {content: "\2019;;";}

Pour une approche détaillée de **:before** et **:after**, vous pouvez lire [l'article de Louis Lazaris](/articles/les-pseudo-elements-css-before-et-after/) ici-même.

Combinateurs et pseudo-classes CSS

Comment apprendre CSS


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<h3>Utiliser calc( )</h2>

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

Voici quelques exemples :

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

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

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

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

la valeur calculée de cette fonction sera :

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

<h3>Compatibilité</h3>

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

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

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

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

On peut utiliser cette fonction dans diverses situations.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


Comment fonctionne calc()

Comme je le rappelle souvent, chaque élément de l'[arbre qui représente notre document](http://web.simmons.edu/~grabiner/comm244/weekfour/document-tree.html) (_document tree_) est [une boîte rectangulaire](/articles/controler-le-modele-de-boite/). Grosso modo, cette boîte est faite de deux sections, l'une est la boîte elle-même —&nbsp;comprenant bordures, padding et marges&nbsp;— l'autre est le contenu.



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

Nous pouvons contrôler la façon dont cette boîte et ses enfants sont dessinés sur la page grâce à la propriété CSS `display`. La boîte peut être placée parmi ses "soeurs" comme du texte, via `inline` et nous pouvons même lui donner le comportement d'une table via `table`.

Il n'y a que deux valeurs de la propriété `display` qui permettent à un élément de générer (ou pas) une boîte. La valeur `None` aura pour effet que ni la boîte ni son contenu ne seront affichés sur la page. La valeur `contents`, elle, aura pour effet de bien afficher la boîte _mais d'omettre totalement la boîte qui l'entoure_.

<h2>Que se passe-t-il quand on utilise display: contents&nbsp;?</h2>

Le plus simple pour le comprendre est d'imaginer qu'on a oublié les balises ouvrante et fermante de l'élément. Comme le dit [la spécification](https://www.w3.org/TR/css-display-3/#box-generation)&nbsp;:

<blockquote cite="https://www.w3.org/TR/css-display-3/#box-generation"><p>Pour ce qui est de la génération d'une boîte et de son affichage, l'élément doit être traité comme s'il avait été remplacé par son contenu dans l'arbre du document.</p>
<p><cite><a href="https://www.w3.org/TR/css-display-3/#box-generation">2.5. Box Generation: the none and contents keywords</a></cite></p></blockquote>

Prenons le balisage suivant :

```
<div class="outer">
  I’m some content
  <div class="inner">I’m some inner content</div>
</div>
```

et les styles suivants :

```
.outer {
  border: 2px solid lightcoral;
  background-color: lightpink;
  padding: 20px;
}

.inner {
  background-color: #ffdb3a;
  padding: 20px;
}
```

L'affichage attendu est :



<figure role="group"><img src="/images/draw-compressor.png" alt="la boîte inner est affichée à l'intérieur de la boîte outer"/></figure>

Mais si nous ajoutons `display: contents` à l'élément `.outer` , voici ce que nous obtenons&nbsp;:



<figure role="group"><img src="/images/display-contents-compressor.png" alt="la boîte outer a disparu, il ne reste que son contenu : I'm some content"/></figure>

Visuellement, le résultat est exactement ce que nous obtiendrions en omettant les balises ouvrante et fermante de l'élément `outer`.

```
I’m some content
<div class="inner">I’m some inner content</div>
```

<h2>Quid de... ?</h2>

Cette règle CSS, bien que simple en apparence, a quelques comportements spécifiques. Le point important à garder à l'esprit est que la règle `display: contents` n'affecte que l'affichage de la boîte, **il ne modifie en rien le balisage lui-même**.

<h3>Quid des attributs de l'élément ?</h3>

_Si, en pratique, l'élement est remplacé par son contenu, quelle est la conséquence pour ses attributs&nbsp;?_ Puisque son remplacement est pour l'essentiel purement visuel, **nous pouvons toujours sélectionner, cibler et interagir avec l'élément via ses attributs**.

Par exemple nous pouvons cibler l'élément avec son ID pour le référencer avec `aria-labelledby`:

```
<div id="label" style="display: contents;">Label here!</div>
<button aria-labelledby="label"><button>
```

Toutefois j'ai constaté que nous ne pouvons plus naviguer vers l'élément au moyen d'un [identificateur de fragment](https://fr.wikipedia.org/wiki/Identificateur_de_fragment) (_fragment identifier_)&nbsp;:

```
<div id="target" style="display: contents;">Target Content</div>

<script>
  window.location.hash = "target";
  // => Nothing happens
</script>
```

<h3>Quid des events JS ?</h3>

Comme nous venons de le voir, nous pouvons cibler un élément sur lequel a été appliqué `display: contents`. En fait, nous pouvons même cibler un élément ayant un style `display: none` mais l'event ne sera jamais déclenché parce que nous ne pouvons pas interagir avec l'élément. Cependant avec `display: contents` le contenu de l'élément étant toujours visible, nous pouvons interagir avec lui _à travers son contenu_.

Si par exemple nous appliquons un event listener pour un click sur l'élément, et que nous loggons la valeur de `this`, nous obtenons toujours l'élément extérieur (_outer_) parce qu'il existe toujours dans le document.

```
<div class="outer">I’m some content</div>

<script>
  document.querySelector(".outer").addEventListener("click", function(event) {
    console.log(this);
    // => <div class="outer"></div>
  });
</script>
```

<h3>Quid des pseudo-éléments ?</h3>

Les pseudo-éléments d'un élément auquel est appliqué `display: contents` sont considérés comme ses enfants et sont donc affichés normalement. (<span aria-hidden="true" data-icon="&#9758;"></span>&nbsp;_NdT&nbsp;: pour une intro facile aux pseudo-éléments, voir ici un article sur [les pseudo éléments css before et after](/articles/les-pseudo-elements-css-before-et-after/)_.)

```
<style>
  .outer { display: contents; }
  .outer::before { content: "Before" }
  .outer::after { content: "After" }
</style>

<div class="outer">I’m some content</div>
```

Le balisage ci-dessus donnera le résultat suivant :



<figure role="group"><img src="/images/pseudo-elements-compressor.png" alt="affichage du texte suivant : before i'm some content after"/></figure>

<h3>Quid des formulaires, images et autres éléments remplacés&nbsp;?</h3>

Les [éléments remplacés](/articles/quest-ce-quun-element-remplace/) et certains formulaires ont un comportement différent lorsqu'on leur applique `content: display`.

<h4>Les éléments remplacés</h4>

Les éléments remplacés sont des éléments dont l'apparence et les "boîtes"sont contrôlées par une ressource externe –&nbsp;c'est le cas par exemple des images. Supprimer la boîte pour de tels éléments n'a pas réellement de sens car la notion de boîte n'est pas claire les concernant. Pour ces éléments, `display: contents` fonctionne exactement comme `display: none`. Ni la boîte ni son contenu ne seront affichés.

<h4>Les formulaires</h4>

Les éléments de formulaires semblent constitués d'une simple boîte, mais sous le capot ils sont en réalité constitués de nombreux éléments. Tout comme pour les éléments remplacés, supprimer la boîte n'a pas de sens car il n'y a pas _une_ boîte. Du coup, pour les éléments de formulaires tels que `<select>`, `<input>` et `<textarea>`, `display: contents` fonctionne exactement comme `display: none`.

(Voir [la liste des éléments pour lesquels display: contents fonctionne différemment](https://www.w3.org/TR/css-display-3/#unbox-htm))

<h3>Quid des boutons et des liens ?</h3>

Les éléments `<button>` et `<a>` n'ont pas de comportement particulier avec `display: contents`. Cependant il est utile de savoir comment cette règle les affecte car cela peut ne pas sembler évident.

<h4>Les boutons</h4>

Les boutons ne sont pas constitués de boîtes, par conséquent `display: contents` ne fera que supprimer la boîte enveloppant le bouton, en ne laissant que le contenu du bouton. Si on l'utilise avec un formulaire, un clic sur ce bouton aura toujours pour effet de soumettre le formulaire et, comme nous l'avons vu, n'importe quel event listener sur le bouton fonctionnera normalement.

<h4>Les liens</h4>

La même chose s'applique aux liens, la boîte container est visuellement supprimée, ne laissant apparaître que le contenu du lien. Dans la mesure où les attributs ne sont généralement pas affectés par cette règle CSS, le lien fonctionnera toujours correctement et pourra être utilisé pour naviguer comme normalement.

<h3>Quelle est l'utilité de display: contents ?</h3>

Autrefois nous devions organiser notre HTML d'une façon qui fonctionne à la fois sémantiquement et pour notre style CSS. Cela a conduit parfois à créer trop d'éléments pour la sémantique, parfois trop peu pour le style, en particulier des éléments "frères". Ce dernier cas est particulièrement pertinent avec l'arrivée de CSS Grid Layout qui, au moins aujourd'hui, doit pouvoir travailler avec des éléments "frères".

Prenons par exemple ce layout :



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

Nous avons deux cartes placées côte à côte, chacune comprenant un titre, un paragraphe et un footer. Nous voulons que les sections aient la même hauteur pour toutes les cartes, indépendamment du contenu de chacune. Par exemple, la 2e carte a un titre de 3 lignes, la 1re carte a un titre de 1 ligne, mais les hauteurs de titres des deux cartes devraient être identiques.

Nous pourrions y arriver avec CSS Grid, mais pour cela il faudrait que tous les éléments dans une carte soient des "frères". Il nous faudrait organiser notre HTML comme ceci par exemple&nbsp;:

```
<div class="grid">
  <h2>This is a heading</h2>
  <p>...</p>
  <p>Footer stuff</p>

  <h2>This is a really really really super duper loooong heading</h2>
  <p>...</p>
  <p>Footer stuff</p>
</div>
```

et nous pourrions appliquer les styles suivants :

```
.grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 20px;
}
```

La structuration de ce document n'est certes pas incorrecte, mais il y aurait plus de sens à regrouper chaque carte dans un élément `<article>`. C'est ici que `display: contents` entre en scène, nous donnant le meilleur des deux mondes —&nbsp;en permettant un balisage sémantique tout en permettant d'organiser notre layout .

```
<div class="grid">
  <article style="display: contents;">
    <h2>This is a heading</h2>
    <p>...</p>
    <p>Footer stuff</p>
  </article>
  <article style="display: contents;">
    <h2>This is a really really really super duper loooong heading</h2>
    <p>...</p>
    <p>Footer stuff</p>
  </article>
</div>
```

<h3>Compatibilité</h3>

Comme toujours, [la compatibilité peut être vérifiée sur CanIUse](https://caniuse.com/#feat=css-display-contents), elle est bonne aujourd'hui, à l'exception de IE.

Si vous souhaitez assurer une compatibilité maximale, vous pouvez considérer cette feature comme une amélioration progressive (_progressive enhancement_) et utiliser une solution de rechange (_fallback_) appropriée.

```
article {
  display: grid;
  grid-template-rows: 200px 1fr auto; /* e.g. Use a fixed height for the header */
}

@supports (display: contents) {
  article { display: contents; }
}
```

Comment fonctionne CSS display: contents

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



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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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



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

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

et le CSS :

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

Voir également :

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

Comment fonctionne z-index

Ce qui est bien quand on enseigne, c’est que les étudiants arrivent toujours avec de nouvelles idées. L’un d’eux voulait reproduire un effet observé sur [Squarespace](http://www.squarespace.com/about/values), où une `div` semble entaillée&nbsp;:



<figure role="group"><img src="/images/navigation-compressor.jpeg" alt="navigation, l’onglet sélectionné semble porter une entaille"/></figure>

Sachant que son niveau lui permettait de comprendre les HTML et CSS du site, je me suis lancé avec elle dans la réalisation de cet effet. Ce découpage de la `nav` n’est pas si facile, ma première idée était de créer une image aux dimensions de l’entaille et de l’intégrer avec `::after`, mais ce n’est pas très responsif et pas aisé à gérer.

## Clip Path entre en scène

La propriété CSS clip-path permet de cacher des portions d’un élément via le masquage (_masking_) et le découpage, ou détourage (_clipping_).



<figure role="group"><img src="/images/ville-compressor.jpeg" alt=""/><figcaption>L’image qui nous servira de base pour nos découpages.</figcaption></figure>

En bref, la façon dont la propriété fonctionne est simple&nbsp;: on fournit une série de valeurs X et Y pour créer un chemin. Ces valeurs, une fois un chemin complet créé, découpent l’image située à l’intérieur.

Nous pouvons créer de nombreuses formes différentes à partir de cercles, d’ellipses, de polygones. La créativité est la seule limite.

<h3>Un triangle simple</h3>

<div class="clipbox clipPolygon"></div>

L’effet ci-dessus est obtenu en utilisant simplement un élément et en lui appliquant un clip-path.

    //CSS
    .clipClass {
       clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }

### Whoa, détaillons tout ça

De la même façon que pour la propriété `position`, nous devons penser en termes de valeurs X et Y. X:0 et Y:0 sont situés dans le coin supérieur gauche de l’élément. X:100% signifie qu’on a atteint le côté droit et Y:100% le bas.

Ok, cool. Donc le chemin que nous venons de créer utilise les points suivants&nbsp;:

    x: 0, y:100%
    x: 50%, y: 0
    x: 100%, y: 100%

Un chemin simple, qui part du bas à gauche, se déplace horizontalement jusqu’à la moitié de l’espace (50%), puis monte jusqu’en haut (0) pour atteindre le 2e point, puis va tout à fait à droite horizontalement et en bas, pour atteindre le 3e point&nbsp;: 3 points&nbsp;=&nbsp;un&nbsp;triangle&nbsp;!

Tout ce qui ne se trouve pas à l’intérieur de ces limites est simplement découpé et n’apparaît pas. L’élément lui-même garde ses dimensions, bien que le mode de présentation ait changé.

### Formes

Dans ce premier exemple, nous avons utilisé un polygone pour créer une forme et définir un chemin en créant des paires x et y, séparées par des virgules. Mais nous pouvons travailler avec différentes formes, qui prennent des valeurs différentes.

<h3>Cercles</h3>

<div class="clipbox clipCircle"></div>

Pour créer des cercles, nous passons trois valeurs. L’axe des x et des y nous donne les coordonnées du centre du cercle, et le rayon définit sa taille. La syntaxe est la suivante : “dimension du rayon (at) coordonnées du centre”&nbsp;:

    //CSS
    .clipClass {
      clip-path: circle(50% at 50% 50%);
    }

<h3>Ellipses</h3>

<div class="clipbox clipEllipse"></div>

Si vous préférez une forme oblongue, vous pouvez choisir l’[ellipse](http://fr.wikipedia.org/wiki/Ellipse_%28math%C3%A9matiques%29). Pour celle-ci, vous devez fournir quatre valeurs, une valeur sur l’axe des x, une sur l’axe des y, et les deux valeurs correspondant au centre. Ici encore, les coordonnées du centre sont précédées du mot-clé “at”&nbsp;:

    //CSS
    .clipClass {
      clip-path: ellipse(30% 20% at 50% 50%);
    }

<h3>Inset</h3>

<div class="clipbox clipInset"></div>

Si les angles aigus des polygones ne vous plaisent pas et que vous souhaitez créer des rectangles arrondis, utilisez les valeurs “inset”. Inset prend quatre valeurs, correspondant aux positions haut, droit, bas, gauche et permet l’utilisation d’un rayon sur chacune de ces valeurs.

    //CSS
    .clipClass {
      clip-path: inset(25% 0 25% 0 round 0 25% 0 25%);
    }

Ce qui se lit comme&nbsp;:

    inset(<haut> <droit> <bas> <gauche> round <rayon-haut> <rayon-droit> <rayon-bas> <rayon-gauche>)

Un peu long ? Bonne nouvelle, il y a un raccourci&nbsp;:

    //CSS
    .clipClass {
      clip-path: inset(25% 0 round 0 25%);
    }

#### Références rapides :

**Cercle** : circle(rayon at x y)

**Ellipse** : ellipse(rayon-x rayon-y at x y)

**Polygone** : polygon(x y, x y, ...)

**Inset** : inset(haut droit bas gauche round rayon-haut rayon-droit rayon-bas rayon-gauche)

### Créer des formes

Les cercles et les formes utilisant les rayons sont limités à quelques valeurs, par conséquent les polygones sont souvent un meilleur choix pour créer des formes complexes. Comme nous pouvons définir autant de points que nous le voulons, nous pouvons découper notre élément dans des formes très variées.

<h3>Bulle de bande dessinée</h3>

<div class="clipbox clipComic"></div>

    //CSS
    .clipClass {
      clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    }

<h3>Étoile</h3>

<div class="clipbox clipStar"></div>

    //CSS
    .clipClass {
      clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
    }

### Animation

Maintenant que nous maîtrisons mieux les formes et la façon de les produire, nous pouvons nous amuser à créer des effets.

Nous pouvons par exemple avoir une forme qui s’applique au survol, en utilisant une propriété [transition](https://la-cascade.io/transition/) pour créer un effet en douceur. Cependant, nous devons garder à l’esprit qu’il nous faut créer un état initial par défaut, utilisant les mêmes points que ceux qui nous serviront pour notre état modifié.

<div class="clipbox clipAnimate"></div>

    //CSS
    .animateClass {
      clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);
      transition: clip-path 0.5s;
    }
    .animateClass:hover {
      clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    }

## Utilisation en production

Comme toujours, pour connaître les détails à jour de la compatibilité vous pouvez consulter [Can I Use](http://caniuse.com/#search=css%20clip-path).

### Retour à notre tâche initiale

Tout ceci parce que nous voulions recréer la navigation Squarespace, vous vous rappelez ? Eh bien maintenant, si nous utilisons le positionnement pour recouvrir un élément par un autre, puis que nous utilisons clip-path pour masquer l’image, nous pouvons simplement montrer l’image de background sans avoir à appliquer de techniques complexes de remplacement d’images.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/vEZOeq/">
  Squarespace clip-path</a> de Drew Minns dans <a href="https://codepen.io">CodePen</a></span>
</div>

Je ne sais pas ce que vous en pensez, mais je trouve que l’avenir est de plus en plus géométrique.

Comprendre Clip Path

Comprendre CSS Grid : créer un container Grid

Avec Grid, on peut toujours placer les items entre une ligne de grille et une autre. Mais il existe une autre façon de décrire notre mise en page, une façon plus _visuelle_. Dans ce troisième volet de notre série nous allons voir comment utiliser la propriété [grid-template-areas](/articles/css-grid-layout-guide-complet#gta)
pour définir un placement sur la grille et nous découvrirons comme elle fonctionne réellement.

## Décrire une mise en page avec grid-template-areas

La propriété `grid-template-areas` accepte pour valeur une ou plusieurs chaînes de caractères. Chacune, entourée de guillemets, représente une rangée de notre grille. Nous pouvons utiliser la propriété sur une grille définie avec `grid-template-rows` et `grid-template-columns`, ou nous pouvons créer notre mise en page, auquel cas toutes les rangées seront automatiquement dimensionnées.

La propriété et les valeurs qui suivent décrivent une grille comportant quatre zones —&nbsp;chacune s'étend sur deux pistes de colonnes et deux pistes de rangées. Une zone (_area_) peut s'étendre sur plusieurs pistes lorsqu'on en répète le nom dans toutes les cellules qu'on veut couvrir&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one two two"
                     "three three four four"
                     "three three four four";

```

Les items sont placés dans la mise en page en étant nommés dans la propriété `grid-area`. Si nous voulons placer un élément ayant une classe `test` dans la zone de la grille qui s'appelle `one`, il suffit d'écrire&nbsp;:

```
.test {
  grid-area: one;
}
```

Regardons cela en action dans le codepen qui suit. J'ai quatre items, avec des classes nommées un à quatre (one to four), qui sont assignées aux zones de grille correspondantes via la propriété `grid-area` et qui s'affichent donc dans les boîtes correctes de la grille.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_VwLLRKE" src="//codepen.io/rachelandrew/embed/VwLLRKE?height=640&amp;theme-id=light&amp;slug-hash=VwLLRKE&amp;user=rachelandrew&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/rachelandrew/pen/VwLLRKE/">
  Grid template areas : exemple simple</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous utilisez l'inspecteur Grid de Firefox, vous pouvez voir les noms des zones et les lignes de grille, montrant que chaque item s'étend en effet sur deux rangées et deux colonnes —&nbsp;le tout sans faire aucun positionnement basé sur les lignes pour l'item lui-même.



<figure role="group"><img src="/images/smashing-grid-area1.webp" alt="chaque item s'étend sur deux rangées et deux colonnes"/></figure>

## Règles d'utilisation de grid-template-areas

Il ya des règles à suivre lorsqu'on crée une mise en page de cette façon. Ne pas les respecter rendra les valeurs invalides et notre mise en page ne fonctionnera pas. La première règle est que **nous devons décrire une grille complète**, chaque cellule de la grille doit être remplie.

Si l'on veut laisser une ou plusieurs cellules vides, on exprime ce choix en insérant un point `.` ou une série de points `...` sans espace entre eux.

Si je change les valeurs de notre grille ainsi&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one two two"
                     ". . four four"
                     "three three four four";

```

j'ai maintenant deux cellules sans contenu à l'intérieur. L'item `three` n'est affiché que dans la dernière rangée de la grille.



<figure role="group"><img src="/images/smashing-grid-area2.webp" alt="il y a maintenant un espace vide dans notre grille"/></figure>

**Nous ne pouvons définir chaque zone qu'une seule fois**, c'est à dire que nous ne pouvons utiliser cette propriété pour copier du contenu à deux endroits sur la grille&nbsp;! Les valeurs qui suivent seraient invalides et la propriété dans son ensemble serait ignorée, car nous avons dupliqué la zone `three`&nbsp;:

```
grid-template-areas: "one one three three"
                     "one one two two"
                     "three three four four"
                     "three three four four";
```

On ne peut pas non plus créer une zone non-rectangulaire, la propriété ne peut pas être utilisée pour créer une zone en forme de T ou de L, et les valeurs ci-dessous sont également invalides&nbsp;:

```
grid-template-areas: "one one two two"
                     "one one one one"
                     "three three four four"
                     "three three four four";
```

## Formater les chaînes de caractères

Dans mon CSS, j'aime bien afficher les valeurs de `grid-template-area` comme je le fais ci-dessus, avec chaque chaîne de caractères qui représente une rangée et chacune disposée en-dessous de la rangée précédente, car cela me donne une représentation visuelle de ma mise en page.

Pour améliorer encore la visualisation, on peut ajouter des espaces entre chaque cellule, mais aussi des points multiples pour les cellules vides, ainsi tout est bien aligné&nbsp;:

```
grid-template-areas: "one   one   two  two"
                     "one   one   two  two"
                     "..... ..... four four"
                     "three three four four";
```

Ceci étant, on peut, de manière tout à fait valide, aligner toutes les chaînes de caractères sur une seule ligne, on pourrait donc écrire&nbsp;:

```
grid-template-areas: "one one two two" "one one two two" "three three four four" "three three four four";
```

## Expliquer grid-template-areas et grid-area

La raison pour laquelle chaque zone doit être un rectangle complet est qu'elle doit avoir la même forme que si elle avait été créée par un placement basé sur les lignes. Si nous poursuivons avec notre exemple précédent, nous pourrions réaliser cette mise en page avec des lignes de grille comme dans le codepen ci-dessous. Ici, j'ai créé ma grille comme avant. Cette fois par contre, j'ai utilisé les lignes de grille pour positionner via les propriétés (raccourcies) `grid-column-start`, `grid-column-end`, `grid-row-start` et `grid-row-end`.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/LYEdOdB/">
  Grid template areas : placement basé sur les lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Note : si vous avez lu mon précédent article [Comprendre CSS Grid : les lignes Grid](/articles/comprendre-cssgrid-lines) vous savez déjà qu'il est possible d'utiliser `grid-area` comme un raccourci pour déclarer les quatre lignes en une fois.

Cela signifie que nous pourrions aussi créer notre mise en page avec l'ordre de lignes suivant&nbsp;:

- `grid-row-start`
- `grid-column-start`
- `grid-row-end`
- `grid-column-end`

```
.one {
  grid-area: 1 / 1 / 3 / 3;
}

.two {
  grid-area: 1 / 3 / 3 / 5;
}

.three {
  grid-area: 3 / 1 / 5 / 3;
}

.four {
  grid-area: 3 / 3 / 5 / 5;
}
```

la propriété `grid-area` est intéressante en ce qu'elle peut prendre des numéros de ligne ou des noms de ligne. Mais il est important de comprendre comment elle fonctionne dans chaque mode.

### Utiliser grid-area avec des numéros de ligne

Si vous utilisez la propriété `grid-area` avec des numéros de ligne, alors les lignes seront assignées dans l'ordre décrit ci-dessus.

Si vous omettez des valeurs —&nbsp;en ne fournissant qu'un, deux, ou trois numéros de ligne&nbsp;— les valeurs manquantes sont réglées sur `auto` ce qui signifie que la zone s'étendra sur une piste (ce qui est la valeur par défaut). Donc le CSS suivant placerait un item `grid-row-start: 3` avec toutes les autres valeurs réglées sur `auto`, et donc, l'item serait auto-placé dans la première piste de colonne disponible, et s'étendrait sur une piste de rangée et une piste de colonne.

```
grid-area: 3;
```

### Utiliser grid-area avec des idents

Si nous utilisons **ident** (qui est la façon pour Grid Layout d'appeller une zone nommée), alors la propriété `grid-area` prend aussi quatre lignes. Si vous avez des lignes nommées dans votre grille, comme décrit dans [Comprendre CSS Grid : créer un container Grid](/articles/comprendre-cssgrid-creer-un-container-grid), alors vous pouvez utiliser ces lignes nommées tout comme les lignes numérotées.

Attention cependant car, selon que vous utilisez ident avec des lignes nommées ou numérotées, le comportement sera différent dans le cas où vous omettez quelques lignes.

Ci-dessous, j'ai créé une grille avec des lignes nommées et utilisé `grid-area` pour placer un item (en omettant la valeur finale)&nbsp;:

```
.grid {
  display: grid;
  grid-template-columns:
      [one-start three-start] 1fr 1fr
      [one-end three-end two-start four-start] 1fr 1fr [two-end four-end];
  grid-template-rows:
    [one-start two-start] 100px 100px
    [one-end two-end three-start four-start] 100px 100px [three-end four-end];;
}

.two {
  grid-area: two-start / two-start / two-end;
}
```

Il nous manque donc le nom de ligne pour `grid-column-end`. La spécification dit que dans cette situation, `grid-column-end` doit utiliser une copie de `grid-column-start`. Si `grid-column-end` et `grid-column-start` sont identiques, alors la ligne finale est oubliée, et la valeur est réglée sur `auto`, donc l'item s'étend sur une piste, comme dans la version numérotée.

La même chose se produit si nous omettons la troisième valeur `grid-row-end`&nbsp;; elle devient la même que `grid-row-start` et donc devient `auto`.

Jetez un œil à cet exemple codepen de la façon dont `grid-area` est utilisé et comment il change ensuite la mise en page de l'item&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_oNXXOvR" src="//codepen.io/rachelandrew/embed/oNXXOvR?height=640&amp;theme-id=light&amp;slug-hash=oNXXOvR&amp;user=rachelandrew&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/rachelandrew/pen/oNXXOvR/">
  Grid template areas : idents manquants dans grid-area</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ceci explique pourquoi `grid-area` fonctionne avec une seule valeur ident représentant une zone nommée.

Quand nous créons une zone nommée avec la propriété `grid-template-areas`, le bord de chaque zone peut être référencé par un nom de ligne qui est le même que le nom de la zone utilisée. Dans notre cas, nous avons pu prendre notre zone nommée `one` et placer notre item en utilisant des lignes nommées comme suit&nbsp;:

```
.one {
  grid-row-start: one;
  grid-row-end: one;
  grid-column-start: one;
  grid-row-end: one;
}
```

Quand nous disons `grid-area: one`, nous omettons les trois dernières valeurs du raccourci `grid-area`&nbsp;; elles finissent comme des copies de notre première valeur —&nbsp;toutes, dans notre cas deviennent `one` et l'item est placé exactement comme dans la version longue de notre css.

Le fonctionnement du nommage dans Grid layout est très intelligent et permet des choses bien intéressantes que j'ai décrites dans mes articles précédents [Naming Things In CSS Grid Layout](https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/) et [Editorial Design Patterns With CSS Grid And Named Columns](https://www.smashingmagazine.com/2019/10/editorial-design-patterns-css-grid-subgrid-naming/) (en anglais).

## Mettre en page des items avec grid-template-areas

Avec `grid-template-areas`, une cellule ne peut être occupée que par un seul nom, cependant nous pouvons toujours ajouter des items à la grille après avoir réalisé notre mise en page principale de cette manière. Pour cela, nous avons les lignes numérotées, comme d'habitude.

Dans l'exemple codepen suivant, j'ai ajouté un item supplémentaire et je l'ai placé par-dessus les items déjà présents en utilisant le positionnement basé sur les numéros de lignes.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_bGddJRr" src="//codepen.io/rachelandrew/embed/bGddJRr?height=650&amp;theme-id=light&amp;slug-hash=bGddJRr&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="650" 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/rachelandrew/pen/bGddJRr/">
  Grid template areas : placer un item avec des numéros de lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Nous pouvons également utiliser les noms de lignes définis lorsque nous avons créé nos colonnes ou rangées. Mieux encore, nous aurons des noms de lignes créés par la formation des zones. Nous avons déjà vu comment nous pouvons obtenir quatre noms de lignes à partir du nom de la zone. Nous obtenons aussi une ligne de début au bord de chaque zone avec un `-start` ajouté au nom de la zone, et une ligne pour l'autre bord avec un `-end` ajouté.

Par conséquent, la zone nommée `one` a des lignes de début appelées `one-start` et de fin appelées `one-end`.

Nous pouvons ensuite utiliser ces noms implicites de lignes pour placer une item sur la grille. Cela peut être utile si on redéfinit la grille à plusieurs points de rupture (_breakpoints_), si nous voulons toujours que l'tem placé se trouve après un certain nom de ligne.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_QWbbPMQ" src="//codepen.io/rachelandrew/embed/QWbbPMQ?height=640&amp;theme-id=light&amp;slug-hash=QWbbPMQ&amp;user=rachelandrew&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/rachelandrew/pen/QWbbPMQ/">
  Grid template areas : placer un item avec des noms implicites de lignes</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Utiliser grid template areas dans un design responsif

Je construis souvent des composants et je me rends compte que `grid-template-areas` peut être bien utile pour voir exactement, déjà dans le CSS, à quoi mon composant va ressembler. De plus, la redéfinition du composant pour plusieurs points de rupture est très simple, il suffit de redéfinir les valeurs de `grid-template-areas`, avec parfois en plus un changement du nombre de pistes de colonnes.

Dans le CSS qui suit, j'ai défini une mise en page à une seule colonne pour mon composant. Ensuite, à une largeur minimum de 600px, je redéfinis le nombre de colonnes ainsi que la valeur de `grid-template-areas` afin de créer une mise en page sur deux colonnes. Ce qui est bien avec cette approche, c'est qu'il suffit de regarder le CSS pour voir à quoi ressemble ma mise en page&nbsp;!

```
.wrapper {
  background-color: #fff;
  padding: 1em;
  display: grid;
  gap: 20px;
  grid-template-areas:
    "hd"
    "bd"
    "sd"
    "ft";

}

@media (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas:
      "hd hd"
      "bd sd"
      "ft ft";
  }
}

header { grid-area: hd; }
article {grid-area: bd; }
aside { grid-area: sd; }
footer { grid-area: ft; }
```

## Accessibilité

Il faut être prudent lorsqu'on utilise cette méthode et se rappeler qu'elle peut amener à une réorganisation du contenu qui peut se trouver déconnecté de l'ordre de la source. Un utilisateur naviguant avec la tabulation regarde l'écran tout en écoutant un texte dit par l'ordinateur, et ce dernier lit le contenu dans l'ordre où il figure dans la source HTML. Cela peut entraîner beaucoup de confusion pour l'utilisateur.

## Résumé

Voilà tous les tuyaux à connaître sur les propriétés `grid-template-area` et `grid-area` pour créer des mises en page. Si vous ne l'avez pas déjà utilisée, essayez là. Je la trouve très utile notamment pour expérimenter et je m'en sers beaucoup pour mes prototypes —&nbsp;même si, pour une raison ou une autre, je suis amenée plus tard à utiliser une autre méthode pour la production.

Comprendre CSS Grid : Grid template areas

Comprendre CSS Grid : les lignes Grid


Lorsque nous appliquons une propriété CSS à un élément, il se passe beaucoup de choses en coulisses. Par exemple, disons que nous avons ce HTML&nbsp;:

```html
<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>
```

...et nous ajoutons ce CSS :

```css
.parent {
  display: flex;
}
```

Techniquement, ce ne sont pas les _seuls_ styles que nous appliquons lorsque nous écrivons la ligne de CSS ci-dessus. En fait, tout un tas de propriétés seront appliquées aux éléments `.child` ici, comme si nous avions écrit ces styles nous-mêmes&nbsp;:

```css
.child {
  flex: 0 1 auto; /* valeurs flex par défaut */
}
```

Étrange ! Pourquoi ces éléments ont-ils ces styles supplémentaires qui leur sont appliqués alors que nous n'avons pas écrit ce code&nbsp;? Eh bien, c'est parce que certaines propriétés ont des valeurs _par défaut_ qui sont ensuite destinées à être remplacées par nous. Et si nous ne savons pas que ces styles sont appliqués lorsque nous écrivons le CSS, nos mises en page peuvent devenir assez déroutantes et difficiles à gérer.

La propriété `flex` ci-dessus est ce que l'on appelle une propriété CSS _abrégée_ (ou raccourcie : _shorthand_). En fait, ce que ça fait c'est qu'on définit trois propriétés CSS distinctes en même temps. Ce que nous avons écrit ci-dessus revient donc à écrire ceci&nbsp;:

```css
.child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
```

Une propriété raccourcie est donc une façon de _regrouper_ un tas de propriétés CSS différentes pour faciliter l'écriture de plusieurs propriétés à la fois, précisément comme la propriété `background` où nous pouvons écrire quelque chose comme ceci :

```css
body {
  background: url(sweettexture.jpg) top center no-repeat fixed
    padding-box content-box red;
}
```

J'essaie d'éviter les propriétés raccourcies car elles peuvent être assez déroutantes et j'ai souvent tendance à écrire les versions longues à la main, simplement parce que mon cerveau ne parvient pas à analyser de longues lignes de valeurs de propriétés. Mais il est [recommandé](https://drafts.csswg.org/css-flexbox/#flex-grow-property) d'utiliser le raccourci lorsqu'il s'agit de flexbox, ce qui semble... bizarre... c'est-à-dire jusqu'à ce que vous compreniez que la propriété `flex` fait beaucoup de travail et que chacune de ses sous-propriétés interagit avec les autres.

En outre, les styles par défaut sont une bonne chose car nous n'avons pas besoin de savoir ce que font ces propriétés flexbox dans 90&nbsp;% des cas. Par exemple, lorsque j'utilise flexbox, j'ai tendance à écrire quelque chose comme&nbsp;:

```css
.parent {
  display: flex;
  justify-content: space-between;
}
```

Je n'ai même pas besoin de me soucier des éléments enfants ou des styles qui leur ont été appliqués, et c'est super&nbsp;! Dans ce cas, nous alignons les éléments enfants côte à côte, puis nous les espaçons de manière égale les uns des autres. Deux lignes de CSS nous donnent beaucoup de pouvoir ici et c'est ce qu'il y a de mieux avec flexbox et ces styles hérités —&nbsp;_nous n'avons pas besoin de comprendre toute la complexité sous le capot_ si nous voulons simplement faire la même chose 90&nbsp;% du temps. C'est remarquablement intelligent car toute cette complexité est cachée.

Mais qu'en est-il si nous voulons comprendre le fonctionnement réel de flexbox, y compris les propriétés `flex-grow`, `flex-shrink` et `flex-basis`&nbsp;? Et quelles choses sympas pouvons-nous faire avec elles&nbsp;?

Il suffit de consulter l'[Almanach CSS-Tricks](https://css-tricks.com/almanac/). Et c'est bon&nbsp;!

Nan, je plaisante. Commençons par un aperçu rapide et un peu simplifié, et revenons aux propriétés `flex` par défaut qui sont appliquées aux éléments enfants&nbsp;:

```css
.child {
  flex: 0 1 auto;
}
```

Ces styles par défaut indiquent à cet élément enfant comment s'étirer et se développer. Mais chaque fois que je vois qu'ils sont utilisés ou remplacés, je trouve utile de penser à ces propriétés abrégées comme ceci&nbsp;:

```css
/* C'est ainsi que je vois la règle ci-dessus dans ma tête */

.child {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/* ou bien comme ça... */

.child {
  flex: [max] [min] [taille idéale];
}
```

La première valeur est `flex-grow` et elle est réglée sur 0 car, par défaut, nous ne voulons pas que nos éléments s'étendent (la plupart du temps). Nous voulons plutôt que chaque élément dépende de la taille du contenu qu'il contient. Voici un exemple :

```css
.parent {
  display: flex;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xxOjNav/bc3d06b3162c4163a9e51ccd91913986" src="//codepen.io/robinrendle/embed/xxOjNav/bc3d06b3162c4163a9e51ccd91913986?height=300&amp;theme-id=light&amp;slug-hash=xxOjNav/bc3d06b3162c4163a9e51ccd91913986&amp;user=robinrendle&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/robinrendle/pen/xxOjNav/bc3d06b3162c4163a9e51ccd91913986">
  flex-grow-default</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

J'ai ajouté la propriété `contenteditable` à chaque élément `.child` ci-dessus pour que vous puissiez cliquer dessus et saisir encore plus de contenu. Vous voyez comment ça réagit&nbsp;? C'est le comportement par défaut d'un élément flexbox : `flex-grow` est défini sur 0 car nous voulons que l'élément grandisse en fonction du contenu qu'il contient.

Mais ! Si nous devions changer la valeur par défaut de la propriété flex-grow de 0 à 1, comme ceci...

```css
.child {
  flex: 1 1 auto;
}
```

...alors, tous les éléments prendraient une part égale de l'élément `.parent`, mais _seulement si les longueurs de leurs contenus sont les mêmes_.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_Pozeryd/7aab5c7671016f4c76401020568d49b0" src="//codepen.io/robinrendle/embed/Pozeryd/7aab5c7671016f4c76401020568d49b0?height=300&amp;theme-id=light&amp;slug-hash=Pozeryd/7aab5c7671016f4c76401020568d49b0&amp;user=robinrendle&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/robinrendle/pen/Pozeryd/7aab5c7671016f4c76401020568d49b0">
  flex-grow-default-1</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

C'est exactement comme si j'avais écrit&nbsp;:

```css
.child {
  flex-grow: 1;
}
```

...en laissant de côté les autres valeurs parce que celles-ci ont été définies par défaut de toute façon. Je pense que cela m'a _longtemps_ perturbé lorsque j'ai commencé à travailler avec des mises en page flexibles. Je voyais du code qui ajoutait juste `flex-grow` et je me demandais d'où venaient les autres styles.

Maintenant, si nous voulions qu'un seul de ces éléments croisse plus que les autres, il nous suffirait de faire&nbsp;:

```css
.child-three {
  flex: 3 1 auto;
}

/* ou bien nous pourrions simplement écrire... */

.child-three {
  flex-grow: 3;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0" src="//codepen.io/robinrendle/embed/zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0?height=300&amp;theme-id=light&amp;slug-hash=zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0&amp;user=robinrendle&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/robinrendle/pen/zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0">
  flex-grow-default-2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ce code est-il étrange à regarder, même dix ans après l'arrivée de Flexbox dans les navigateurs&nbsp;? Il l'est certainement pour moi. J'ai besoin d'une puissance cérébrale supplémentaire pour dire "Ah oui, max, min, taille idéale" lorsque je lis le raccourci, mais ça s'améliore avec le temps. Quoi qu'il en soit, dans l'exemple ci-dessus, les deux premiers éléments enfants occuperont proportionnellement la même quantité d'espace, mais le troisième élément essaiera de croître jusqu'à trois fois l'espace des autres.

C'est là que les choses deviennent étranges, car tout dépend du contenu des éléments enfants. Même si nous avons défini `flex-grow` à `3`, comme nous l'avons fait dans l'exemple ci-dessus, si nous ajoutons ensuite plus de contenu, la mise en page fera quelque chose d'étrange comme ceci&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LYZmKqj/480cd39e0ef5f98f6d82706f0478a504" src="//codepen.io/robinrendle/embed/LYZmKqj/480cd39e0ef5f98f6d82706f0478a504?height=300&amp;theme-id=light&amp;slug-hash=LYZmKqj/480cd39e0ef5f98f6d82706f0478a504&amp;user=robinrendle&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/robinrendle/pen/LYZmKqj/480cd39e0ef5f98f6d82706f0478a504">
  flex-grow-3</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Cette deuxième colonne prend maintenant trop d'espace ! Nous y reviendrons plus tard, mais pour l'instant, il est juste important de se rappeler que le contenu d'un élément flex a un impact sur la façon dont `flex-grow`, `flex-shrink` et `flex-basis` fonctionnent ensemble.

OK, passons maintenant à `flex-shrink`. Rappelez-vous que c'est la deuxième valeur dans le raccourci&nbsp;:

```css
.child {
  flex: 0 1 auto; /* flex-shrink = 1 */
}
```

`flex-shrink` indique au navigateur quelle doit être la taille minimale d'un élément. La valeur par défaut est 1, ce qui revient à dire&nbsp;: "Prenez la même quantité d'espace à tout moment". Cependant, si nous définissons cette valeur à 0 comme ceci&nbsp;:

```css
.child {
  flex: 0 0 auto;
}
```

...alors nous disons à cet élément de ne pas rétrécir du tout maintenant. _Reste à la même taille, maudit élément_&nbsp;! c'est en substance ce que dit cette CSS, et c'est précisément ce qu'elle va faire. Nous reviendrons sur cette propriété dans un instant, une fois que nous aurons examiné la valeur finale de ce raccourci.

`flex-basis` est la dernière valeur ajoutée par défaut dans le raccourci `flex`, et c'est la façon dont nous indiquons à un élément de s'en tenir à une taille idéale. Par défaut, elle est définie sur `auto`, ce qui signifie "Utilisez ma hauteur ou ma largeur". Ainsi, lorsque nous définissons un élément parent pour `display: flex`...

```css
.parent {
  display: flex;
}

.child {
  flex: 0 1 auto;
}
```

Nous aurons ceci par défaut dans le navigateur :

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YzWLbmp/682e040debc4ae4b12bdb50d14663047" src="//codepen.io/robinrendle/embed/YzWLbmp/682e040debc4ae4b12bdb50d14663047?height=300&amp;theme-id=light&amp;slug-hash=YzWLbmp/682e040debc4ae4b12bdb50d14663047&amp;user=robinrendle&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/robinrendle/pen/YzWLbmp/682e040debc4ae4b12bdb50d14663047">
  flex-basis example 1</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Vous avez remarqué que tous les éléments ont la largeur de leur contenu par défaut&nbsp;? C'est parce qu'`auto` dit que la taille idéale de notre élément est définie par son contenu. Pour que tous les éléments occupent tout l'espace du parent, nous pouvons régler les éléments enfants sur `width : 100%`, _ou_ nous pouvons régler `flex-basis` sur 100%, _ou_ nous pouvons régler `flex-grow` sur 1.

Est-ce que ça fait sens pour vous ? C'est bizarre, hein ! En fait, oui, lorsqu'on y pense. Chacune de ces valeurs abrégées a un impact sur les autres et c'est pourquoi il est recommandé d'écrire ce raccourci en premier lieu plutôt que de définir ces valeurs indépendamment les unes des autres.

Bon, passons à autre chose. Lorsque nous écrivons quelque chose comme ceci...

```css
.child-three {
  flex: 0 1 1000px;
}
```

...ce que nous disons ici au navigateur, c'est de régler `flex-basis` sur 1000px ou "s'il vous plaît, essayez d'occuper 1000px d'espace". Si ce n'est pas possible, l'élément occupera cet espace proportionnellement aux autres éléments.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13" src="//codepen.io/robinrendle/embed/qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13?height=300&amp;theme-id=light&amp;slug-hash=qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13&amp;user=robinrendle&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/robinrendle/pen/qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13">
  flex-basis example 2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Vous remarquerez peut-être que sur les petits écrans, ce troisième élément n'est pas réellement de 1000px&nbsp;! C'est parce qu'il s'agit en fait d'une _suggestion_. Nous avons toujours l'option `flex-shrink` appliquée, qui indique à l'élément de se réduire à la même taille que les autres éléments.

De même, l'ajout de contenu aux autres enfants aura toujours un impact ici&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_OJXwGja/464505f57050c12f294a6269583dd663" src="//codepen.io/robinrendle/embed/OJXwGja/464505f57050c12f294a6269583dd663?height=300&amp;theme-id=light&amp;slug-hash=OJXwGja/464505f57050c12f294a6269583dd663&amp;user=robinrendle&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/robinrendle/pen/OJXwGja/464505f57050c12f294a6269583dd663">
  flex-basis example 2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Maintenant, si nous voulions empêcher cet élément de rétrécir, nous pourrions écrire quelque chose comme ceci&nbsp;:

```css
.child-three {
  flex: 0 0 1000px;
}
```

Rappelez-vous, `flex-shrink` est la deuxième valeur ici et en la réglant à 0, nous disons, "Ne rétrécis jamais, grand idiot." Et ce n'est pas le cas. L'élément se détachera même de l'élément parent parce qu'il ne sera jamais plus petit que 1000px de large&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595" src="//codepen.io/robinrendle/embed/BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595?height=300&amp;theme-id=light&amp;slug-hash=BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595&amp;user=robinrendle&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/robinrendle/pen/BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595">
  flex-basis example 3</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Maintenant, tout cela change si nous définissons `flex-wrap` sur l'élément parent :

```css
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child-three {
  flex: 0 0 1000px;
}
```

Nous verrons quelque chose comme ça&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NWrMZwE/587a4f6710efcb8f0fb403791834df33" src="//codepen.io/robinrendle/embed/NWrMZwE/587a4f6710efcb8f0fb403791834df33?height=300&amp;theme-id=light&amp;slug-hash=NWrMZwE/587a4f6710efcb8f0fb403791834df33&amp;user=robinrendle&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/robinrendle/pen/NWrMZwE/587a4f6710efcb8f0fb403791834df33">
  flex-basis example 4</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

En effet, par défaut, les éléments flexibles essaieront de tenir sur une seule ligne, mais `flex-wrap : wrap` l'ignorera complètement. Maintenant, si ces éléments flex ne peuvent pas tenir dans le même espace, ils se sépareront sur une nouvelle ligne.

Quoi qu'il en soit, il ne s'agit là que de quelques-unes des façons dont les propriétés `flex` s'entrechoquent et de la raison pour laquelle il est si précieux de comprendre comment ces propriétés fonctionnent sous le capot. Chacune de ces propriétés peut affecter l'autre, et si vous ne comprenez pas le fonctionnement d'une propriété, alors d'une certaine façon vous ne comprenez pas du tout comment tout cela fonctionne —&nbsp;ce qui m'a certainement déconcerté avant que je ne commence à creuser ce sujet&nbsp;!

Mais pour résumer :

👉🏿 Essayez d'utiliser le raccourci flex  
👉🏿 Souvenez-vous de la taille maximale, minimale et idéale lorsque vous le faites  
👉🏿 N'oubliez pas que le contenu d'un élément peut également avoir un impact sur la façon dont ces valeurs fonctionnent ensemble.


Comprendre flex-grow, flex-shrink et flex-basis


J’ai écrit dernièrement un article sur [Comprendre SVG viewport et viewBox](/articles/comprendre-svg-viewbox-et-viewport/) et je me suis dit que celui-ci ferait une suite idéale pour approfondir le sujet.

Comprendre l’espace de travail SVG est parfois compliqué. La qualité de notre SVG dépend fortement du système de coordonnées que nous aurons défini.

<h2>Résumé de viewport et viewBox</h2>

La largeur `width` et la hauteur `height` de notre SVG établissent la surface visible (le viewport). Si nous définissons une `viewBox`, nous pouvons spécifier la façon dont notre élément graphique peut s’étendre pour remplir un container (habituellement le viewport). Lorsque les valeurs de chacun des deux sont identiques, l’image est visible dans son entièreté et se redimensionne lorsque la taille du viewport est modifiée. C’est magnifique.

Si la `viewBox` SVG et le viewport n’ont pas le même ratio largeur et hauteur, `preserveAspectRatio` indique si l’on doit ou non forcer un redimensionnement uniforme.

Dans les exemples qui suivent, nous allons passer des poires aux cerises et nous verrons l’effet que les diverses valeurs de `preserveAspectRatio` auront sur le rendu visuel. Dans ce premier exemple, les cerises sont définies de façon à se redimensionner uniformément grâce à des valeurs de viewport et de `viewBox` identiques.

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

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

<h2>Valeurs de preserveAspectRatio</h2>

`preserveAspectRatio` accepte deux paramètres, `<align>` et `<meetOrSlice>`. Le premier paramètre comporte deux parties et régit l’alignement de la `viewBox` à l’intérieur du viewport. Le second paramètre est optionnel et indique la façon dont le ratio d’aspect doit être préservé.

`preserveAspectRatio=“xMaxYMax meet”`

Ces valeurs vont aligner le coin inférieur droit de la `viewBox` avec le coin inférieur droit du viewport. La valeur `meet` préserve le ratio d’aspect en redimensionnant la `viewBox` de façon à ce qu’elle s’adapte autant que possible au viewport.

Il existe trois options `<meetOrSlice>`&nbsp;: `meet` (par défaut), `slice` et `none`. La première option `meet` assure une complète visibilité du graphique (autant que possible), alors que `slice` essaie de remplir le viewport avec la `viewBox` et découpe (_slice off_) tout ce qui dépasse. La troisième option `none` a pour résultat la perte du ratio d’aspect et donc une image potentiellement déformée.

Vous pourrez trouver une liste complète des combinaisons de valeurs et leur description [sur W3C](http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute).

<h3>Ratio d’aspect et cerises</h3>

La valeur la plus simple est `none`, elle établit qu’aucun redimensionnement uniforme ne doit être appliqué. Si nous augmentons les valeurs en pixel du viewport, les cerises vont s’étirer de manière non uniforme et seront déformées (et pas très appétissantes...)

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/qOwQgd/">
  Ratio d’aspect</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Valeurs Min, Max et Mid modifiées</h3>

Jetons un coup d’oeil à ce que donnent les différentes combinaisons.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/jbRQdp/">
  preserveAspectRatio à xMinYMax</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le `preserveAspectRatio` est fixé à `xMinYMax` ce qui aligne le coin inférieur gauche de la `viewBox` au coin inférieur gauche du viewport, qui est maintenant visualisé par son contour. `meet` assure que l’image est redimensionnée de façon à entrer dans le viewport autant que possible.

Si on change `xMin` en `xMax` ou en `xMid`, les cerises seront positionnées à droite ou au centre du viewport.

Voici ce qui se passe si nous changeons `meet` en `slice`&nbsp;:

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/dYLQrX/">
  meet en slice</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

Les cerises ne sont plus forcées de rester à l’intérieur du viewport, et l’excédent graphique est éliminé : tout le contenu de la `viewBox` qui n’entre pas dans le viewport est supprimé.

Les valeurs d’alignement ne sont pas obligées d’être liées.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/pierrechoffe/pen/XmQyGL/">
  preserveAspectRatio à xMinYMid slice</a> dans <a href="https://codepen.io">CodePen</a></span>
</div>

L’exemple ci-dessus a un `preserveAspectRatio` égal à `xMinYMid slice`. Nous voyons maintenant les cerises alignées sur le milieu de l’axe des y du viewport.

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

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

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

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

- [Système de coordonnées, transformations et unités](http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-8.html), par Tecfa


Comprendre SVG preserveAspectRatio


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

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

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

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

<h2>Le viewport</h2>

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

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

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

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

<h2>preserveAspectRatio</h2>

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

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

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

<h2>Poire exemple</h2>

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

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

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

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

<h3>1 - Dimensions concordantes</h3>

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

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

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

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

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

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

<h3>3 - viewport agrandi</h3>

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

Voici ce que donne notre viewport agrandi&nbsp;:

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

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

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

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

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

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

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

<h2>Conclusion</h2>

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

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

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

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

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

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

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


Comprendre SVG viewBox et viewport


L'attribut `viewBox` est l'un des premiers qu'on rencontre quand on débute avec [SVG](/tags/svg/), et potentiellement une grande source de confusion. Bien que largement couvert par d'autres auteurs —&nbsp;[la série d'articles de Sara Soueidan](https://sarasoueidan.com/blog/svg-coordinate-systems/) pouvant être considérée comme une des sources canoniques sur le sujet&nbsp;— il manquait d'un "guide de départ" donnant les quelques détails nécessaires pour pouvoir se lancer dans les applications basiques du dessin vectoriel. C'est l'objectif de cet article.
<span aria-hidden="true" data-icon="&#9758;"></span>&nbsp;_NdT&nbsp;: En complément, on pourra également consulter dans La Cascade les articles de Joni Trythall [comprendre viewBox et viewPort](/comprendre-svg-viewbox-et-viewport/) ainsi que [comprendre SVG preserveAspectRatio](/comprendre-svg-preserveaspectratio/)_.

<h2>Un canevas infini</h2>

L'espace de dessin de SVG est infini : on peut dessiner à partir de n'importe quel point de coordonnées dans un document SVG. Toutefois, pour des raisons d'_affichage_, le document a généralement une dimension, comme un cadre ou un canevas. C'est ici qu'entre en jeu la viewBox.

On la trouve le plus souvent appliquée ainsi :

```
<svg viewBox="0 0 200 100">
```

> 👉🏾 Remarque : j'ai laissé de côté l'[espace de nom](https://developer.mozilla.org/en/docs/Web/SVG/Namespaces_Crash_Course) pour la simplicité et la clarté des exemples. De plus, le background des exemples SVG sera apparent (en bleu clair) pour mieux montrer leur dimension réelle.

La viewBox utilise 4 valeurs pour localiser deux coordonnées dans l'espace&nbsp;: les coins supérieur gauche et inférieur droit du SVG. Dans le code ci-dessus le coin supérieur gauche est défini comme `0 0` (valeur de x, puis valeur de y), et le coin inférieur droit comme 200 unités vers la droite et 100 unités vers le bas.

Deux points à noter ici :

- Les valeurs utilisées _ne comportent pas d'unité de mesure_. Il est préférable de ne pas les considérer en pixels, centimètres ou autres, mais simplement comme des unités génériques.
- Même s'il est très courant que le coin supérieur gauche d'un document SVG commence à `0 0`, ce n'est pas obligatoire.

Dans la plupart des applications de dessin vectoriel, la viewBox correspond au canevas ou à l'_artboard_ préparé avant que vous ne commenciez à dessiner. Toutefois, de nombreuses applications, dont [Adobe Illustrator](http://www.adobe.com/fr/products/illustrator.html) et [Sketch](https://www.sketch.com/), vont réduire la viewBox à la surface visible autour des éléments que vous aurez dessiné lorsqu'ils les exporteront en SVG. C'est une des raisons pour lesquelles il est important de bien comprendre la viewBox&nbsp;: vous pouvez ajuster le canevas du SVG directement dans le code, sans avoir à vous battre avec le comportement de votre application.

Un [élément SVG circle](/articles/les-bases-de-svg-cercles-et-ellipses/) dessiné sans attributs `cx` ou `cy` supposera que son centre est à `0 0` dans l'espace de coordonnées. Voyons ce que ça donne lorsque nous utilisons les valeurs viewBox que nous avons utilisées&nbsp;:

```
<svg viewBox="0 0 200 100">
    <circle r="50">
</svg>
```

Ce qui produit :

<svg viewBox="0 0 200 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle r="50"></circle></svg>

Comme vous pouvez le constater, la viewBox ne détermine pas la taille de l'élément SVG rendu sur la page. Pour cela, il y a les attributs `width` et `height` et/ou n'importe quel CSS appliqué à SVG. Par contre, la viewBox détermine le _ratio d'aspect_ de l'espace et la taille relative des éléments qui l'occupent.

> 👉🏾 Remarquez également la capitale à l'intérieur de `viewBox` : SVG, qui est un langage de [la famille XML](https://fr.wikipedia.org/wiki/Extensible_Markup_Language), est sensible à la casse, donc l'attribut doit être écrit ainsi, avec un B majuscule, pour être reconnu.

Si la viewBox est réduite, la taille apparente du cercle s'agrandit, relativement au document SVG, même si le rayon du cercle reste inchangé&nbsp;:

```
<svg viewBox="0 0 100 50">
    <circle r="50">
</svg>
```

<svg viewBox="0 0 100 50" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle r="50"></circle></svg>

On pourrait voir cela comme un "zoom avant" dans le document. La viewBox nous permet une "mise à l'échelle" à l'intérieur d'un SVG.

Les éléments dessinés à l'extérieur de l'espace de la viewBox sont coupés. Ajoutons un autre élément `<circle>`, cette fois-ci avec des valeurs `cx` et `cy` ainsi qu'une <span itemprop="about" content="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill">couleur de remplissage</span> (_fill_).

```
<svg viewBox="0 0 100 50">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>
```

Du fait que l'élément se trouve en dehors des dimensions de la viewBox, on ne peut pas le voir. Le document SVG l'a automatiquement découpé. Changeons cela en modifiant les valeurs de la viewBox&nbsp;:

```
<svg viewBox="0 0 200 120">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>
```

Ce qui nous donne :

<svg viewBox="0 0 200 120" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="150" cy="120" r="20" fill="red" /></svg>

Il est important de noter que les éléments SVG découpés en dehors de la viewBox sont toujours présents. Il peuvent être animés et revenir dans la surface visible. Mais par défaut ils ne sont pas visibles.

Il est également possible de faire apparaître des éléments cachés par les dimensions restrictives de la viewBox en appliquant `overflow: visible` au document SVG via CSS. Cependant, cela n'étendra pas le background SVG (s'il y en a un) de manière à s'adapter à l'élément :

<figure role="group"><svg viewBox="0 0 200 120" style="width:80%;margin:0 auto;display:block;background-color:lightblue;overflow:visible"><circle cx="150" cy="120" r="20" fill="red" /></svg><figcaption>L'élément caché réapparaît</figcaption></figure>

<h2>Sauvetage</h2>

On peut également donner des valeurs négatives aux coordonnées du coin supérieur gauche de la viewBox. Dans certains scénarios, comme ceux évoqués en début d'article lorsque les éléments SVG sont exportés un peu trop serrés, cela peut s'avérer nécessaire.

Admettons que nous ayons ceci :

```
<svg viewBox="0 0 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>
```

...qui crée :

<svg viewBox="0 0 500 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="50" cy="0" r="50" fill="red" /></svg>

Seule la partie inférieure du cercle est visible. Si nous diminuons la composante `y` du coin supérieur gauche de la viewBox, nous pouvons corriger le problème&nbsp;:

```
<svg viewBox="0 -40 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>
```

Le résultat :

<svg viewBox="0 -40 500 100" style="width:80%;margin:0 auto;display:block;background-color:lightblue;"><circle cx="50" cy="0" r="50" fill="red" /></svg>

> 👉🏾 L'ajout d'un padding à notre élément SVG aura le même effet, mais il n'exposera pas davantage un élément caché par la limite de la viewBox.

Il est important de noter que modifier les valeurs de la viewBox ne changera pas le _point d'origine_ du SVG globalement. Autrement dit, un cercle dessiné avec son centre à `0 0` sera complètement visible si le coin supérieur gauche est suffisamment déplacé vers l'extérieur. Le point d'origine, lui, n'est pas modifié.

<h3>Conclusion</h3>

Il y a bien d'autres choses à dire sur viewBox, mais cet article et les liens suggérés ci-dessous devraient vous suffire pour vous lancer dans SVG en toute confiance. Bon courage&nbsp;!

👉🏾 NdT : vous pouvez également consulter ici l'article de Joni Trythall [Comprendre SVG viewBox et viewport](/articles/comprendre-svg-viewbox-et-viewport)


Comprendre SVG viewBox

Comprendre WAI-ARIA, un guide complet

Contrôler l'affichage du texte

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

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

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

Prenons un exemple.

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

Donnons un style à cette boîte :

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

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

<h3>La zone du contenu</h3>

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

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

<h3>La zone du padding</h3>

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

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

<h3>La zone de bordure</h3>

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

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

<h3>La zone de marge</h3>

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

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

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

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

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

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

<h3>content-box</h3>

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

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

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

<h3>padding-box</h3>

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

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

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

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

<h3>border-box</h3>

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

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

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

<h3>inherit</h3>

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

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

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

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

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

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

Contrôler le modèle de boîte

Un cas intéressant d’utilisation de CSS Blend Mode est l’amélioration du design des diagrammes et des graphes.

## Diagrammes de Venn améliorés

Prenez par exemple le diagramme de Venn classique illustrant [la règle "Fast, Cheap, Good"](https://en.wikipedia.org/wiki/Project_management_triangle)&nbsp;: Le markup [SVG](/tags/svg/)</span></span> du diagramme de base pourrait être&nbsp;:

```xml
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <title>Project Triangle</title>
      <desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc>
      <style type="text/css">
        svg {
          background: #1c1c38;
          }
        circle {
          opacity: 0.76;
          }
        text {
          font-family: Avenir Black, Avenir, sans-serif;
          font-weight: 700;
          font-size: 36px;
          }
      </style>
      <circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /> <circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /> <circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap">      <text x="100" y="165" id="fast">FAST</text>
      <text x="310" y="165" id="good">GOOD</text>
      <text x="190" y="340" id="cheap">CHEAP</text>
  </svg>
```

Le résultat :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><title>Project Triangle</title><desc>Three overlapping circles, labelled "Good", "Fast" and "Cheap"</desc><style type="text/css">svg { background: #1c1c38; }circle { opacity: 0.76; }text { font-family: Avenir Black, Avenir, sans-serif;font-weight: 700; font-size: 36px;}</style><circle fill="#ED1F24" cx="163" cy="165" r="141" aria-labelledby="#fast" /><circle fill="#55C6D9" cx="250" cy="306" r="141" aria-labelledby="#good" /><circle fill="#FEE600" cx="337" cy="165" r="141" aria-labelledby="#cheap" /><text x="100" y="165" id="fast">FAST</text><text x="310" y="165" id="good">GOOD</text><text x="190" y="340" id="cheap">CHEAP</text></svg>

Remarquez que nous aurions pu laisser l’opacité en ligne pour chacun des cercles, puisque c’est également un attribut de présentation SVG. Je les ai intégrés comme des styles pour économiser de l’espace et éviter des répétitions inutiles. J’ai utilisé `aria-labelledby` pour l’accessibilité afin d’associer chaque cercle avec le texte approprié.

C’est un bon début, mais nous pouvons améliorer l’apparence du diagramme en ajoutant `mix-blend-mode` aux éléments `circle`&nbsp;:

```css
circle {
  opacity: 0.76;
  mix-blend-mode: color-dodge;
}
```

Ce qui nous donne&nbsp;:



<figure role="group"><img src="/images/venn.svg" alt="le diagramme fast, good, cheap" alt="diagramme amélioré"/></figure>

👉🏾 _Nota Bene_ : pour parvenir au résultat espéré, les éléments auxquels on applique `mix-blend-mode` _ne doivent pas être_ sur un fond blanc ou noir purs. C’est une bonne règle pour tester vos blend modes en général.\n\nTout comme `opacity`, nous aurions pu appliquer la version SVG native de `blend-mode`, les filtres `<feBlend>`. Comme beaucoup d’aspects récents de CSS, les blend modes ont leurs racines dans la syntaxe SVG. J’ai utilisé la version CSS dans la mesure où il s’agit d’une _amélioration_ de la présentation, et non une obligation, et la syntaxe CSS est plus simple à écrire et à utiliser.

## Graphiques à barres améliorés

<div class="bargraph">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200">
<line x1="69.7" y1="187.9" x2="422.7" y2="187.9"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="183.4"></line>
<line x1="422.7" y1="187.9" x2="422.7" y2="183.4"></line>
<line x1="69.7" y1="187.9" x2="69.7" y2="10.2"></line>
<line x1="69.7" y1="187.9" x2="78.6" y2="187.9"></line>
<line x1="69.7" y1="152.3" x2="78.6" y2="152.3"></line>
<line x1="69.7" y1="116.8" x2="78.6" y2="116.8"></line>
<line x1="69.7" y1="81.3" x2="78.6" y2="81.3"></line>
<line x1="69.7" y1="45.7" x2="78.6" y2="45.7"></line>
<line x1="69.7" y1="10.2" x2="78.6" y2="10.2"></line>
<rect x="342.7" y="51.1" width="42.4" height="136.8"></rect>
<rect x="295.7" y="47.5" width="42.4" height="140.4"></rect>
<rect x="248.6" y="63.5" width="42.4" height="124.4"></rect>
<rect x="201.5" y="57.8" width="42.4" height="130.1"></rect>
<rect x="154.5" y="45.7" width="42.4" height="142.1"></rect>
<rect x="107.4" y="42.7" width="42.4" height="145.2"></rect>
</svg>
</div><br/><br/>

Comme dans mon article sur les [textes avec effets blend modes](http://thenewcode.com/1032/Easy-Cross-Browser-Text-Masks-with-Blend-Modes), nous pouvons utiliser les blend modes pour donner un background aux barres verticales d’un diagramme en barres. Pour cet exemple, j’ai laissé de côté les aspects liés à l’accessibilité ainsi que les légendes, pour plus de clarté. L’effet principal ici est obtenu par le fait que le SVG qui contient le diagramme en barres est lui-même inclus dans une div qui a une image de background&nbsp;:

```css
div {
  background-image: url(new-york-city-skyline.jpg);
  background-size: cover;
  font-size: 0;
}
svg {
  background: #fff;
  mix-blend-mode: lighten;
}
rect {
  fill: #202020;
  width: 42.4px;
}
```

Nous pourrions donner un aspect plus propre à l’effet en redimensionnant l’image de background. Telles quelles, les axes des abscisses et des ordonnées prennent également l’effet. Une autre manière de faire serait d’entourer les rectangles représentant les barres avec des [éléments clip-path](http://thenewcode.com/1007/Combining-CSS-clip-path-and-Shapes-for-New-Layout-Possibilities), ce qui fonctionnerait assez comme notre effet blend-mode.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/eNQbjz/">
  Better SVG Diagrams & Graphs with Blend Modes</a> de Dudley Storey dans <a href="https://codepen.io">CodePen</a></span>
</div>

_(Photo par [Josh Liba](https://www.flickr.com/photos/jliba/8067975235), sous licence [CC-BY-NC-ND 2.0](https://creativecommons.org/licenses/by-nc-nd/2.0/))_

Créer de superbes diagrammes avec SVG et Blend Modes

Créer des formes en CSS

Créer des sphères en CSS

Créer des systèmes de menu accessibles


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

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

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

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

## Le HTML

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

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

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

## Le CSS

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

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

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

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

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

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

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

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

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

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

## Rotation horizontale du cube

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

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

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

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

## Rotation verticale du cube

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

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

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

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

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

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

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

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

## Aplatir le cube

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

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

Maintenant, seule une face s’affiche.

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

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


Créer un cube en CSS

Alors que CSS nous offre de nombreuses options pour [contrôler la :first-line](http://demosthenes.info/blog/226/Classic-typography-effects-in-CSS-first-line-run-in) d'un texte, sa capacité à contrôler la dernière ligne reste limitée. Ce serait pourtant parfois bien utile.

## Vestiges & Fragments

“[Widows](../widows/)” et “[orphans](../orphans/)” (veuves et orphelines) désignent un mot ou une ligne de texte mis en page d’une façon qui dérange le flux de la lecture et l’aspect de la page. Le plus souvent, ce sont des mots qui se retrouvent à pendouiller à la fin d’un paragraphe. Dans les media paginés, ce sont souvent des mots de fin de paragraphe qui se retrouvent sur une nouvelle page&nbsp;:



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans.jpeg" alt=""><figcaption>Exemple de “veuve” dans un texte imprimé</figcaption></figure>

Les navigateurs n’ont pas de concept de “page” pour l’écran, mais des veuves peuvent apparaître lorsque le texte est imprimé, et on peut le contrôler ainsi&nbsp;:

    p { widows: 3; }

On peut traduire cette instruction par “si un paragraphe est coupé dans la mise en page, la partie du paragraphe qui apparaît dans la page suivante doit comporter au moins trois lignes”. Un navigateur compatible avec la propriété espacera les éléments de manière à ce que ce soit possible&nbsp;:



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans-2.jpeg" alt="" ><figcaption>Une page imprimée avec le problème de veuves résolu</figcaption></figure>

De l’autre côté, les “orphelines” apparaissent en tête de paragraphe. L’exemple le plus courant est celui d’un paragraphe qui commence en bas de page&nbsp;:



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans-3-1.jpeg" alt="" ><figcaption>Un exemple de texte avec orpheline</figcaption></figure>

Là encore, on peut contrôler la situation en donnant à la propriété `orphans` une valeur raisonnable&nbsp;:

    p { orphans: 3; }

Ce qui signifie : un paragraphe doit commencer avec au moins trois lignes sur une page avant de pouvoir être coupé. Sinon, le paragraphe doit commencer sur la page suivante.

Le résultat :



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans-4.jpeg" alt=""  ><figcaption>Une page imprimée avec le problème d’orphelines résolu</figcaption></figure>

## Suggestion d’utilisation

`widows` et `orphans` devraient tous deux avoir des valeurs raisonnables par défaut dans vos feuilles de style&nbsp;:

    p { widows: 3; orphans: 3: }

Des éléments comme les titres peuvent aussi connaître ce genre de problème, mais il est plus courant de traiter le problème avec un `page-break`.

## Qui est qui ?

Une manière commode (même si un peu _Dickensienne_) de mémoriser ces termes est de se dire&nbsp;:

- Les orphelines “se retrouvent seules au commencement”
- Les veuves “se retrouvent seules à la fin”.

## Veuves & orphelines à l’écran

Par sa nature même, le design responsif crée d’innombrables fragments de texte veuf. Certains peuvent être traités par une utilisation intelligente de [hyphens](http://demosthenes.info/blog/429/Class-Typography-Effects-Hyphenation) et de la justification, mais les autres ne peuvent être évités.

On vous dira souvent que les propriétés `widows` et `orphans` ne peuvent être utilisées que pour l’imprimé, ce n’est pas vrai&nbsp;: dans les navigateurs compatibles, ces propriétés peuvent également être appliquées aux [mises en page de type journal](http://demosthenes.info/blog/79/CSS-Layouts-Newspaper-Style-Columnar-Text), qui se heurtent souvent au même problème&nbsp;:



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans-5.jpeg" alt=""  ><figcaption>Texte orphelin dans une colonne</figcaption></figure>

Le CSS (sans préfixes) et une solution pour le texte orphelin&nbsp;:

    div { column-count: 2; column-gap: 2rem; }
    p { line-height: 1.6; font-size: 1rem; orphans: 2; }

Le résultat :



<figure role="group"><img src="/images/demosthenes_info_-_CSS_last-line__Controlling_Widows___Orphans-6.jpeg" alt=""  ><figcaption>Texte orphelin dans une colonne</figcaption></figure>

## Tout faire tenir sur une ligne

Les cas les plus extrêmes de textes veufs se produisent dans les titres, où un mot final se retrouve tout seul sur une nouvelle ligne. Il existe des solutions pour cela&nbsp;: [FitText](http://fittextjs.com/) est un plugin jQuery qui redimensionne le texte dynamiquement en fonction de la taille de la fenêtre navigateur. Il existe aussi des solutions SVG. Ma préférence personnelle va à l’utilisation d’[unités `vw`](http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design) pour faire tenir un titre sur une ligne unique, bien que cela exige souvent un peu de calcul et d’expérimentation.

### Compatibilité navigateurs

La compatibilité est _décente_ : Chrome et IE ont une très bonne compatibilité, mais Firefox et Safari les ignorent totalement. Il faut donc les considérer comme des éléments d’[amélioration progressive](http://s-jdm.developpez.com/tutoriels/web/traductions/comprendre-amelioration-progressive/)&nbsp;: des touches finales appréciables mais non vitales pour le contenu de votre page.

CSS, aider la veuve et l'orpheline

Le cerveau humain est programmé pour être attentif au mouvement. L’ajout d’animations à votre site web ou à votre appli est une façon efficace d’attirer l’attention de vos utilisateurs vers vos produits ou vers une partie importante de votre interface.

Lorsqu’elles sont bien faites, les animations peuvent ajouter interaction et feedback, contribuer à l’émotion et au plaisir apportés par la navigation et ajouter de la personnalité à votre interface. En fait, animer signifie donner de la vie.

<blockquote cite="https://abookapart.com/products/designing-for-emotion"><p>Le premier objectif du design émotionnel est de faciliter la communication humaine. Si nous faisons bien notre boulot, l’ordinateur passe au second plan et c’est une véritable personnalité qui apparaît.</p>
<p><cite>Aaron Walter, Design Émotionnel</cite></p></blockquote>

Dans cet article, nous allons passer en revue les bases de l’animation CSS. Vous pouvez retrouver tous les exemples qui suivent dans [cette page CodePen](https://codepen.io/collection/nbEZgX/).

## Les blocs constitutifs de l’animation.

Les animations CSS sont constituées de deux blocs de base.

1. Les keyframes, qui définissent les étapes et les styles d’animation.
2. Les propriétés d’animation, qui assignent les @keyframes à un élément CSS spécifique et définissent la façon dont il est animé.

Donc une définition initiale, puis sa mise en oeuvre.

### Bloc #1: Keyframes

Les keyframes constituent les fondations de l’animation. Elles définissent ce à quoi va ressembler l’animation à chaque étape de son évolution dans le temps. Chaque `@keyframe` est composée de&nbsp;:

- **Nom de l’animation** : un nom que vous donnez à l’animation pour la décrire et servir de référence, par exemple `bounceIn` (rebond).
- **Étapes de l’animation** : chaque étape est représentée par un pourcentage. `0%` représente le début de l’animation et `100%` l’état final de l’animation. On peut ajouter autant d’étapes intermédiaires que l’on veut.
- **Propriétés CSS** : Les propriétés CSS définies à chaque étape.

Prenons un exemple simple de `@keyframes` que j’ai appelé “bounceIn” (rebond). Ce `@keyframes` comprend trois étapes. À la première étape (0%) l’élément a une opacité égale à 0 et il est redimensionné à 10% de sa taille, au moyen de `CSS transform scale`. À la seconde étape (60%), l’élément commence à apparaître et il est redimensionné à 120% de sa taille normale. À l’étape finale (100%), il redescend à sa taille normale.

Les `@keyframes` sont ajoutés à votre feuille de style CSS :

```css
@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
```

Si vous avez besoin d’une petite révision sur les propriétés Transform de CSS, vous pouvez consulter [cette page de MDN](https://developer.mozilla.org/fr/docs/Web/CSS/transform) qui fait un point complet et synthétique.

### Bloc #2: Propriétés d’animation

Une fois définies les `@keyframes`, les propriétés d’animation doivent être ajoutées pour pouvoir faire fonctionner votre animation. C'est l’étape de mise en oeuvre.

Les propriétés d’animation font deux choses :

- Elles assignent les `@keyframes` aux éléments que vous voulez animer
- Elles définissent la façon dont ils sont animés.

Les propriétés d’animation sont ajoutées aux sélecteurs CSS (ou aux éléments) que vous voulez animer. Vous devez impérativement ajouter les deux propriétés d’animation suivantes pour que votre animation puisse fonctionner :

- `animation-name`: le nom de l’animation, tel que vous l’avez défini dans `@keyframes`.
- `animation-duration` : la durée de l’animation en secondes (p.ex. 5s) ou en millisecondes (p.ex. 200ms).

Dans notre exemple de `bounceIn`, nous allons ajouter `animation-name` et `animation-duration` à la div que nous voulons animer.

```css
div {
  animation-duration: 2s;
  animation-name: bounceIn;
}
```

Il existe aussi une syntaxe raccourcie :

```css
div {
  animation: bounceIn 2s;
}
```

En ajoutant `keyframes` et les propriétés d'animation, nous avons une animation simple&nbsp;!



<figure role="group"><img src="/images/animation-bounceIn.gif" alt="Le texte 'bounce in' (rebond) s'avance vers le lecteur, puis recule, comme s'il rebondissait en-dessous du spectateur."><figcaption></figcaption></figure>

## Raccourcis des propriétés d’animation

Chaque propriété d’`animation` peut être définie individuellement, mais pour la clarté et la concision du code il est recommandé d’utiliser les raccourcis. Toutes les propriétés peuvent être ajoutées en une seule ligne dans l’ordre suivant :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode] [animation-play-state];
```

N’oubliez pas que les deux premières propriétés sont obligatoires.

### Un mot sur les préfixes

À ce jour, de nombreux navigateurs Webkit utilisent encore la version préfixée -webkit des animations, keyframes et transitions. Jusqu’à ce qu’elles adoptent la version standard, il nous faudra donc inclure à la fois la version non préfixée et la version préfixée -webkit dans votre code (pour la bonne lisibilité du code, nous n’utilisons ici que la version non préfixée).

Voici à quoi ressemblent les keyframes et les animations avec leur préfixe -webkit&nbsp;:

```css
div {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
```

```css
@-webkit-keyframes bounceIn {
  /* styles */
}
@keyframes bounceIn {
  /* styles */
}
```

Pour vous faciliter la vie, vous pouvez utiliser [Bourbon](https://www.bourbon.io/), une bibliothèque de mixins Sass qui contient une liste à jour des préfixes vendeurs pour tous les navigateurs modernes. Voici comment générer les animations et keyframes préfixées avec Bourbon&nbsp;:

```css
div {
  @include animation(bounceIn 2s);
}
```

```css
@include keyframes(bouncein) {
  /* styles */
}
```

## Les autres propriétés d’animation

Outre les propriétés obligatoires `animation-name` et `animation-duration`, vous pouvez personnaliser et complexifier vos animations à l’aide des propriétés suivantes&nbsp;:

- `animation-timing-function`
- `animation-delay`
- `animation-iteration-count`
- `animation-direction`
- `animation-fill-mode`
- `animation-play-state`

Passons-les en revue.

### Animation-timing-function

`animation-timing-function` définit l’allure (au sens de vitesse) de votre animation. Vous pouvez spécifier son timing à l’aide des options prédéfinies : `ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `initial`, `inherit`, ou bien vous pouvez créer vos propres fonctions de timing à l’aide de [courbes de Bézier](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). Lea Verou a créé un outil en ligne très efficace pour cela.



<figure><img src="/images/animation-timing.gif" alt="Des balles de couleur qui tombent puis remontent pour disparaître (et l'animation se répète)"><figcaption></figcaption></figure>

La valeur par défaut est `ease`, qui démarre lentement, accélère, puis ralentit à l’arrivée. Vous pouvez lire une description de chaque fonction [ici](https://www.w3schools.com/cssref/css3_pr_animation-timing-function.php).

La syntaxe CSS :

```css
animation-timing-function: ease-in-out;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function];
animation: bounceIn 2s ease-in-out;
```

### Animation-delay

`animation-delay` vous permet de spécifier à quel moment une animation (ou une partie d’animation) va commencer. Une valeur positive (p.ex. `2s`) fera débuter l’animation 2 secondes après qu’elle ait été déclenchée. L’élément demeurera inanimé jusque là. Une valeur négative (p.ex. `-2s`) fera débuter l’animation immédiatement, mais à 2 secondes de son développement (donc comme si elle avait déjà commencé il y a deux secondes). La valeur de retard (`delay`) est exprimée secondes ou en millisecondes.



<figure><img src="/images/animation-delay.gif" alt="Un soleil, puis un nuage qui le recouvre partiellement, puis la pluie qui tombre du nuage."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-delay: 5s;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function] [animation-delay];
animation: bounceIn 2s ease-in-out 3s;
```

### Animation-iteration-count

`animation-iteration-count` spécifie le nombre de fois que l’animation doit être jouée. Les valeurs possibles sont&nbsp;:

- `(un nombre)` - un nombre spécifique d’itérations (la valeur par défaut est `1`)
- `infinite` - l’animation se répète indéfiniment
- `initial` - fixe le décompte d’itération à sa valeur par défaut
- `inherit` - hérite de son parent



<figure><img src="/images/animation-iteration.gif" alt="Un cœur qui bat"><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-iteration-count: 2;
```

La syntaxe raccourcie (recommandée) :

```css
animation: [animation-name] [animation-duration]
  [animation-timing-function] [animation-delay]
  [animation-iteration-count];
animation: bounceIn 2s ease-in-out 3s 2;
```

### Animation-direction

La propriété `animation-direction` spécifie si l’animation doit elle jouée à l’endroit, à l’envers ou dans les deux sens.

Les valeurs possibles sont :

- `normal` (valeur par défaut) - L’animation est jouée à l’endroit. Chaque cycle part du point initial (0%) pour aller jusqu’au point final (100%).
- `reverse` - L’animation est jouée à l’envers. Chaque cycle part du point final (100%) pour aller jusqu’au point initial (0%).
- `alternate` - L’animation change de sens à chaque cycle, elle va de 0% à 100% puis repart de 100% pour aller à 0% etc.
- `alternate-reverse` - L’animation change de sens à chaque cycle, mais cette fois-ci elle va de 100% à 0% puis repart de 0% pour aller à 100% etc.



<figure><img src="/images/animation-direction.gif" alt="Une montagne, des nuages qui passent dans un sens puis dans l'autre, le soleil qui se lève puis qui se couche et devient rouge au moment de disparaître."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-direction: alternate;
```

La syntaxe raccourcie (recommandée) :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction];
animation:  bounceIn 2s ease-in-out 3s 3 alternate;
```

### Animation-fill-mode

`animation-fill-mode` spécifie si les styles d’animation sont visibles avant ou après que l’animation ne soit jouée. Cette propriété n’est pas très claire de prime abord, mais une fois qu’on l’a comprise elle peut être très utile.

Par défaut, l’animation n’affectera pas les styles de l’élément avant qu’elle n’ait commencé (s’il y a un retard — _delay_ — d’animation) ou après que l’animation soit terminée. La propriété `animation-fill-mode` peut prendre le pas sur ce comportement, avec les valeurs possibles suivantes&nbsp;:

- `backwards` - Avant l’animation (pendant le retard), les styles du keyframe initial (0%) sont appliqués à l’élément.
- `forwards` - Après que l’animation se soit achevée, les styles définis dans le dernier keyframe (100%) sont conservés par l’élément.
- `both` - L’animation appliquera les règles de backwards et forwards qui étendent les propriétés avant et après l’animation.
- `normal` (valeur par défaut) - L’animation n’applique aucun style à l’élément avant ou après l’animation.

Dans l’exemple suivant, on voit que le rectangle turquoise conserve ses dimensions finales car l’option forwards est activée, alors que le rectangle rouge revient à ses dimensions initiales dès la fin de l’animation (comportement par défaut).



<figure><img src="/images/animation-fill.gif" alt="Deux rectangles s'avancent en même temps, le turquoise s'agrandit puis reste aux dimensions finales, le rouge s'agrandit puis revient d'un coup à ses dimesions initiales."><figcaption></figcaption></figure>

Syntaxe CSS :

```css
animation-fill-mode: forwards;
```

La syntaxe raccourcie (recommandée) :

```xml
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction]
[animation-fill-mode];
animation:  bounceIn 2s ease-in-out 3s 3 forwards;
```

### Animation-play-state

`animation-play-state` spécifie si l’animation est en train d’être jouée ou si elle est en mode pause. Reprendre une animation en mode pause la fait démarrer là où elle était arrêtée.

Les valeurs possibles sont :

- `playing` - L’animation est en cours
- `paused` - L’animation est en mode pause.



<figure><img src="/images/animation-play.gif" alt="Un chronomètre turquoise avec une aiguille qui tourne, et qui s'arrête au survol de la souris, puis reprend sa course quand la souris se retire."><figcaption></figcaption></figure>

Exemple :

```css
.div:hover {
  animation-play-state: paused;
}
```

### Animations multiples

Pour ajouter des animations multiples à un sélecteur, il suffit de séparer les valeurs par une virgule. Voici un exemple :

```css
.div {
  animation: slideIn 2s, rotate 1.75s;
}
```

## En avant les animations !

Et voilà ! Avec ces propriétés basiques, les animations potentielles sont infinies. La meilleure façon d’apprendre est de se lancer et de créer toutes les animations qui vous passent par la tête.

Voici quelques ressources pour vous y aider :

[Upcase for designers](https://thoughtbot.com/upcase/design) - Une communauté d'apprentissage en ligne proposant des cours sur les techniques de design et de développement front.

[CodePen](https://codepen.io/) - Un terrain de jeu CSS où vous pouvez éditer votre code et voir immédiatement le résultat. CodePen comprend déjà Autoprefixer, vous n’aurez donc pas à vous soucier des préfixes vendeurs. Il fonctionne également avec les langages préprocesseurs de votre choix (Sass, Less, ainsi que haml pour html).

[Animate.css](https://animate.style/) - Une bibliothèque d’animations avec laquelle jouer pour explorer les possibilités infinies d’animation.

CSS animation, une introduction

CSS Flexbox et la dimension des boîtes

CSS Flexbox et l'alignement, guide complet

La fonction **minmax()** introduite par la [spécification](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax) CSS Grid Layout est l'une de ses fonctionnalités les plus utiles. **Cette fonction nous permet d'écrire un CSS extrêmement puissant et succinct** : nous pouvons maintenant donner pour valeur à une [piste de grille](/articles/css-grid-layout-guide-complet/#gridtrack) (_grid track_) une fonction acceptant une valeur minimum et une valeur maximum.

<h2>La fonction minmax()</h2>

La fonction `minmax()` définit un espace supérieur ou égal à une valeur minimum et inférieur ou égal à une valeur maximum. Elle accepte deux paramètres, une valeur minimum et une valeur maximum.

```
minmax(min, max)
```

Si la valeur maximum définie est inférieure à la valeur minimum, elle n'est pas prise en compte, et la fonction est traitée comme si elle ne présentait qu'une valeur minimum.

La fonction `minmax()` accepte six types de valeurs&nbsp;:

- longueur
- pourcentage
- longueur flexible
- `max-content`
- `min-content`
- `auto`

Passons-les en revue un par un.

<h3>Longueur</h3>

La valeur la plus simple que nous puissions passer à `minmax()` est une longueur. Prenons par exemple cette grille simple, qui a trois colonnes et une rangée unique.



<figure><img itemprop="url" src="/images/default-minmax.png" alt=""/></figure>

Avec la fonction `minmax()`, nous pouvons préciser que la cellule jaune doit avoir une largeur minimale de 100px et maximale de 200px. Lorsque l'écran est redimensionné, la valeur absolue change mais toujours entre ces deux limites.

```
.grid {
    display: grid;
    grid-template-columns: minmax(100px, 200px) 1fr 1fr;
}

```



<figure><img itemprop="url" src="/images/length-1-compressor.gif" alt=""/></figure>

Les deuxième et troisième colonnes se rétrécissent ou s'agrandissent pour occuper l'espace disponible de manière égale, mais la première aura toujours une largeur comprise entre 100 et 200px.

<h3>Pourcentage</h3>

Nous pouvons également utiliser les pourcentages. Admettons que nous voulions donner à notre cellule jaune une largeur minimale de 200px, pouvant aller jusqu'à 50% de la largeur de la grille.

```
.grid {
    display: grid;
    grid-template-columns: minmax(200px, 50%) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/percentage-compressor.gif" alt=""/></figure>

Nous pouvons réduire la largeur de l'écran autant que nous voulons, la largeur de la cellule jaune ne sera jamais inférieure à 200px. Par contre, lorsque l'espace le permet, elle s'agrandit jusqu'à atteindre la moitié de la largeur de la grille.

<h3>Longueur flexible</h3>

La longueur flexible, qui utilise l'unité `fr`, est une nouvelle unité introduite par la [spécification CSS Grid Layout](https://www.w3.org/TR/css-grid-1/). Cette longueur représente une fraction de l'espace disponible dans la [grille container](/articles/css-grid-layout-guide-complet/#gridcontainer) (_container grid_). Par exemple, si nous avons une grille de 100px de large, avec deux colonnes, l'une ayant une largeur fixe de 20px et l'autre une largeur de 1fr, cette dernière aura du coup une dimension de 80px puisqu'elle prend l'espace disponible dans la grille.

```
.grid {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/fr-compressor.gif" alt=""/></figure>

Les colonnes ont toutes une dimension de 1fr dans les écrans larges, elles occupent donc le même espace dans la grille.

<h3>max-content</h3>

Le mot-clé `max-content` est une valeur particulière qui représente la "taille idéale" de la cellule. C'est la dimension minimale pour que le contenu de la cellule tienne sans encombre. Par exemple, si le contenu de la cellule est une phrase, la largeur idéale de la cellule sera celle qui permet à la phrase de tenir entièrement, sans retour à la ligne.
Reprenons notre exemple précédent et précisons que la cellule jaune doit être à la fois un minimum et un maximum de `max-content`.

```
.grid {
    display: grid;
    grid-template-columns: minmax(max-content, max-content) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/max-content-compressor.gif" alt=""/></figure>

Comme on peut le voir, la colonne s'étend jusqu'à ce que la phrase tienne entièrement. Comme la minimale et la maximale ont pour valeur `max-content`, la largeur de la colonne reste toujours identique.

<h3>min-content</h3>

Le mot-clé `min-content` est elle aussi une valeur particulière. Elle représente la plus petite dimension telle que le contenu ne déborde pas —&nbsp;sauf si ce débordement est inévitable.
Pour illustrer la différence entre `min-content` et `max-content`, nous pouvons utiliser le même contenu que dans l'exemple précédent mais avec les minimale et maximale égales à `min-content`&nbsp;:

```
.grid {
    display: grid;
    grid-template-columns: minmax(min-content, min-content) 1fr 1fr;
}
```



<figure><img itemprop="url" src="/images/min-content-compressor.gif" alt=""/></figure>

On voit que le contenu de la cellule est disposé de façon à occuper le moins d'espace horizontal possible sans déborder de la cellule.

<h3>auto</h3>

Enfin, nous avons `auto`. Cette dernière valeur a une signification différente selon qu'on l'utilise comme valeur minimum ou maximum de la fonction `minmax()`.
Si c'est le maximum, la valeur `auto` est équivalente à la valeur `max-content`. Si on l'utilise comme valeur minimum, `auto` représente la plus grande valeur minimale possible pour la cellule. Cette _plus grande valeur minimale_ est différente de la valeur `min-content` et spécifiée par `min-width/min-height`.
Pour l'illustrer, voici ce qui se passe lorsque la cellule jaune est réglée sur `auto` dans le minimum et le maximum.

```
.grid {
    display: grid;
    grid-template-columns: minmax(auto, auto) 1fr 1fr;
}

```



<figure><img itemprop="url" src="/images/auto-compressor.gif" alt=""/></figure>

<h2>Design responsive sans media queries</h2>

Comme nous l'avons vu, les cas d'utilisation de `minmax()` sont multiples. Mais peut-être le cas d'usage le plus courant et le plus utile est-il la possibilité de créer des designs responsive sans recours aux media queries.

Prenons cette grille par exemple&nbsp;:



<figure><img itemprop="url" src="/images/responsive-compressor.gif" alt=""/></figure>

Chaque colonne de la grille a une largeur minimale de 200px. À mesure que l'écran est redimensionné, le nombre de colonnes change, pour s'adapter à leur largeur idéale. Avec CSS Grid et la fonction `minmax()`, c'est l'affaire de deux ligne de CSS&nbsp;:

```
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```

À côté de la fonction `minmax()`, il y a deux autres ingrédients-clés&nbsp;:

- `repeat()`: cette fonction nous permet de spécifier la même valeur pour plusieurs colonnes de la grille. Elle prend deux valeurs, le nombre de répétitions et la valeur à répéter.
- `auto-fit`: ce mot-clé peut être utilisé avec la fonction `repeat()`à la place du nombre de répétitions. Le nombre de colonnes est donc modifié de manière flexible, en fonction de la largeur possible pour chaque colonne.

Une limite importante de cette technique toutefois est qu'elle ne fonctionne qu'avec des colonnes de largeur égale. Nous devons utiliser la fonction `repeat()`avec le mot-clé `auto-fit` car c'est ce qui permet la flexibilité du nombre de colonnes. Cela étant, si ce cas de figure correspond à vos besoin, c'est une technique très utile.

CSS Grid : comment fonctionne minmax()

CSS Grid : la différence entre grilles explicite et implicite

CSS Grid : grille implicite et placement automatique

CSS Grid Layout, guide complet

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

<h2>Initial</h2>

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

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



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

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

<h2>Inherit</h2>

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

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



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

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

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



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

<h2>Unset</h2>

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

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

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



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

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

<h2>Revert</h2>

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

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

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

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

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



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

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

CSS Initial, Inherit, Unset et Revert

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



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

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

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

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

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

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

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

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

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

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

## 2. Tester

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

### Émulation d'impression dans Firefox

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

### Émulation d'impression dans Chrome

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



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

## 3. Unités absolues

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

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

## 4. Règles spécifiques

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

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

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

## Contrôler les sauts de pages

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

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

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

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

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

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

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

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

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

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

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

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

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

## Veuves et orphelines

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

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

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

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

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

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

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

## 6. Remettre les compteurs à zéro

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

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

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

## 7. Supprimer le contenu inutile

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

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

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

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

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

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

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

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

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

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

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

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

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

## 10. Forcer l'impression du background

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

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

## 11. Media Queries

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

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

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

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

## 12. Imprimer des cartes

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

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

## 13. QR Codes

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

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

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

### Bonus 2 : Gutenberg

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

### Bonus 3 : Hartija

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

Et voilà !

---

#### Ressources complémentaires en anglais

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

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

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

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

CSS : n'oubliez pas l'impression papier!


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

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

<h2>Astuce 1 :</h2>

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

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

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

...et le CSS :

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

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

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

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

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

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

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

<h2>Astuce 2 :</h2>

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

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

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

<h2>Astuce 3 :</h2>

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

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

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

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

<h2>Astuce 4 :</h2>

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

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

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

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

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

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

<h2>Conclusion</h2>

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

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

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

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

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


CSS :root, le retour aux racines

CSS Shapes, une introduction


La valeur `subgrid` de `grid-template-rows` et de `grid-template-columns` est supportée par [Firefox et Safari 16+](https://caniuse.com/css-subgrid) et arrive dans Chrome. Dans cet article, nous allons apprendre comment cette fonctionnalité rend la mise en page Grid encore plus puissante.

## Subgrid n'ajoute pas de complexité

Quand on utilise subgrid, on utilise le mot-clé `subgrid` dans `grid-template-rows` et dans `grid-template-columns` à la place d'une liste de pistes.

NOTE : On n'a pas à apprendre de nouvelles propriétés ou valeurs, c'est juste une décision à prendre —&nbsp;est-ce que je veux que ma sous-grille imbriquée ait ses propres définitions de lignes et colonnes, ou est-ce qu'on utilisera celles de ses parents ?

Dans le premier exemple, j'ai une grille imbriquée qui crée ses propres pistes pour ses rangées et ses colonnes. Ces pistes sont indépendantes et ne s'aligneront donc pas avec celles de la grille parent.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ZERZEJB" src="//codepen.io/rachelandrew/embed/ZERZEJB?height=420&amp;theme-id=light&amp;slug-hash=ZERZEJB&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/ZERZEJB">
  Nested grid without subgrid</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le second exemple remplace la liste de pistes pour `grid-template-columns` par le mot-clé `subgrid`. Les pistes de colonne de la grille imbriquée s'alignent maintenant avec celles de son parent.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ZERZEJB" src="//codepen.io/rachelandrew/embed/xxzeGOG?height=420&amp;theme-id=light&amp;slug-hash=xxzeGOG&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/xxzeGOG">
  Nested grid with subgrid</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## On peut avoir des sous-grilles de sous-grilles

Tant que chaque parent est une grille, on peut hériter de sous-grilles.

L'exemple qui suit montre trois grilles, imbriquées l'une dans l'autre, et qui héritent des pistes de leur parent. En utilisant DevTools de Firefox, on voit le contour de chacune et la façon dont les grilles enfants et les items de grille s'alignent tous sur cette grille.

<figure role="group"><img src="/images/subgrids-in-sugrids.avif" alt=""/></figure>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ExRJjWa" src="//codepen.io/rachelandrew/embed/ExRJjWa?height=420&amp;theme-id=light&amp;slug-hash=ExRJjWa&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/ExRJjWa">
  Subgrids in subgrids</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## On n'a pas besoin de sous-grilles dans les deux dimensions

Lors des discussions du groupe de travail CSS autour de subgrid, il a été suggéré de le bloquer (......). La conséquence aurait été qu'il n'y aurait pas eu de grille implicite dans l'une ou l'autre direction, et subgrid aurait seulement servi si l'on savait exactement de combien de cellules de grilles on avait besoin dans la sous-grille.

Dans l'exemple suivant, j'ai créé une sous-grille sur des colonnes pour m'assurer que les items dans la grille imbriquée peuvent s'aligner avec des items directement à l'intérieur de la grille parent. Cependant, j'utilise la grille implicite pour les rangées, car il se pourrait que j'en aie beaucoup.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GRGLpKB" src="//codepen.io/rachelandrew/embed/GRGLpKB?height=420&amp;theme-id=light&amp;slug-hash=GRGLpKB&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/GRGLpKB">
  Subgrid in one dimension</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Subgrid est utile quand on cible la ligne finale de la grille implicite

L'exemple précédent montre un autre pattern utile que subgrid rend possible. Il est possible de viser la ligne finale de la grille explicite, en utilisant line -1. Malheureusement cela ne fonctionne pas pour une grille implicite.

En imbriquant des items qui se répètent dans un container, ils se positionnent tous sur une rangée dans le parent. Du coup, on a la colonne pleine, comme dans l'exemple précédent, sans avoir à connaître le nombre de de lignes d'items créées implicitement.

Si l'on inspecte l'exemple précédent avec DevTools, on peut voir comment les items de sous-grille créent des rangées implicites. Comme l'item de gauche est la grille parente, il est sur la même rangée que tous les items et donc peut devenir aussi grand que nécessaire pour s'aligner avec les rangées implicites.

<figure role="group"><img src="/images/subgrid-et-ligne-finale.avif" alt=""/></figure>

## On peut aligner les choses avec les noms de ligne de la grille parent

Si notre grille parent a des lignes nommées, celles-ci sont accessibles depuis la grille enfant. Dans l'exemple qui suit, les lignes de la grille parent sont nommées de "a" à "e". La sous-grille et un enfant de cette sous-grille sont ensuite placés en utilisant ces lignes nommées. Cette technique est utile, car elle on n'a pas besoin de garder en mémoire les numéros de lignes. On indique des noms dans le parent, et on sait qu'en plaçant un item commençant à cette ligne il s'alignera toujours avec d'autres choses commençant sur cette même ligne.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_dyKLYRK" src="//codepen.io/rachelandrew/embed/dyKLYRK?height=420&amp;theme-id=light&amp;slug-hash=dyKLYRK&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/dyKLYRK">
  Line names inherit into subgrids</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## On peut ajouter des noms de lignes à la sous-grille.

Vous voulez encore des lignes nommées ? On peut ajouter des noms aux lignes à l'intérieur de la sous-grille. Certes, la syntaxe est un peu inhabituelle, du fait qu'on n'a pas une liste de pistes où mettre les noms de lignes. À la place, on ajoute les noms après le mot-clé `subgrid`.

```css
.subgrid {
  display: grid;
  grid-template-columns: subgrid [line1] [line2] [line3];
}
```

Ces noms serot ajoutés à tout autre nom que la ligne a déjà —&nbsp;puisqu'une ligne peut avoir plusieurs noms. On peut ensuite se référer à la ligne avec l'un de ses noms.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_dyKLYRK" src="//codepen.io/rachelandrew/embed/dyKLYRK?height=420&amp;theme-id=light&amp;slug-hash=dyKLYRK&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/dyKLYRK">
  Adding line names to the subgrid</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## On peut utiliser implicitement les zones nommées avec des lignes héritées dans notre grille et dans notre sous-grille

Quand on nommes les lignes avec le suffixe `-start` et `-end`, on obtient une zonne nommée du nom principal utilisé. De même que les lignes sont héritées, de même les zones nommées. Dans l'exemple qui suite, j'ai denommé les lignes `main-start` et `main-end` et `col-start` et `col-end`. Cela me donne une large colonne nommée `main`, et une colonne étroite nommée `col`.

Je place l'article dans `grid-column: main`, et puis j'en fais une sous-grille. Je peux ensuite placer les contenus des articles dans la colonne étroire avec `grid-column: col`.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/bGKJQdz">
  Inheriting named areas from lines</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## La sous-grille peut avoir des gouttières de tailles différentes de celles de ses parents

La propriété `gap` sera hritée dans la sous-grille donc, par défaut, un élément de sous-grille aura les mêmes dimensions de gouttières que son parent. Si vous voulez modifier ce comportement, utilisez la propriété `gap` (ou `column-gap` ou `row-gap`) pour cela.

Dans l'exemple suivant, la grille parent a des gouttières de 20px pour les rangées et les colonnes. Dans la sous-grille, je veux juste laisser apparaître 1px de la couleur de background, c'est pourquoi j'ai modifié le `gap` dans la `.card` de la sous-grille à 1px.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_WNyWYxB" src="//codepen.io/rachelandrew/embed/WNyWYxB?height=420&amp;theme-id=light&amp;slug-hash=WNyWYxB&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/WNyWYxB">
  Aligning items in separate subgrids</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## On peut aligner des items qui sont dans des sous-grilles différentes

Quand on utilise subgrid pour des rangées, les items imbriqués dans des sous-grilles séparées, comme les `card` dans l'exemple précédent, sont sur la même rangée, ce qui signifie que les items à l'iintérieur peuvent s'aligner les uns sur les autres. Si j'ajoute du contenu à l'un des titres (`header`), on voit que tous les titres de cette rangée on plus d'espace et demeurent alignés.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/WNyWYxB">
  Aligning items in separate subgrids</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

## subgrid peut être utile en combinaison avec les container queries

Un pattern assez courant est d'avoir une grille de 12 colonnes à chaque breakpoint, et à mesure que le viewport s'amenuise, d'avoir des items qui s'étirent sur plus de colonnes. Sur un très petit écran, un item pourrait s'étirer sur 12 colonnes, sur un ordinateur de bureau il prendrait 3 colonnes par exemple.

Avec les container queries, on peut tester pour vérifier que le container a sufisamment d'espace, puis switch vers subgrid pour que le composant utilise les pistes sur lesquelles ils s'étire. Dans l'exemple suivant, la `card` s'étale sur deux colonnes de la grille parent. À une largeur moindre, la card n'est plus une sous-grille, et l'image et le contenu s'affichent l'un après l'autre.

<figure role="group"><img src="/images/subgrid1.avif" alt=""/></figure>

Une fois qu'il y a assez d'espace, la `card` devient une sous-grille et l'image et le contenu s'affichent côte à côte.

<figure role="group"><img src="/images/subgrid2.avif" alt=""/></figure>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GRGLwMw" src="//codepen.io/rachelandrew/embed/GRGLwMw?height=420&amp;theme-id=light&amp;slug-hash=GRGLwMw&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="420" 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/rachelandrew/pen/GRGLwMw">
  Subgrid and container queries</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Ressources complémentaires sur subgrid

- [Subgrid dans MDN](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Subgrid) (en français)
- [CSS Grid Level 2 : Hre comes subgrid](https://www.smashingmagazine.com/2018/07/css-grid-2/)
- [Hello Subgrid ! (vidéo)](https://www.youtube.com/watch?v=rmF_iE0lMzw)
- [Exemples de Subgrid dans Grid by Example](https://gridbyexample.com/examples/#css-grid-level-2-examples) 




CSS Subgrid

## Introduction

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

```html


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

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

```html

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


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

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

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

## Syntaxe

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

```html

<div data-foo></div>


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


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

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

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

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

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

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

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

```html

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


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

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

## Stylisation avec des data attributes

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

### Valeurs d'attributs insensibles à la casse

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

```html

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

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

### Utilisation visuelle des data attributes

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

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

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

### Exemple de cas d'utilisation du style

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

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

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/chriscoyier/pen/rNaEvgp">
  Data Attribute Based Columns</a> de chriscoyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Accéder aux data attributes en JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

### Cas d'utilisation de JavaScript

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

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

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

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

### Spécifications

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

Data attributes, guide complet

On trouve beaucoup de livres et d’articles sur la Typographie, mais très peu explorent la question de la sélection et de l’association des polices de caractères. Les vannes étant sur le point de s’ouvrir <sup id="backto1"><a href="#1">(1)</a></sup> et les polices promises à une prochaine liberté d’utilisation sur les sites web, savoir choisir la bonne police est en passe de devenir un nouveau défi pour les designers. Par où commencer&nbsp;?

Jusqu’à présent, l’utilisation de polices de caractères autres que celles installées par défaut sur nos ordinateurs impliquait de recourir à des images, à Flash ou à des solutions de contournement. Les navigateurs ont mis la balle dans notre camp avec la mise en oeuvre de la propriété CSS `@font-face` qui permet aux designers de faire un lien vers n’importe quelle police pour l’importer dans une page.

Cela a jeté une lumière crue sur la grande préoccupation des fonderies&nbsp;: la plupart des fabricants de polices ont longtemps refusé d’accorder des licences pour l’utilisation de leurs polices de caractères sur le net, craignant un piratage massif. L’implémentation de `@font-face` a permis d’exposer clairement ce problème et a poussé les parties concernées à trouver une solution positive pour tout le monde. Depuis, des solutions existent ou sont en construction, qui vont d’accords de license accordés aux utilisateurs jusqu’à des services tiers tels que [Typekit](https://typekit.com), [Typotheque](https://www.typotheque.com/blog/typotheque_launches_its_web_fonts_service) et [Kernest](http://kernest.com). Les designers ont maintenant l’embarras du choix et les fabricants de polices peuvent gagner de l’argent avec leurs créations. Problème résolu, donc ? Plus ou moins.

## Le meilleur des mondes

Nous avons été gâtés. Jusqu’à présent, il est probable que si vous éditiez du texte sur une page web dans une police de caractères système et à une taille raisonnable, le résultat était lisible. De plus, nous connaissons les avantages et les défauts des polices que nous avons été forcés d’utiliser. Mais de nombreuses polices auxquelles nous aurons bientôt accès n’ont jamais été pensées pour les écrans, d’où des soucis à se faire en termes d’esthétique ou de lisibilité.

Les problèmes techniques liés aux polices pour le web sont bien réels, depuis l’incohérence du rendu selon les navigateurs et les plateformes jusqu’aux problèmes inhérents au chargement de fichiers de polices ou de familles de polices&nbsp;: le poids des pages peut monter facilement à plus de 100k. Mais supposons pour l’instant que ces problèmes seront résolus sous peu, et concentrons-nous sur ce que nous aurons à faire après.

Il y a une possibilité sérieuse qu’avec cet accès aux bibliothèques de polices nous n’ouvrions la boîte de Pandore. Beaucoup de gens ont _quelques_ connaissances en matière de typographie, mais mon intuition est que de nombreux designers resteront perplexes face aux nouveaux défis auxquels ils sont confrontés.

## Contexte et signification

Être designer web demandera bientôt une compréhension plus profonde de la typogaphie et de la façon dont fonctionnent les polices de caractères. Les options seront sans doute limitées au commencement, mais leur nombre va aller croissant et comme on le sait, un grand pouvoir impose de grandes responsabilités. Ce n’est pas parce que vous _pouvez_ utiliser cette police qui a l’air d’avoir des pattes d’éléphant que vous le _devez_.

Les polices système que nous utilisons communément, telles que Georgia, Verdana et Arial sont devenues tellement omniprésentes qu’il n’est presque plus imaginable de les utiliser en dehors du web. L’expression esthétique qu’il nous était impossible de réaliser en raison d’un choix insuffisant nous laissait le temps de peaufiner la lisibilité. Cela a fait du web un univers du &ldquo;set it and forget it&rdquo; (installez le et n’y pensez plus), en raison de la rapidité de publication, mais aussi de l’absence de contrôle précis sur la typographie, tel qu’il existe pour l’impression classique.

## Exigence

On peut utiliser une police parce qu’elle a l’air intéressante et cela peut donner des résultats acceptables, mais pratiquer l’art de la typographie implique de comprendre réellement les polices et ce qu’elles signifient. Le choix d’une police acceptable n’est pas compliqué, mais choisir celle qui convient parfaitement, dans un contexte technique et social donné, peut s’avérer difficile.

La célèbre designer de polices [Zuzana Licko](http://fr.wikipedia.org/wiki/Zuzana_Licko) a dit un jour que &ldquo;nous lisons le mieux ce que nous lisons le plus&rdquo;. Cette notion sonne juste s’agissant d’un comportement acquis, elle révèle aussi le principal défi du typographe : la lecture est un acte personnel et relatif. Lire un long passage en écriture [gothique](http://fr.wikipedia.org/wiki/Écriture_gothique), qui était considéré &ldquo;lisible&rdquo; il y a quelques siècles, nous demanderait aujourd’hui un effort bien plus considérable que si nous le lisions dans une police [sérif](<http://fr.wikipedia.org/wiki/Empattement_(typographie)>) ou [sans sérif](http://fr.wikipedia.org/wiki/Linéale), sur papier ou en ligne.

Au-delà de la question de la lisibilité, les considérations sur la typographie se réduisent pour l’essentiel à des questions de contraste et de forme. Les détails d’une police injectent du sens dans un design : des lignes douces et l’épaisseur du trait par exemple peuvent servir un contenu délicat ou lui donner élégance et dignité. Ces mêmes attributs peuvent être juxtaposés avec un contenu inattendu pour produire un effet ironique.

Voici maintenant une liste de qualités et quelques méthodes à garder à l’esprit quand vous vous lancerez dans le monde toujours plus vaste des polices de caractères pour le web.

## Le guide à tomber par terre pour choisir et associer des polices

Cherchez en premier lieu des polices lisibles —&nbsp;celles que nous utilisons et lisons quotidiennement.

### Contraste

Le contraste est probablement ce que nous devons avoir d’abord à l’esprit. Quand on associe des polices, il est important d’être capable de les distinguer mais le contraste a d’autres fonctions. Des polices très différentes peuvent jouer l’une avec l’autre de façon complémentaire ou au contraire résister l’une à l’autre en créant une certaine tension, alors que des polices qui semblent trop similaires peuvent affaiblir le message et embrouiller le langage du design visuel.

### Les basiques du corps de texte



<figure role="group"><img src="/images/bobulate.png" alt="exemple de page bien faite, Bobulate"/><figcaption><a href="http://bobulate.com">Bobulate.com</a> utilise <a href="https://typekit.com/fonts/skolar-web">Skolar</a>, à travers <a href="https://typekit.com">Typekit</a>.</figcaption></figure>

Lorsque je choisis des polices, j’aime commencer par celle que j’utiliserai dans mon corps de texte, car c’est sur elle que le lecteur passera le plus de temps. Préférez des polices robustes et lisibles même dans une taille réduite, et ayant un bon contraste entre les caractères.

Les meilleures polices de texte ont de la personnalité, mais pas suffisamment pour nous distraire du contenu. Les polices à forte personnalité conviennent mieux à l’affichage, car elles peuvent devenir lourdes dans de longs passages.

### Lisez-moi



<figure role="group"><img src="/images/legible.png" alt="Deux textes identiques dans deux polices différentes"/><figcaption>Quand le texte s’amenuise, hauteur d’x et contraste sont utiles.</figcaption></figure>

Les conventions habituelles concernant le choix des polices s’appliquent pour l’écran, mais en raison de l’écart de qualité entre l’écran et l’imprimerie, ces conventions devraient être suivies de façon encore plus stricte pour l’écran, et même de manière légèrement exagérée. De grandes [hauteurs d’x](http://fr.wikipedia.org/wiki/Hauteur_d%27x) et un corps de caractère robuste rendront votre texte lisible, même à taille réduite. Par exemple, [Verdana](http://fr.wikipedia.org/wiki/Verdana) et [Georgia](<http://fr.wikipedia.org/wiki/Georgia_(police_d%27écriture)>), toutes deux des polices éprouvées pour l’écran, ont une grande hauteur d’x et un peu plus d’espace entre les lettres ce qui fait que le texte reste clair même lorsqu’il est de petite taille.

### Quel est le message ?



<figure role="group"><img src="/images/grindhouse.jpeg" alt="Un pastiche d’affiche de film des années 70"/><figcaption>Cette affiche de film utilise beaucoup de polices et de types, à l’imitation des affiches emblématiques des années&nbsp;70.</figcaption></figure>

Une bonne façon de comprendre ce dont vous réalisez le design est de rédiger une description générale des qualités du message que vous souhaitez faire passer, puis de chercher les polices qui incarnent ces qualités. Si vous êtes dans un design sérieux, une police d’affichage fantaisiste écrite à la main ([scripte](<http://fr.wikipedia.org/wiki/Scripte_(typographie)>)) ne conviendra sans doute pas. Mais une police robuste comme [Franklin Gothic](http://www.myfonts.com/fonts/adobe/franklin-gothic/roman/) pourra transmettre un sentiment de stabilité et de force tout en conférant un air d’importance.

Une seule police peut être assez pour dire ce que vous avez à dire, deux est généralement beaucoup. Si vous en utilisez plus, il faut que ce soit pour de bonnes raisons —&nbsp;comme d’essayer de retrouver l’esthétique de vieilles affiches de [boxe](https://www.google.com/search?q=boxing+poster&tbm=isch), de films ou de musique par exemple.

### Une sans, une sérif



<figure role="group"><img src="/images/bodoni_futura.png" alt="Le texte ’Hello’ dans deux polices d’affichage différentes"/><figcaption>Bodoni et Futura ont des formes de lettres très différentes, mais leur structure est basée sur les mêmes principes géométriques.</figcaption></figure>

Un des moyens les plus simples pour créer un équilibre et un contraste en typographie est de choisir une association serif / sans-serif. C’est une combinaison simple et facile à gérer qui peut donner un aspect très cohérent à votre texte si vous choisissez les bonnes polices.

Sans que ce soit une règle absolue, les polices du même designer fonctionnent généralement bien ensemble. Comme dans deux toiles d’un même artiste, vous pouvez parfois voir la main du designer dans deux polices qu’il a réalisées. [Perpetua](http://www.myfonts.com/fonts/adobe/perpetua/regular/) et [Gill Sans](http://www.myfonts.com/fonts/adobe/gill-sans/regular/) d’Eric Gill fonctionnent bien ensemble car elles partagent les mêmes traits et les mêmes courbes. De la même façon, des polices conçues pour être appariées, comme [Meta Sans](http://www.fontshop.com/fontlist/super_families/ff_meta_sans_ff_meta_serif/) et [Meta Serif](http://metaserif.com), s’associent bien.

Utiliser plus d’une police d’[affichage](http://en.wikipedia.org/wiki/Typeface#Display_type) ou [scripte](<http://fr.wikipedia.org/wiki/Scripte_(typographie)>) est en général une mauvaise idée. Il y a des exceptions à chaque règle, mais ces polices ont une telle personnalité qu’une seule suffit et deux ne feraient qu’apporter de la confusion.

Cherchez des polices conçues avec les mêmes principes. Par exemple, bien que d’aspect très différent, [Futura](<http://fr.wikipedia.org/wiki/Futura_(police_d%27écriture)>) et [Bodoni](http://en.wikipedia.org/wiki/Bodoni) forment une superbe association parce qu’elles ont été inspirées par les mêmes formes géométriques simples.



<figure role="group"><img src="/images/baskerville_futura.png" alt="Deux polices contrastées"/><figcaption>Baskerville et Futura, "vieux" et "nouveau".</figcaption></figure>

Sinon, il est possible d’associer deux polices divergentes pour créer un nouveau sens ou une juxtaposition intéressante, à condition que le contraste soit fort. Combiner une [police transitionnelle](http://en.wikipedia.org/wiki/Baskerville) comme [Baskerville](http://www.myfonts.com/fonts/adobe/itc-new-baskerville/roman/) avec une police moderne comme Futura peut créer un expression forte à partir de l’idée de vieux vs nouveau.

### Explorez des styles différents



<figure role="group"><img src="/images/proxima_nova.png" alt="Les composantes d’une famille de police"/><figcaption>Des familles de polices comme <a href="http://www.marksimonson.com/fonts/view/proxima-nova">Proxima Nova</a> de Mark Simonson contiennent des graisses variées, ouvrant un champ de possibilités typographiques.</figcaption></figure>

Choisir des familles de polices comportant une bonne sélection de [graisses](<http://fr.wikipedia.org/wiki/Graisse_(typographie)>) et de styles vous donne plus de flexibilité sans avoir à recourir à d’autres polices. Utilisez un gras pour contraster avec une police extra-légère ou italique, essayez des majuscules ou des petites capitales avec un peu de d’espacement entre les lettres pour un sous-titre. Si vous choisissez des polices qui ne contiennent qu’une seule graisse, il sera plus difficile de créer le contraste requis pour distinguer visuellement les sections d’un texte.

### À la bibliothèque !

Beaucoup de polices ont un lien avec une période culturelle ou une sous-culture. Selon ce que vous créez, cela peut être un avantage ou un désavantage. Il est toujours bon d’en savoir plus sur une police en s’informant sur le lieu, l’époque, les raisons pour lesquelles elle a été créée. Parfois une police peut avoir le bon &ldquo;look&rdquo; mais évoquer des connotations erronées. Par exemple [Trajan](http://www.myfonts.com/fonts/adobe/trajan/trajan/) a été utilisée pour des films épiques, policiers, romantiques, pour des comédies et... pour [n’importe quel film](http://vimeo.com/432490), bien qu’étant romaine et agée de 1900&nbsp;ans. Les polices en écriture gothique ont longtemps servi aux groupes de heavy metal ou à tout ce qui devait être &ldquo;inquiétant&rdquo; ou &ldquo;dark&rdquo;. Il faut comprendre ces implications culturelles pour les éviter, ou au contraire en faire un bon usage.

### Money, honey

Nous avons été tellement habitués aux polices système que de nombreux professionnels rechignent à l’idée de payer pour des polices. Mais même quand vous utilisez les polices que vous trouvez sur votre ordinateur, vous utilisez des polices que vous avez payées, leur prix est inclus dans celui de votre système d’exploitation. Il y a beaucoup de polices gratuites, mais la plupart le sont pour une bonne raison&nbsp;: il leur manque souvent beaucoup de choses, crénage, ligatures, etc. et elles ne sont pas suffisamment robustes pour être utilisées sérieusement. Les polices solides, comme à peu près tout ce qui est de qualité, coûtent généralement quelque chose.

### Suivez votre instinct

Parfois une paire de polices semble aller bien ensemble, même si vous ne savez pas pourquoi. Les lignes qui précèdent sont des guides, pas des lois&nbsp;: il y a une myriade de polices et de styles, et vous serez parfois surpris de voir des polices s’associer à l’encontre de toute logique.

### Toujours plus loin !

Le nombre de polices disponibles augmente chaque jour. Si votre police favorite n’est pas encore là, elle le sera bientôt, même si le problème des licences n’est pas résolu de sitôt.

Avec l’arrivée de polices toujours plus nombreuses, nous devons comprendre comment elles peuvent servir au mieux nos designs et les choisir sur des critères autres que la seule nouveauté. Si l’essentiel du web est constitué de texte —&nbsp;ce qu’il est&nbsp;— la typographie peut être en effet un outil très puissant.
<span id="1"></span>

---

(1) Cet article en avance sur son temps date de 2009.&nbsp;&nbsp;&nbsp;<a href="#backto1" style="text-decoration:none">↩︎</a>

De la Typographie Web

Des styles de listes créatifs


Quand on se lance dans un design de background avec motifs en diagonale, on utilise habituellement nos connaissances en trigonométrie (pour des motifs (_patterns_) qui se répètent à l’intérieur d’un carré et se suivent sans rupture) ou bien des dégradés linéaires CSS. Ces deux méthodes ont leurs limites et leurs complications, que résout le pattern SVG.

<h2>Tuiles SVG</h2>

Un motif SVG est exactement ce que son nom indique : une surface qui comporte des informations de tracé, lesquelles sont ensuite reprises sur une surface plus large —&nbsp;un peu comme un carrelage à partir d’un carreau.

Dans la plupart des cas, il est plus facile de dessiner le motif _d’abord_, c’est à dire de créer de SVG de l’intérieur. Le template de base est le suivant&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
          <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
      </defs>
    </svg>

Plusieurs choses sont à noter ici :

1. Le SVG ne comporte pas de `viewBox` mais utilise `width` et `height` à la place, les deux attributs ayant pour valeur 100%.
2. Le `<pattern>` a ses _propres_ `width` et `height`. Le `patternUnits="userSpaceOnUse"` signifie que ces limites sont utilisées _à l’intérieur du motif_ lui-même&nbsp;: elles deviennent les limites du monde occupé par le motif.
3. Le `<pattern>` est défini à l’intérieur d’un élément `<defs>` et il faut se rappeler que les `<defs>` ne sont pas affichés tant qu’ils ne sont pas référencés. C’est pourquoi il peut être préférable de dessiner votre motif SVG dans un autre document, comme un dessin vectoriel normal, idéalement à l’intérieur d’une [viewBox](/articles/comprendre-svg-viewbox/) de mêmes dimensions que le pattern (50&nbsp;&times;&nbsp;50 dans notre cas), ce qui vous permet de visualiser les composants du motif —&nbsp;et de les modifier le cas échéant&nbsp;— avant de les placer à l’intérieur du contexte du `<pattern>` lui-même.
4. Dans notre exemple, le motif est constitué d’une ligne verticale qui occupe exactement la moitié de la surface du motif.

Nous n’avons pas tout à fait terminé. Pour voir le résultat, notre motif doit être utilisé pour remplir un élément SVG. Un rectangle est ce qui paraît le plus logique&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <defs>
        <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50">
          <line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#pinstripe)" />
    </svg>

Le `<rect>` occupe tout l’espace du SVG. Peu importe qu’il soit déclaré avant ou après l’élément `<defs>`&nbsp;: le `fill` trouvera l’`id` du motif de toute façon&nbsp;:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="pinstripe" patternUnits="userSpaceOnUse" width="50" height="50"><line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" /></pattern></defs><rect width="100%" height="100%" fill="url(#pinstripe)" /></svg>

Sauvegardé sous le nom `pinstripe.svg`, le résultat est appliqué comme image de background à une page HTML, de la même façon qu’habituellement&nbsp;:

    body { background-color: darkblue; background-image: url(’pinstripe.svg’); }

Le motif se reproduit sur toute la page. Arrivé ici, vous pourriez vous dire “eh, mais on peut faire la même chose avec moins de markup” et en effet c’est que nous avons vu dans l’article sur [Backgrounds SVG : les rayures](/articles/backgrounds-svg-les-rayures/). Mais c’est ici que ça devient intéressant. Du fait que `<pattern>` est un petit monde en soi, nous pouvons faire ce que nous voulons avec lui et voir ces changements appliqués dans le contexte plus large de la page. Revenons à `pinstripes.svg` et modifions la balise `<pattern>`&nbsp;:

    <pattern id="pinstripe" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50">

Sauvegardons le fichier, on rafraîchit la page HTML et on voit maintenant que notre motif de background est à 45°, sans que nous ayons besoin de rien faire d’autre.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs><pattern id="pinstripe2" patternTransform="rotate(45)" patternUnits="userSpaceOnUse" width="50" height="50"><line x1="25" y1="0" x2="25" y2="50" stroke="goldenrod" stroke-width="25" /></pattern></defs><rect width="100%" height="100%" fill="url(#pinstripe2)" /></svg>

La rotation peut prendre n’importe quelle valeur avec le même résultat&nbsp;:

    <pattern id="pinstripe" patternTransform="rotate(33)" patternUnits="userSpaceOnUse" width="50" height="50">

Là encore, le tuilage est parfait. Vous voulez des lignes plus fines&nbsp;? Il suffit de diminuer le `stroke-width` sur l’élément `line`. Moins de lignes sur la page&nbsp;? Ajoutez une déclaration `background-size` à votre CSS.

Voyez aussi [patternTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/patternTransform) dans MDN.

<h2>Conclusion</h2>

Lorsque nous comprenons les bases des motifs SVG, c’est un monde de créativité qui s’ouvre&nbsp;: dans vos backgrounds, vous pouvez superposer des motifs multiples, créer des tuilages parfait à partir de formes vectorielles. J’en montrerai quelques-uns dans les prochains articles.

_Tous mes remerciements à [Amelia Bellamy-Royds](https://twitter.com/AmeliasBrain) qui a attiré mon attention sur cette technique et dont j’ai eu plaisir à lire et critiquer les livres récemment. C’est dans ses ouvrages que j’ai trouvé l’inspiration pour cet article_.


Diagonales et motifs SVG en background


Pour les designers expérimentés, la mise en forme du texte peut paraître naturelle, mais pour ceux qui commencent dans ce domaine, j'ai dressé une liste des choses à faire (Do's) et à ne pas faire (Don'ts). Ce sera un bon outil pour apprendre, mais aussi une checklist à garder sous le coude pour vos futurs projets. Allons-y :

## Do: établir une hiérarchie typographique

On peut établir une hiérarchie typographique par divers moyens, que ce soit la taille de la police (font-size), sa graisse (font-weight), la couleur et le contraste. Son but est donner une structure à la page et de guider l'utilisateur à travers le contenu. Notre regard parcourt rapidement un texte tel un scan pour en comprendre la structure, et sans une claire hiérarchie, le texte devient beaucoup plus difficile à scanner et donc à lire. Dans l'exemple ci-dessous, le texte de gauche est établi dans une taille et une graisse uniques, du coup on fait difficilement la distinction entre le titre et le corps du texte. Le même texte à droite fait apparaître une hiérarchie typographique claire qui rend aisée la distinction entre ses différents composants. Ici, je n'ai utilisé que la taille et la graisse pour établir une hiérarchie, mais vous pouvez aussi expérimenter la couleur et le contraste.

<figure role='group'><img src="/images/hierarchy.jpg" alt=""><figcaption></figcaption></figure>

## DON'T: N'utilisez pas un texte trop petit

Tout le monde n'a pas 10/10 chez l'ophtalmo, il faut vous assurer que votre texte est suffisamment grand pour pouvoir être lu confortablement. Personnellement je recommanderais de ne pas descendre en-dessous de 14pt. (<span id="a1">[1](#f1)</span>)

<figure role='group'><img src="/images/text_size.jpg" alt=""><figcaption></figcaption></figure>

## DO: Choisissez une police appropriée pour le corps du texte

c'est un autre facteur important pour la lisibilité de votre texte. Une police comme Satisfy pourrait être en accord avec l'esthétique de votre site, mais son utilisation pour le corps de votre texte aura un impact négatif sur vos utilisateurs parce qu'elle est beaucop plus difficile à lire que votre police sérif ou sans-sérif habituelle. Regardez les exemples ci-dessous et vous remarquerez que la lecture du texte de gauche vous demande plus d'effort que celle du texte de droite.

<figure><img src="/images/font_choice.jpg" alt=""></figure>

## DON'T: n'utilisez pas trop de polices dans une même page

Ce n'est pas parce que des services comme Typekit ou Google Fonts vous donnent accès à des milliers de polices que vous devez les utiliser sans discernement. Comme le montre l'exemple suivant, si elle n'est pas réalisée à bon escient l'utilisation de polices multiples peut brouiller un message. Je recommande habituellement de ne pas en utiliser plus de 2 ou 3.

<figure><img src="/images/too_many_fonts.jpg" alt=""></figure>

## DO: faites respirer votre texte

L'absence d'espace entre les lignes de votre texte affecte sa lisibilité car le parcours de vos yeux d'une ligne à l'autre est plus difficile. Ce problème est aisément résolu en augmentant la hauteur de ligne (line-height), mais attention à ne pas exagérer car trop d'espace entre les lignes complique également la lecture.

<figure><img src="/images/line_height.jpg" alt=""></figure>

## DON'T: n'utilisez pas les majuscules en continu

Les gens ne sont pas habitués à lire de longs morceaux de textes en majuscules, c'est en réalité plus difficile à lire. De plus, un texte tout en lettres capitales a une connotation agressive ou bruyante (QUELQU'UN QUI CRIE !) et si vous l'utilisez dans un email il sera considéré comme un spam. Il est donc important de bien considérer comment et quand vous utilisez les mots en majuscules et de ne le faire qu'avec modération.

<figure><img src="/images/all_caps.jpg" alt=""></figure>

## DO: Essayez de limiter vos paragraphes à 40-60 caractères par ligne

Si une ligne est trop longue, le lecteur perd progressivement sa concentration et peut avoir des difficultés à passer d'une ligne à l'autre. Si elle est trop courte, l'oeil fait des allers-retours trop fréquents ce qui crée un mauvais rythme. Le lecteur peut aussi commencer à lire la ligne suivante trop tôt et perdre des mots en cours de route. C'est pour cela que l'on considère que la longueur de ligne optimale se situe entre 40 et 60 caractères par ligne. (<span id="a2">[2](#f2)</span>)

<figure><img src="/images/charactersperline.jpg" alt=""></figure>

## DON'T: n'utilisez pas trop de textes centrés

Un texte centré est difficile à lire parce que les bords de chaque ligne sont inégaux et du coup plus compliqués à scanner par l'oeil car chaque ligne commence à un endroit différent. Les blocs de texte centré sont également plus compliqués à aligner avec d'autres objets dans la page et sont souvent considérés un peu amateurs. Tout comme les textes en majuscules, il faut donc les utiliser avec modération et choisir plutôt le texte aligné à gauche comme votre standard.

<figure><img src="/images/centered_text.jpg" alt=""></figure>

## DO: assurez-vous d'avoir un contraste suffisant entre texte et background

Le contraste est un aspect de la typographie qui affecte la lisibilité. S'il n'y a pas suffisamment de contraste entre votre texte et le background, le contenu peut devenir illisible.

<figure><img src="/images/contrast.jpg" alt=""></figure>

---

<br/><br/>

<small>&nbsp;&nbsp;&nbsp;&nbsp;<b id="f1">1</b> - 14pt correspondent à 19px. On voit souvent recommander 16px comme taille idéale, parfois 18px. En tout cas, ne descendez jamais en-deçà de 14px ! NdT: _Voyez aussi <a href="/articles/une-taille-de-police-enfantine">Une taille de police enfantine</a>, qui milite pour des tailles de police plus lisible_.</small> [↩](#a1)

<small>&nbsp;&nbsp;&nbsp;&nbsp;<b id="f2">2</b> - Certains auteurs considèrent plutôt la fourchette 45-75 comme la longueur idéale du texte par ligne.</small> [↩](#a2)


Do's & Don'ts de la Typographie


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

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

## HTML, XHTML, HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## Exemples

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

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

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

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

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

En HTML vous pouvez tout écrire en majuscules :

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

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

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

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

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

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

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

Vous pouvez minimiser les attributs :

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

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

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

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

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

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

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

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

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


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


La plupart des articles sur Emmet traitent de son [utilisation pour HTML](/articles/goodbye-zen-coding-hello-emmet/), mais ici nous allons nous concentrer sur CSS. Prêt à mettre un turbo dans votre CSS&nbsp;? On y va&nbsp;!

## Emmet, qu'est-ce que c'est&nbsp;?

Emmet est un ensemble d'abréviations qui s'étendent en html/xml/css, comme des snippets de textes. Vous pouvez installer Emmet sur votre éditeur de texte en allant sur [la page download](http://emmet.io/download/).

Une fois Emmet installé, tapez une abréviation puis la touche qui déclenchera l'action - dans [Sublime Text](http://www.sublimetext.com/) c'est la touche `tab`.

## Pourquoi utiliser Emmet ?

Emmet (qui s'appelait autrefois Zen Coding) utilise des abréviations facilement mémorisables pour faciliter votre travail de codeur. Il vous aidera plus ou moins, en fonction du temps que vous investirez pour apprendre sa syntaxe (simple).

Non seulement il vous fera gagner du temps, mais il rend plus _fun_ le travail d'écriture&nbsp;: il y a quelque chose de magique à regarder quelques caractères se transformer en un code parfaitement formaté&nbsp;!

Je me suis rendu compte qu'Emmet me permettait de mémoriser le code plus facilement. Une abréviation comme `text-transform` devient "tt" et `text-align: justify` devient "taj". Super simple et utile, non ? Petit à petit vous apprendrez de nouvelles propriétés CSS et n'aurez à mémoriser que leur abréviation. Pas besoin de se soucier des ":" et des espaces, Emmet s'en charge.

## Emmet et CSS

Regardons maintenant les composants de base des abréviations Emmet, leur fonctionnement et la façon dont il vont accélérer et simplifier votre travail.

### Propriétés

Dans CSS vous donnez des valeurs à des propriétés telles que `font-size` , `margin` , `padding` , etc.

<figure role="group"><img src="/images/css_best_property_value.png" alt="exemple de couples propriété-valeur dans css"/></figure>

Emmet a créé une abréviation pour chacune des propriétés CSS&nbsp;: `border-bottom` est `bdb` , `border-top` est `bdt`. Ci-dessous, un exemple en action avec `font-size` qui est `fz` .

Une fois tapé l'abréviation, appuyez sur la touche 'tabulation' (ou une autre touche, cela dépend de votre éditeur de texte), Emmet transforme celle-ci en CSS valide et place le curseur là où vous en avez besoin&nbsp;:

<figure role="group"><img src="/images/emmet_css_property-1.gif" alt="exemple gif de transformation de fz en font-size"/></figure>

### Valeurs

Maintenant que nous avons vu comment fonctionnent les propriétés, il est temps d'ajouter une valeur. Pour cela, il suffit de taper la propriété abrégée et la valeur. Par exemple, `fz18` donnera `font-size: 18px;` . Pas besoin de taper "px" car Emmet l'ajoute par défaut. Si une propriété n'a pas d'unité (comme `font-weight` ), Emmet n'en ajoute pas.

<figure role="group"><img src="/images/emmet_css_value.gif" alt="exemple gif de transformation de fz16 en font-size: 16px"/></figure>

### Unités

Et si vous utilisez autre chose que des pixels&nbsp;? Les unités `em` , `rem` , `%` , `ex` , et `px` sont toutes disponibles dans Emmet. Chaque unité a même sa forme abrégée&nbsp;:

- `px` → par défaut
- `p` → `%`
- `e` → `em`
- `r` → `rem`
- `x` → `ex`

Pour utiliser une unité, il suffit de l'ajouter à votre valeur. L'exemple ci-dessous définit une taille de police en `em` .

<figure role="group"><img src="/images/emmet_css_unit.gif" alt="exemple gif de transformation de fz1e en font-size: 1em"/></figure>

### Unités multiples

Certaines propriétés, comme `margin` , peuvent avoir plusieurs valeurs. Dans Emmet, la syntaxe abrégée utilise un tiret séparateur. L'exemple ci-dessous montre comment définir quatre valeurs pour une marge&nbsp;:

<figure role="group"><img src="/images/emmet_css_multiple_units.gif" alt="exemple gif de transformation de m10-20-30-40 en margin: 10px 20px 30px 40px"/></figure>

### Couleurs

Pour les couleurs, il y a plusieurs façons d'écrire (au choix), qui donnent les résultats suivants&nbsp;:

- `#1` → `#111`
- `#e0` → `#e0e0e0`
- `#fc0` → `#ffcc00`

<figure role="group"><img src="/images/emmet_css_colors.gif" alt="exemple gif de transformation de 'c#2' en color: '#222'"/></figure>

### !important

Même si le tag `!important` ne doit être utilisé que de manière parcimonieuse et avisée, Emmet a prévu une abréviation, au cas où. Il suffit d'ajouter un point d'exclamation à votre déclaration&nbsp;:

<figure role="group"><img src="/images/emmet_css_important.gif" alt="exemple gif de transformation de p0! en padding: 0 !important"/></figure>

### Propriétés multiples

Maintenant que nous connaissons les bases des fonctions CSS dans Emmet, il est temps de les mettre en oeuvre ensemble. De même que pour les fonctions HTML, on peut ajouter un signe `+` pour chaque déclaration. Et rappelez-vous que si vous vous êtes embrouillé, il suffit de revenir en arrière (Cmd+Z ou Ctrl+Z), corriger la syntaxe et taper `tab` à nouveau.

Voici un exemple où je définis diverses marges et padding dans `body`&nbsp;:

<figure role="group"><img src="/images/emmet_css_multiple_properties.gif" alt="exemple gif de transformation de mb10+pt20 en margin bottom: 10px et padding-top: 20px"/></figure>

### Exemple

Vous pouvez utiliser toutes ces abréviations ensemble ou séparément, selon ce qui vous semble le plus simple et vous facilite la vie. Pour terminer cette courte présentation, voici un dernier exemple récapitulatif&nbsp;:

<figure role="group"><img src="/images/emmet_css_example.gif" alt="exemple gif de transformation de tous les exemples précédents"/></figure>

## Conclusion

Emmet est un outil puissant qui vous permet d'économiser du temps sur du code répétitif, sans avoir à créer manuellement vos propres snippets. Il peut être utilisé avec les principaux éditeurs de texte.

Comme pour tout nouvel outil, il y a un temps d'apprentissage, il est court, n'approfondissez pas trop dans un premier temps, apprenez d'abord ce dont vous aurez tout de suite besoin puis visitez régulièrement la documentation. Emmet propose une [anti-sèche](http://docs.emmet.io/cheat-sheet/) avec toutes les fonctions possibles.

### Pour aller plus loin

[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)  
[Goodbye, Zen Coding. Hello, Emmet](/articles/goodbye-zen-coding-hello-emmet/) !  
[Raccourcis et astuces Emmet](/articles/une-liste-de-raccourcis-emmet/), par Matt MacFadyen et Jordan Moore


Emmet, un turbo dans votre CSS

Lorsque nous écrivons notre CSS, nous sommes des [Zatoïchi](http://fr.wikipedia.org/wiki/Zatoichi) du développement web. Nous écrivons de belles déclarations et nous les envoyons vers des documents HTML dans l’espoir qu’ils se rencontrent, mais nous connaissons rarement le _contenu spécifique_ d’un élément sélectionné&nbsp;: la question de savoir combien de mots figurent dans un paragraphe, ou si le paragraphe est vide, relève traditionnellement de la responsabilité de JavaScript ou PHP ou d’autres langages.

Souvent on emploie des langages côté-serveur pour créer du contenu dynamique à l’intérieur d'un conteneur HTML. Lorsque l’opération échoue, c’est aux développeurs front-end qu’il revient de traiter le problème. Plutôt que d’ajouter du code avec JavaScript ou PHP, nous pouvons utiliser CSS pour nos conteneurs vides.

## Le mystère de la cellule vide résolu

Les tableaux sont souvent remplis avec des données dynamiques, mais certaines cellules peuvent ne pas contenir d’information. Habituellement, on laisse ces cellules telles quelles, mais on pourrait tout aussi bien mettre en valeur le fait qu’elles ne contiennent rien.

Voici un bon exemple d’un tel cas, un tableau montrant les distances entre villes. Il n’y a évidemment pas de distance entre une ville et elle-même, ce qui produit un certain nombre de cellules vides.

<figure role="group"><img src="/images/The_CSS__empty_Selector.jpeg" alt="Un tableau dans lequel les distances entre une ville et elle-même sont vides"/><figcaption>Tableau de distances entre villes.</figcaption></figure>

Le balisage de la table serait à peu près celui-ci (j’utilise des raccourcis HTML pour aller plus vite)&nbsp;:

    <table>
    <caption>Distances Between Cities On The Pacific Rim (miles)</caption>
    <col><col><col><col>
    <tr><th><th scope=col>Auckland<th scope=col>Papeete<th scope=col>Los Angeles
    <tr><th scope=row>Auckland<td><td>2542<td>6518
    <tr><th scope=row>Papeete<td>2542<td><td>4114
    <tr><th scope=row>Los Angeles<td>6518<td>4114<td></table>

C’est un excellent cas d’utilisation de `:empty` puisque les cellules vides _doivent être_ incluses dans le tableau si l’on veut conserver son sens. Avec `:empty` il est très facile de cibler les cellules qui n’ont pas de contenu&nbsp;:

    td:empty { background: #777; }

Vous avez remarqué la structure du code à la toute fin du tableau, avec la balise fermante `</table>` juste après le dernier élément `<td>` vide. Si ce n’était _pas_ le cas, la balise `<td>` isolée serait considérée comme étant &ldquo;ouverte&rdquo; et non pas vide. Une approche alternative serait d’utiliser `<td></td>` sans espace entre les deux.

Même si c’est un peu étrange, on peut combiner les sélecteurs :empty et `:not()` pour donner un style aux cellules non-vides.

    td:not(:empty) { /* styles pour les cellules non vides */ }

Ce serait une approche inhabituelle, puisque notre présupposé est que la majorité des cellules ont du contenu et peuvent être ciblées à l’aide d’un simple sélecteur `<td>`, mais c’est une approche valide en CSS.

## Réhabiliter le lien manquant

Sur un site, la navigation est souvent générée de façon dynamique, mais parfois incomplète. Il est possible qu’un espace soit réservé pour un lien qui n’apparaît jamais, ou seulement de manière sporadique. Même si cela implique généralement un travail supplémentaire côté serveur, dans l’intervalle il y a une solution CSS simple pour éviter que votre navigation ne ressemble à un sourire aux dents écartées&nbsp;:

    nav[role="navigation"] a:empty { display: none; pointer-events: none; }

Un lien comportant un attribut `href` mais sans contenu ne sera pas rendu par le navigateur. Donc si nous prenons ce HTML&nbsp;:

    <nav role="navigation">
        <a href="index.html">Home</a>
        <a href="contact.html">Contact</a>
        <a href="tools.html">Tools</a>
        <a href="classes.html"></a>
    </nav>

...et que nous ajoutons le CSS qui précède, le résultat sera que le dernier lien, qui est vide, n’apparaîtra pas (dans ce cas d'ailleurs, le `pointer-events` est redondant puisque le lien n'apparaîtra pas, et ne peut donc pas être cliqué).

## Exceptions

Attention : l’espace entre les balises ouvrante et fermante est considéré comme une information, de même que des balises (même sans contenu) à l’intérieur de l’élément ciblé, par conséquent les deux éléments suivants ne sont pas considérés comme vides&nbsp;:

    <a href="classes.html">  </a>

    <a href="classes.html"><span></span></a>

Comme déjà évoqué, les balises qui ne sont pas refermées (même si leur fermeture est optionnelle en HTML) ne sont pas considérées comme vides, même si elles n’ont pas de contenu. Une balise paragraphe isolée est &ldquo;ouverte&rdquo; et donc n’est pas vide&nbsp;:

    <p>

alors même qu’on aurait certainement (s’il n’y a pas de retour à la ligne)&nbsp;:

    <p><p>

Dans ce dernier cas, le premier paragraphe est vide, mais le second (en supposant que rien ne s’ajoute immédiatement après) ne l’est pas.

Les éléments &ldquo;auto-fermants&rdquo; sont considérés comme vides&nbsp;: `<br>`, `<hr>`, `<img>`, etc. répondent à `:empty`.

Les éléments sont considérés comme vides si leur seul contenu est un commentaire&nbsp;:

    <p></p>

## Utiliser :empty comme testeur de qualité du code

Inévitablement, les développeurs se laissent aller à la paresse. &ldquo;Hé, j’ai besoin d’un peu d’espace en-dessous de cet élément. OK, je sais, je vais ajouter un paragraphe vide&rdquo;.

    <p>un contenu réel…</p>
    <p></p>

Ou pire encore, une balise `<br>`. Ce balisage vide, de remplissage, va à l’encontre des bonnes règles d’écriture de CSS et il est difficile à retrouver. Nous pouvons utiliser `:empty` pour obtenir une visualisation rapide du balisage faible&nbsp;:

    *:empty, br { border: 2px solid red; }

### Compatibilité navigateurs et conclusion

La compatibilité de `:empty` est excellente, tous les navigateurs modernes, IE9+ y compris, le reconnaissent.

[Voir la page MDN de :empty](https://developer.mozilla.org/fr/docs/Web/CSS/:empty)

:empty, une pseudo-classe pas si vide


Le sélecteur `:first-of-type` en CSS vous permet de cibler la première occurrence d'un élément dans son conteneur. Il est défini dans la spécification CSS Selectors Level 3 comme une "pseudo-classe structurelle", ce qui signifie qu'il est utilisé pour styliser le contenu en fonction de sa relation avec le contenu parent et frère.

Supposons que nous ayons un article avec un titre et plusieurs paragraphes&nbsp;:

```html
<article>
  <h1>A Title</h1>
  <p>Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
</article>
```

Nous voulons agrandir le premier paragraphe, comme une sorte de paragraphe d'introduction. Au lieu de lui donner une classe, nous pouvons utiliser `:first-of-type` pour le sélectionner&nbsp;:

```css
p:first-of-type {
  font-size: 1.25em;
}
```

L'utilisation de `:first-of-type` est très similaire à `:nth-child` mais avec une différence essentielle&nbsp;: **elle est moins spécifique**. Dans l'exemple ci-dessus, si nous avions utilisé `p:nth-child(1)`, rien ne se serait produit car le paragraphe n'est pas le premier enfant de son parent (l'`<article>`). Cela révèle la puissance de `:first-of-type`&nbsp;: il cible un type d'élément particulier dans une disposition particulière par rapport aux frères et sœurs similaires, et non pas tous les frères et sœurs.

L'exemple plus complet ci-dessous démontre l'utilisation de `:first-of-type` et d'un sélecteur de pseudo-classe connexe, `:last-of-type`.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/zakkain/pen/DwGXKv">
  CSS-Tricks: :first-of-type and :last-of-type</a> de zakkain dans <a href="https://codepen.io">CodePen</a></span>
</div>


:first-of-type


La propriété `flex-grow` est une sous-propriété du module Flexible Box Layout.

Elle définit la capacité d'un élément flex à croître si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. Elle dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.

```css
.element {
  flex-grow: 2;
}
```

Par exemple, si tous les éléments ont la valeur `flex-grow` définie sur 1, chaque enfant aura une taille égale à l'intérieur du conteneur. Si vous donnez à l'un des enfants une valeur de 2, cet enfant occupera deux fois plus d'espace que les autres.

## Syntaxe

```css
flex-grow: <number>;
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_krMwzK/9a9ad8fb040f5efaf4e749b49cae7281" src="//codepen.io/KittyGiraudel/embed/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281?height=300&amp;theme-id=light&amp;slug-hash=krMwzK/9a9ad8fb040f5efaf4e749b49cae7281&amp;user=KittyGiraudel&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/KittyGiraudel/pen/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281">
  Flex-grow: demo</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>

Tous les éléments ont une valeur `flex-grow` de 1, sauf le 3e qui a une valeur `flex-grow` de 2. Cela signifie que lorsque l'espace disponible est distribué, le 3e élément flex aura deux fois plus d'espace que les autres.


flex-grow

Flexbox, guide complet

Notre esprit veut dessiner une forme, mais nos yeux veulent en voir une autre. Le design de police de caractères consiste en partie à gérer cette éternelle friction entre la logique et l’optique. Elle est toujours présente, quel que soit le style.

Cette nouvelle série d’articles explorera ce que j’appelle la “mécanique des polices”, le travail en coulisses qui permet aux polices d’être visuellement fonctionnelles. C’est lui qui apaise les bizarreries de la perception humaine, qui aide ou gêne l’utilisateur, et façonne les vieilles conventions du design.

Le processus de design de polices de caractères comporte de nombreux moments contre-intuitifs. L’un des premiers concerne la position verticale et la taille, que nous souhaitons cohérentes entre toutes les lettres. Nous pourrions décider d’une mesure et l’appliquer partout, mais ce plan simple et logique échouerait une fois le résultat devant nos yeux et notre esprit.

Des formes telles que le _H_ ont une relation simple et stable à la [ligne de base](http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) et la hauteur de capitale (<span aria-hidden="true" data-icon="&#9758;"></span> <i>NdT : voir l’article [Caractères](http://fr.wikipedia.org/wiki/Caract%C3%A8re_%28typographie%29), de wikipedia, pour les termes techniques</i>.). Leurs bords supérieur et inférieur coïncident avec ces limites et s’y maintiennent. Mais seul un tout petit bout d’un _O_ est compris dans ces limites, le reste de la forme s’en éloigne et nous en concluons —&nbsp;faussement mais logiquement&nbsp;— que la forme arrondie est trop petite.



<figure role="group"><img src="/images/square-round-06-compressor.gif" alt="des formes mathématiquement égales ne le sont pas optiquement"/><figcaption>Des formes carrée et ronde : mathématiquement égales ou optiquement égales</figcaption></figure>

Si la hauteur “correcte” semble inadéquate, alors “trop” paraîtra correct. C’est pourquoi on dessine le _O_ plus grand que le _H_ même si c’est mathématiquement incorrect. Mais nous lisons avec nos yeux, pas avec des règles, et l’oeil devrait toujours être vainqueur. Les polices de caractères de toutes les époques utilisent cette compensation, souvent appelée “dépassement” (_[overshoot](http://en.wikipedia.org/wiki/Overshoot_%28typography%29)\_).



<figure role="group"><img src="/images/Turlot-cropA2-compressor.jpeg" alt='une police "antique"'/><figcaption>Romaines Droites, par la Fonderie Turlot, 1880</figcaption></figure>



<figure role="group"><img src="/images/Turlot-cropB1-compressor.jpeg" alt="le O dépasse les empattements du I et du U"/><figcaption>"Overshoot", Les formes arrondies dépassent les formes plates</figcaption></figure>

Si les courbes ont besoin de dépasser parce que leur comportement est différent de celui des carrés, les formes pointues, elles, sont encore moins semblables aux carrés, et c’est pourquoi elles ont besoin de plus de dépassement. Mais si l’on fait bien attention, les lecteurs ne se rendront pas compte des tailles et positions multiples. Toutes _ont l’air_ égales.



<figure role="group"><img src="/images/FutMedFASHIONS-compressor.jpeg" alt='une police "moderne"'/><figcaption>Futura Medium, par Paul Renner, Bauer 1928</figcaption></figure>



<figure role="group"><img src="/images/FutMed-overlay-5a-compressor.gif" alt="dépassements différents selon la forme des lettres"/><figcaption>Dépassements progressifs, pour les formes arrondies et pointues</figcaption></figure>

Mais comme de nombreux aspects de la mécanique des polices de caractères, le dépassement est affaire de gradation. Les courbes larges se comportent presque comme des formes plates, elles s’attardent plus longtemps sur la ligne de base qu’une forme ronde ou ovale. Ci-dessous, deux polices du même designer et de la même fonderie, à la même taille et à peu près les mêmes proportions. La différence de dépassement est liée à la différence de courbe. L’une est un arrondie (tendant vers l’ovale), l’autre tend vers le rectangle.



<figure role="group"><img src="/images/Recta-Metropole-words-02-compressor.jpeg" alt="deux polices"/><figcaption>Recta Nera Stretta (au-dessus) et Metropol Nera Compatta, par Aldo Novarese, Nebiolo vers 1960 et 1967</figcaption></figure>



<figure role="group"><img src="/images/Recta-Metropole-overshoot-compressor.jpeg" alt="le design différent des polices entraîne des dépassements différents"/><figcaption>Différences de dépassement</figcaption></figure>

Même à l’intérieur d’une famille, des variations de graisse et d’épaisseur peuvent altérer l’apparence de la forme et imposer un calibrage de son alignement. Par exemple un _V_ peut avoir une pointe dans une [graisse](http://fr.wikipedia.org/wiki/Graisse_%28typographie%29) légère, mais avoir une pointe émoussée et modifier sa profondeur apparente et son alignement pour s’accorder à une graisse supérieure.



<figure role="group"><img src="/images/Nobel-V2-compressor.jpeg" alt="la lettre V dans des graisses différentes"/><figcaption>Le dépassement diminue à mesure que la pointe s’émousse&nbsp;: FB Nobel Light, Book et Regular, par S.H.&nbsp;de&nbsp;Roos, Amsterdam 1928. Revisité par Font Bureau en 1992</figcaption></figure>

Les alignements en [bas de casse](https://fr.wikipedia.org/wiki/Bas_de_casse) sont souvent plus difficiles à obtenir du fait que de nombreuses lettres ont des formes aplaties immédiatement adjacentes à des formes arrondies et toutes deux doivent être optiquement correctes. Un alignement mixte devrait sembler “naturel” et ne montrer aucun signe de l’effort nécessaire.



<figure role="group"><img src="/images/HelvMedMainz4-compressor.jpeg" alt="le mot Mainz en helvetica medium"/><figcaption>Helvetica Medium par Eduard Hoffmann, Stempel 1956</figcaption></figure>



<figure role="group"><img src="/images/HelvMed-lc-arch3-compressor.jpeg" alt="le I et le N de Mainz, le N dépasse"/><figcaption>Alignement mixte en bas de casse</figcaption></figure>

Les polices avec [empattement](http://fr.wikipedia.org/wiki/Empattement_%28typographie%29) (_serif_) inclinés peuvent encore compliquer les choses. Cette caractéristique est emblématique du style ancien en bas de casse, peu de lettres sont aplaties. Dans ce style, la hauteur théorique des lettres en bas de casse est très rarement respectée et la majorité des lettres —&nbsp;dont certaines parmi les plus communes&nbsp;— sont un mélange de courbes et d’angles capricieux.



<figure role="group"><img src="/images/Caslon540_nx0-compressor.jpeg" alt="le N dépasse, mais aussi le sérif supérieur du N, qui est incliné"/><figcaption>Carlson No. 540, American Type Founders 1906</figcaption></figure>

Le _x_ en bas de casse est un cas rare de quasi absence de changement entre un style et un autre. Quelle que soit l’épaisseur de ses empattements, le contraste de ses graisses, l’[inclinaison de son axe](http://fr.wikipedia.org/wiki/Axe_%28typographie%29), le _x_ aura très certainement une partie supérieure et inférieure aplatie. C’est parce que le _x_ est un repère fiable qu’on utilise l’expression “hauteur d’x” pour parler de la zone de bas-de-casse (W.A. Dwiggins a parfois utilisé le terme “hauteur de z” mais je n’ai pas retrouvé d’autre mention de cette convention).



<figure role="group"><img src="/images/Orpheo-serif-02-compressor.jpeg" alt="l'empattement inférieur d'un I, concave"/><figcaption>Orpheo (inachevé)</figcaption></figure>

Les empattements marquent les limites supérieure et inférieure, mais de façon parfois imprécise. Des designs basés sur une dérivation calligraphique ou autre peuvent présenter des empattements concaves qui font que de nombreuses formes “plates” ne le sont plus. Le conflit est localisé de manière inhabituelle, le centre et les extrémités de l’empattement étant alignés différemment. La paix visuelle est souvent obtenue en établissant ces empattements concaves à mi-chemin de la ligne de base, une partie au-dessus, l’autre en-dessous.

L’établissement d’une taille optiquement cohérente est souvent une difficulté parmi bien d’autres. L’enchevêtrement de poids, de largeur, d’espacement en sont d’autres, ainsi que les difficultés liées à certaines lettres en particulier. Mais nous verrons cela dans les articles à suivre.

Mécanique des polices de caractères, 1


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

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

## Comment ça marche ?

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

## Abréviations HTML

### Initialiser

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

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

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

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

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

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

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

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

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

    <h1>foo</h1>

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

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

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

### Emboîtements

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

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

Dans les exemples ci-dessus,

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

### Regroupements

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

    <div class="foo">

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

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

### Noms d'éléments implicites

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

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

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

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

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

### Multiplication

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

    <ul>

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

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

### Numérotation

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

    <ul>

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

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

---

## Abréviations CSS

### Valeurs

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

    width: 100px;

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

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

    height: 10%;
    margin: 5em;

### Opérateurs additionnels

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

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

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

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

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

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

### Recherche floue

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

    overflow: hidden;

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

### Préfixes constructeurs

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

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

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

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

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

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

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

avec :

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

### Dégradés

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

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

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

## Extras

### Lorem ipsum

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

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

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

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

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

## Customization

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

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

## Et plus encore !

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

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

## Compatibilité éditeurs de texte

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

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

### Liens utiles

[Documentation Emmet](http://docs.emmet.io/css-abbreviations/)  
[Anti-sèche Emmet (syntaxe, HTML, CSS)](http://docs.emmet.io/cheat-sheet/)  
[Bootstrap en quelques minutes avec Emmet](http://webdesign.tutsplus.com/tutorials/applications/build-bootstrap-in-minutes-using-emmet/) (en anglais)  
[Emmet, un turbo dans votre CSS](/articles/emmet-un-turbo-dans-votre-css/), par Josh Medeski  
[Raccourcis et astuces Emmet](/articles/une-liste-de-raccourcis-emmet/), par Matt MacFadyen et Jordan Moore


Goodbye, Zen Coding. Hello, Emmet!

grid-column

## Plongée profonde dans CSS Grid

Vous vous rappelez la réponse de <a href="/auteurs/rachel-andrew">Rachel Andrew</a> à la question "utiliser CSS Grid ou Flexbox"&nbsp;? Sinon vous pouvez [regarder la vidéo](https://www.youtube.com/watch?v=MXEzJ-IncX0&feature=youtu.be&t=1274) (en anglais).

<blockquote><p>Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions</p>
<p><cite><a href="/auteurs/rachel-andrew">Rachel Andrew</a></cite></p></blockquote>

Je suis sûre que beaucoup l'ont réalisé avant moi, mais avant ma relation torride d'un mois avec CSS Grid je ne m'étais pas rendue compte à quel point Flexbox et Grid sont faits pour s'entendre. C'était quelque chose du genre oeufs et bacon, pomme et cannelle, beurre de cacahuète et confiture —&nbsp;ah ça y est, j'ai faim tout d'un coup.

Vous avez peut-être vu que j'ai apporté une contribution au [CSS Reference de Codrops](https://tympanus.net/codrops/css_reference/). Sérieux, c'est une des meilleures choses qui me soit arrivées en 2016. Une des entrées qui manquaient encore était CSS Grid. Avant de m'y mettre, j'avais juste bricolé un peu avec Grid en construisant un prototype pour [Penang Hokkien](http://penang-hokkien.gitlab.io/) utilisant Grid, histoire de voir si le mode vertical fonctionnerait mieux qu'avec Flexbox.

Et puis je me suis attelée au boulot et j'ai écrit [l'article](https://tympanus.net/codrops/css_reference/grid/).

3 semaines plus tard, j'avais l'impression d'avoir fusionné avec [Metal Cactuar](http://exvius.gamepedia.com/Metal_Cactuar) puissance maximum (désolé, _Final Fantasy_ fait partie de ma vie), autrement dit j'étais passé au niveau supérieur.

J'ai passé beaucoup de temps à éplucher la spécification, la lecture des [articles](https://blogs.igalia.com/mrego/) de [Manuel Rego Casasnovas](https://twitter.com/regocas) sur CSS Grid m'a beaucoup aidé ainsi que l'[antisèche de Rachel Andrew](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) à un moment de grande confusion.

Un conseil : quand vous essayez d'apprendre une nouvelle propriété CSS, ayez toujours sous la main un template vide avec lequel vous pourrez expérimenter. Ça m'a vraiment été utile avec une propriété aussi nouvelle que Grid. Je sais, il y a aussi [Codepen](https://codepen.io/) et tout, mais rien ne vaut un template vierge pour une expérimentation libre de toute distraction.

## Exemples et démos

Pour analyser toutes les propriétés, j'ai commencé à construire des grilles très basiques, juste pour voir le fonctionnement des valeurs de propriétés. Si vous avez regardé la syntaxe de `grid-template-rows` dans la spécification, vous savez que ce n'était pas une tâche triviale. Grid lui-même n'est compliqué à apprendre. Mais comme il a été conçu pour être flexible et puissant, il vous faudra un peu de temps pour rentrer dans son fonctionnement.

Quelques-unes des grilles basiques se sont transformées en démos. Certaines trouvaient leur inspiration dans des conversations avec des membres du [CSS Layout Club](https://www.meetup.com/fr-FR/CSS-Layout-Club/). J'ai aussi glané quelques idées dans le cours de Coursera [Ideas from the History of Graphic Design](https://www.coursera.org/learn/graphic-design-history), il y a plein de belles choses (la semaine dernière était consacrée au [Bauhaus](https://fr.wikipedia.org/wiki/Bauhaus)).

Je suis tombée sur cette page de [Malerei, Fotografie, Film](http://bibliothequekandinsky.centrepompidou.fr/imagesbk/RLPF727/M5050_X0031_LIV_RLPF0727.pdf) par [László Moholy-Nagy](https://fr.wikipedia.org/wiki/L%C3%A1szl%C3%B3_Moholy-Nagy), dont la mise en page utilisait une grille originale et l'idée m'est venue qu'on pouvait peut-être la réaliser en CSS...



<figure role="group"><img src="/images/126-640.jpeg" alt="grille texte et images, texte horizontal et vertical, symboles, fortes séparations"/><figcaption>Page 126 de Malerei, Fotografie, Film</figcaption></figure>

## Le Bauhaus dans mon navigateur

Voici comment j'ai procédé. J'ai dessiné les lignes de la grille par-dessus l'image en utilisant Sketch, de façon à me faire une idée du nombre de colonnes nécessaires. Dans cet exemple, c'était 1 large colonne suivie de 5 colonnes plus étroites de largeur égale, et j'ai laissé ensuite le navigateur se débrouiller avec la hauteur des rangées.

```
.grid {
  display: grid;
  grid-template-columns: 30% 9% 9% 9% 9% 9%;
  justify-content: center; /* pour justifier la grille au centre du container */
}
```

Ensuite, il y a eu tout le code de placement avec les propriétés `grid-row` et `grid-column`. Mais si vous regardez à nouveau l'image originale, vous verrez que le contenu de chaque cellule a son propre alignement. Par exemple, celui de la première cellule est à droite, celui de la deuxième est en bas à gauche, etc.

👉🏿&nbsp;_NdT&nbsp;: pour consulter les définitions et utilisation des propriétés, voyez l'article [CSS Grid Layout, guide complet](/articles/css-grid-layout-guide-complet))_.

Mon premier réflexe, vu que j'avais cet alignement de boîtes, a été d'appliquer `justify-self` et `align-self` là où c'était nécessaire, pour ajuster les positions de contenu à l'intérieur de chaque cellule. Bien tenté, mais à côté... Le problème est que ces deux propriétés affectent la quantité d'espace occupée par la cellule.

Le design du Bauhaus présente des bordures noires très frappantes autour de chaque cellule. La propriété `border` s'applique à l'item de grille. Toute propriété d'alignement de grille autre que `stretch` adaptera la dimension de l'item grid à son contenu. Toute bordure appliquée à un item grid s'adaptera au contenu de l'item, par conséquent je ne pouvais pas procéder ainsi.



<figure><img src="/images/fit.svg" alt="les bordures sont sur les items, mais les dimensions de l'item ne sont pas celles de la cellule"/><figcaption>Ce ne sont pas les bordures souhaitées !</figcaption></figure>

## Flexbox à la rescousse

Par défaut, tous les items grid se comportent comme si leur alignement avait été réglé sur `stretch` sur chaque axe. J'ai donc laissé tomber, pour permettre à la grille de ressembler à une grille, et à la place, j'ai appliqué `display: flex` à l'item grid, ce qui m'a permis d'utiliser les propriétés d'alignement flex sur le container flex, pour positionner le contenu de mon item grid.



<figure><img src="/images/flex.svg" alt="les bordures correspondent aux lignes horizontales et verticales de la grille, et ne recouvrent pas les items lorsque ceux-ci s'étendent sur plusieurs cellules"/><figcaption>Ah voilà, cette fois-ci c'est bon.</figcaption></figure>

```
.grid__item:nth-child(5) {
  grid-row: 3 / 5;
  border-right: 1em solid;
  padding: 1em;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
```

Le code ressemble à ce qui précède, mais ce que je veux souligner avant tout c'est qu'il s'agit d'une formidable technique pour la mise en page. Grid pour l'organisation générale, et Flexbox pour les ajustements spécifiques. Voici ce que ça donne [sur Codepen](http://codepen.io/huijing/pen/PpqomV) si vous voulez voir le résultat final.

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="http://codepen.io/huijing/pen/PpqomV/">
  Malerei, Fotografie, Film (pg. 126)</a> de Chen Hui Jing dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Bonus : réaliser des formes en CSS

À part les deux photos, tout ce qui est sur la page est réalisé en CSS, autrement dit la flèche et la roue dentée sont des `div` auxquelles j'ai appliqué des styles. J'aime faire des formes en CSS, avec une `div` unique si possible. Il suffit pour cela de quelques propriétés pratiques, `box-shadow`, `border` et [les pseudo-éléments](/articles/les-pseudo-elements-css-before-et-after/).

### La flèche

Les flèches sont assez simples à réaliser. Il vous faut juste un pseudo-élément pour la pointe. Le corps de la flèche est une simple `div` à laquelle on donne une `position: relative` de façon à positionner la pointe par rapport au corps. La pointe est un triangle, qu'on peut réaliser grâce à [l'astuce de la bordure](http://stackoverflow.com/questions/27492191/how-to-make-a-fancy-arrow-using-css).

```
.arrow {
  width: 0.5em;
  height: 65%;
  background-color: #000;
  position: relative;

  &::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1em;
    border-style: solid;
    border-width: 1em 1em 0 1em;
    border-color: #000 transparent transparent transparent;
  }
}
```

### La roue dentée

Là, c'est un peu plus compliqué. Le corps de la roue est un cercle, réalisé via `border-radius: 50%`, mais les dents vont nous demander un peu de travail. Je n'ai pas pu le faire avec une seule `div` cette fois-ci (mais si quelqu'un y arrive, contactez-moi). J'ai ajouté une `div` interne. La bonne nouvelle c'est que toutes les dents ont une forme identique, donc l'astuce `box-shadow` peut être utilisée ici.

```
.gear {
  height: 5em;
  width: 5em;
  background-color: #000;
  border-radius: 50%;
  position: relative;

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
  }
}
```

Le corps de la roue et les 4 dents directionnées comme les aiguilles d'une boussole ont été réalisées avec une seule `div` et 2 pseudo-éléments. Pour les 4 autres dents, j'ai utilisé la `div` intérieure avec des pseudo-éléments et fait tourner les `box-shadow`. Je dois toujours résoudre le problème de `transform-origin` car je trouve qu'il y a encore une certaine asymétrie.

```
.inner-gear {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e1e1d5;

  &::before,
  &::after {
    position: absolute;
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (75% 75%);
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (25% 75%);
  }
}
```

### Conclusion

CSS Grid est vraiment génial, et nous sommes nombreux à le penser. [Jen Simmons](http://jensimmons.com/) a compilé une liste de bonnes ressources Grid, faites un tour sur [Learn CSS Grid](http://jensimmons.com/post/feb-27-2017/learn-css-grid) et essayez de construire quelque chose avec Grid. Vous ne le regretterez pas&nbsp;!

Grid et Flexbox, le duo gagnant

grid-row

grid-template-areas

Grille CSS et formes personnalisées, 1

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

Guide de l'accessibilité du clavier: JavaScript (2e partie)


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

<h2>space-between</h2>

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

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

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

<figure><img src="/images/super-smash-bros-1-compressor.png" alt="tableau de scores"/></figure>

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

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

<figure><img src="/images/super-smash-bros-2-compressor.jpeg" alt="décomposition de l'image en ses éléments, une section en haut, une section en bas"/></figure>

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

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

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

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

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

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

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

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

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

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

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

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

<figure><img src="/images/super-smash-bros-4-compressor.jpeg" alt="partie du bas"/></figure>

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

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

<h3>Figure 4</h3>

<figure><img src="/images/super-smash-bros-5-compressor.jpeg" alt=""/></figure>

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

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

<h3>Figure 5</h3>

<figure><img src="/images/super-smash-bros-6-compressor.jpeg" alt=""/></figure>

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

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

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

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

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

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


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

Guide des animations SVG (SMIL)

Introduction à RDFa, 1ère partie

JSON pour les débutants


La propriété `justify-content` est une sous-propriété du module Flexible Box Layout.

Elle définit l'alignement le long de l'axe principal. Elle permet de répartir l'espace libre restant lorsque tous les éléments flexibles d'une ligne sont inflexibles, ou sont flexibles mais ont atteint leur taille maximale. Elle exerce également un certain contrôle sur l'alignement des éléments lorsqu'ils débordent de la ligne.

La propriété `justify-content` accepte six valeurs différentes :

- `flex-start` (_valeur par défaut_) : les éléments sont alignés sur la ligne de départ.
- `flex-end` : les éléments sont regroupés vers la ligne de fin
- `center` : les éléments sont centrés le long de la ligne
- `space-between` : les éléments sont répartis uniformément sur la ligne ; le premier élément est sur la ligne de début, le dernier élément sur la ligne de fin.
- `space-around` : les articles sont répartis uniformément sur la ligne avec un espace égal autour d'eux.
- `space-evenly` : les éléments sont répartis de manière à ce que l'espacement entre deux sujets d'alignement adjacents, avant le premier sujet d'alignement et après le dernier sujet d'alignement soit le même.

## Syntaxe

```css
justify-content: flex-start | flex-end | center | space-between |
  space-around | space-evenly .flex-item {
  justify-content: center;
}
```

## Démo

La démo suivante montre comment les éléments flex se comportent en fonction de la valeur `justify-content`&nbsp;:

- La liste rouge est définie sur flex-start
- La liste jaune est réglée sur flex-end
- La liste bleue est réglée sur center
- La liste verte est réglée sur space-between
- La liste rose est réglée sur space-around
- Le vert clair est réglé sur space-evenly

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

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/zzJMGJ">
  Flexbox & justify-content</a> de team/css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


justify-content


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

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

## Éléments de niveau Block

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

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

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

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

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

`p`, `div`, `form`, `header`, `nav`, `ul`, `li`, et `h1`.

<figure><img src="/images/b_i1_block-compressor.jpeg" alt="Comportement des éléments block"/></figure>

## Éléments de niveau Inline

Un élément inline a les caractéristiques suivantes, non limitatives&nbsp;:

- Il s'inscrit dans le flux du texte
- et donc ne 'saute' pas à la ligne comme le ferait un élément block
- Il accepte la propriété `white-space`.
- Il ignore les marges top et bottom mais applique les marges left et right, ainsi que tout padding.
- Il ignore les propriétés `width` et `height`.
- S'il est flotté à gauche ou à droite, il devient automatiquement un élément de niveau block, et prend toutes ses caractéristiques.
- Il accepte la propriété `vertical-align`.

Pour se faire une bonne idée de l'élément inline, on peut l'imaginer comme une **boîte qui se comporte comme du texte**. Un texte qui n'est pas interrompu par d'autres éléments s'écoule, lettre après lettre, et si vous ajoutez un élément inline dans le texte, il suivra le flux comme tout autre élément du texte.

**Exemples d'éléments inline**&nbsp;:

`a`, `span`, `b`, `em`, `i`, `cite`, `mark`, et `code`.

<figure><img src="/images/b_i2_inline-compressor.jpeg" alt="comportement d'un élément inline"/></figure>

## Notes complémentaires

Vous aurez remarqué que ces exemples d'éléments block et inline sont très révélateurs&nbsp;: les éléments block sont structurels alors que les éléments inline sont relatifs au texte. C'est une bonne façon de se rappeler qui est qui, même si au commencement cela peut vous paraître confus.

D'une manière générale, vous pouvez inclure n'importe quel élément block à l'intérieur d'un autre élément block. Vous pouvez également inclure n'importe quel élément inline dans un élément block et n'importe quel élément inline dans un autre élément inline. La seule chose qu'on ne puisse pas faire, c'est inclure un élément block à l'intérieur d'un élément inline, à une exception près&nbsp;: l'élément `a` peut envelopper n'importe quel type de contenu, block comme inline ou les deux.

Vous pouvez changer tout élément block en inline et vice-versa, en utilisant la propriété CSS display.

Dernière chose à noter, block et inline existent dans une perspective CSS, du point de vue de HTML5 les divers éléments ont été re-catégorisés pour être plus spécifiques.

### Astuce rapide: éléments remplacés

Au tout début, j'ai dit que block et inline étaient simplement deux types de contenu. D'une manière générale, ce sont en effet les deux types principaux et il n'y a pas besoin de se soucier trop des autres.

Mais il y a ce qu'on appelle [les éléments remplacés](/articles/quest-ce-quun-element-remplace/). Ce sont des éléments dont l'apparence et les dimensions de base sont définies par une ressource extérieure, par exemple des images, des plugins, des éléments d'un formulaire... Ils ne sont ni blocks, ni inline, on pourrait les considérer comme plus proches d'inline, mais avec une structure proche de block...

Quelques exemples d'éléments remplacés&nbsp;: `img`, `object`, `input`, `select`.

## Inline-Block

Voici quelques définitions de la valeur `inline-block` pour la propriété `display`, relevées dans quelques sites de référence&nbsp;:

Pour [Sitepoint](http://reference.sitepoint.com/css/display) : "Avec Inline-block, l'élément génère une boîte block qui est mise en forme comme s'il s'agissait d'une boîte inline".

Pour [QuirksMode](http://quirksmode.org/css/css2/display.html) : "Un inline-block est placé inline (c'est à dire sur la même ligne que le contenu adjacent), mais il se comporte comme un block".

Pour [Robert Nyman](http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/) : "En gros, c'est une manière de mettre les éléments inline tout en préservant leurs capacités d'éléments block, tels que la possibilité de définir une largeur et une hauteur, des marges et paddings top et bottom, etc."

### Démonstration

Voici une image d'`inline-block` à l'oeuvre, qui montre exactement comment il se comporte&nbsp;:

<figure><img src="/images/b_i3_inline_block_demo-compressor.jpeg" alt="démonstration d'inline-block, notamment de hauteur et padding"/></figure>

### Comment l'utiliser ?

Voici quelques cas où inline-block serait utile&nbsp;:

- Pour placer plusieurs éléments de type block sur la même ligne horizontale sans les flotter.
- Pour permettre à un élément de type inline d'avoir une hauteur et une largeur tout en conservant sa nature inline.
- Pour permettre à un élément inline d'avoir des marges ou des paddings.

### Quelques notes complémentaires

L'utilisation de `inline-block` ne va pas sans quelques petits inconvénients. Un élément inline-block est dépendant du `white-space` donc si vous affichez des listes en utilisant inline-block (dans une barre de navigation par exemple), les items de votre liste comporteront des espaces indésirés entre eux. Cela peut ne pas être gênant, auquel cas pas de problème. Sinon, pour retirer cet espace il vous faudra retirer de votre code HTML tout whitespace présent entre les éléments de la liste. Si votre code se présente ainsi&nbsp;:

    <ul>
    	<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
    </ul>

Ou pire :

    <ul>
    	<li>Item One</li>
        <li>Item Two</li>
        <li>Item Three</li>
        <li>Item Four</li>
        <li>Item Five</li>
    </ul>

Ce problème peut évidemment être résolu en ajoutant `font-size: 0` à l'élément `<ul>` puis en augmentant la font-size des éléments de la liste. Mais ces solutions ne sont pas très "propres", je recommenderais donc dans ce cas d'utiliser une solution autre que `inline-block`.

Si vous déclarez plusieurs éléments utilisant `inline-block` et que ces éléments ont des hauteurs variables, vous devrez probablement ajouter quelque chose comme `vertical-align: top` pour garantir un alignement régulier. Voici [une page intéressante](http://www.brunildo.org/test/inline-block.html) qui montre quelques problèmes et solutions relatifs à `inline-block`.

J'ai par ailleurs remarqué que le comportement d'`inline-block` n'était pas le même selon que l'élément était à l'intérieur d'un paragraphe ou pas.

### Compatibilité navigateurs

Sans surprise, `inline-block` fonctionne de la même manière avec tous les navigateurs, sauf IE6 et IE7. Si vous devez absolument avoir une compatibilité avec IE7, il vous faudra définir la propriété `display` comme `inline`, puis utiliser la propriété `hasLayout` d'internet explorer.

---

<h2 class="ressourcesComplementaires">Ressources complémentaires en français</h2>

**Sur Block et Inline** :

[Block et Inline](http://www.ultra-fluide.com/ressources/xhtml/block-inline.xhtml), sur Ultra-Fluide.

**Sur Inline-Block** :

[Display inline-block](http://www.alsacreations.com/article/lire/1209-display-inline-block.html), sur Alsacréations.  
[La propriété CSS display: inline-block](http://jeremie.patonnier.net/post/2010/01/28/La-propri%C3%A9t%C3%A9-CSS-display-inline-block), chez Jérémie.


CSS Block, Inline et Inline-Block

Supposons que nous ayons ce HTML :

```html
<section>
  <p>Little</p>
  <p>Piggy</p>
  
</section>
```

Les deux CSS qui suivent feront exactement la même chose&nbsp;:

```css
p:nth-child(2) {
  color: red;
}
```

```css
p:nth-of-type(2) {
  color: red;
}
```

Pourtant, il y aura une différence évidemment.

La définition de notre sélecteur `:nth-child`, en bon français, signifie _sélectionne un élément si_&nbsp;:

1. c'est un élément paragraphe
2. c'est le deuxième enfant de son élément parent

La définition de notre sélecteur `:nth-of-type`, en bon français, signifie&nbsp;:

1. sélectionne le deuxième paragraphe enfant de son élément parent

`:nth-of-type` est donc, comment dire... _moins conditionnel_.

Supposons que notre balisage soit maintenant :

```html
<section>
  <h1>Words</h1>
  <p>Little</p>
  <p>Piggy</p>
  
</section>
```

Ceci ne fonctionne plus :

```css
p:nth-child(2) {
  color: red;
} /*  incorrect */
```

Ceci fonctionne :

```css
p:nth-of-type(2) {
  color: red;
} /* fonctionne */
```

Par "incorrect", je veux dire que le sélecteur `:nth-child` sélectionne maintenant le mot "Little" au lieu de "Piggy" parce que cet élément est à la fois 1) le second enfant et 2) un élément paragraphe. Par "fonctionne", je veux dire que "Piggy" est toujours sélectionné parce qu'il est _le deuxième paragraphe dans cet élément parent_.

Si j'ajoutais un titre `<h2>` après le titre principal `<h1>`, le sélecteur `:nth-child` _ne sélectionnerait rien du tout_ puisque maintenant le deuxième enfant n'est plus un paragraphe, et donc le sélecteur ne trouve rien.  
Le `:nth-of-type`, lui, fonctionne comme attendu.

Mon sentiment est que `:nth-of-type` est moins fragile et plus utile en général, même si `:nth-child` est plus souvent utilisé (semble-t-il). Combien de fois vous êtes-vous demandé "je veux sélectionner le deuxième enfant d'un élément parent s'il se trouve être un paragraphe"&nbsp;? Parfois, peut-être, mais il est plus probable que vous vouliez "sélectionner le deuxième paragraphe" ou "sélectionner chaque troisième rangée d'un tableau", qui sont des cas où `:nth-of-type` est un choix plus solide (là encore, de mon point de vue).

J'ai l'impresson que mes moments de "Grrrr... mais pourquoi ce sélecteur `:nth-child` ne marche pas&nbsp;?!" viennent du fait que j'ai qualifié le sélecteur avec un tag et que le numéro d'ordre de l'enfant ne correspond pas à ce tag. Par conséquent, lorsque j'utilise `:nth-child`, je me rends compte qu'il est préférable de spécifier le parent et de laisser `:nth-child` non qualifié.

```css
dl :nth-child(2) {
} /* est mieux que */
dd:nth-child(2) {
} /* ceci */
```

Mais bien sûr tout dépend de la situation exacte.

Vous pouvez jouer avec [ce super outil de test](https://css-tricks.com/examples/nth-child-tester/) ! Voir également [la page MDN de :last-of-type](https://developer.mozilla.org/fr/docs/Web/CSS/:last-of-type) et [la page MDN de :nth-child](https://developer.mozilla.org/fr/docs/Web/CSS/:nth-child)

La différence entre :nth-child et :nth-of-type


Les variables CSS se fraient lentement leur chemin vers une mise en oeuvre prochaine dans les navigateurs. Une variable existe pourtant depuis des années&nbsp;: `currentColor` ! Cette fonctionnalité CSS a une bonne compatibilité navigateurs et quelques applications pratiques intéressantes. Voyons comment nous pouvons l’utiliser.

## Une règle héritée

Une des caractéristiques les moins connues de CSS est que si vous réglez votre `color` dans une déclaration qui comporte également une `border` et que vous omettez de spécifier la couleur de cette dernière, la bordure héritera par défaut de la couleur du texte&nbsp;:

    h1 { color: hsl(0,0%,44%); padding: 1rem; border-bottom: 4px solid; }

Le résultat :

<figure><img src="/images/CSS-currentColor.jpeg" alt=""/></figure>

C’est une astuce sympa&nbsp;: si vous changez la couleur de votre titre, celle du soulignement sera automatiquement modifiée. La même chose s’applique à `outline` et `box-shadow`.

En utilisant currentColor, nous pouvons étendre cette fonctionnalité aux éléments enfants.

## Un exemple pratique de currentColor

Nous avons dépassé depuis longtemps l’époque des liens bleus sur les pages web. Depuis une dizaine d’années, la pratique courante est de donner aux liens la même couleur que le texte dans lequel ils se trouvent. Bien sûr, il nous faut mettre en évidence le fait qu’il s’agit d'un lien. Une de mes techniques préférées est celle-ci&nbsp;:

    p { color: #333; }
    p a {
      text-decoration: none; color: #333;
      font-weight: bolder;
      display: inline-block;
      padding-bottom: .5rem;
      border-bottom: 1px dashed #333;
    }

Certes, ça marche, mais je pense que vous avez vu le problème&nbsp;: nous indiquons que les liens doivent avoir la même couleur que le reste du texte, et nous utilisons encore une fois cette couleur pour la bordure inférieure. **Nous répétons trois fois la même valeur de couleur**. Si un jour nous décidions de changer notre design, il nous faudrait laborieusement passer en revue notre feuille de styles et appliquer les modifications une à une (👉🏿 _NdT : sauf si vous utilisiez Sass bien sûr, puisque vous auriez déjà utilisé des variables_).

Procédons plutôt de la sorte&nbsp;: nous allons définir la couleur du texte et laisser les autres propriétés à l’intérieur du lien hériter de la couleur via `currentColor` (👉🏿 _NdT : CSS n'est pas sensible à l'utilisation de majuscules, on peut écrire_ `currentcolor` _comme ci-dessous_).

    p { color: #333; }
    p a {
      text-decoration: none;
      color: currentcolor;
      font-weight: bolder;
      display: inline-block;
      padding-bottom: .5rem;
      border-bottom: 1px dashed currentcolor;
    }

Il y a certes d’autres façons de parvenir au même résultat, en particulier en utilisant `inherit`, mais un exemple comme celui-ci par contre est impossible sans `currentColor`&nbsp;:

    body { color: #f0f; }
    hr { height: 10px; background: currentcolor; }

On peut utiliser `currentColor` de tas de façons inattendues, par exemple avec [les dégradés](/articles/les-degrades-css/) et les SVG. Ainsi, pour avoir des sprites SVG en ligne qui s’affichent plutôt comme des icônes fontes, on pourrait utiliser&nbsp;:

    svg { fill: currentcolor; }

De cette manière, chaque icône SVG prendra la `color` de son élément parent.

Ce qui serait _vraiment_ génial ce serait de pouvoir faire quelque chose comme `color: (currentColor) 10% lighter` mais ce genre de manipulation n'est pas possible dans le standard CSS, elles relèvent encore du domaine des préprocesseur, en tout cas jusqu'à présent.

### Compatibilité

La compatibilité est excellente. Tous les navigateurs modernes et leurs équivalents mobiles, y compris IE9+, supportent le mot-clé.

### Conclusion

L'utilisation de `currentColor` dans vos feuilles de styles est une bonne façon de renforcer les [bonnes pratiques DRY](http://fr.wikipedia.org/wiki/Ne_vous_r%C3%A9p%C3%A9tez_pas), la cohérence de votre design, et éventuellement de vous préparer à migrer vers les préprocesseurs. Dans le web à venir, les variables joueront un plus grand rôle dans le développement et le design front-end.

👉🏿 \_NdT : Une autre utilisation possible de currentColor, que je viens de découvrir grâce à la [série de vidéos de Chris Coyier sur SVG](http://css-tricks.com/lodge/), concerne la résolution de certains problèmes spécifiques d'application de style CSS sur les SVG.


La première variable CSS : currentColor


La propriété `clip-path` en CSS nous permet de détourer une région spécifique d'un élément à afficher, le reste étant masqué (ou "clippé").

```css
.clip-me {
  /* Exemple : détourer l'élément suivant les bords supérieur, droit, inférieur et gauche */
  clip-path: inset(10px 20px 30px 40px); /* ou "none" */

  /* Exemple : clipper l'élément dans un Heptagone */
  clip-path: polygone(
    50% 0%,
    90% 20%,
    100% 60%,
    75% 100%,
    25% 100%,
    0% 60%,
    10% 20%
  );

  /* Version obsolète */
  position: absolute; /* Positionnement absolu ou fixe requis */
  clip: rect(110px, 160px, 170px, 60px); /* ou "auto" */
  /* les valeurs décrivent un point haut/gauche et un point bas/droit */
}
```

👉🏾 _Il existait auparavant une propriété `clip`, mais notez qu'elle est obsolète_.

Le cas d'utilisation le plus courant serait une image, mais nous ne sommes pas limités à cela. Nous pourrions tout aussi bien appliquer `clip-path` à une balise de paragraphe et seulement à une partie du texte.

```html
<img
  class="clip-me"
  src="/images/image-a-clipper.png"
  alt="Description de l'image"
/>

<p class="clip-me">Je vais être clippé.</p>
```

Ces quatre valeurs dans `inset()` (dans le CSS ci-dessus) représentent le point **haut/gauche** et le point **bas/droit**, ce qui forme le rectangle visible. Tout ce qui se trouve en dehors de ce rectangle est caché.

<figure role="group"><img src="/images/clip-visual.webp" alt=""/><figcaption>Cette image de Louis Lazaris explique très bien les quatre points de l'ancienne syntaxe clip : rect();</figcaption></figure>

Autres valeurs possibles :

```css
.clip-me {
  /* référencement du chemin d'accès à partir d'un SVG en ligne */
  clip-path: url(#c1);

  /* chemin de référence d'un SVG externe */
  clip-path: url(path.svg#c1);

  /* polygone */
  clip-path: polygon(
    5% 5%,
    100% 0%,
    100% 75%,
    75% 75%,
    75% 100%,
    50% 75%,
    0% 75%
  );

  /* cercle */
  clip-path: circle(30px at 35px 35px);

  /* ellipse */
  clip-path: ellipse(65px 30px at 125px 40px);

  /* inset-rectangle() pourrait remplacer inset() ? */
  /* rectangle() arrive dans SVG 2 */

  /* coins arrondis... pas sûr que ce soit encore une chose */
  clip-path: inset(10% 10% 10% 10% round 20%, 20%);
}
```

Exemple de chemin de clip SVG :

```xml
<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" width="100" height="100" />
</clipPath>
```

Il est étrange que `clip-path` n'ait pas pris en charge la fonction `path()` dès le départ, puisque `path()` est déjà une chose pour des [propriétés comme `motion-path`](https://css-tricks.com/almanac/properties/o/offset-path/). Firefox la prend maintenant en charge, et nous attendons le reste des navigateurs. Voir [An Initial Implementation of clip-path: path();](https://css-tricks.com/an-initial-implementation-of-clip-path-path/)

## Créer notre propre modèle

En attendant que nous puissions utiliser `path()` de manière fiable, le clip le plus utile pour les formes personnalisées fantaisistes est `polygon()`. Voici un éditeur très soigné de Mads Stoumann (qui fonctionne aussi pour les cercles et les ellipses)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_abZxoOM" src="//codepen.io/stoumann/embed/abZxoOM?height=300&amp;theme-id=light&amp;slug-hash=abZxoOM&amp;user=stoumann&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/stoumann/pen/abZxoOM">
  CSS clip-path Editor</a> de Mads Stoumann dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Plus d'information

- [Clipping and Masking in CSS](https://css-tricks.com/clipping-masking-css/)
- [clip-path dans MDN](https://developer.mozilla.org/fr/docs/Web/CSS/clip-path)
- [Clippy: Bennett Feely’s clip-path maker](https://bennettfeely.com/clippy/)
- [Découpage et Masquage dans MDN](https://developer.mozilla.org/fr/docs/Web/SVG/Tutorial/Clipping_and_masking)
- [Clipping in CSS and SVG – The clip-path Property and Element by Sara Soueidan](https://www.sarasoueidan.com/blog/css-svg-clipping/)
- [Pens tagged clip-path on CodePen](https://codepen.io/tag/clip-path/)
- [Demos and browser support demo Pen by Yoksel](https://codepen.io/yoksel/full/GRodvp)
- [SVG Masks by Jakob Jenkov](https://jenkov.com/tutorials/svg/mask.html)

[Compatibilité navigateurs](https://caniuse.com/css-clip-path) à ce jour.


La propriété CSS Clip Path


La propriété `transform` nous permet de manipuler visuellement un élément en l'inclinant, le faisant pivoter, le translatant ou le mettant à l'échelle&nbsp;:

```css
.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}
```

Même avec une hauteur et une largeur déclarées, cet élément sera maintenant mis à l'échelle à vingt fois sa taille d'origine&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gpQYwO/d5d50055d95ceecbf94068e75a502c97" src="//codepen.io/t_afif/embed/gpQYwO/d5d50055d95ceecbf94068e75a502c97?height=320&amp;theme-id=light&amp;slug-hash=gpQYwO/d5d50055d95ceecbf94068e75a502c97&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/gpQYwO/d5d50055d95ceecbf94068e75a502c97">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

En donnant deux valeurs à cette fonction, nous l'étirons horizontalement de la première valeur (2) et verticalement de la seconde (0.5). Dans l'exemple suivant, l'élément sera désormais deux fois plus large et deux fois moins haut que l'élément d'origine&nbsp;:

```css
.element {
  transform: scale(2, 0.5);
}
```

Nous pouvons être plus précis, en n'utilisant pas la fonction de raccourci&nbsp;:

```css
transform: scaleX(2);
transform: scaleY(0.5);
```

Mais `scale()` n'est qu'une des nombreuses fonctions de transformation disponibles.

## Valeurs

`scale()`&nbsp;: Affecte la taille de l'élément. Cela s'applique également à la taille de la police, au padding, à la hauteur et à la largeur d'un élément. Il s'agit également d'une fonction raccourcie pour les fonctions scaleX() et scaleY().

`skewX()` et `skewY()`&nbsp;: Incline un élément vers la gauche ou la droite, comme pour transformer un rectangle en parallélogramme. skew() est un raccourci qui combine skewX() et skewY() en acceptant les deux valeurs.

`translate()`&nbsp;: Déplace un élément latéralement ou de haut en bas.

`rotate()`&nbsp;: Fait pivoter l'élément dans le sens des aiguilles d'une montre à partir de sa position actuelle.

`matrix()`&nbsp;: Une fonction qui n'est probablement pas destinée à être écrite à la main, mais qui combine toutes les transformations en une seule.

`perspective()`&nbsp;: N'affecte pas l'élément lui-même, mais affecte les transformées des éléments descendants en 3D, leur permettant d'avoir tous une perspective de profondeur cohérente.

- [Skew](/articles/la-propriete-css-transform#skew)
- [Rotate](/articles/la-propriete-css-transform#rotate)
- [Translate](/articles/la-propriete-css-transform#translate)
- [Valeurs multiples](/articles/la-propriete-css-transform#valeursmultiples)
- [Matrix](/articles/la-propriete-css-transform#matrix)
- [3D transform](/articles/la-propriete-css-transform#3dtransform)

<h2 id="skew">Skew</h2>

```css
/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}
```

Les fonctions de transformation `skewX` et `skewY` inclinent un élément dans un sens ou dans l'autre. N'oubliez pas&nbsp;: il n'existe pas de propriété raccourcie pour incliner un élément, vous devrez donc utiliser les deux fonctions. Dans l'exemple ci-dessous, nous pouvons incliner un carré de 100px x 100px vers la gauche et la droite avec `skewX`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_BNGMRy/cb9ab0a908241806e3eff88b57f15693" src="//codepen.io/t_afif/embed/BNGMRy/cb9ab0a908241806e3eff88b57f15693?height=320&amp;theme-id=light&amp;slug-hash=BNGMRy/cb9ab0a908241806e3eff88b57f15693&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/BNGMRy/cb9ab0a908241806e3eff88b57f15693">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Dans cet exemple, nous inclinons un élément verticalement avec avec `skewY`&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_jPQpzp/d7be823bca05649502f63fc8490c6d93" src="//codepen.io/t_afif/embed/jPQpzp/d7be823bca05649502f63fc8490c6d93?height=320&amp;theme-id=light&amp;slug-hash=jPQpzp/d7be823bca05649502f63fc8490c6d93&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/jPQpzp/d7be823bca05649502f63fc8490c6d93">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Utilisons maintenant skew() pour combiner les deux&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_povNBmQ" src="//codepen.io/t_afif/embed/povNBmQ?height=320&amp;theme-id=light&amp;slug-hash=povNBmQ&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/https://codepen.io/team/css-tricks/pen/povNBmQ">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2 id="rotate">Rotate</h2>

```css
.element {
  transform: rotate(25deg);
}
```

Ce CSS fait tourner un élément dans le sens des aiguilles d'une montre par rapport à sa position d'origine, tandis qu'une valeur négative le ferait tourner dans le sens inverse. Voici un exemple animé simple où un carré tourne en continu de 360 degrés toutes les trois secondes&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_VLVBdK/d31be2118a19782d2c4fcfb048351ccf" src="//codepen.io/t_afif/embed/VLVBdK/d31be2118a19782d2c4fcfb048351ccf?height=320&amp;theme-id=light&amp;slug-hash=VLVBdK/d31be2118a19782d2c4fcfb048351ccf&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/VLVBdK/d31be2118a19782d2c4fcfb048351ccf">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Nous pouvons utiliser les fonctions `rotateX`, `rotateY` et `rotateZ`, comme suit&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c" src="//codepen.io/t_afif/embed/MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c?height=460&amp;theme-id=light&amp;slug-hash=MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/MwzBzR/ebb6b5a5cec86aa04168f03e26c7501c">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h2 id="translate">Translate</h2>

```css
.element {
  transform: translate(20px, 10px);
}
```

Cette fonction de transformation déplace un élément latéralement, ou de haut en bas. Pourquoi ne pas utiliser simplement haut/gauche/bas/droite&nbsp;? C'est parfois un peu confus. Personnellement, je considère ces fonctions comme des fonctions de mise en page/positionnement (elles sont mieux supportées par les navigateurs de toute façon) et cette fonction comme un moyen de déplacer ces éléments dans le cadre d'une transition ou d'une animation.

Ces valeurs pourraient être n'importe quelle valeur de longueur, comme `10px` ou `2.4em`. Une valeur déplacera l'élément vers la droite (les valeurs négatives vers la gauche). Si une deuxième valeur est fournie, cette deuxième valeur le déplacera vers le bas (valeurs négatives vers le haut). Vous pouvez aussi être plus spécifique&nbsp;:

```css
transform: translateX(value);
transform: translateY(value);
```

Il est important de noter qu'un élément utilisant la fonction `transform` ne fera pas circuler les autres éléments autour de lui. Quand nous utilisons la fonction de transformation ci-dessous, qui fait sortir le carré vert de sa position initiale, nous remarquons que le texte qui l'entoure reste fixe en place, comme si le carré était un élément block&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e" src="//codepen.io/t_afif/embed/eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e?height=460&amp;theme-id=light&amp;slug-hash=eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e&amp;user=t_afif&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/eNQdgJ/b9df78cff3ab6b64b5925b10c1e52d9e">
  Transform explanation</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Il convient également de noter que `translate` sera [accéléré par le matériel](https://www.alsacreations.com/astuce/lire/1565-acceleration-materielle-au-service-de-vos-animations-css.html) quand vous animez cette propriété, contrairement à `position: absolute`.

<h2 id="valeursmultiples">Valeurs multiples</h2>
Avec une liste séparée par un espace, nous pouvons ajouter plusieurs valeurs à la propriété `transform`&nbsp;:

```css
.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}
```

Il est important de noter qu'il y a un ordre dans lequel ces transformations seront effectuées, dans l'exemple ci-dessus `skew` sera effectué en premier et _ensuite_ l'élément sera mis à l'échelle.

<h2 id="matrix">Matrix</h2>

La fonction de transformation matricielle peut être utilisée pour combiner toutes les transformations en une seule. C'est un peu comme un raccourci de transformation, sauf que je ne crois pas qu'il soit vraiment destiné à être écrit à la main. Il existe des outils comme [the Matrix Resolutions](https://meyerweb.com/eric/tools/matrix/), qui peuvent convertir un groupe de transformations en une seule déclaration matricielle. Peut-être que dans certaines situations, cela peut réduire la taille du fichier, bien que des micro-optimisations _peu amicales pour les auteurs_ comme celle-ci ne valent probablement pas d'y passer trop de temps.

Pour les curieux, ceci&nbsp;:

```css
rotate(45deg) translate(24px, 25px)
```

...peut aussi être représenté comme&nbsp;:

```css
matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)
```

<h2 id="3dtransform">3D Transform</h2>

La plupart des propriétés que nous avons passées en revue ont des versions 3D.

```css
translate3d(x, y, z)
translateZ(z)
```

La troisième valeur de `translate3d` ou la valeur de `translateZ` rapprochent l'élément de l'observateur, les valeurs négatives l'en éloignent.

```css
scale3d(sx, sy, sz)
scaleZ(sz)
```

La troisième valeur dans `scale3d` ou la valeur dans `scaleZ` affectent la mise à l'échelle le long de l'axe z (par exemple, la ligne imaginaire sortant directement de l'écran).

```
rotateX(value)
rotateY(value)
rotate3d(x, y, z)
```

`rotateX` et `rotateY` feront tourner un élément dans l'espace 3D autour de ces axes. `rotate3d` nous permet de spécifier un point dans l'espace 3D autour duquel faire tourner l'élément.

```css
matrix3d(…)
```

Un moyen programmatique de décrire une transformation 3D dans une grille 4×4. Personne n'en écrira jamais une à la main, _jamais_.

```css
perspective(value)
```

Cette valeur n'affecte pas l'élément lui-même, mais elle affecte les transformées 3D des éléments descendants, leur permettant d'avoir tous une perspective de profondeur cohérente.

### Plus d'information

- [La doc MDN](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transforms) sur transform et [son utilisation](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms).
- [La documentation de David DeSandro](https://3dtransforms.desandro.com/) sur 3D transforms
- Surfin’ Safari: [3D transforms](https://www.webkit.org/blog/386/3d-transforms/)
- [La spec W3C](https://drafts.csswg.org/css-transforms-1/) sur CSS3 transforms
- [Intro à CSS 3D transforms](https://24ways.org/2010/intro-to-css-3d-transforms/) par David DeSandro
- [Astuces pour utiliser CSS translateZ() et perspective()](https://www.digitalocean.com/community/tutorials/css-translatez-and-perspective) (DigitalOcean)


La propriété CSS Transform


J'ai rencontré un problème dernièrement avec le contenu textuel d'un de mes `<button>` qui n'apparaissait pas dans l'arbre d'accessibilité ([accessibility tree](https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/the-accessibility-tree), _NdT&nbsp;: un arbre un peu similaire au [DOM](/articles/le-dom-cest-quoi-exactement/) mais comportant uniquement les éléments utiles aux technologies d'assistance_) et par conséquent n'était pas visible pour les lecteurs d'écran. Après débogage, je me suis rendue compte que la raison en était que j'animais un texte visuellement en modifiant son opacité et, surtout, la propriété CSS `visibility`.

C'était clairement un loupé, vu ce que j'ai écrit précédemment sur la façon de [cacher des éléments avec CSS](/articles/cacher-des-elements-avec-css/). Cela m'a amenée à repenser au comportement de la propriété `visibility`, en particulier à sa valeur `hidden`, dans sa relation avec les différentes sortes de "visibilités" —&nbsp;visuelle, spatiale, technologies d'assistance, interactions. Quand nous utilisons le terme "visibilité", nous pensons à la vision, mais la propriété `visibility` ne concerne pas que la visibilité "visuelle".

<h2>visibility: hidden et la visibilité visuelle</h2>

Lorsque nous considérons le domaine de la vision, la règle `visibility: hidden` a l'effet attendu, l'élément devient plus ou moins "invisible".

```
Il a disparu ! ---> <span style="visibility: hidden;">J'ai disparu !</span> eh oui
```

<p>Le résultat :</p>
<p>Il a disparu ! ---&gt; <span style="visibility: hidden;">J'ai disparu !</span> eh oui</p>

Pour comprendre exactement ce qui se passe, revenons sur le [chemin critique du rendu](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=FR). Typiquement, une fois déterminés les styles de la page, trois choses se passent&nbsp;:

- Mise en page - quel espace prend l'élément dans la page ?
- Peinture - quelle est la valeur de chaque pixel ?
- Composite - dans quel ordre sont peints les pixels ?

Pour un élément auquel s'applique la règle `visibility: hidden`, on pourrait penser que les navigateurs optimiseraient le travail de rendu en ne tenant pas compte des étapes 2 et 3 puisqu'aucun pixel ne sera affiché là où l'élément devrait se trouver. Bien que rien ne soit dit dans la spécification sur une telle optimisation, il est utile d'imaginer un tel mécanisme pour penser au fonctionnement de la règle.

<h2>visibility: hidden et espace</h2>

Il est techniquement exact de dire qu'un élément est invisible lorsque la règle `visibility: hidden` lui est appliquée, cependant on peut objecter qu'il occupe toujours l'espace sur la page.

Comme mentionné précédemment, un élément ne passe peut-être pas par les étapes 2 & 3, peinture et composite, mais il n'échappe pas à l'étape 1 de mise en page. Autrement dit, même si les pixels ne sont pas peints, ils occupent toujours de l'espace dans la page —&nbsp;un peu comme Harry Potter et sa cape d'invisibilité, vous ne le voyez pas mais il est toujours là.

Prenons trois éléments `<div>` de 100 px chacun, et appliquons la règle `visibility: hidden` au deuxième.

```
<style>
    div {
        width: 100px;
        display: inline-block;
        background-color: #ffdb3a;
    }
</style>

<div>Un</div>
<div style="visibility: hidden;">Deux</div>
<div>Trois</div>
```

<div style="width: 100px; text-align: center; background: #ffdb3a; color: black; display: inline-block;">Un</div>
<div style="width: 100px; text-align: center; background: #ffdb3a; display: inline-block; visibility: hidden;">Deux</div>
<div style="width: 100px; text-align: center; background: #ffdb3a; color: black; display: inline-block;">Trois</div><br/><br/>

Bien que "visuellement caché", on ne peut pas dire que l'élément du milieu soit réellement invisible puisqu'il occupe toujours l'espace.

<h2>visibility: hidden et interactivité</h2>

Du fait qu'un élément occupe toujours l'espace, même s'il est techniquement "caché", on pourrait penser que la règle `visibility: hidden` a le même effet que `opacity: 0`. En réalité, la règle `visibility: hidden` est beaucoup plus proche de `display: none`.

Toute interaction avec des éléments tels que des formulaires ou des liens sera impossible.

Considérons le `<button>` ci-dessous qui devrait envoyer une alerte sur un clic.

```
Il a disparu ! --->
<button style="visibility: hidden;"
        onclick="alert('Hello!')">J'ai disparu !</button>
<--- On ne peut pas cliquer dessus !
```

<p>Il a disparu ! ---&gt; <button style="visibility: hidden;" onclick="alert('Hello!')">J'ai disparu !</button> &lt;--- On ne peut pas cliquer dessus !</p>

Le bouton a beau conserver son espace physique, il a perdu son interactivité.

<h2>visibility: hidden et technologies d'assistance</h2>

La principale raison pour laquelle la règle `visibility: hidden` ne concerne pas que le domaine de la vision est qu'elle affecte également les technologies d'assistance. Lorsque nous appliquons `visibility: hidden` à un élément, la règle le supprime de l'arbre d'accessibilité, ce qui le rend invisible aux technologies telles que les lecteurs d’écran.

Prenons par exemple le problème que j'ai rencontré. J'ai un `<button>` et une `<span>` imbriquée.

```
<button>
    <span style="visibility: hidden">Button label here</span>
</button>
```

Si nous jetons un coup d'oeil aux propriétés d'accessibilité de l'élément dans DevTool, nous voyons que le `<button>` semble ne pas avoir de label et par conséquent n'a pas de nom accessible.

<button>
    <span style="visibility: hidden">Button label here</span>
</button>

<figure><img src="/images/devtool-with-accessibility-panel-compressor.png" alt="Copie d'écran de Chrome DevTool lorsqu'on inspecte le bouton ci-dessus dont le nom n'est pas accessible"/></figure>

Conclusion : la propriété `visibility` semble n'affecter que l'aspect visuel des éléments, mais nous avons vu qu'elle fait bien plus que cela.


La propriété CSS visibility et l'accessibilité


Il y a quelques semaines, j'ai [tweeté](https://twitter.com/shayhowe/status/502525269992046594) un petit bout de CSS que j&rsquo;utilise fréquemment et j&rsquo;ai été surpris du retour qu&rsquo;il a eu &mdash;&nbsp;ce qui m&rsquo;a donné envie de le partager ici aussi. Quel était ce CSS&nbsp;? Le sélecteur suivant, tout simple&nbsp;:

    li:not(:last-child)

Souvent, lorsqu&rsquo;on travaille sur des listes on souhaite appliquer un style spécifique à tous les éléments `li` de la liste sauf un, en général le premier ou le dernier. Autrefois j&rsquo;utilisais le CSS suivant&nbsp;:

    li {
      border-bottom: 1px solid #ccc;
    }
    li:last-child {
      border: none;
    }

Le problème avec cette méthode c&rsquo;est que nous définissons des styles pour finalement les écraser avec un sélecteur de spécificité supérieure &mdash;&nbsp;dans notre cas en ajoutant la pseudo&ndash;classe `:last-child`. Ce faisant, nous donnons du travail supplémentaire à notre navigateur et nous ralentissons le rendu de ces styles.

Plutôt que de se donner du travail inutile et d&rsquo;écraser nos styles, nous pouvons utiliser la [pseudo&ndash;classe de négation](https://developer.mozilla.org/fr/docs/Web/CSS/:not) `:not()` en association avec une autre pseudo-classe structurelle ou basée sur la position, le plus fréquemment ce sera `:first-child` ou `:last-child` pour cibler plus précisément l&rsquo;application de nos styles. Notre CSS plus performant ressemblerait à ceci&nbsp;:

    li:not(:last-child) {
      border-bottom: 1px solid #ccc;
    }

Voici le code en action sur CodePen&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gKGsn" src="//codepen.io/shayhowe/embed/gKGsn?height=300&amp;theme-id=light&amp;slug-hash=gKGsn&amp;user=shayhowe&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/shayhowe/pen/gKGsn/">
  La pseudo-classe de négation</a> par Shay Howe <a href="https://codepen.io">CodePen</a></span>
</div>

Ici, nous n&rsquo;écrasons pas de styles précédents puisque nous n&rsquo;appliquons de styles qu&rsquo;aux éléments voulus. De plus, la compatibilité navigateurs est la même puisque `:not()`, `:first-child` et `:last-child` ont la même compatibilité.

Si vous utilisez une classe `.dernier` ou des pseudo&ndash;classes structurelles ou de position, je vous recommande de passer à la pseudo&ndash;classe de négation `:not()`. Je l&rsquo;utilise depuis un certain temps maintenant et je me rends compte qu&rsquo;elle m&rsquo;a servi dans des situations compliquées et m&rsquo;a aidé à écrire un CSS plus performant.

Si vous avez des commentaires ou des questions, n&rsquo;hésitez pas à me contacter par [Twitter](https://twitter.com/intent/tweet?text=The%20Negation%20Pseudo-class%20%E2%80%93%20http%3A%2F%2Fbit.ly%2F1x6SGFj%20%E2%80%93%20by%20%40shayhowe%20of%20%40bellycardtech&source=webclient), je serais ravi de connaître votre façon d&rsquo;utiliser la pseudo&ndash;classe de négation.


La pseudo-classe de négation


## Logique vs Design

Quand j’étais tout jeune designer, je faisais confiance à Photoshop ou CSS pour me dire si quelque chose n’allait pas. Si Photoshop indiquait que deux formes étaient alignées, alors elles étaient alignées. Si elles avaient les mêmes dimensions, idem, et si deux couleurs avaient les mêmes valeurs hexadécimales, alors elles avaient le même rendu couleur.

Cette approche était logique, pourtant elle est incorrecte.

Les calculs de nos applications sont évidemment exacts, mais les softwares ne peuvent pas percevoir les formes, les couleurs, les dimensions de la même façon que les êtres humains —&nbsp;ils ne peuvent pas comprendre le _contexte_ d’un objet en relation à d’autres, ou le contexte d’un langage visuel.

L’esprit humain juge et décide en fonction d’un contexte. Comprendre ces différences subtiles et savoir ajuster notre travail en fonction nous permet d’améliorer notre design —&nbsp;peu de gens le verront, mais par contre beaucoup s’en rendront compte si nous n’y avons pas fait suffisamment attention.

Voyons quelques exemples pratiques.

<h2>Alignement et poids visuel</h2>

Les ordinateurs ne peuvent savoir où se situe le poids d’un objet, ils ne connaissent que la largeur, la hauteur ou les positions x & y. Notre travail de designer est de compenser cela par ce qu’on appelle l’ajustement optique.

Dans une icône _Play_, le triangle est centré dans le cercle, n’est-ce pas&nbsp;? Eh bien non, si l’on trace un rectangle sur le triangle, on s’aperçoit qu’il est excentré.

<figure role="group"><img src="/images/play-icon-compressor.jpeg" alt=""/><figcaption>L’icône de gauche apparaît centrée, alors qu’en réalité on l’a décalée vers la droite.</figcaption></figure>

À gauche, l’icône n’a pas l’air excentrée, et pourtant elle l’est (et _pas qu’un peu_…), pourquoi&nbsp;? À cause du poids visuel. Le poids ou la masse du triangle se situe dans sa partie gauche, ce qui crée une illusion d’optique le tirant vers la gauche (comme on le voit dans le triangle “mathématiquement correct” à droite).

Pour résoudre ce problème, nous devons déplacer le triangle vers la droite jusqu’à ce qu’il ait _l'air_ centré.

<h2>La couleur</h2>

Les ajustements optiques de couleurs sont plus subtils. Là encore, il s’agit du poids de l’objet et de la quantité de couleur qui apparaît.

En résumé : le même vert, selon qu’il est utilisé pour un texte ou pour un remplissage d’icône, paraîtra plus ou moins clair.

<figure role="group"><img src="/images/heart-recommend-compressor.jpeg" alt=""/><figcaption>La combinaison de gauche utilise la même valeur hexadécimale, celle de droite est ajustée en augmentant la quantité de noir dans le texte.</figcaption></figure>

C’est subtil, mais vous pouvez observer que l’icône est plus “lourde” que le texte et que ce dernier semble d’un vert plus clair. Pour ajuster les deux, il convient soit d’éclaircir l’icône, soit d’assombrir le texte -&nbsp;le mieux étant de choisir la couleur qui respectera les critères d’accessibilité. Je recommande d’utiliser les valeurs de couleurs HSB (Photoshop, Sketch ou HSL (CSS) dans vos applications de design. Parmi tous leurs avantages, la possibilité d’ajuster facilement la valeur “B” ou “L” (luminosité).

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : [Dudley Storey](/auteurs/dudley-storey) a écrit deux articles instructifs sur HSL, dont “[3 raisons d’utiliser HSL pour vos couleurs](/3-raisons-dutiliser-hsl-pour-vos-couleurs/)”_.

<figure role="group"><img itemprop="url" src="/images/heart-recommend-2-compressor.jpeg" alt=""/><figcaption>L’ajustement se fait à vue, simplement en modifiant la valeur de “B”.</figcaption></figure>

<h2>L’échelle</h2>

Par échelle, on entend la façon dont notre cerveau perçoit la taille des objects, texte y compris. Si nous traduisons cela en termes de cercles et de carrés, un carré de 120&nbsp;&times;&nbsp;120&nbsp;pixels a une surface supérieure à celle d’un cercle de diamètre égal à 120&nbsp;pixels, le cercle doit donc être légèrement plus grand pour pouvoir compenser.

<figure role="group"><img src="/images/cercle-and-rectangle.jpeg" alt=""/><figcaption>À gauche, les deux formes ont des dimensions de 120px, à droite le cercle a un diamètre de 126px.</figcaption></figure>

Comme pour les autres ajustements, on fait dans la subtilité, mais ces modifications aident vraiment votre design à avoir l’air _juste_. C’est souvent un réglage fin d’éléments —&nbsp;comme de modifier des valeurs un pixel à la fois jusqu’à parvenir au bon _feeling_.

<figure role="group"><img src="/images/x-height-revealed-compressor.jpeg" alt=""/><figcaption>Le haut et le bas des formes incurvées de Didot dépassent la hauteur d’x et la ligne de base.</figcaption></figure>

C’est également vrai pour la typographie, avec les dépassements (_overshoots_) des lettres arrondies (<i>NdT : Tobias Frere-Jones a écrit deux superbes articles à ce sujet, [Mécanique des polices de caractères, 1](/fonctionnement-des-polices-de-caracteres-1/) et [Mécanique des polices de caractères, 2](/mecanique-des-polices-de-caracteres-2-2/)</i>). Si vous écrivez un texte en [Garamond](http://fr.wikipedia.org/wiki/Garamond_%28police_d%27%C3%A9criture%29) et que vous représentez la [ligne de base](http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) et la [hauteur d’x](http://fr.wikipedia.org/wiki/Hauteur_d%27x) du texte, vous verrez les dépassements des formes arrondies. Sans eux, les caractères donneraient l’impression d’être plus petits que leurs voisins.

<h2>Lettres capitales</h2>

Un dernier exemple rapide d’ajustement optique nécessaire&nbsp;: lorsqu’un texte en lettres capitales est placé à côté d’un texte en bas-de-casse. Le premier est proéminent et doit être ajusté pour équilibrer l’ensemble.

<figure role="group"><img src="/images/upper-case-compressor.jpeg" alt=""/><figcaption>Dans l’exemple du bas, le texte en capitales a été ajusté de 2px pour donner l’impression qu’il a la même taille.</figcaption></figure>

Sauf si l’objectif de ce design est précisément de donner plus d’importance au texte en lettres capitales, celui-ci doit toujours être réduit de quelques pixels, par exemple en passant de 16 à 14 pixels ou de 12 à 11 pixels.

Lorsqu’on travaille sur une interface importante, chacun de ces petits détails s’accumule et affecte la sensation générale qui se dégage du site.

Une fois que vous l’aurez intégré à votre workflow, réduire un texte de 2 pixels ou déplacer un triangle de 10 pixels ne prendra que quelques instants, mais c’est ce qui rendra votre design proche de la perfection.

<figure><img src="/images/eye-compressor.jpeg" alt="un oeil"/></figure>

Nous ne devons pas compter sur les seuls ordinateurs pour faire tout le travail pour nous, mais également sur nos yeux et notre instinct. Le regard des designers est plus aigu, leur instinct plus aiguisé à mesure qu’ils gagnent en expérience, c’est sur eux que doivent s’appuyer nos décisions.


L'ajustement optique


Le sélecteur `:last-of-type` nous permet de cibler la dernière occurrence d'un élément à l'intérieur de son élément parent. Il est défini dans la spécification [Selectors Level 4](https://www.w3.org/TR/selectors/) comme une "pseudo-classe structurelle", c'est à dire qu'il est utilisé pour ajouter un style à un contenu en fonction de sa relation avec son élément parent ou ses éléments frères.

Admettons que nous ayons un article qui comporte un titre, plusieurs paragraphes et une image&nbsp;:

```html
<article>
  <h1>Un Titre</h1>

  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <img src="..." />
</article>
```

Nous voulons que le dernier paragraphe soit affiché en plus petit, pour apparaître comme une conclusion (comme une note du rédacteur). Plutôt que de l'associer à une classe, nous pouvons utiliser `:last-of-type` pour le sélectionner&nbsp;:

```css
p:last-of-type {
  font-size: 0.75em;
}
```

`:last-of-type` fonctionne à peu près comme `:nth-of-child` mais avec une différence essentielle&nbsp;: il est [moins spécifique](/articles/la-difference-entre-nth-child-et-nth-of-type). Dans l'exemple qui précède, si nous avions utilisé `p:nth-last-child(1)`, il ne se serait rien passé car le paragraphe n'est pas le dernier enfant de son élément parent. C'est là qu'apparaît la puissance de `:last-of-type` : il cible un type particulier d'élément dans un arrangement spécifique, _en relation avec des enfants similaires, plutôt qu'avec tos les enfants_.

L'exemple plus complexe qui suit montre l'utilisation de `:last-of-type` et d'une pseudo-classe qui lui ressemble, `:first-of-type`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DwGXKv" src="//codepen.io/zakkain/embed/DwGXKv?height=500&amp;theme-id=light&amp;slug-hash=DwGXKv&amp;user=zakkain&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/zakkain/pen/DwGXKv">
  :first-of-type and :last-of-type</a> de Sara Cope dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voir également [la page de MDN](https://developer.mozilla.org/fr/docs/Web/CSS/:last-of-type)


:last-of-type


<h2>Comment une page web est-elle construite ?</h2>

Le cheminement d'un navigateur partant d'un document source HTML pour finalement afficher une page stylée et interactive s'appelle le chemin critique du rendu (<i>critical rendering path</i>). Ce processus peut comporter de nombreuses étapes, comme je le montre dans [mon article sur le sujet](https://bitsofco.de/understanding-the-critical-rendering-path/), mais celles-ci peuvent être regroupées en deux grandes étapes. La première consiste en **l'analyse du document** par le navigateur pour déterminer ce qui sera finalement rendu sur la page, et la seconde est **le rendu** par le navigateur.

<figure><img src="/images/HTML-to-Render-Tree-to-Final-compressor.png" alt="la décomposition du processus en deux étapes"/></figure>

La première étape permet de construire l'arbre de rendu (<i>render tree</i>), une représentation sous forme d'arbre des **éléments HTML** qui seront rendus sur la page ainsi que leurs styles associés. Pour cela, le navigateur a besoin de deux choses&nbsp;:

1. le CSSOM, une représentation des styles associés aux éléments
2. le DOM, la représentation des éléments

<h2>Comment le DOM est créé, et à quoi il ressemble</h2>

Le DOM est une représentation du document HTML source. Comme nous le verrons plus loin, il comporte quelques différences, mais il s’agit pour l'essentiel d’une conversion de la structure et du contenu du document HTML en un modèle objet utilisable par divers programmes.

La structure d'objet du DOM est représentée par ce qu'on appelle une "arborescence de noeuds" (<i>node tree</i>). On l'appelle ainsi parce qu'il peut être considéré comme un arbre qui se ramifie en plusieurs branches enfants, chacune pouvant avoir des feuilles. Le premier parent est l'élément racine `<html>`, les "branches" enfants sont les **éléments** imbriqués et les "feuilles" sont le **contenu** des éléments.

Prenons par exemple ce document HTML&nbsp;:

```
<!doctype html>
<html lang="en">
 <head>
   <title>My first web page</title>
  </head>
 <body>
    <h1>Hello, world!</h1>
    <p>How are you?</p>
  </body>
</html>
```

Ce document peut être représenté comme une arborescence de noeuds&nbsp;:

<figure><img src="/images/node-tree-example-compressor.png" alt=""/></figure>
 
<h2>Ce que n'est pas le DOM</h2>

De l'exemple ci-dessus on pourrait conclure que le DOM est un mapping exact du document source HTML ou de ce que vous voyez dans votre DevTools. Cependant, il y a des différences. Pour bien comprendre ce qu'est le DOM, nous devons d'abord comprendre ce qu'il n'est **pas**.

<h3>Le DOM n'est pas votre HTML source</h3>

Bien que créé à partir du document source HTML, le DOM n'en est pas toujours l'exact reflet. Il peut en différer dans deux cas&nbsp;:

<h4>1. Lorsque le HTML n'est pas valide</h4>
    
Le DOM est une interface pour les documents HTML valides. Pendant le processus de création du DOM, le navigateur peut être amené à corriger des informations invalides.
    
Prenons ce document HTML par exemple :
    
```
<!doctype html>
<html>
Hello, world!
</html>
```

Il manque les éléments `<head>` et `<body>` à ce document, alors qu'ils sont requis dans un HTML valide. Si nous inspectons l'arborescence créée, nous pouvons constater que l'erreur a été corrigée&nbsp;:

<figure><img src="/images/corrected-html-compressor.png" alt=""/></figure>
    
<h4>2. Lorsque le DOM est modifié par JavaScript</h4>

En plus d'être une interface permettant de visualiser le contenu d'un document HTML, le DOM peut être modifié, ce qui en fait une ressource vivante.

Nous pouvons par exemple créer des noeuds supplémentaires via JavaScript.

```
var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
```

Le DOM sera mis à jour, mais bien entendu notre document source HTML restera inchangé.

<h3>Le DOM n'est pas ce que vous voyez dans le navigateur</h3>

Ce que vous voyez dans le viewport de votre navigateur c'est l'arbre de rendu qui, nous l'avons vu, est un mélange de DOM et de CSSOM. Ce qui distingue le DOM de l'arbre de rendu c'est que ce dernier ne comprend que ce qui sera "peint" à l'écran. De ce fait, il exclut les éléments visuellement cachés, par exemple ceux stylés `display: none`.

```
<!doctype html>
<html lang="en">
  <head></head>
  <body>
    <h1>Hello, world!</h1>
    <p style="display: none;">How are you?</p>
  </body>
</html>
```

Le DOM comprendra l'élément`<p>`:

<figure><img src="/images/dom-with-p-compressor.png" alt=""/></figure>

Cependant l'arbre de rendu —&nbsp;et donc ce qui est visible dans le viewport&nbsp;— ne comprendra pas cet élément.

<figure><img src="/images/rendertree-without-p-compressor.png" alt=""/></figure>

<h3>Le DOM n'est pas ce que vous voyez dans DevTools</h3>

Cette différence ne tient pas à grand chose car l'inspecteur d'éléments DevTools offre la meilleure approximation du DOM disponible dans le navigateur. Toutefois DevTools inclut des informations qui ne sont pas dans le DOM.

Le meilleur exemple en est [les pseudo-éléments CSS](/articles/les-pseudo-elements-css-before-et-after/) créées via les sélecteurs `::before` et `::after`. Ils font partie du CSSOM et de l'arbre de rendu mais techniquement ils n'appartiennent pas au DOM puisque celui-ci est construit à partir du seul document source HTML, qui ne comprend pas les styles appliqués aux éléments.

Bien que ne faisant pas partie du DOM, les pseudo-éléments apparaissent dans notre inspecteur DevTools&nbsp;:

<figure><img src="/images/Pseudo-element-in-devtools-inspector.png" alt=""/></figure>
    
C'est la raison pour laquelle les pseudo-éléments ne peuvent pas être ciblés par JavaScript, parce qu'ils ne font pas partie du DOM&nbsp;!
    
<h2>On récapitule</h2>

Le DOM est une interface vers un document HTML. Il est utilisé par les navigateurs dans une première étape pour déterminer ce qui peut être rendu à l'écran, et par JavaScript pour modifier le contenu, la structure ou le style de la page.

Bien que similaire à d'autres formes de documents source HTML, il en diffère en plusieurs points&nbsp;:

- son HTML est toujours valide
- c'est un modèle vivant qui peut être modifié par JavaScript
- il ne comprend pas de pseudo-éléments (p.ex. `::after`)
- il ne comprend pas d'élémens cachés (p.ex. via `display: none`)


Le DOM, c'est quoi exactement ?


L’[animation d’un SVG au moyen de CSS](/articles/animer-un-svg-avec-css/) est facile, cependant CSS ne peut pas animer toutes les propriétés SVG animables. Par exemple, les propriétés qui définissent la forme présente d’un élément ne peuvent être modifiées ou animées en CSS. Il est toutefois possible de le faire grâce à SMIL. Sara Soueidan en parle dans son remarquable [Guide des animations SVG (SMIL)](/articles/guide-des-animations-svg/) ici-même, mais je voudrais éclairer ce point plus précisément ici.

**Le plus important à retenir&nbsp;: les formes doivent avoir le même nombre de points**  
Autrement, l’animation ne marchera pas. La forme ne disparaîtra pas, rien de grave ne se produira, mais rien ne s’animera.

Il n’est pas toujours évident de savoir combien de points constituent une forme en regardant l’attribut `d` (dans le cas d’un `path`) ou `point` (dans le cas d’un polygone), le mieux est parfois de commencer avec une forme simple dans un programme d’édition vectorielle.

### 1. Commencer avec la forme la plus complexe

Dans cette démo, je vais partir d’une étoile, qui sera ma forme la plus compliquée, pour la morpher en _check_ de case à cocher (une “hirondelle”).

<figure><img src="/images/star.png" alt=""/></figure>

Gardez une copie de ce SVG, puis utilisez une autre version pour construire la forme suivante.

### 2. Construire la forme suivante avec les mêmes points

Déplacez les points pour obtenir la forme désirée.

<figure><img src="/images/star-illustrator-gif-compressor.gif" alt="dans illustrator, on déplace les points pour former une hirondelle"/></figure>

<figure><img src="/images/check-illustrator-gif.png" alt=""/></figure>

### 3. Utiliser la forme de départ dans le SVG lui-même

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

      </polygon>

    </svg>

### 4. Ajouter un élément d’animation vers la forme suivante

    //SVG
    <svg viewBox="0 0 194.6 185.1">

      <polygon fill="#FFD41D" points=" ... les points de la forme 1 ... ">

        <animate attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... " />

      </polygon>

    </svg>

Cette animation sera lancée immédiatement, il nous faut corriger cela.

### 5. Déclencher l’animation quand on le veut

SMIL permet de traiter les interactions telles que clics et hovers, tant que tout se passe à l’intérieur de SVG. Par exemple, vous pourriez lancer l’animation lorsqu’elle est cliquée&nbsp;:

    //SVG
    <polygon id="shape" points=" ... les points de la forme 1 ... ">

      <animate begin="shape.click" attributeName="points" dur="500ms" to=" ... les points de la forme 2 ... />

    </polygon>

Pas mal, mais un peu limité car il ne permet de traiter que les clics sur ce SVG précisément. Mais quid si cet élément fait partie d’un bouton et qu’on veut lancer l’animation lorsque c’est le bouton qui est cliqué&nbsp;?

Tout d’abord, donnons un ID à notre animation, afin de permettre à JavaScript de la retrouver, puis empêchons tout déclenchement intempestif&nbsp;:

    //SVG
    <animate id="animation-to-check" begin="indefinite" ... />

Nous avons maintenant référencé cette animation et nous pouvons la déclencher comme nous l’entendons&nbsp;:

    //JavaScript
    animationToCheck = document.getElementById("animation-to-check");

    // Lancez ceci sur un clic, ou de la façon que vous voulez
    // (voir démo ci-dessous)
    animationToCheck.beginElement();

### Démo

Cette démo contient en fait quatre animations&nbsp;: une pour morpher l’étoile en hirondelle, une pour modifier la couleur de la forme, et les mêmes dans l’animation inverse. Lorsqu’on clique sur le bouton, on vérifie d’abord l’état présent du bouton, puis on déclenche les animations appropriées.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_DpFfE" src="//codepen.io/chriscoyier/embed/DpFfE?height=200&amp;theme-id=light&amp;slug-hash=DpFfE&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="200" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/DpFfE/">
  Shape Morph Button</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>


Le morphing en SVG


L’installation des logiciels open source est souvent pénible, mais un processus d'installation un peu compliqué —&nbsp;même lorsqu'il semble nous éloigner du but (résoudre des problèmes au moyen dudit logiciel)&nbsp;— constitue une bonne opportunité d’apprivoiser l’un de nos principaux outils de travail&nbsp;: la ligne de commande.

La [ligne de commande](https://fr.wikipedia.org/wiki/Interface_en_ligne_de_commande) (_command line_) repousse pas mal de gens —&nbsp;elle est souvent considérée comme la technologie des hackers et des “sorciers de l’informatique”. La réalité n’est pas aussi cool, il s’agit en fait d’un ensemble d’outils ridiculement simples créés dans les années 70 par les employés de Bell (aujourd’hui AT&T) pour réaliser les tâches les plus basiques. C’est à peu près aussi “space-age” que votre four à micro-ondes.

Mais la ligne de commande est extrêmement utile et puissante, et vous donnera parfois l’impression de passer de la construction manuelle à la construction industrielle. Avec quelques concepts et quelques métaphores, nous allons essayer de jeter un peu de lumière dans les recoins les plus sombres de notre ligne de commande.

**Parmi ces concepts, l’un des plus importants est le Chemin d'Accès (_Path_)**.

De nombreux frameworks, préprocesseur CSS, bibliothèques JavaScript et autres outils de développement reposent sur Ruby ou sur Node.js pour leur installation sur votre machine. Bower est l’un de ces outils. Invariablement, ces outils vous conduiront à interagir avec le PATH —&nbsp;parce que le Chemin doit connaître l’ensemble des outils que vous installez pour votre environnement de développement, afin que votre ligne de commande fonctionne convenablement.

Plus vous utiliserez la ligne de commande et plus il y a de chances que vous rencontriez des problèmes avec le Chemin. Avant que vous ne perdiez trop de temps ou que vous ne vous en preniez à votre machine, passons en revue les bases de l’utilisation du Chemin.

<h2>Une humble petite variable</h2>

`$PATH`, comme le dénotent son préfixe $ et ses majuscules criardes, est une [variable d’environnement](https://fr.wikipedia.org/wiki/Variable_d%27environnement#.3CPATH.3E_pour_l.27emplacement_des_ex.C3.A9cutables) Unix. À l’intérieur de cette variable est enregistrée une liste de chemins de dossiers, séparés par des `:`, qui ressemble à ceci&nbsp;:

    /root/directory/binary:/root/other_directory/other_binary

Si vous êtes curieux de savoir quelles autres variables d’environnement existent dans votre système, vous pouvez taper `env` dans la ligne de commande. Faites _Enter_ et vous verrez la liste de toutes les variables d’environnement présentes.

Puisque `$PATH` est une variable, elle peut être modifiée comme vous le souhaitez, à la volée. Par exemple, vous pouvez taper ceci dans votre ligne de commande&nbsp;:

    $ export PATH=banana

Que fait cette commande ? Eh bien, après l’avoir tapée, essayez de lancer n’importe quelle commande basique (par exemple `ls` pour lister le contenu d’un dossier) et vous obtiendrez un message `-bash: ls: command not found` alors que `ls` fonctionnait jusqu’ici sans problème…

Ce sabotage sournois nous aide à comprendre que sans contenu dans notre `$PATH` nous nous retrouvons… comme des bananes.

Mais pourquoi ? Eh bien parce que comme le font de nombreux chemins de chargement (y compris dans les langages de programmation et dans les frameworks comme Rails), ce Path détermine ce qui peut être exécuté dans votre ligne de commande. Si cette dernière ne peut rien trouver qui corresponde au nom que vous avez entré, elle ne peut pas l’exécuter.

Ah ! à propos : il suffit de quitter votre application de ligne de commande pour restaurer toutes vos commandes. C’était un sabotage temporaire. Mais faites attention de ne jamais sauvegarder ce genre de blagues dans votre `~/.bash_profile`, ça pourrait mal se terminer.

<h2>Le conte des mille et un binaires</h2>

Dans Unix, certains programmes exécutables sont appelés binaires (_binaries_). Honnêtement, ce n’est pas un nom génial, il se focalise sur leur format plutôt que sur leur fonction. Quand vous écrivez un programme Unix, vous avez parfois besoin de compiler la source avant de pouvoir l’exécuter. Ce processus de compilation est ce qui crée le binaire. Plutôt que d’utiliser du texte (comme votre code source), ces fichiers utilisent un format binaire pour faciliter le traitement des instructions par les ordinateurs.

Unix comporte de nombreux dossiers dans lesquels enregistrer les binaires. Vous pouvez voir quel dossier est le dossier par défaut de stockage des binaires dans le fichier `/etc/paths`, pour cela il suffit d’utiliser la commande `cat` qui permet d’imprimer le contenu d’un fichier&nbsp;:

    $ cat /etc/paths
    /usr/bin
    /bin
    /usr/sbin
    /sbin
    /usr/local/bin

Ce fichier contient un dossier par ligne. Les chemins sont listés dans un ordre signifiant. Lorsqu’un binaire est trouvé dans un chemin, il est chargé. Si un binaire portant le même nom est trouvé par la suite dans un autre chemin, il est ignoré. Autrement dit, les chemins listés les premiers prennent le pas sur ceux qui les suivent.

Voilà pourquoi il est si commun de rencontrer des problèmes lorsqu’on essaie d’installer un binaire pour quelque chose qui existe déjà dans notre système. Dans le cas d’OS&nbsp;X, si vous essayez d’installer une version de Git différente de celle déjà présente dans le système, vous serez confronté à ce genre de problème. Et c’est bien dommage, parce que Git 2.0 est vraiment super.

Si je fais `cd` (_change directory_) dans `/usr/bin` —&nbsp;un dossier courant pour stocker les binaires&nbsp;— et que je fais `ls` j’aurai plus de 1.000 résultats. Ça ne m’aide pas beaucoup. Ceci dit, si j’utilise [grep](http://fr.wikipedia.org/wiki/Grep) avec `ls | grep git`, je peux filtrer les résultats de la commande `ls` en ne conservant que ceux qui contiennent “git”.

    $ ls | grep git
    git
    git-cvsserver
    git-receive-pack
    git-shell
    git-upload-archive
    git-upload-pack

...et bien sûr il y a un binaire pour Git à l’intérieur de `/usr/bin`. Une installation propre d’OS&nbsp;X devrait retourner `/usr/bin/git` lorsque vous faites `which git`&nbsp;:

    $ which git
    /usr/local/bin/git

Alors pourquoi mon résultat est-il différent ? En utilisant l’option `-a`, nous pouvons avoir une idée de ce qui se passe&nbsp;:

    $ which -a git
    /usr/bin/git
    /usr/local/bin/git

Ceci me dit qu’il y a _deux_ versions de Git sur mon système. Mais seule la première version est utilisée quant j’exécute les commandes `git` dans ma ligne de commande, la seconde est ignorée.

<h2>Changer de chemins</h2>

J’ai installé ma propre version de Git à l’aide d’un package manager pour OS&nbsp;X appelé [Homebrew](http://brew.sh/), parce que j’aime bien pouvoir contrôler les outils que j’utilise au quotidien et les mettre à jour quand je le veux. Je pourrais certes mettre à jour le Git installé dans le système, mais je n’ai aucune idée des applications ou des autres binaires qui en dépendent.

Nous avons vu que les fichiers binaires sont sélectionnés dans l’ordre où ils apparaissent, alors pourquoi ne changerions-nous pas cet ordre&nbsp;?

À l’intérieur du fichier `/etc/paths`, je peux voir que le dossier `/usr/local/bin`, dans lequel se trouve ma version de Git installée avec Homebrew, arrive en dernier. Cela signifie que le binaire git qui se trouve dans `/usr/bin` aura la priorité et mon git sera ignoré. Il faut changer cela.

Pour ce faire, vous pourriez essayer de modifier l’ordre dans `/etc/paths` de façon à ce qu’il corresponde à vos besoins, en mettant `/usr/local/bin` tout en haut, et la version Homebrew serait chargée en premier. Mais malgré le nombre de fois où vous verrez ce conseil répété dans les discussions sur [Stack Overflow](http://stackoverflow.com/), ne le faites pas. _Jamais_. Les configurations enregistrées dans `/etc/` affectent le système tout entier. Elles ne sont pas censées être modifiées par les utilisateurs individuels (même si vous êtes le seul utilisateur de la machine), et vous pourriez créer des problèmes inattendus en bricolant de la sorte. Par exemple, certains services utilisés par OS&nbsp;X pourraient reposer sur l’ordre original de `/etc/paths`.

C’est le `$PATH` que vous devez modifier, dans _votre_ environnement, en utilisant _votre_ `.bash_profile` —&nbsp;celui qui est enregistré dans `/Users/votrenomdutilisateur/.bash_profile`.

Pour vous assurer que `/usr/local/bin` soit recherché en premier, il suffit d’inclure ce qui suit dans votre `.bash_profile` (par exemple pour moi dans `/Users/olivierlacan/.bash_profile`)&nbsp;:

    export PATH=/usr/local/bin:$PATH

Cette ligne exporte une nouvelle variable d’environnement `$PATH` en imprimant celle qui existe actuellement et en plaçant juste avant le chemin `/usr/local/bin`. Après avoir enregistré votre `~/.bash_profile` et redémarré votre ligne de commande, voici ce que vous devriez voir lorsque vous faite `echo` sur le `$PATH`&nbsp;:

    $ echo $PATH
    /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin

Comme vous pouvez le voir, `/usr/local/bin` est mentionné deux fois dans le `$PATH`, et ce n’est pas un problème. Comme il est mentionné en premier, tous les binaires chargés à ce moment seront ignorés lorsqu’ils sont rencontrés par la suite. Honnêtement, j’aimerais qu’il existe une façon simple et sûre de changer l’ordre des chemins, mais la plupart des solutions que je connais sont un peu trop complexes.

Maintenant que vous avez changé le `$PATH`, vous pouvez vérifier que le bon binaire est appelé quand vous utilisez la commande `git`&nbsp;:

    $ which git
    /usr/local/bin/git

    $ git --version
    git version 2.0.0
    /usr/bin/git --version git version 1.8.5.2 (Apple Git-48)

Et voilà. Git 2.0.0 (la version installée par Homebrew) répond maintenant à la commande `git`, et la version installée par Apple est reléguée à l’arrière. Si vous préférez ne pas utiliser git 2.0.0, il suffit de le désinstaller et la version par défaut prendra le relais.

<h2>Protégez votre chemin</h2>

Tout un tas de services pour les développeurs et les designers injecteront automatiquement du code dans votre `.bash_profile` lors de leur installation, souvent sans même le mentionner. Si vous trouvez des chemins bizarres listés dans votre profil, cela peut expliquer que le chargement d’une nouvelle session (ce qui arrive lorsque vous ouvrez une nouvelle fenêtre ou onglet de la ligne de commande) prenne plus de temps que prévu&nbsp;: un `$PATH` boursoufflé peut prendre du temps à se charger.

Voici mon chemin aujourd’hui&nbsp;:

    /Users/olivierlacan/.rbenv/shims:/Users/olivierlacan/.rbenv/bin:
    /usr/local/bin:/usr/local/heroku/bin:/usr/bin:/bin:/usr/sbin:
    /sbin:/usr/local/bin:/opt/X11/bin:/usr/local/MacGPG2/bin

C’est un peu dur à lire, alors j’ai tendance à subdiviser l’affichage en lignes distinctes. C’est facile à faire avec la commande `tr` (_traduire_ les caractères&nbsp;: les `:` sont traduits en `\n`, c’est à dire en retour à la ligne)&nbsp;:

    $ echo $PATH | tr ':' '\n'
    /Users/olivierlacan/.rbenv/shims
    /Users/olivierlacan/.rbenv/bin
    /usr/local/bin
    /usr/local/heroku/bin
    /usr/bin
    /bin
    /usr/sbin
    /sbin
    /usr/local/bin
    /opt/X11/bin
    /usr/local/MacGPG2/bin

Cela fait beaucoup en effet, et c’est bien plus simple à lire verticalement. Essayez sur votre machine, et si vous ne savez pas pourquoi une de ces lignes est dans votre `$PATH`, tentez de savoir pourquoi.

Maintenant que vous connaissez votre Chemin, à quoi il ressemble lorsqu’il est propre, comment le modifier comme il faut, et comment vérifier qu’il correspond à vos outils, il y a des chances que vous ne passerez plus des heures à retrouver votre chemin&nbsp;: celui que vous utilisez pour construire des choses pour les autres.


Le $Path vers la lumière


Si vous avez commencé à vous attaquer à la mise en page CSS, vous utilisez probablement les _floats_ comme moyen essentiel de mise en forme de vos pages. Peut-être avez-vous commencé à expérimenter quelques techniques du futur, avec l'espoir que les navigateurs seront bientôt compatibles.

Mais une technique de mise en page CSS qui est là pour durer est le positionnement CSS, c'est à dire l'utilisation de la propriété `position`. Dans cet article, je passerai en revue le positionnement CSS en détail et j'espère que vous en retirerez quelques options supplémentaires pour votre design.

## Positionnement statique

Commençons par les élément HTML positionnés de façon statique&nbsp;:

    .exemple {
    	position: static;
    }

Dans la plupart des cas, il est inutile de le mentionner, `static` étant la valeur par défaut de la propriété `position`. Cela signifie que si vous ne déclarez pas de valeur de position sur cet élément, il sera considéré comme &ldquo;statique&rdquo;. Que signifie cette valeur en termes de comportement de l'élément&nbsp;?

Selon les [spécifications](http://dev.w3.org/csswg/css-position/) de W3C, un élément positionné de manière statique est une &ldquo;boîte normale&rdquo;, positionnée dans ce qu'on appelle un flux normal. Cela signifie qu'un élément statique sera positionné en fonction de son rang par rapport aux autres éléments, dans un flux normal, le changement de son comportement dépendant de sa nature [block ou inline](/articles/la-difference-entre-block-et-inline). D'autres facteurs peuvent aussi affecter la façon dont un élément statique se comporte mais en général ce comportement est aussi simple que possible.

## Positionnement relatif

Une autre valeur possible de la propriété `position` :

    .exemple {
    	position: relative;
    }

En quoi est-elle différente de la valeur `static`&nbsp;? Un élément positionné de manière relative se comporte de la même façon qu'un élément statique, sauf qu'il est maintenant dépendant des valeurs de _quatre autres propriétés CSS_. Considérons l'exemple suivant&nbsp;:

    .box1 {
    	width: 100px;
    	height: 100px;
    	background: blue;
    }

    .box2 {
    	width: 100px;
    	height: 100px;
    	background: green;
    	border: yellow solid;
    	position: relative;
    	top: 20px;
    	left: 20px;
    }

    .box3 {
    	width: 100px;
    	height: 100px;
    	background: red;
    }

    .box4 {
    	width: 100px;
    	height: 100px;
    	background: pink;
    }

Nous supposons que ces quatre boîtes sont les seuls éléments de la page, comment vont-ils se comporter&nbsp;? Eh bien, d'abord ils seront disposés sur la page dans l'ordre dans lequel ils apparaissent dans votre HTML, chaque boîte sur une nouvelle ligne. Mais la deuxième boîte (la verte avec une bordure jaune) sera décalée par rapport à sa place originale à cause des déclarations `top` et `left`.

La deuxième boîte est donc décalée de 20px à partir du haut et de 20px à partir de la gauche par rapport à sa position originale. Vous obtiendriez la même chose en ajoutant une `margin-top` et une `margin-left` de 20px -&nbsp;mais avec une différence significative&nbsp;: décaler la position à l'aide de `top`, `left`, `bottom` ou `right` n'affecte pas le flux des éléments qui l'entourent. Voici à quoi cela ressemble, et pour mieux comprendre vous pouvez jouer avec cette [petite démo](http://jsbin.com/idefal/1/edit)&nbsp;:

<figure><img src="/images/position_relative-compressor.jpeg" alt="exemple de positionnement relatif: la deuxième boîte est décalée par rapport aux autres boîtes qui n'ont pas bougé"/></figure>

Comme on le voit, un positionnement relatif peut entraîner un chevauchement. La place originale de l'élément est respectée, mais son décalage ne modifiera pas le positionnement des autres boîtes.

## Positionnement absolu

La troisième valeur que vous pouvez utiliser pour la propriété `position`&nbsp;:

    .exemple {
    	position: absolute;
    }

Un élément positionné absolument est complètement retiré du flux normal du document et, tout comme `position: relative` il est sujet aux décalages horizontaux et verticaux impliqués par l'utilisation de `top`, `left`, `bottom` et `right`.

La différence principale tient à son retrait du flux. Cela signifie que l'espace occupé à l'origine par cet élément ne sera plus respecté par les éléments qui l'entourent. Ceux-ci se comporteront comme s'il n'existait plus.

### Contextes de positionnement

Lorsque vous décalez un élément positionné de manière relative, les décalages sont relatifs à la place originale de l'élément dans le flux normal. Avec un élément positionné de manière absolue, les décalages sont relatifs au viewport du navigateur ou, pour simplifier, à la fenêtre, ou au corps du document.

Mais le contexte de positionnement d'un élément positionné absolument peut être modifié en ajoutant `position: relative` à l'élément parent, ce qui crée un nouveau contexte de positionnement. Si cela vous paraît obscur, voici une [démo](http://jsbin.com/udopih/1/edit).

Et voici à quoi cela ressemble :

<figure><img src="/images/position_absolute-compressor.jpeg" alt="exemple de positionnement absolu: la deuxième boîte est réglée sur positionnement absolu et elle est décalée par rapport à son élément conteneur"/></figure>

L'élément `body` a une bordure noire et l'élément `.container` une bordure orange. On voit que la boîte verte (positionnée en absolu) est décalée à l'intérieur du contexte de son élément parent `.container`, lui-même positionné de manière relative.

Remarquez bien ce qui se passe [si nous supprimons la déclaration](http://jsbin.com/otakoq/1/edit) `position: relative` de l'élément &ldquo;container&rdquo;&nbsp;:

<figure><img src="/images/position_viewport-compressor.jpeg" alt="l'élément est maintenant positionné par rapport à la fenêtre et non plus par rapport à son élément parent"/></figure>

Du fait de la suppression du contexte de positionnement explicite, la boîte verte est maintenant décalée _par rapport au viewport_ (contexte de positionnement implicite) et, comme nous l'avons déjà dit, aucun des éléments environnants n'est affecté par le flux de la boîte verte soustraite au flux normal.

## Positionnement fixe

Voici l'option de positionnement suivante :

    .exemple {
    	position: fixed;
    }

Un élément en positionnement fixe appartient, selon les spécifications de W3C, à la catégorie des éléments en positionnement absolu. Leurs comportements sont en effet très similaires, avec toutefois deux différences essentielles&nbsp;: d'abord le contexte de positionnement est _toujours_ le viewport, le contexte ne changera donc pas si l'on ajoute `position: relative` à l'élément parent. Ensuite, les éléments en position fixe ne bougent plus lorsque le document est scrollé. Regardez l'image ci-dessous, tirée du blog de Treehouse&nbsp;:

<figure><img src="/images/position_fixed-compressor.jpeg" alt="exemple de positionnement fixe"/></figure>

Au sommet de la page, un message promotionnel est en position fixe, il reste là même quand vous faites défiler la page.

L'utilisation conjointe du positionnement fixe et de [z-index](/articles/comment-fonctionne-z-index) vous offre des possibilités de mise en page uniques.

## Nouvelles valeurs en CSS3

Les quatre valeurs décrites ci-dessus sont celles que vous utiliserez le plus souvent avec la propriété `position`. Sachez cependant que le spec CSS3 comprend deux nouvelles valeurs&nbsp;: `position: center` et `position: page`.

Je n'entrerai pas dans les détails, car à ma connaissance ces valeurs ne sont actuellement compatibles avec aucun navigateur.

## Le présent et l'avenir du positionnement CSS

Il y a des tonnes d'articles détaillés sur le positionnement, n'hésitez pas à vous y référer si vous voulez mieux comprendre toutes ces techniques.

Dans le futur, lorsque des techniques comme [Flexbox](/articles/flexbox-guide-complet), [CSS Grid Layout](/articles/css-grid-layout-guide-complet) et d'autres nouveaux modules seront plus universellement compatibles, il est probable que vous aurez moins recours au positionnement CSS.


Le positionnement CSS


95% de l’information sur le web est écrite. En bonne logique tout designer web devrait avoir de solides connaissances dans la principale discipline consacrée à donner forme à l’information écrite, à savoir la Typographie.

En 1969, le célèbre typographe suisse [Emil Ruder](http://fr.wikipedia.org/wiki/Emil_Ruder) écrivait au sujet des matériaux imprimés de son époque ce qu'on pourrait dire de nos sites web contemporains&nbsp;:

<blockquote cite=""><p>De nos jours, nous sommes inondés par un tel flot d'information imprimée que la valeur du travail individuel a été dépréciée, nos contemporains harassés n'étant plus à même de suivre tout ce qui est imprimé aujourd’hui. C’est la tâche du typographe de diviser, d’organiser et d’interpréter cette masse d'information imprimée pour faire en sorte que le lecteur trouve ce qui l’intéresse.</p>
<p><cite><a href="http://fr.wikipedia.org/wiki/Emil_Ruder">Emil Ruder</a></cite></p></blockquote>

Avec un peu d’imagination (remplacez imprimé par web), cela ressemble à la description de poste d’un designer de l’information. C’est le rôle d’un tel designer de &ldquo;diviser et d’organiser et d’interpréter cette masse d'information imprimée pour faire en sorte que le lecteur trouve ce qui l’intéresse&rdquo;.

## Micro-Typographie vs Macro-Typographie

Les typographes distinguent la macro-typographie et la micro-typographie. La micro typographie traite des aspects détaillés des caractères et de l'espacement, en se concentrant sur la lisibilité du texte :

- Le suivi et la largeur des glyphes
- Protrusion, crénage de marge ou [exdentation](https://en.wikipedia.org/wiki/Hanging_punctuation)
- Augmentation ou diminution ponctuelle de l'espacement des mots
- Le découpage des mots par l'espacement des mots ou d'autres espaces blancs.

Alors que la micro-typographie est difficile à contrôler dans un support _liquide_ et sans format comme le Web, la macro-typographie couvre de nombreux aspects de ce que nous appelons aujourd'hui la conception Web&nbsp;:

- Le format : Les dimensions de base dans lesquelles nous plaçons les caractères
- La grille : La taille des caractères, la proportion des colonnes
- La hiérarchie : Comment les différentes tailles de caractères et le formatage sont liés les uns aux autres.

Ainsi, la macro-typographie (structure générale d’un texte) par contraste avec la micro-typographie (aspects détaillés des caractères et de l’espacement des mots) couvre beaucoup d’aspects du &ldquo;design de l’information&rdquo;.

Aujourd’hui, les designers de l’information font pour ainsi dire les tâches que réalisaient les typographes il y a 30 ans&nbsp;:

> <i>La typographie a un objectif simple, qui est de transmettre l’information par écrit. Il n’existe pas d’argument ou de considération qui puisse absoudre la typographie de ce devoir. Un document imprimé qui ne peut être lu est un produit sans objet</i>.

Optimiser la typographie consiste à optimiser la lisibilité, l’accessibilité, l’usabilité, l’équilibre graphique général. Organiser des blocs de textes et les combiner avec des images, n’est-ce pas ce font que les graphistes, les spécialistes de l’usabilité, les architectes de l’information&nbsp;? Alors pourquoi est-ce un sujet aussi négligé&nbsp;?

## Trop peu de polices ? Une résolution trop faible ?

Le principal argument –&nbsp;ou la principale récrimination&nbsp;– contre la discipline typographique en ligne est qu’il y a trop peu de polices de caractères disponibles. Le deuxième argument est que la résolution de l’écran est trop faible, ce qui rend difficile la lecture d’un texte pixélisé ou de polices anticrénelées.

Le premier argument est dénué de pertinence&nbsp;: à l’époque de la Renaissance italienne, les typographes n’avaient qu’une seule fonte pour travailler, et pourtant cette période a produit quelques-unes des plus belles réalisations typographiques&nbsp;:

<figure><img src="/images/garamond-specimen-compressor.jpeg" alt="une magnifique typographie"/></figure>

Le typographe ne devrait pas trop s’en faire quant au choix de polices dont il dispose. En fait, ce choix ne devrait pas être sa préoccupation principale. Il devrait utiliser ce qui est disponible et faire au mieux.

## Choisir une police n’est pas de la typographie

Le second argument ne vaut pas mieux. Au commencement de l’imprimerie, la qualité des caractères d’impression était bien pire que ce que nous voyons sur les écrans actuels. En outre, si elles sont utilisées professionnellement, les polices numériques sont tout à fait lisibles.

Le design d’information ne consiste pas à utiliser de bonnes polices mais à utiliser une bonne typographie -&nbsp;ce qui est très différent. N’importe qui peut utiliser des polices, quelques-uns savent en choisir de bonnes, mais rares sont ceux qui maîtrisent la typographie.

## Considérez le texte comme une interface utilisateur

C’est vrai, la diversité de rendu des polices selon les navigateurs et les plateformes est agaçante et, oui, les problèmes de résolution rendent toute concentration problématique au delà de cinq minutes. Mais enfin, cela fait partie du travail d’un designer de rendre les textes faciles et agréables à lire sur la plupart des navigateurs et des plateformes. Un interlignage correct, un bon espacement des caractères et des mots, des espaces blancs et l’utilisation parcimonieuse de la couleur, tout ceci aide à la lisibilité. Mais ce n’est pas tout. Un grand designer web sait comment travailler avec un texte, pas seulement en tant que contenu mais aussi comme [une interface utilisateur](http://www.cameronmoll.com/archives/001266.html). Jetez un coup d’œil au site de [Khoi Vinh](http://www.subtraction.com), et vous comprendrez ce que je veux dire (<span aria-hidden="true" data-icon="&#9758;"></span> _NdT: la nouvelle version du site est encore plus parlante&nbsp;!_)&nbsp;:

<figure><img src="/images/koih-compressor.gif" alt="Le site de Khoi Vinh"/></figure>

Des exemples plus célèbres de sites [non ornementaux](http://fr.wikipedia.org/wiki/Ornement_et_Crime) qui traitent le texte comme une interface sont&nbsp;: [Google](http://www.google.com), [Ebay](http://www.ebay.fr), [Craigslist](http://www.craigslist.fr), [Youtube](http://www.youtube.com), [Flickr](http://www.flickr.com), [Digg](http://digg.com), [Reddit](http://www.reddit.com), [Delicious](https://delicious.com). Contrôler la typographie n’est pas seulement une nécessité de base du design, savoir comment traiter un texte comme une interface utilisateur est un facteur-clé de succès pour un site web. Ceux qui réussissent ont su créer à la fois une interface simple ET une identité forte. Mais c’est un autre sujet.

---

#### Suggestions de lectures&nbsp;:

**Robert Bringhurst** [The Elements of Typographic Style](https://www.amazon.com/gp/product/0881792128/ref=as_li_tl?ie=UTF8&tag=informationar-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0881792128&linkId=a7034de643a3a98ca8083ac9a22e6cf3) : le célèbre typographe Robert Bringhurst apporte de la clarté à l'art de la typographie avec ce guide de style magistral. L'endroit idéal pour commencer votre voyage dans les trous de lapin de la typographie.  
**Emil Ruder**, [Typographie](http://www.amazon.fr/Typographie-Emil-Ruder/dp/3721200438/ref=sr_1_1?s=books&ie=UTF8&qid=1375821709&sr=1-1&keywords=emil+ruder)&nbsp;: une bible pour des générations de typographes et de graphistes qui y ont appris les fondamentaux. Ruder, l'un des grands typographes du XXe siècle était un pionnier. Il abandonna les règles conventionnelles de sa discipline et les remplaça par de nouvelles règles qui satisfaisaient aux exigences de la nouvelle typographie.  
**Kimberly Elam**, [Grid Systems : Principles of Organizing Type](http://www.amazon.com/o/ASIN/1568984650) (en anglais)&nbsp;: les systèmes de grilles sont le fondement de tout design typographique, et pourtant ils passent souvent pour des solutions rigides et convenues. Peu de designers comprennent réellement la complexité et les richesses potentielles de la composition à partir de grilles (éventuellement subverties...)  
**Muller-Brockmann**, [Grid Systems : A visual communication manual for graphic designers, typographers and three dimensional designers](http://www.amazon.com/Systems-Graphic-Design-Josef-Muller-Brockmann/dp/3721201450/sr=1-2/qid=1162128429?ie=UTF8&s=books) (en anglais et allemand). Par un professionnel pour les professionnels, voici l'ouvrage définitif sur l'utilisation de systèmes de grilles pour les graphistes. Bien qu'écrite en 1961, cette interprétation est toujours utile aujourd'hui, même pour le design assisté par ordinateur.  
**Gerrit Noordzij**, [The Stroke: Theory of Writing](https://www.amazon.fr/gp/product/0907259308/ref=as_li_tl?ie=UTF8&tag=informationar-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=0907259308&linkId=956f8abcec1264b9629dd257c98d52b8), The Stroke propose une véritable théorie de l'écriture, c'est-à-dire des concepts qui se cachent derrière les lettres sur la page, qu'elles soient écrites au stylo, au crayon ou au pinceau. The Stroke ne s'intéresse pas à la calligraphie d'art et aux belles formes, c'est une description du phénomène des lettres et de la manière dont elles sont réalisées dans l'écriture. Partant de principes de base, Gerrid Noordzij commence par l'espace blanc qui crée la définition en entourant les lettres. Puis, à l'aide de concepts géométriques simples, il décrit dans les moindres détails comment les traits de l'écriture peuvent être formés.


Le web, 95% de typographie


Il existe bien des façons de sélectionner des éléments en CSS. La plus basique est la sélection par nom de balise, comme `p { }`. Presque tout ce qui est plus spécifique qu'un sélecteur de balise utilise des [attributs](https://developer.mozilla.org/fr/docs/Web/HTML/Attributes) —&nbsp;`class` et `id` permettent tous deux de sélectionner ces attributs sur les éléments HTML. Mais la classe et l'ID ne sont pas les seuls attributs que les développeurs peuvent choisir. Nous pouvons utiliser n'importe quel **attribut** d'un élément comme sélecteur.

La sélection d'attributs a une syntaxe spéciale. En voici un exemple :

```css
a[href="https://css-tricks.com"]
{
  color: #e18728;
}
```

Il s'agit d'un **sélecteur à correspondance exacte** qui ne sélectionnera que les liens dont la valeur exacte de l'attribut `href` est "https://css-tricks.com".

## Les sept différents types

Les sélecteurs d'attributs sont sensibles à la casse par défaut (voir [correspondance insensible à la casse ci-dessous](#caseinsensitive)), et sont écrits entre crochets `[]`.

Il existe sept types différents de correspondances avec un sélecteur d'attribut, et la syntaxe est différente pour chacun. Les sélecteurs d'attributs les plus complexes reposent sur la syntaxe du sélecteur de correspondance exacte&nbsp;: ils commencent tous par le nom de l'attribut et se terminent par un signe égal suivi de la ou des valeurs de l'attribut, généralement entre guillemets. Ce qui se trouve entre le nom de l'attribut et le signe égal est ce qui fait la différence entre les sélecteurs.

```css
[data-value] {
  /* L'attribut existe */
}

[data-value='foo'] {
  /* L'attribut a cette valeur exacte */
}

[data-value*='foo'] {
  /* La valeur de l'attribut contient cette valeur quelque part */
}

[data-value~='foo'] {
  /* L'attribut contient cette valeur quelque part dans une liste séparée par un espace */
}

[data-value^='foo'] {
  /* La valeur de l'attribut commence par ceci */
}

[data-value|='foo'] {
  /* La valeur de l'attribut commence par ceci dans une liste séparée par un tiret */
}

[data-value$='foo'] {
  /* La valeur de l'attribut se termine par ceci */
}
```

**La valeur contient** : la valeur de l'attribut contient un terme comme seule valeur, une valeur dans une liste de valeurs ou comme partie d'une autre valeur. Pour utiliser ce sélecteur, ajoutez un astérisque (_) avant le signe égal. Par exemple, `img[alt_="art"]` sélectionnera les images dont le texte alt est "art abstrait" et "Le départ de Nimrod", car la valeur "art" se trouve dans le mot "départ".

**La valeur est dans une liste séparée par un espace**&nbsp;: la valeur est soit la seule valeur de l'attribut, soit une valeur entière dans un ensemble de valeurs séparées par un espace. Contrairement au sélecteur "contains", ce sélecteur ne recherchera pas la valeur sous forme de fragment de mot. Pour utiliser ce sélecteur, ajoutez un tilde (`~`) avant le signe égal. Par exemple, `img[alt~="art"]` sélectionnera les images avec le texte alt "art abstrait" et "exposition d'art", mais pas "Le départ de Nimrod" (que le sélecteur "contains" sélectionnerait).

**Valeur commence par** : la valeur de l'attribut commence par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un caret (`^`) avant le signe égal. N'oubliez pas que la sensibilité à la casse compte. Par exemple, `img[alt^="art"]` sélectionnera les images avec le texte alt "exposition d'art" et "motif artistique", mais pas une image avec le texte alt "Arthur Miller" car "Arthur" commence par une majuscule.

**La valeur est la première dans une liste séparée par des tirets** : Ce sélecteur est très similaire au sélecteur "commence par". Ici, le sélecteur correspond à une valeur qui est soit la seule valeur, soit la première d'une liste de valeurs séparées par un tiret. Pour utiliser ce sélecteur, ajoutez un caractère pipe (`|`) (_tuyau_)avant le signe égal. Par exemple, `li[data-years|="1900"]` sélectionnera les éléments de liste dont la valeur de data-years est "1900-2000", mais pas l'élément de liste dont la valeur de data-years est "1800-1900".

**Valeur se terminant par** : la valeur de l'attribut se termine par le terme sélectionné. Pour utiliser ce sélecteur, ajoutez un signe dollar (`$`) avant le signe égal. Par exemple, `a[href$="pdf"]` sélectionne tous les liens qui se terminent par .pdf.

<p class="is-style-explanation">Une remarque sur les guillemets : Dans certaines circonstances, vous pouvez ne pas utiliser de guillemets autour de la valeur, mais les règles de sélection sans guillemets sont incohérentes d'un navigateur à l'autre. Les guillemets fonctionnent toujours, donc si vous vous en tenez à leur utilisation, vous pouvez être sûr que votre sélecteur fonctionnera.</p><br/>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_OPobRY" src="//codepen.io/css-tricks/embed/OPobRY?height=600&amp;theme-id=light&amp;slug-hash=OPobRY&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="600" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/OPobRY">
  Attribute Selectors</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

Fait amusant : les valeurs sont traitées comme des chaînes de caractères, vous n'avez donc pas besoin d'effectuer un échappement fantaisiste des caractères pour les faire correspondre, comme vous le feriez si vous utilisiez des caractères inhabituels dans un sélecteur de classe ou d'ID.

```css
[class='(╯°□°）╯︵ ┻━┻'] {
  couleur: rouge;
  font-weight: bold;
}
```

<h2 id="caseinsensitive">Correspondance insensible à la casse</h2>

Les sélecteurs d'attributs insensibles à la casse font partie de la spécification <a href="https://www.w3.org/TR/selectors-4/#attribute-case">Selectors Level 4</a> du groupe de travail CSS. Comme mentionné ci-dessus, les chaînes de valeur d'attribut sont par défaut sensibles à la casse, mais peuvent être modifiées en insensibles à la casse en ajoutant `i` juste avant le crochet fermant&nbsp;:

```css
[attribute='value' i] {
  /* Les styles ici s'appliqueront aux éléments avec :
    attribut="valeur"
    attribut="VaLuE"
    attribut="VALUE"
    ...etc
  */
}
```

La correspondance insensible à la casse pourrait être vraiment pratique pour cibler les attributs contenant du texte imprévisible, écrit par les humains. Par exemple, supposons que vous conceviez une bulle de dialogue sur une application de chat et que vous souhaitiez ajouter une "main agitée" à tous les messages contenant le texte "hello" sous une forme ou une autre. Vous pourriez le faire rien qu'avec CSS, en utilisant une correspondance insensible à la casse pour attraper toutes les variations possibles&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ydpvGQ" src="//codepen.io/css-tricks/embed/ydpvGQ?height=300&amp;theme-id=light&amp;slug-hash=ydpvGQ&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/andyadams/pen/ydpvGQ">
  Case-insensitive CSS attribute matching</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Combiner tout cela

Vous pouvez combiner un sélecteur d'attribut avec d'autres sélecteurs, tels que tag, class ou ID.

```css
div[attribute='value'] {
  /* règles de style ici */
}

.module[attribute='value'] {
  /* règles de style ici */
}

#header[attribute='value'] {
  /* règles de style ici */
}
```

Vous pouvez même combiner plusieurs sélecteurs d'attributs. Cet exemple sélectionne les images dont le texte alternatif comprend le mot "personne" comme seule valeur ou une valeur dans une liste séparée par un espace, et une valeur src qui comprend la valeur "lorem"&nbsp;:

```css
img[alt~='person'][src*='lorem'] {
  /* règles de style ici */
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_jEvVVb" src="//codepen.io/css-tricks/embed/jEvVVb?height=750&amp;theme-id=light&amp;slug-hash=jEvVVb&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="750" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/jEvVVb">
  Combined Attributes and Attribute-Only Selection</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Sélecteurs d'attributs en JavaScript et jQuery

Les sélecteurs d'attributs peuvent être utilisés dans jQuery comme tout autre sélecteur CSS. En JavaScript, vous pouvez utiliser les sélecteurs d'attributs avec `document.querySelector()` et `document.querySelectorAll()`.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_XJPNNg" src="//codepen.io/css-tricks/embed/XJPNNg?height=750&amp;theme-id=light&amp;slug-hash=XJPNNg&amp;user=css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="750" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/XJPNNg">Attribute Selectors in JS and jQuery</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


Attributs


Même si la plupart des designers utilisent un logiciel de création graphique du type Adobe Illustrator ou Sketch pour créer des formes en <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><link itemprop="url" href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics"/><span itemprop="name">[SVG](/tags/svg/)</span></span>, le fait de connaître la syntaxe de base de SVG permet de créer plus facilement et plus précisément des éléments tels que lignes, cercles et rectangles —&nbsp;et parfois, encoder ces éléments à la main est plus rapide et plus efficace qu’un éditeur visuel.

<h2>Cercles</h2>

Regardons par exemple le tracé basique d’un cercle. Pour faire simple, je laisserai pour un prochain article les complications des unités et de leurs variations.

Vous pourriez écrire ce code à l’intérieur d’une balise `<body>` sur une page HTML, ou bien comme un document séparé, enregistré avec l’extension .svg —&nbsp;dans les deux cas le résultat serait visible dans un navigateur.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" />
    </svg>

…et le résultat est le suivant :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><circle cx="100" cy="100" r="80" fill="tomato" /></svg>

Quelques points à noter à ce stade :

1. L’élément `circle` doit être “auto-fermant”
2. Le cercle est positionné à partir de son centre (cx pour “centre, axe des x”, cy pour “centre, axe des y”)
3. La position du centre du cercle est mesurée à partir du coin supérieur gauche de l’élément SVG
4. Le rayon (r) du cercle est, par défaut, mesuré dans la même unité que le reste
5. Si l’un de ces attributs n’est pas mentionné, il est supposé être égal à 0 (et noir pour les attributs de présentation impliquant la couleur)
6. le remplissage (_fill_) du cercle peut être spécifié via [le système de couleur CSS](/tags/couleur/) que vous préférez.

Comme les rectangles et les autres éléments SVG, un cercle SVG est constitué de deux “parties”, un remplissage interne et un tracé (_stroke_) externe.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
      <circle cx="100" cy="100" r="80" fill="red" stroke-width="15" stroke="black" />
    </svg>

Le code du cercle est un peu long et compliqué&nbsp;: nettoyons-le avec un sélecteur de classe&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="80" class="redcirc" />
    </svg>

…et utilisons ce CSS :

    //CSS
    svg {
      width: 200; height: 200;
    }
    .redcirc {
      fill: red;
      stroke: black;
      stroke-width: 15;
    }

Le résultat est le même que dans la version précédente&nbsp;:

<div class="ds-svg-circles"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="50" class="redcirc" /></svg></div>

Notes :

- Cela ne signifie pas que vous ayez tout d’un coup la possibilité d’appliquer `fill` aux éléments HTML. `fill`, `stroke` et `stroke-width` ne s’appliquent qu’aux éléments SVG. La plupart des attributs de présentation SVG ont un équivalent en propriété CSS, mais pas tous.
- Si vous écrivez votre SVG dans le contexte d’une page HTML, la classe `.redcirc` peut se trouver dans la partie `<head>` de votre document ou dans une feuille de style externe.
- La largeur du trait (_stroke-width_) est répartie de façon égale des deux côtés du contour de l’élément.

Une fois que nous avons ceci, il est très facile de commencer à créer des tracés plus complexes. Je pense que vous voyez déjà où nous allons en venir&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="250" fill="red" />
      <circle cx="250" cy="250" r="200" fill="white" />
      <circle cx="250" cy="250" r="150" fill="red" />
      <circle cx="250" cy="250" r="50" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

Remarquez que les éléments SVG s’empilent [comme les éléments HTML](http://demosthenes.info/blog/136/Stacking-order-and-z-index).

Cependant, nous pouvons être plus malins ! D’une manière générale, moins il y a d’éléments dans un document SVG et mieux on se porte, donc nous pouvons simuler des sections du bouclier en utilisant `stroke` et seulement deux cercles&nbsp;:

    <svg viewBox="0 0 500 500">
      <title>Captain America’s Shield</title>
      <circle cx="250" cy="250" r="220" fill="white" />
      <circle cx="250" cy="250" r="125" fill="blue" />
      <polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209" />
    </svg>

combinés avec ce CSS :

    //CSS
    circle {
      stroke-width: 50;
      stroke: red;
    }

<div class="ds-svg-shield"><div class="ds-svg-container"><svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet"><title>Captain America’s Shield</title><circle cx="250" cy="250" r="220" fill="white" /><circle cx="250" cy="250" r="125" fill="blue" /><polygon fill="white" points="250,150 280,209 346,219 298,265 309,330 250,300 192,330 203,265 155,219 221,209 " /></svg></div></div>

Le résultat est le même que l’original. [La version complète](http://codepen.io/dudleystorey/pen/ZGOKLJ) (ci-dessus) utilise également une variation intéressante de [flexbox](/tags/flexbox/) et de `box-shadow` pour positionner et ombrer le bouclier.

<h2>Ellipses</h2>

La syntaxe de l’ellipse est proche de celle du cercle&nbsp;:

    <svg viewBox="0 0 120 120">
      <ellipse cx="60" cy="60" rx="60" ry="30"/>
    </svg>

Ici, nous avons deux rayons représentant [le demi-grand-axe (_semi-major_) et le demi-petit-axe (_semi-minor_)](http://en.wikipedia.org/wiki/Semi-major_axis) de l’ellipse.

Un trait utile des cercles et des ellipses (et des formes SVG en général) écrites en ligne dans une page est que, contrairement aux éléments HTML, leur “zone active” correspond exactement à leur forme. Donc si nous insérons un lien dans notre ellipse&nbsp;:

    <svg viewBox="0 0 120 120">
      <a xlink:href="http://www.cnn.com">
        <ellipse cx="60" cy="60" rx="50" ry="25" />
      </a>
    </svg>

et que nous combinons ceci avec ce CSS&nbsp;:

    //CSS
    ellipse:hover { fill: red; }

nous obtenons exactement ceci : remarquez la réponse précise en fonction de la position de la souris.

<div class="sd-ellipse"><svg viewBox="0 0 120 120"><a xlink:href="http://www.cnn.com"><ellipse cx="60" cy="60" rx="50" ry="25" /></a></svg></div>

Il est possible de reproduire cette forme en HTML via `border-radius` sur un élément, mais le défi devient insurmontable dès lors que les formes de boutons sont plus compliquées —&nbsp;et c’est l’une des raisons qui font de SVG un excellent format pour les éléments d’interface utilisateur.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/dudleystorey/pen/ZGOKLJ">Le bouclier de Captain America</a> de dudleystorey dans <a href="https://codepen.io">CodePen</a></span>
</div>


Les bases de SVG : Cercles et ellipses


Les groupes —&nbsp;la balise `<g>` en SVG&nbsp;— ressemblent un peu aux éléments `<div>` de nos pages web en ce sens qu’ils permettent de contenir et de contrôler des éléments ayant une relation les uns avec les autres.

Toutefois, il existe des différences entre `<g>` et `<div>` qu’il est important de bien comprendre.

- De même que les éléments `<div>`, les éléments `<g>` **permettent à leurs éléments descendants d’hériter de leurs styles**&nbsp;:

```
<svg viewBox="0 0 400 160">
    <g fill="#33E" stroke="#000" stroke-width="10px">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>
```

Ce qui nous donne :

<svg viewBox="0 0 400 160"><g fill="#33E" stroke="#000" stroke-width="10px"><circle  cx="88" cy="80" r="62"/><rect x="246" y="17" width="123" height="123"/></g></svg>

- De même, **les transformations appliquées à des groupes sont héritées** par les éléments situés à l’intérieur du groupe.
- Cependant, contrairement aux éléments `<div>`, **les groupes SVG ne peuvent pas être positionnés**. Ils peuvent être déplacés vers une nouvelle position, _via_ `transform`, mais du fait qu’ils n’ont pas d’attributs x ou y, ils ne peuvent être _positionnés_ dans le document SVG. On peut contourner le problème en imbriquant les éléments `<svg>` à l’intérieur de groupes, puisque les éléments `<svg>` ont des attributs x et y. Je reviendrai là-dessus dans un article à venir.
- Tout comme les éléments `<div>`, les éléments `<g>` peuvent avoir un attribut `id` (et également des classes, même si c’est moins courant), pour les styles ou les scripts&nbsp;:

```
<svg viewBox="0 0 400 163">
<style type="text/css">
    #svg-container {
        fill: hsl(45,80%,80%);
        stroke: rgba(0,0,0,0.3);
        stroke-width: 10px;
    }
</style>
    <g id="svg-container">
        <circle  cx="88" cy="80" r="62"/>
        <rect x="246" y="17" width="123" height="123"/>
    </g>
</svg>
```

Ce qui crée :

<svg viewBox="0 0 400 163"><style type="text/css">#svg-container { fill: hsl(45,80%,80%);stroke: rgba(0,0,0,0.3);stroke-width: 10px;}</style><g id="svg-container"><circle  cx="88" cy="80" r="62"/><rect x="246" y="17" width="123" height="123"/></g></svg>

Tout comme en CSS, les règles de présentation appliquées directement aux éléments écraseront les règles héritées de leurs éléments parents si les deux entrent en conflit.

- Enfin, contrairement aux éléments `<div>`, les éléments `<g>` peuvent avoir leurs propres éléments `<title>` (_titre_) et `<desc>` (_description_) imbriqués pour ajouter des informations supplémentaires et améliorer l’accessibilité.

Attention : [Adobe Illustrator](http://thenewcode.com/821/Adobe-Illustrator-Workflow-For-SVG-Production) et d’autres éditeurs graphiques surchargent de code leurs exports SVG en utilisant de nombreux éléments `<g>` souvent inutiles (et en général liés à des calques multiples). Pour éviter cela, il est conseillé de fusionner les calques _avant_ de sauvegarder le fichier en format SVG. Une autre solution est d’utiliser un outil comme [SVGoMG](https://jakearchibald.github.io/svgomg/) de [Jake Archibald](https://twitter.com/jaffathecake) qui pourra supprimer les éléments groupes redondants lors du processus de minification.

<small>Photo par [Dina Belenko](https://500px.com/arken) reproduite avec sa permission.</small>


Les bases de SVG : Groupes


Si vous souhaitez dessiner des lignes ou une forme ouverte, plutôt qu’un [polygone](/articles/les-bases-de-svg-polygones/) ou un [cercle](/articles/les-bases-de-svg-cercles-et-ellipses/), [SVG](/tags/svg/) vous offre deux options&nbsp;: les lignes et les polylignes.

<h2>Les lignes</h2>

La syntaxe SVG pour les lignes peut paraître intimidante de prime abord, mais c’est parce qu’elle est précise&nbsp;: une ligne peut être décrite simplement en deux points, chacun spécifié par ses coordonnées `x` et `y`.

À la différence des formes que nous avons vues jusqu’ici, **les lignes sont entièrement invisibles par défaut**, et le resteront tant qu’on n’aura pas spécifié au moins une couleur de trait (_stroke_). Une fois colorées, elles auront l’épaisseur d’un cheveu tant qu’on n’aura pas spécifié une épaisseur via `stroke-width`.

    <svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="0" x2="300" y2="200" stroke-width="20" stroke="black" />
    </svg>

<div style="margin:0 auto;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="200" stroke-width="25" stroke="black" /></svg></div>

Le lecteur à l’oeil exercé aura remarqué que l’extrémité du trait est coupé par les coins de la `viewBox`. Pour s’assurer que le trait apparaisse dans son intégrité, il faut lui donner des coordonnées qui dépassent la viewBox —&nbsp;ou bien utiliser `stroke-linecap: square` (dont nous allons parler plus bas) afin d’étendre l’extrémité des lignes.

Le résultat avec `stroke-linecap: square` :

<div style="margin:0 auto;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="300" y2="200" stroke-width="25" stroke="black" stroke-linecap="square" /></svg></div>

<h2>Les polylignes</h2>

Les polylignes sont simplement des lignes SVG qui se rejoignent en des points multiples&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4">
      <polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/>
    </svg>

Ce qui donne :

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="6" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/></svg></div>

Remarquez que contrairement à ce qui se passe avec les outils graphiques, le fait de placer le dernier point d’une polyligne au même endroit que le point de départ n’aura pas pour résultat de “fermer” la forme. Cependant, vous pouvez appliquer un remplissage couleur (_fill_) à la forme&nbsp;:

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="12" fill="tomato" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 "/></svg></div>

Je vous en dirai plus sur les `fill` dans un article à venir, mais pour l’instant, il suffira de dire que même si nous pouvons appliquer un remplissage couleur à une polyligne, et en général il marchera comme souhaité, il ne donnera qu’une _apparence_ de polygone fermé, mais ce ne sera pas la même chose.

<h2>Caps & corners</h2>

Lorsqu’une ligne SVG change de direction, on n’est pas obligé de rendre l’angle qui en résulte sous la forme d’un angle “dur”&nbsp;: il existe deux autres options, grâce à la propriété `stroke-linejoin`. Celle-ci prend deux valeurs, `round` (arrondi) et `bevel` (biseauté), qui font exactement ce qu’on attend d’elles (vous aurez peut-être besoin d’augmenter l’épaisseur du trait pour bien voir l’effet). Une troisième valeur, `miter`, est la valeur par défaut.

Ci-dessous, nos polylignes avec une valeur de `stroke-linejoin="bevel"`&nbsp;:

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414.3 231.4"><polyline stroke="#000" stroke-width="12" fill="none" points="15.7,127.9 112.1,15 294.3,205 75,167.9 364.3,36.4 392.1,212.9 " stroke-linejoin="bevel"/></svg></div>

De la même manière, les fins de lignes peuvent se terminer par des sortes de capuchons, via la propriété `stroke-linecap`, qui prend trois valeurs, `round` (arrondi en demi cercle), `square` (la ligne prend un capuchon carré, comme le bout d’un lacet de chaussure), ou `butt` par défaut. Ci-dessous les trois options, où l’on voit que le capuchon allonge légèrement la ligne, comme on le voyait déjà dans le deuxième exemple de cet article&nbsp;:

<div style="margin:0 auto;width:50%;"><svg width="300" height="300" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"><line x1="50" y1="50" x2="280" y2="50" stroke-width="25" stroke="black" stroke-linecap="round" /><line x1="50" y1="100" x2="280" y2="100" stroke-width="25" stroke="black" stroke-linecap="square" /><line x1="50" y1="150" x2="280" y2="150" stroke-width="25" stroke="black" stroke-linecap="butt" /></svg></div>

S’agissant de propriétés liées à l’apparence, `stroke-linejoin` et `stroke-linecap` peuvent être appliquées soit comme attributs, soit comme propriétés CSS.

Un dernier point : Les traits (_stroke_) et les remplissages couleur (_fill_) peuvent être appliqués à d’autres objets que les lignes, polylignes et polygones&nbsp;; par exemple, ils peuvent être utilisés pour [tracer un texte](http://thenewcode.com/439/Introduction-to-SVG-Text).


Les bases de SVG : Lignes simples et multiples


Si vous voulez créer une forme SVG plus complexe qu’un [cercle](/articles/les-bases-de-svg-cercles-et-ellipses/) ou un [rectangle](/articles/les-bases-de-svg-rectangles-et-carres/), vous pouvez essayer le polygone.

En [SVG](/tags/svg/), un polygone est une forme fermée constituée de lignes droites&nbsp;; SVG ne propose pas (encore) d’éléments pour les polygones réguliers (comme _étoile_ ou _hexagone_ par exemple), mais il vous permet de créer n’importe quelle forme en indiquant les points qui la définissent. Des formes constituées de trois ou quatre pointes sont faciles à coder manuellement, mais vous aurez sans doute besoin d’un logiciel de création graphique comme [Adobe Illustrator](http://demosthenes.info/blog/823/SVG-Export-Settings-For-Adobe-Illustrator), Inkscape, Sketch ou Photoshop pour réaliser des designs plus complexes, que vous pourrez [exporter au format SVG](http://webdesign.tutsplus.com/fr/tutorials/understanding-sketchs-export-options--cms-22207). Cependant, il est vraiment utile de comprendre les bases des polygones SVG car cela vous permettra de “bidouiller” et de modifier les formes directement dans le code sans avoir à repasser par l’éditeur graphique.

<h2>Le plus simple des polygones SVG : le triangle</h2>

Commençons par la plus simple des formes, en utilisant trois points pour créer un triangle rectangle&nbsp;:

    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <polygon points="0 0, 100 100, 0 100"/>
    </svg>

Ce qui nous donne :

<figure role="group" class="ds-small-svg"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="0 0, 100 100, 0 100"/></svg></figure>

Quelques petites choses à noter :

- comme [précédemment](/articles/les-bases-de-svg-rectangles-et-carres/), les axes x et y ont leur origine dans le coin supérieur gauche de [la viewBox](/articles/comprendre-svg-viewbox/)&nbsp;: X est l’axe horizontal, la valeur de x augmente lorsque le point se déplace vers la droite, et Y est l’axe vertical, la valeur de y augmente lorsque le point se déplace vers le bas.
- les points constituant le polygone sont définis comme des paires de coordonnées x et y.
- ces coordonnées sont séparées par une virgule.
- il n’y a pas de direction requise dans l’ordre des points&nbsp;: vous pouvez commencer par n’importe quel point et continuer dans la direction que vous voulez. Dans l’exemple qui précède, le point “sommet” du polygone est défini le premier, suivi des deux autres dans le sens des aiguilles d’une montre —&nbsp;on aurait tout aussi bien pu commencer par le point inférieur gauche et continuer ensuite dans le sens inverse des aiguilles d’une montre.
- il est inutile de répéter le premier point à la fin, SVG sait comment fermer le polygone tout seul comme un grand.
- on peut appliquer `stroke`, `fill` et `stroke-width` aux polygones, comme nous l’avions fait pour les cercles, ellipses, rectangles et carrés.

Et si nous voulions créer un triangle équilatéral&nbsp;? il suffit pour cela de repositionner un seul point&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <polygon points="50 15, 100 100, 0 100"/>
    </svg>

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50 15, 100 100, 0 100"/></svg></figure>

<h2>Le problème du remplissage croisé</h2>

Avec trois points reliés par des lignes droites, il est impossible d’avoir des intersections. Mais à partir de quatre points, c’est parfaitement possible&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <polygon points="0 20, 100 20, 100 0, 0 100 "/>
    </svg>

SVG (comme la plupart des logiciels de création graphique) ne voit pas d’inconvénient à retourner ce résultat —&nbsp;qui n’est peut-être pas celui que vous attendiez&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="0 20, 100 20, 100 0, 0 100 "/></svg></figure>

Selon ce que vous voulez obtenir, il vous faudra peut-être repositionner le troisième point ou en ajouter un cinquième de manière à régler le problème.

<h2>Une petite bibliothèque de polygones réguliers</h2>

Même s’il est probable que vous créerez vos éléments SVG à l’aide d’un outil graphique, il est utile de voir la manière dont est construit le code des polygones réguliers. Vous pouvez bien évidemment copier ce code et l’utiliser dans vos créations, chaque polygone tient à l’intérieur d’une viewBox de 100&nbsp;&times;&nbsp;100.

### Pentagone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/></svg></figure>

    <polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>

### Étoile

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/></svg></figure>

    <polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>

## Hexagone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/></svg></figure>

    <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>

## Octogone

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/></svg></figure>

    <polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4" fill="hsl(216,80%,50%)"/>

Et voilà ! Maintenant que nous avons passé en revue les formes de base, nous allons revenir aux lignes dans notre prochain article, en nous intéressant plus précisément aux lignes SVG, aux lignes multiples et aux chemins.


Les bases de SVG : Polygones


Après [les cercles](/articles/les-bases-de-svg-cercles-et-ellipses/), les rectangles sont sans doute l’élément le plus facile à réaliser en [SVG](/tags/svg/) puisqu’il suffit d’ajouter un attribut pour y parvenir. La syntaxe de base consiste en une position x, une position y, une largeur et une hauteur&nbsp;:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
      <rect x="20" y="20" width="40" height="40"/>
    </svg>

Quelques petites choses à noter tout de suite&nbsp;:

- contrairement aux cercles, les rectangles sont dessinés à partir de leur coin supérieur gauche (déterminé par les coordonnées x et y).
- comme la plupart des autres éléments, les rectangles sont noirs par défaut si aucun remplissage (_fill_) n’est indiqué.
- l’élément rectangle est “auto-fermant”
- comme tous les autres éléments, les rectangles qui apparaissent _après_ dans le code seront positionnés au dessus des éléments qui les précèdent s’il y a chevauchement.
- malgré l’impression trompeuse que pourrait donner le titre de cet article, il n’existe pas d’élément “carré” distinct du rectangle en SVG. Les carrés sont simplement des rectangles de côtés égaux.

<figure role="group" class="ds-big-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 602 522"><title>Composition in Color A, 1917, by Piet Mondrian</title><g id="Reds" fill="#E12432"><rect x="488.5" y="408" width="58.8" height="59.3"/><rect x="364.2" y="218" width="89.8" height="81.3"/><rect x="584" y="147.3" width="18" height="65.7"/><rect x="191.7" y="87.8" width="59.3" height="62.5"/><rect x="82" y="172.3" width="57.3" height="65"/><rect x="278.3" y="306.6" width="63" height="55.1"/></g><g id="Blues" fill="#026BA6"><rect x="288.3" y="42" width="43.7" height="81.7"/><rect x="404.3" y="127" width="68.3" height="71"/><rect x="531" y="248.3" width="53" height="56"/><rect x="464.3" y="378.7" width="48.3" height="49.7"/><rect x="355" y="395.3" width="58.7" height="52.7"/><rect x="382.7" y="487.3" width="55.3" height="34.7"/><rect x="256" y="435.7" width="52.7" height="49.3"/><rect x="193" y="282.7" width="61.3" height="61.3"/></g><g id="Oranges" fill="#C74C26" ><rect x="162.7" y="203.3" width="55.7" height="59.7"/><rect x="101.3" y="133.3" width="57.3" height="66.3"/><rect x="310.7" y="119.7" width="61" height="61.3"/><rect x="461.7" y="31.3" width="50.7" height="47.7"/><rect x="451" y="100" width="52.3" height="50.3"/><rect x="469.3" y="269.2" width="74.4" height="74.8"/><rect x="594.7" y="333.7" width="7.4" height="50.7"/><rect x="341.3" y="446.7" width="50.7" height="53"/><rect x="341.3" y="306.6" width="52.2" height="55.1"/><rect x="227.3" y="361.7" width="98.7" height="53.7"/><rect x="39.3" y="295.3" width="57.3" height="59.2"/></g><g id="Blacks"><rect x="82" y="93" width="11" height="21"/><rect x="200.7" y="7.7" width="24" height="10.7"/><rect x="274.7" y="82.7" width="24" height="10.3"/><rect x="294" y="133.3" width="11" height="34"/><rect x="294" y="181" width="25.3" height="11.3"/><rect x="255.3" y="192.3" width="11" height="29.3"/><rect x="371.7" y="13" width="21.7" height="10"/><rect x="349.3" y="106" width="20.7" height="10.3"/><rect x="370" y="201" width="21.3" height="10.3"/><rect x="460" y="190.7" width="22" height="9"/><rect x="507.3" y="96" width="10" height="20.3"/><rect x="568.7" y="153.3" width="10" height="23"/><rect x="521.3" y="263.3" width="19.3" height="11.7"/><rect x="387" y="281.3" width="34.7" height="11"/><rect x="358.3" y="275" width="11.7" height="45"/><rect x="274.3" y="299.3" width="23.7" height="10.3"/><rect x="326" y="361.7" width="21.7" height="12.3"/><rect x="454" y="314.3" width="24.3" height="11.3"/><rect x="509.6" y="338.7" width="10.1" height="16"/><rect x="381.3" y="449.3" width="24.3" height="10"/><rect x="331.7" y="485" width="9.7" height="26"/><rect x="287" y="428.3" width="25" height="10.3"/><rect x="220.7" y="349" width="23.7" height="11"/><rect x="124.3" y="323.7" width="23.3" height="12"/><rect x="130" y="190.7" width="16" height="9"/><rect x="87.3" y="354.5" width="18.7" height="10.5"/><rect x="96.7" y="452.7" width="21" height="9.3"/><rect x="187.3" y="446" width="11.3" height="27.7"/><rect x="17.7" y="230.3" width="11.3" height="27.3"/></g></svg><figcaption><a href="https://www.pinterest.fr/pin/91268329932353503/">Composition en couleur A, 1917</a>, de Piet Mondrian, reconstituée en SVG</figcaption></figure>

<h2>Bordures & Coins</h2>

Comme pour toutes les autres formes en SVG, on peut donner une bordure aux éléments `<rect>`, celle-ci étant un trait (_stroke_) dans le langage SVG&nbsp;:

    <rect x="20" y="20" width="40" height="40" stroke="red" stroke-width="5" />

Ce qui nous donne&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width="5" /></svg></figure>

En CSS, on peut utiliser `border-radius` pour arrondir les angles visibles des éléments. Pour les rectangles SVG, on utilise les attributs `rx` et `ry`&nbsp;:

    <rect x="20" y="20" width="40" height="40" stroke="red" stroke-width ="5" rx="5" ry="5" />

Le résultat :

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width ="5" rx="5" ry="5" /></svg></figure>

Cependant, contrairement à `border-radius`, `rx` et `ry` affectent simultanément et de manière égale tous les coins de l’élément —&nbsp;pas moyen de n’arrondir qu’un seul angle à la fois. On peut donner des valeurs différentes aux attributs `rx` et `ry` pour créer des effets spéciaux, par exemple pour donner une forme de de tonneau&nbsp;:

<figure role="group" class="ds-small-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect x="20" y="20" width="40" height="40" stroke="tomato" stroke-width ="5" rx="5" ry="15" /></svg></figure>

…mais la plupart du temps on donnera la même valeur aux deux attributs, et dans ce cas il existe un raccourci, il suffit d’indiquer uniquement `rx`&nbsp;:

    <rect x="20" y="20" width="40" height="40" rx="5" />

Note : `rx` et `ry` sont considérés comme des attributs _réguliers_, et non comme des attributs _de présentation_, par conséquent on ne peut pas les utiliser actuellement en CSS, pas plus d’ailleurs qu’on ne peut utiliser `border-radius` sur les éléments SVG (mais on peut l’utiliser sur l’élément SVG lui-même, comme on peut le voir sur le Mondrian ci-dessus).

<h2>Le plus grand rectangle : styler le viewport</h2>

Dans la plupart des éditeurs, le background d’un SVG apparaît blanc. En fait ce n’est pas le cas&nbsp;: il est transparent, son canal alpha est masqué, ce qui signifie que son rendu sera parfait lorsqu’on le placera comme image ou élément en ligne sur n’importe quel background de page HTML.

La première solution qui vient à l’esprit lorsqu’on a besoin d’un “canevas” de couleur différente dans un SVG est de dessiner un énorme rectangle qui couvre tout le viewport SVG. Mais en général c’est plutôt une mauvaise idée&nbsp;: non seulement cela ajoute un élément supplémentaire à la page, mais en plus cela complique le rendu de la page. À la place, il suffit d’appliquer un style à l’élément SVG lui-même, comme sur notre reproduction de Mondrian.

    svg { background: #fcedd6; }

Il est même possible de placer un `border-radius` sur l’élément SVG, comme je l’ai fait dans [l’exemple de bouclier de Captain America](http://codepen.io/dudleystorey/pen/ZGOKLJ), créé pour l’article sur les cercles. C’est pratique si, par exemple, vous voulez donner une impression d’ombre portée sur le SVG entier.

Retrouvez [le code du tableau de Mondrian sur CodePen](http://codepen.io/dudleystorey/pen/MwbYaL)&nbsp;!

_La recréation de l'oeuvre de [Piet Mondrian](http://fr.wikipedia.org/wiki/Piet_Mondrian) est en partie inspirée du travail de [Jenn Schiffer](http://jennmoney.biz/), qui a écrit une excellente série d'articles sur [la recréation d'oeuvres d'art au moyen des technologies du web](http://vart.institute/)_.


Rechercher un article ou un auteur