Content - Propriété CSS

Schéma syntaxique de content.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• string est une chaîne de caractères, entre apostrophes ou entre guillemets.
• fct() et une fonction qui génère du contenu : counter(), target-counter(), leader(), attr().
• Plusieurs de ces valeurs ou fonctions peuvent être énumérées, sans séparateur particulier.
• Le caractère slash introduit du contenu alternatif, non affiché, mais lisible par les systèmes de restitution vocale.

Description de la propriété content.

Cette propriété très particulière ajoute ou remplace du contenu. Elle s'utilise le plus souvent avec les pseudo-éléments ::before, ::after ou ::marker, mais peut, dans quelques cas, être utilisée sur l'élément lui-même.

Voici un premier exemple, dans lequel la propriété content a été utilisée de la façon la plus courante : sur les pseudo-éléments ::before et ::after.

Cet autre exemple utilise la propriété content sur un sélecteur du type élément. Dans ce cas, les possibilités sont plus limitées : il est seulement possible de remplacer le contenu de l'élément par une image (les autres syntaxes ne sont pas traitées).
Nous avons utilisé également une directive @media pour que le contenu de l'élément soit remplacé par une image lorsque la largeur d'écran devient inférieure à 900 pixels (réduisez la fenêtre du navigateur pour observer le fonctionnement).

Mise en forme de l'ajout.

De nombreuses propriétés de mise en forme peuvent être utilisées pour présenter le contenu ajouté par content (couleur, police, etc). en particulier, il est possible de préciser une valeur pour la propriété display afin de définir comment doit être affiché l'ajout réalisé par content.

Jeu de caractères.

Dès lors que la propriété content est utilisée dans une feuille de styles, il est préférable de préciser dans quel jeu de caractères est enregistré le fichier. Cela peut se faire avec la directive @charset au début de la feuille de styles.

Insertion de caractères spéciaux.

Si vous avez besoin d'utiliser un caractère spécial avec la propriété content, notre outil codes des caractères UTF peut vous être très utile. Vous avez deux possibilités :

• Copier-coller le caractère dans votre feuille de styles, depuis la page codes des caractères UTF.
• Utiliser le code hexadécimal du caractère, avec la syntaxe ci-dessous.

Les entités HTML ne sont pas utilisables à partir de la feuille de styles CSS.

Voici par exemple comment insérer le symbole de copyright © (code hexadécimal = A9) avec la propriété content :

Valeurs pour content.

• content: normal;

  Valeur par défaut. Cette valeur ne change rien au contenu de l'élément.

• content: none;

  Rien n'est ajouté.

• content: open-quote; content: close-quote;

  Insère une marque de citation ouvrante ou fermante. En langue française, les marques de citation sont souvent les doubles chevrons (« »), tandis que la langue anglaise utilise plutôt le guillemet.
  open-quote s'utilise plus logiquement avec le sélecteur ::before, tandis que close-quote est plus adapté au sélecteur ::after, mais rien n'empêche d'utiliser ces valeurs avec un des autres sélecteurs acceptés par content.

  De plus ces deux valeurs mettent à jour le niveau de citation. Il s'agit d'un compteur qui est incrémenté par open-quote et décrémenté par close-quote. Des marques de citation différentes peuvent être associées à chacun des niveaux de citation.

  Les caractères utilisés comme marques de citation ouvrante et fermante pour chacun des niveaux de citation sont définis par la propriété CSS quotes.

• content: no-open-quote; content: no-close-quote;

  Empêche l'insertion des marques de citation ouvrante ou fermante.
  Bien que le caractère ne soit pas inséré, le niveau d'imbrication est mis à jour : il est incrémenté de 1 par la valeur no-open-quote et décrémenté par la valeur no-close-quote. A chaque niveau d'imbrication correspond une paire de guillemets différente.

  Il est parfois nécessaire que les marques de citation englobent plusieurs éléments. C'est le cas par exemple si on souhaite ouvrir un guillemet sur le premier paragraphe et le fermer sur le dernier paragraphe. Dans ce cas, plusieurs éléments (les paragraphes p) seront englobés dans la même citation. Le CSS suivant résout ce problème.

  p:first-child::before {content:open-quote;} p:first-child::after {content:no-close-quote;} p:last-child::before {content:no-open-quote;} p:last-child::after {content:close-quote;}
