
Les variables CSS (également appelées [propriétés personnalisées](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties) CSS, _custom properties_ en anglais) peuvent contenir toutes sortes de choses. Certaines n'étaient pas évidentes pour moi, c'est pourquoi j'ai décidé d'écrire cet article.

Pour être clair, cet article se concentre sur ce que vous pouvez mettre dans une variable CSS —&nbsp;avec une démonstration d'animation vers la fin parce que je ne pouvais pas m'en empêcher. Si vous recherchez des conseils plus généraux sur l'utilisation des variables CSS, il existe [d'autres excellents articles](https://increment.com/frontend/a-users-guide-to-css-variables/) pour cela.

<figure><img src="/images/colorful-bowls.jpg" alt="des cercles de couleur concentriques"/></figure>

## Valeurs unitaires et un peu de maths

Commençons par le plus simple. Il est courant de mettre des valeurs numériques avec des unités dans une variable CSS. Celles-ci sont formellement connues sous le nom de dimensions.

```css
:root {
  --nice-padding: 20px;
  --decent-font-size: 1.25rem;
}

article {
  padding: var(--nice-padding);
  font-size: var(--decent-font-size);
}
```

Les variables peuvent contenir les résultats de calculs impliquant d'autres variables via calc().

```css
:root {
  --image-width: 800px;

  /* calculate height to preserve a 4:3 aspect ratio */
  --image-height: calc(var(--image-width) / (4 / 3));
}

img {
  width: var(--image-width);
  height: var(--image-height);
}
```

De même, les variables peuvent être utilisées avec les fonctions CSS intégrées.

```css
:root {
  --min: 1rem;
  --max: 4rem;
  --clamped-font-size: clamp(var(--min), 2.5vw, var(--max));
}

p {
  font-size: var(--clamped-font-size);
}
```

## Valeurs numériques sans unité

Les variables peuvent également contenir des valeurs numériques sans unité. Certaines propriétés CSS utilisent directement ces valeurs.

```css
:root {
  --obnoxiously-big-number: 9001;
}

.important-modal {
  z-index: var(--obnoxiously-big-number);
}
```

Mais d'autres fois, vous pouvez vouloir appliquer des unités à ces valeurs. Ça peut se faire très simplement avec une multiplication dans une expression calc().

```css
:root {
  --magic-number: 41;
}

.crazy-box {
  width: calc(var(--magic-number) * 1%);
  padding: calc(var(--magic-number) * 1px);
  transform: rotate(calc(var(--magic-number) * 1deg));
}
```

## Des trucs non numériques

Les variables CSS ne sont pas uniquement destinées aux chiffres. Elles peuvent contenir des mots-clés prédéfinis que les propriétés reconnaissent.

```css
:root {
  --bullets: circle;
  --casing: uppercase;
}

ul {
  list-style-type: var(--bullets);
  text-transform: var(--casing);
}
```

Il existe également des [identifiants personnalisés](https://developer.mozilla.org/fr/docs/Web/CSS/custom-ident) qui pointent vers des éléments que vous avez définis et nommés, comme un nom d'animation ou une zone de grille, comme indiqué ci-dessous.

```css
:root {
  --layout-position: center-stage;
}

body {
  grid-template-areas: 'left center-stage right';
}

main {
  grid-area: var(--layout-position);
}
```

## Chaînes de contenu

Les pseudo-éléments `::before` et `::after` utilisent la propriété `content` pour afficher, eh bien... du contenu. Ce contenu peut être un certain nombre de choses différentes, mais il s'agira souvent de chaînes de caractères (_string_).

Le CSS suivant montre que le contenu est alimenté par des variables de type _string_. Vous pouvez également voir comment concaténer des variables de type _string_ avec d'autres chaînes de caractères et comment extraire une valeur de type _string_ d'un attribut avec `attr()`.

```css
:root {
  --open: '(';
  --close: ')';
  --heading-hint: ' ' var(--open) 'this is a heading' var(--close);
  --link-hint: ' ' var(--open) attr(href) var(--close);
}

h1::after {
  content: var(--heading-hint);
}

a::after {
  content: var(--link-hint);
}
```

Voici une démo pour vous montrer le résultat.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GRjZwEM" src="//codepen.io/lonekorean/embed/GRjZwEM?height=300&amp;theme-id=light&amp;slug-hash=GRjZwEM&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/GRjZwEM">
  CSS Variables with Content Strings</a> de lonekorean dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Images

Les variables CSS peuvent également contenir des [images](https://developer.mozilla.org/fr/docs/Web/CSS/image). Les images peuvent également être affichées dans le contenu, mais on les voit sans doute plus couramment dans `background-image`.

```css
:root {
  /* image from an external URL (PNG in this case) */
  --image-from-somewhere: url(https://codersblock.com/assets/images/logo.png);

  /* image from embedded data (SVG in this case) */
  --image-embedded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z'%3E%3C/path%3E%3C/svg%3E");
}

.a {
  background-image: var(--image-from-somewhere);
}

.b::after {
  content: var(--image-embedded);
}
```

Cela vous permet de vous débarrasser des URL d'images longues et difficiles à manier et d'utiliser des noms de variables plus courts lorsque c'est nécessaire.

## Abréviations

Une variable CSS peut être utilisée comme une valeur unique dans un raccourci, ou comme le racourci entier lui-même. Les deux éléments conteneurs ci-dessous auront le même padding.

```css
:root {
  --top-padding: 60px;
  --all-padding: 60px 20px 40px 10px;
}

.container {
  padding: var(--top-padding) 20px 40px 10px;
}

.another-container {
  padding: var(--all-padding);
}
```

J'ai trouvé intéressant que les variables CSS puissent également contenir un segment partiel d'un raccourci formé de plusieurs valeurs.

## Listes

Certaines propriétés, comme `background` et `box-shadow`, peuvent prendre une liste d'éléments. Vous pouvez utiliser une variable CSS comme un seul élément de la liste, une sous-liste de la liste ou la liste entière.

Voici quelques exemples de mélanges de listes `box-shadow` et de variables CSS. J'ai également glissé un exemple de mise en place d'une liste de couleurs dans une variable CSS pour l'utiliser dans un dégradé linéaire, car vous pouvez tout à fait le faire !

```css
/*
  quick reminder of the anatomy of a box-shadow!
  box-shadow: <x-offset> <y-offset> <blur> <spread> <color>;
*/

:root {
  --single-shadow: 0 0 0 40px #355c7d;
  --multi-shadow: 0 0 0 60px #f67280, 0 0 0 80px #6c5b7b;
  --gradient-colors: #f1bbba, #ece5ce, #c5e0dc;
}

.a {
  box-shadow: 0 0 0 20px #60b99a, var(--single-shadow);
}

.b {
  box-shadow: var(--multi-shadow);
}

.c {
  box-shadow: 0 0 0 20px #60b99a, var(--single-shadow), var(
      --multi-shadow
    );
}

body {
  background-image: linear-gradient(45deg, var(--gradient-colors));
}
```

Et voici une démo pour voir ce que ça peut donner&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gOwrQRX" src="//codepen.io/lonekorean/embed/gOwrQRX?height=400&amp;theme-id=light&amp;slug-hash=gOwrQRX&amp;user=lonekorean&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/lonekorean/pen/gOwrQRX">
  CSS Variables with Shadow Lists</a> de lonekorean dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Couleurs

Ah ! on ne peut pas oublier les couleurs ! Les variables CSS fonctionnent très bien pour les couleurs et il est très courant de les voir utilisées pour définir un thème de couleurs facile à consommer dans tout un site.

```css
@media (prefers-color-scheme: light) {
  :root {
    --color-text: #233742;
    --color-links: #d80b77;
    --color-bg: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: white;
    --color-links: #b4cddd;
    --color-bg: #233742;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-links);
}
```

Vous pouvez également placer des valeurs de paramètres de couleur distinctes dans des variables CSS, puis les combiner en une couleur à l'aide de `rgb()`/`rgba()` et `hsl()`/`hsla()`. Voici un exemple utilisant `rgb()`.

```css
:root {
  --red: 216;
  --green: 11;
  --blue: 119;
}

a {
  color: rgb(var(--red), var(--green), var(--blue));
}
```

## Réunir le tout avec l'animation

Peut-on mettre une valeur animée dans une variable CSS&nbsp;? La réponse est&nbsp;: c'est compliqué&nbsp;!

Par défaut, la plupart du temps non. Certains navigateurs afficheront un seul saut discret de la valeur de départ à la valeur d'arrivée. D'autres navigateurs ne feront rien. Dans tous les cas, vous n'obtiendrez pas d'animation lisse et interpolée.

Le problème est que votre navigateur ne sait pas comment animer vos variables inventées. Mais bonne nouvelle ! Vous pouvez résoudre ce problème grâce à l'[API Propriétés et Valeurs](https://drafts.css-houdini.org/css-properties-values-api/). Elle fait partie de [Houdini](https://ishoudinireadyyet.com/) et fonctionne actuellement dans Chrome, Edge et Opera, et d'autres navigateurs devraient suivre.

Voici comment cela fonctionne. Tout d'abord, déclarez vos propriétés personnalisées.

```css
@property --red {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
@property --green {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
@property --blue {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
```

Il s'agit de dire à votre navigateur "hé, voici quelques variables, ce sont des entiers qui ont la valeur 0 par défaut". Ensuite, votre navigateur peut dire "oh les entiers, super, [je sais comment les animer](https://developer.mozilla.org/fr/docs/Web/CSS/integer#interpolation)". Et maintenant, nous sommes prêts pour l'animation.

```css
@keyframes red-fade {
  50% {
    --red: 255;
  }
}
@keyframes green-fade {
  50% {
    --green: 255;
  }
}
@keyframes blue-fade {
  50% {
    --blue: 255;
  }
}

:root {
  animation: red-fade 16s, green-fade 14s, blue-fade 12s;
  animation-iteration-count: infinite;
}
```

Dans le CSS ci-dessus, il y a une animation keyframe pour chaque variable allant de 0 (la valeur initiale `initial-value` que nous avons déclarée) à 255 et inversement. Ces valeurs sont animées sur l'élément `:root` et tous les éléments enfants peuvent les utiliser car nous avons déclaré les variables avec `inherits : true`.

```css
.swatch {
  background-color: rgb(var(--red), var(--green), var(--blue));
}
```

Et avec ça, nous avons 3 variables CSS animées indépendamment qui sont combinées ensemble via `rgb()` pour créer une `background-color` en constante évolution. Pas de JavaScript. Super&nbsp;!

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PoGNxjE" src="//codepen.io/lonekorean/embed/PoGNxjE?height=600&amp;theme-id=light&amp;slug-hash=PoGNxjE&amp;user=lonekorean&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/lonekorean/pen/PoGNxjE">
  CSS Variables Color Animation</a> de lonekorean dans <a href="https://codepen.io">CodePen</a></span>
</div>

Il se passe en fait beaucoup de choses dans cette démo. De multiples animations sont alimentées par ce trio de variables CSS animées (`--red`, `--green`, `--blue`). Décomposons le tout.

Tout d'abord, la grande palette de couleurs RGB. Nous en avons déjà parlé.

Ensuite, les indicateurs qui montent et descendent au-dessus des barres de couleur. Ils sont positionnés en convertissant les variables CSS en valeurs `px` négatives. Par exemple, voici le rouge.

```css
.red .indicator {
  transform: translateY(calc(var(--red) * -1px));
}
```

Troisièmement, les chiffres affichés sous les barres de couleur. Celui-ci est intéressant. Comme mentionné précédemment, vous pouvez utiliser `content` pour afficher des [chaînes de caractères]('https://developer.mozilla.org/fr/docs/Web/CSS/string'), mais cela ne fonctionnera pas avec nos variables [entières]('https://developer.mozilla.org/fr/docs/Web/CSS/integer'). Cependant, les compteurs CSS fonctionnent avec des valeurs entières et peuvent être affichés tout comme une chaîne de caractères avec du contenu.

```css
.red .value::before {
  /* in goes an integer variable */
  counter-reset: color-value var(--red);

  /* out comes a string-like counter value */
  content: counter(color-value);
}
```

En gros, nous abusons des compteurs CSS pour convertir un nombre entier en chaîne de caractères. Que du plaisir.

## Valeurs à l'échelle du CSS

Les propriétés personnalisées suivent les mêmes règles que les propriétés intégrées en ce qui concerne la cascade et l'héritage. Vous pouvez utiliser les mêmes valeurs spéciales CSS que sont `initial`, `inherit`, `unset` et `revert` sur les variables CSS pour contrôler ce qui y est finalement placé.

## Au revoir

Du point de vue de la syntaxe, les variables CSS sont "extrêmement permissives". Il y a certainement d'autres types de choses que vous pouvez y mettre que je n'ai pas spécifiquement couvertes, mais j'espère en avoir montré suffisamment pour vous donner une idée des possibilités. De plus, nous avons eu l'occasion de jouer avec des couleurs animées, donc c'était amusant.


Que peut-on mettre dans une variable CSS?

Plongée en profondeur dans les pseudo-éléments :before et :after

Le progrès plutôt que la perfection, une meilleure approche de l'accessibilité

Un guide visuel des références en JavaScript

grid-template-areas

Citer en HTML, un guide complet

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

Un monde de possibilités nouvelles avec CSS :has()


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

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


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, avec quelques astuces CSS, on peut centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div.

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

## Centrer une div dans une page, les bases

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

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

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

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

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

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

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

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

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

    //HTML

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

Le résultat dans CodePen&nbsp;:

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

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

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

<figure role="group"><img src="/images/world-of-pain-1.jpeg" 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


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é


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

Alignement en CSS, un guide complet


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

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

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

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

## Syntaxe basique

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

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

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

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

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

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

## À propos de la syntaxe

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

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

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

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

## Caractéristiques du contenu inséré

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

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

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

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

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

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

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

## Avant ou après quoi ?

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

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

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

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

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

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

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

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

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

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

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

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

## Insérer du contenu non-textuel

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

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

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

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

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

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

Par exemple :

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

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

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

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

## Accessibilité

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

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

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


Pseudo-éléments :before & :after


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

## Le modèle de boîte

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

<figure role="group"><img src="/images/boxmodel-1-compressor.png" 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

Flexbox, guide complet


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

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

<figure><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 ?


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

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

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

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

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

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

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

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

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

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

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

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

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

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

100% / 5 = 20%

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

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

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

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

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

<h2>Animer la bande</h2>

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

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

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

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

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

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

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

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

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

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


La Cascade

Articles récents

Que peut-on mettre dans une variable CSS?

Plongée en profondeur dans les pseudo-éléments :before et :after

Le progrès plutôt que la perfection, une meilleure approche de l'accessibilité

Un guide visuel des références en JavaScript

grid-template-areas

Citer en HTML, un guide complet

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

Un monde de possibilités nouvelles avec CSS :has()

La propriété CSS Transform

Data attributes, guide complet

Les plus lus

Centrer un bloc div, guide complet

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

Cacher des éléments avec CSS

Alignement en CSS, un guide complet

Pseudo-éléments :before & :after

Box-sizing pour les nuls

Flexbox, guide complet

Le DOM, c'est quoi exactement ?

Un carrousel responsif en pur CSS

JSON pour les débutants

CSS Grid Layout, guide complet

CSS Flexbox et la dimension des boîtes

Recommandés

Les free fonts aujourd'hui

Combinateurs et pseudo-classes CSS

Subtilités de CSS3 Transitions

Créer des sphères en CSS

Créer un background vidéo fullscreen avec HTML5

Mécanique des polices de caractères, 1

Astuces CSS avec checkbox

Créer un cube en CSS

SVG, la syntaxe Path

Comment fonctionne CSS display: contents

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

Contrôler l'affichage du texte