content - Propriété CSS

Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

content - Propriété CSS

content

Résumé des caractéristiques de la propriété content

Description rapide
Ajoute du contenu dans le document.
Statut
Standard
Valeurs prédéfinies
normal | none | open-quote | no-open-quote | close-quote | no-close-quote
Pourcentages
Ne s'appliquent pas.
Valeur initiale
normal
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété content passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Génération de contenu
Références (W3C)
Statut du document:: WD (document de travail)

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.

Les caractères < et > ont été ajoutés en rouge

au début et à la fin de chaque paragraphe

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).

Supposons que ce texte nécessite une largeur minimale pour être lisible. Grâce aux média-queries et à la propriété content, il est possible de remplacer le texte par une image lorsque la largeur est insuffisante.

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.

p:before { content:'>>>'; display:block; }

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 Object peut vous être très utile. Vous avez deux possibilités :

  • Copier-coller le caractère dans votre feuille de styles, depuis notre outil Object.
  • 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 :

content:'\A9'; ou content:'©';

Syntaxes 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: counter(nom-compteur);

    Insère la valeur d'un compteur.
    Reportez-vous aux propriétés CSS counter-reset et counter-increment pour découvrir comment initialiser et gérer des compteurs en CSS.

  • 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: url(...);

    Insère le fichier indiqué. Il peut s'agir d'une image, d'un son ou d'une vidéo.

  • content: attr(...);

    Insère la valeur de l'attribut indiqué. Si cet attribut n'est pas présent dans le code HTML, rien n'est inséré. Pour plus d'informations, reportez-vous à la fonction attr().

  • content: initial; content: inherit; content: revert; content: revert-layer; content: unset;

    La valeur initiale est : normal.

Exemples d'utilisation de content.

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 🔗.

Haut de cette page (lien interne)
Lien vers Google (lien externe).

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.

Description...........................................
Syntaxe..................................................
Animation...............................................

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.

Il adorait citer les grands artistes, il disait souvent : Coluche disait Ce n'est pas parce qu'ils sont nombreux à avoir tord que ça leur donne raison. N'est-ce pas très juste ?

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.

Dans cette exemple, nous avons inséré une puce animée à cet élément, en utilisant les caractères qui représentent les différentes phases de la lune (codes hexadécimaux de 1F311 à 1F318) :
🌑   🌒   🌓   🌔   🌕   🌖   🌗   🌘   🌑

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().

Démo

Modifier la valeur de content en Javascript.

Ce premier exemple de code modifie la valeur de la propriété content pour un élément du DOM (et donc ne fonctionne pas pour les pseudo-éléments). On retrouve comme toujours deux syntaxes en Javascript.


function setContent(el) {
el.style['content']='url(img/content-3.png)';
// ou
el.style.content='url(img/content-3.png)';
}

Ce deuxième exemple de code peut être utilisé pour modifier la propriété content associée aux pseudo-éléments ::before et ::after. 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.


function setContent2(el) {
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é content associée aux pseudo-éléments.

Pour relire la valeur calculée de content associée à l'élément lui-même (cas finalement assez rare), 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.


function getCalcContent(el) {
alert(window.getComputedStyle(el).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.


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

Simulateur.

Le simulateur ajoute la valeur choisie au début de chacune des lignes du bloc bleu ci-dessous. Il agit donc sur les pseudo-éléments ::before de ces lignes.
D'autre part, 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().

Notez que les valeurs close-quote et no-close-quote sont sans effet, car le navigateur tient à jour le niveau de citation : chaque open-quote l'incrémente et chaque close-quote le décrémente. Au départ, ce niveau de citation est à 0, il n'est pas possible de le décrémenter.

content :
Ne craignez pas d'atteindre la perfection, vous n'y arriverez jamais. (1)
Qui promène son chien est au bout de la laisse. (2)
Tout ce qui m'intéresse, soit ça fait grossir, soit c'est immoral ! (3)

(1) Salvador Dali.

(2) Serge Gainsbourg.

(3) Coluche.

Prise en charge par les navigateurs (compatibilité).

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

1
content
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que content.

Les spécifications CSS éditées par le W3C sont organisées en modules. content fait partie du Module CSS - Génération de contenu (CSS Generated Content Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Caractères utilisés pour les guillemets.

Fonctions.

Utilisée avec la propriété content, cette fonction permet d'insérer des points de suite.
Renvoie la valeur d'un compteur, qui peut être insérée dans le document avec la propriété content.
Renvoie la valeur hiérarchique d'un compteur, qui pourra être insérée dans le document avec la propriété content.
Renvoie le texte d'un élément désigné par une URL.