• content: 'du texte';

  Insère le texte spécifié entre apostrophes ou entre guillemets.
  Si un caractère spécial doit être inséré, on utilisera la syntaxe \xxxx (xxxx étant le code hexadécimal du caractère). Exemple \152 insère le caractère Œ.

• content: counter(...); content: counters(...); content: target-counter(...); content: target-counters(...);

  Ces quatre syntaxes insèrent la valeur d'un compteur dans le document. Reportez-vous à la propriétés counter-reset et counter-increment pour savoir comment initialiser et gérer vos propres compteurs.

  • counter() : renvoie la valeur d'un compteur : un numéro incrémenté automatiquement.
  • counters() : renvoie la valeur d'un compteur hiérarchique, utile lorsque plusieurs comptages sont imbriqués. On obtient par exemple 3.2.5
  • target-counter() : renvoie la valeur d'un compteur à un endroit particulier du document.
  • target-counters() : renvoie la valeur d'un compteur hiérarchique à un endroit particulier du document.

  L'exemple ci-après affiche la valeur du compteur prédéfini list-item après ce court texte. Malheureusement les navigateurs ne traient pas tous de la même façon ce compteur list-item. Avec Firefox   c'est la valeur 4 qui s'affichera car la dernière liste (juste ci-dessus) comporte quatre éléments, tandis que avec Edge   oi Chrome   ce sera la valeur 6; correspondant à la numérotation principale.

  id="syntaxe-counter

  Compteur prédéfini list-item
  syntaxe-counter::after {content:' = ' counter(list-item);}
• content: url(...); content: attr(...); content: leader(...);

  De nombreuses fonctions génèrent du contenu pouvant être repris par content. Voici les principales. Reportez-vous à leur description pour davantage de précision sur leur syntaxe.

  • url() : Insère le fichier indiqué. Il peut s'agir d'une image, d'un son ou d'une vidéo.
  • attr() : renvoie la valeur d'un attribut de l'élément.
  • leader() : renvoie des points de suite.

  L'exemple ci-dessous montre l'utilisation de la fonction url() pour afficher une image dans le pseudo-élément ::after.

  id="syntaxe-url"

  Ce texte est suivi d'une image
  #syntaxe-url::after {content:' ' url('img/content-1.png');}
• content: ... / 'Texte alternatif';

  Le caractère slash ( / ) introduit une série de valeurs, essentiellement du texte mais certaines des fonctions décrites ci-dessus peuvent également figurer ici. Ce contenu constituera le texte alternatif (équivalent de l'attribut alt d'une image) associé au pseudo-élément généré par content.

Valeurs communes :

Afficher des balises HTML sur une page Web.

Des documents techniques peuvent doivent afficher du code HTML sur une page web, mais bien entendu ce code doit être affiché tel quel, sans être interprété par le navigateur. Voici une solution simple, qui consiste à définir une classe, que nous avons choisi de nommer tag, et d'écrire le code HTML sans les caractères < et >. Ceux-ci seront générés par content.

html contenu /html

Identifier les liens externes.

