La quotes
propriété en CSS vous permet de spécifier quels types de guillemets sont utilisés lorsque des guillemets sont ajoutés via les règles content: open-quote;
ou content: close-quote;
. Voici comment l'utiliser:
q ( quotes: "“" "”" "‘" "’"; ) q::before ( content: open-quote; ) q::after ( content: close-quote; )
Dans l'exemple ci-dessus, quatre valeurs sont ajoutées. Un ensemble de guillemets intelligents doubles et une paire de guillemets simples simples. C'est un peu déroutant car chaque citation est entourée de guillemets - mais ce ne sont que des guillemets programmatiques (peuvent être doubles («) ou simples (')) comme partout ailleurs dans CSS. Les guillemets à l'intérieur sont ce qui sera utilisé sur la page.
Il y a quatre valeurs pour la propriété du contenu qui se rapportent à la quotes
propriété: open-quote
, close-quote
, no-open-quote
et no-close-quote
.
La première paire de guillemets dans la valeur correspond aux guillemets d'ouverture et de fermeture. La deuxième paire correspond aux guillemets d'ouverture et de fermeture des guillemets imbriqués d'un niveau dans d'autres guillemets qui utilisent également la quotes
propriété. Par exemple, un élément à l'intérieur d'un
élément.
![](6034412/quotes_css-tricks_2.png.webp)
![](6034412/quotes_css-tricks_2.png.webp)
Quelques exemples:
Guillemets doubles sur le premier guillemet, guillemets simples sur le second.
Une citation avec des citations en français.
Vous pouvez placer autant de paires de guillemets quotes
que vous le souhaitez dans la propriété. Mais vous n'êtes pas obligé d'en mettre plus de deux, car pour chaque devis supplémentaire, il répète simplement les quotes
valeurs du début.
Les valeurs no-open-quote
et no-close-quote
arrêtent l'affichage des guillemets, mais elles continuent à augmenter la profondeur du devis.
Plus d'information
- N'utilisez pas l'
élément sauf si vous citez quelqu'un. Dans tous les autres cas (ironie, sarcasme ou quoi que ce soit d'autre pour lequel vous utilisez des guillemets), utilisez simplement les guillemets eux-mêmes (comme ceux-ci: «»).
- Ce n'est pas seulement pour l'
élément, ça pourrait être
trop ou quoi que ce soit d'autre.
- Citations et accents
Prise en charge du navigateur
Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
---|---|---|---|---|---|---|
11+ | Tout | 1,5+ | 4+ | 8+ | Tout | Tout |