Propriété CSS quotes
La propriété quotes définit le type de guillemets pour le contenu.
Les pseudo-éléments ::before et ::after sont utilisés pour insérer les marques de contenu au début et à la fin d’une citation. Ces pseudo-éléments sont définis par la propriété content.
Les navigateurs appliquent des guillemets par défaut aux éléments <q> et <blockquote>, mais la propriété quotes vous permet de les personnaliser. Vous pouvez appliquer des guillemets personnalisés à n’importe quel élément.
Il existe différents types de guillemets ; les plus courants sont les guillemets droits et les guillemets courbes.
INFO
Les guillemets dépendent de l’agent utilisateur.
| Initial Value | none |
|---|---|
| Applies to | All elements. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | element.style.quotes = "'\2018' '\2019'"; |
Syntaxe
Syntaxe CSS de quotes
quotes: none | string | initial | inherit;Exemple de la propriété quotes :
Exemple de code CSS quotes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Résultat
Exemple de la propriété quotes avec quatre valeurs :
Exemple de quotes imbriqués
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Valeurs
| Value | Description | Play it |
|---|---|---|
| none | Les valeurs "open-quote" et "close-quote" de la propriété content ne produisent pas de guillemets. | Play it » |
[<string> <string>]+ | Spécifie le guillemet. Le premier est le guillemet ouvrant, le second est le guillemet fermant. La première paire représente le niveau externe de citation, la seconde paire correspond au premier niveau imbriqué. | Play it » |
| initial | Fait utiliser à la propriété sa valeur par défaut. | Play it » |
| inherit | Hérite la propriété de l’élément parent. |
Caractères de guillemets
| Marks | Description | Entry Number |
|---|---|---|
| " | double quote | \0022 |
| ' | single quote | \0027 |
| ‹ | single, left angle quote | \2039 |
| › | single, right angle quote | \203A |
| « | double, left angle quote | \00AB |
| » | double, right angle quote | \00BB |
| ` | left quote (single high-6) | \2018 |
| ՛ | right quote (single high-9) | \2019 |
| “ | left quote (double high-6) | \201C |
| ” | right quote (double high-9) | \201D |
| „ | double quote (double low-9) | \201E |
Practice
What are the functions of the 'quotes' property in CSS?