content - Propriété CSS
Résumé des caractéristiques de la propriété content
normal
| none
| open-quote
| no-open-quote
| close-quote
| no-close-quote
normal
content
passe d'une valeur à l'autre sans transition.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).
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 CSScounter-reset
etcounter-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 queclose-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 parcontent
.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é parclose-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 valeurno-open-quote
et décrémenté par la valeurno-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()
. 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 🔗.
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.
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.
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.
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()
.
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.
(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.
content
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.