Propriété CSS quotes
Utilisez la propriété CSS quotes pour définir les guillemets du contenu. Valeurs, caractères et exemples.
La propriété CSS quotes définit les caractères de guillemets qu'un navigateur insère lorsque la propriété content demande open-quote ou close-quote. En bref, elle vous permet de remplacer les guillemets par défaut par n'importe quels caractères de votre choix — et même de contrôler quels guillemets sont utilisés à chaque niveau d'imbrication.
Cette page présente le rôle de la propriété, sa syntaxe et ses valeurs, les caractères de guillemets les plus courants (avec leurs échappements Unicode), ainsi que des exemples exécutables pour les guillemets simples et imbriqués.
Fonctionnement de quotes
La propriété quotes ne place pas, en elle-même, de guillemets sur la page. Elle déclare simplement quels caractères doivent être utilisés. Les marques sont effectivement rendues par les pseudo-éléments ::before et ::after, dont la propriété content est définie avec les mots-clés open-quote et close-quote :
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}Trois éléments fonctionnent donc toujours ensemble : quotes fournit les caractères, et les deux pseudo-éléments les placent. Sans les mots-clés content, rien n'apparaît, quelle que soit la valeur de quotes.
Vous pouvez déclarer les caractères soit littéralement ("«" "»"), soit avec l'échappement Unicode CSS du point de code ("\00AB" "\00BB"). La forme d'échappement est pratique lorsque l'encodage de votre feuille de style est incertain ou que le caractère est difficile à saisir.
Quand l'utiliser
- Styliser les guillemets de
<q>ou<blockquote>pour correspondre aux conventions d'une langue (allemand„…", français« … », etc.). - Appliquer des guillemets à n'importe quel élément — pas seulement
<q>— en combinantquotesavec le contenuopen-quote/close-quote. - Fournir des marques distinctes pour les citations imbriquées (voir l'exemple à quatre valeurs ci-dessous).
Les guillemets par défaut utilisés par <q> et <blockquote> dépendent de l'agent utilisateur et de l'attribut lang du document. Définissez quotes explicitement lorsque vous avez besoin des mêmes guillemets dans tous les navigateurs.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | element.style.quotes = "'\2018' '\2019'"; |
Syntaxe
Syntaxe CSS quotes
quotes: none | [<string> <string>]+ | auto | initial | inherit;La valeur est soit le mot-clé none (ou auto), soit une ou plusieurs paires de chaînes. Chaque paire est un guillemet ouvrant suivi d'un guillemet fermant ; la première paire correspond au niveau d'imbrication le plus externe, la suivante au premier niveau imbriqué, et ainsi de suite.
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 CSS de guillemets 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>Ici, le <q> externe utilise des guillemets doubles droits (\0022) et le <q> interne utilise les guillemets en chevron («»), car la deuxième paire de chaînes s'applique au premier niveau d'imbrication.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Les valeurs "open-quote" et "close-quote" de la propriété content ne produisent pas de guillemets. | Essayer » |
[<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 d'imbrication externe, la deuxième paire s'applique au premier niveau imbriqué. | Essayer » |
| initial | Applique la valeur par défaut de la propriété. | Essayer » |
| inherit | Hérite la propriété de son élément parent. |
Caractères de guillemets
| Marque | Description | Numéro d'entrée |
|---|---|---|
| " | guillemet double | \0022 |
| ' | guillemet simple | \0027 |
| ‹ | guillemet simple, chevron gauche | \2039 |
| › | guillemet simple, chevron droit | \203A |
| « | guillemet double, chevron gauche | \00AB |
| » | guillemet double, chevron droit | \00BB |
| ` | guillemet gauche (simple haut-6) | \2018 |
| ՛ | guillemet droit (simple haut-9) | \2019 |
| " | guillemet gauche (double haut-6) | \201C |
| " | guillemet droit (double haut-9) | \201D |
| „ | guillemet double (double bas-9) | \201E |
Propriétés associées
- content — définit
open-quote/close-quote(et tout contenu généré) sur les pseudo-éléments. - ::before — insère le guillemet ouvrant avant le contenu de l'élément.
- ::after — insère le guillemet fermant après le contenu de l'élément.