content
=======

La propriété CSS **`content`** remplace un élément avec une valeur générée. Les objets insérés via la propriété `content` sont des **éléments remplacés anonymes**.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs \*/
content: normal;
content: none;

/\* Valeurs pour une image (<image>) \*/
content: url("http://www.example.com/test.png");
content: linear-gradient(#e66465, #9198e5);
content: image-set("image1x.png" 1x, "image2x.png" 2x);

/\* Texte alternatif pour le contenu, ajouté avec le niveau 3 de la spécification \*/
content: url("http://www.example.com/test.png") / "Le texte alternatif";

/\* Une valeur <string>, les caractères non-latin \*/
/\* doivent être échappées par ex. \000A9 for &copy; \*/
content: "prefix";

/\* Valeurs utilisant un compteur, éventuellement
 avec <list-style-type> \*/
content: counter(compteur_chapitre);
content: counter(compteur_chapitre, upper-roman);
content: counters(compteur_section, ".");
content: counters(compteur_section, ".", decimal-leading-zero);

/\* attr() lie à la valeur de l'attribut HTML \*/
content: attr(value string);

/\* Mots-clés dépendant de langue ou de la position \*/
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/\* Sauf avec normal et none, on peut utiliser \*/
/\* plusieurs valeurs de façon simultanée \*/
content: open-quote counter(compteur_chapitre);

/\* Valeurs globales \*/
content: inherit;
content: initial;
content: revert;
content: unset;
```

### Valeurs

`none`

Lorsque cette valeur est appliquée à un pseudo-élément, ce dernier n'est pas généré. Si elle est appliquée à un élément, la valeur n'a pas d'effet.

`normal`

Résulte en `none` pour les pseudo-éléments `::before` et `::after`.

`<string>`

Contenu qui indique le texte alternatif de l'élément. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©).

`<image>`

Une image (valeur de type `<image>`) avec une `url()` ou `<gradient>` ou une partie de la page web fournie par la fonction `element()` et qui indique le contenu à afficher.

`counter()`

Un compteur CSS, généralement un nombre, produit via les propriétés `<counter-reset>` et `<counter-increment>` et qui peut être affiché grâce à la fonction `counter()` ou `counters()`.

`counter()` possède deux formes : `counter(_name_)` ou `counter(_name_, _style_)`. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style (`<list-style-type>` indiqué (`decimal` par défaut).

`counters()` a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond, séparés par la chaîne définie. Les compteurs sont formatés selon le style (`<list-style-type>` indiqué (`decimal` par défaut).

`attr(X)`

Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.

`open-quote` | `close-quote`

Ces valeurs sont remplacées par la chaîne appropriée de la propriété `quotes`.

`no-open-quote` | `no-close-quote`

N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.

Accessibilité
-------------

Le contenu généré par CSS n'est pas inclus dans le DOM. Pour cette raison, il ne fait pas partie de l'arbre d'accessibilité et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.

* La prise en charge relative à l'accessibilité pour les contenus générés par CSS — Tink (en anglais)
* Comprendre les règles WCAG 1.3
* Comprendre les critères de succès 1.3.1 | Comprendre WCAG 2.0 (en anglais)
Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | All elements, tree-abiding pseudo-elements, and page margin boxes |
| Héritée | non |
| Valeur calculée | Sur les éléments, le résultat du calcul est toujours `normal`. Sur `::before` et `::after`, si `normal` est spécifié, cela donnera `none`. Sinon, pour les valeurs d'URI, on aura l'URI absolue ; pour les valeurs `attr()`, on aura la chaine résultante ; pour les autres mots-clé, ce sera comme spécifié. |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

content =   
  normal                                              |  
  none                                                |  
  [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]?  |  
  <element()>                                           
  
<content-replacement> =   
  <image>    
  
<content-list> =   
  [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+    
  
<counter> =   
  <counter()>   |  
  <counters()>    
  
<element()> =   
  element( <id-selector> )    
  
<image> =   
  <url>       |  
  <gradient>    
  
<counter()> =   
  counter( <counter-name> , <counter-style>? )    
  
<counters()> =   
  counters( <counter-name> , <string> , <counter-style>? )    
  
<content()> =   
  content( [ text | before | after | first-letter | marker ]? )    
  
<attr()> =   
  attr( <attr-name> <attr-type>? , <declaration-value>? )    
  
<id-selector> =   
  <hash-token>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<counter-style> =   
  <counter-style-name>  |  
  <symbols()>             
  
<attr-name> =   
  [ <ident-token> '|' ]? <ident-token>    
  
<attr-type> =   
  string            |  
  url               |  
  ident             |  
  color             |  
  number            |  
  percentage        |  
  length            |  
  angle             |  
  time              |  
  frequency         |  
  flex              |  
  <dimension-unit>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
<symbols()> =   
  symbols( <symbols-type>? [ <string> | <image> ]+ )    
  
<symbols-type> =   
  cyclic      |  
  numeric     |  
  alphabetic  |  
  symbolic    |  
  fixed         
  
```

Exemples
--------

### Titres et citations

Dans cet exemple, on insère des marques de citation et le mot « Chapitre » pour chaque titre.

#### HTML


```html
<h1>5</h1>
<p>
  Commençons par une citation de Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
    I was lucky enough to invent the Web at the time when the Internet already
    existed - and had for a decade and a half.</q
 >
  We must understand that there is nothing fundamentally wrong with building on
  the contributions of others.
</p>

<h1>6</h1>
<p>
  Citons le manifeste Mozilla,
  <q cite="https://www.mozilla.org/fr/about/manifesto/">
    Internet est une ressource publique mondiale qui doit demeurer ouverte et
    accessible.</q
 >
</p>
```


#### CSS


```css
q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before {
  content: "Chapitre ";
  /\* L'espace après la dernière lettre est 
 voulu afin de détacher le mot du reste
 du contenu \*/
}
```


#### Résultat

### Ajouter une icône avant un lien

#### HTML


```html
<a href="https://www.mozilla.org/fr/">Accueil</a>
```


#### CSS


```css
a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") /
    " MOZILLA: ";
  font:
    x-small Arial,
    freeSans,
    sans-serif;
  color: gray;
}
```


#### Résultat

### Utiliser les classes

#### HTML


```html
<h2>Top des ventes</h2>
<ol>
  <li>Thriller politique</li>
  <li class="nouveaute">Histoires effrayantes</li>
  <li>Ma biographie</li>
  <li class="nouveaute">Bit-lit</li>
</ol>
```


#### CSS


```css
.nouveaute::after {
  content: " Nouveau !";
  color: red;
}
```


#### Résultat

### Utiliser les attributs d'image et d'élément

Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après.

#### HTML


```html
<ul>
  <li>
    <a id="moz" href="https://www.mozilla.org/fr/">Page d'accueil Mozilla</a>
  </li>
  <li>
    <a id="mdn" href="https://developer.mozilla.org/"
 >Mozilla Developer Network</a
 >
  </li>
</ul>
```


#### CSS


```css
a {
  text-decoration: none;
  border-bottom: 3px dotted navy;
}

a::after {
  content: " (" attr(id) ")";
}

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
}

#mdn::before {
  content: url("mdn-favicon16.png");
}

li {
  margin: 1em;
}
```


#### Résultat

### Remplacer un élément

Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une `url()` ou une valeur de type `<image>`. Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé.

#### HTML


```html
<div id="replaced">Mozilla</div>
```


#### CSS


```css
#replaced {
  content: url("mdn.svg");
}

#replaced::after {
  /\* Ceci ne sera pas affiché, \*/
  /\* l'élément sera un élément remplacé \*/
  content: " (" attr(id) ")";
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3 # content-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les éléments remplacés
* `::after`
* `::before`
* `::marker`
* `contain`
* `quotes`
* La fonction `url()`