Il est courant sur un site web, de placer une repère sur les liens externes, ceux qui font quitter le site. Voici comment faire ça en CSS, en utilisant la propriété content et un sélecteur avec critère. On part du principe que les liens externes ont des adresses absolues (qui commencent par 'http'), tandis que les liens internes ont des adresses relatives (ce qui n'est pas forcément exact : des liens internes peuvent se faire également avec des adresses absolues).

Nous avons choisi d'identifier les liens externes avec le symbole 🔗.

Points de suite. ⚠

On appelle "Points de suite" une suite de caractères identiques, qui relient deux informations. Par exemple, dans une table des matières les points de suite relient le titre d'un chapitre au numéro de la page. Dans un tarif, les points de suite relient le nom de l'article à son prix, etc.

Voici à quoi ressemble la table des matières de cette page avec des points de suite. Cet échantillon est une simulation, réalisée avec des points saisis dans le code HTML.

Voici maintenant les points de suite réalisés avec CSS. La fonction leader() calcule le nombre de caractères nécessaires pour un alignement par la droite des valeurs qui suivent. Cette fonctionnalité est encore très mal reconnue : il est probable que cela ne marchera pas sur votre navigateur.

Marques de citations imbriquées.

Le texte ci-dessous contient une citation qui en contient une autre. L'usage des valeurs open-quote et close-quot, ainsi que de la propriété quotes pour définir les marques de citation, permet de distinguer facilement les niveaux de citation. Dans cet exemple des balises span ont été utilisées pour séparer les citations.

Animation de la propriété content.

L'animation de la propriété content est certainement quelque chose d'assez rare, mais c'est cependant possible.

Manipulation de la propriété content par programme.

La modification de la propriété content peut se faire en Javascript comme pour toutes les autres propriétés, mais la difficulté est d'atteindre les pseudo-éléments ::before et ::after qui sont souvent utilisés avec content. En effet, les pseudo-éléments ne font pas partie du DOM, et ne peuvent donc pas être désignés par les fonctions Javascript habituelles querySelector() ou getElementById().

Modifier la valeur de content en Javascript.

Ce premier exemple de code modifie la valeur de la propriété content pour le pseudo-élément ::after d'un élément du DOM. Comme ces derniers ne sont pas accessibles directement avec Javascript, l'idée est de passer par des attributs. En effet les attributs sont manipulables par Javascript, et peuvent être lus en CSS avec la fonction attr(). De plus, il est tout à fait possible d'utiliser des attributs personnalisés, qui ne sont pas des attributs HTML standards. Le code ci-dessous utilise deux attributs personnalisés, nommés before et after.
Le code CSS doit bien entendu être adapté en conséquence.

let el = document.getElementById('id'); el.setAttribute('before','>> '); el.setAttribute('after',' <<');

Lire la valeur de content en Javascript.

Nous n'avons pas de solution à vous proposer pour relire la valeur de la propriété affectée à content des pseudo-éléments.

Lire la valeur calculée de content.

Pour relire la valeur calculée de content associée à l'élément lui-même (cas finalement assez rare) ou à son pseudo-élément, le code suivant peut être utilisé. Si aucune valeur n'a été affectée à content, le code renvoie la valeur initiale, c'est à dire normal.

let el = document.getElementById('id'); let value = window.getComputedStyle(el, '::after').getPropertyValue('content');

Modifier la valeur de la propriété content avec JQuery.

En utilisant l'astuce déjà employée pour le code Javascript, à savoir passer par les attributs, voici le code JQuery pour modifier la propriété content sur les pseudo-éléments ::before et ::after.

Notez que le code CSS doit être écrit en conséquence (voir Javascript).

$(el).attr('before','>> '); $(el).attr('after',' <<');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Simulateur avec la propriété content..

Le simulateur agit sur les pseudo-éléments ::before et ::after des trois lignes sur fond bleu ci-dessous.
Un compteur nommé demo est incrémenté à chacune de ces lignes : la propriété content peut donc le faire apparaître avec la fonction counter().

En sélectionnant open-quote dans la première série et normal dans la deuxième série, vous constaterez que le caractère de citation change. En effet le navigateur tient à jour le niveau de citation. A chaque niveau correspond des caractères d'ouverture et de fermeture différents.
open-quote et no-open-quote incrémentent ce niveau de citation,
close-quote et no-close-quote le décrémentent.
Si on ne choisit que open-quote, le niveau de citation est sans cesse incrémenté et jamais décrémenté.

Notez aussi que les valeurs close-quote et no-close-quote sont sans effet si une des valeur open-quote ou no-open-quote n'est pas sélectionnée, car le niveau de citation est au départ à 0 : il n'est pas possible de le décrémenter.

Citations de :   (1) Salvador Dali.   (2) Serge Gainsbourg.   (3) Coluche.

Prise en charge de content par les navigateurs.

La propriété content est bien reconnue par tous les navigateurs actuels.

1

Propriété
content

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété content.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Définition initiale de la propriété content dans la version 2 du langage CSS.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Contenu généré - Niveau 3

  Ajout de nouvelles possibilités : compteur relatif à la cible, points de suite, etc.
  

  14 Mai 2003

  Document de travail.

  

  

  

Voir aussi - Insertion de contenu.

La propriété content fait partie du module CSS Generated Content Module( (Module CSS - Génération de contenu).
Les définitions suivantes sont également présentées dans ce même module.

Propriétés :

Fonctions :