Citations - Astuces CSS

Anonim

La quotesproprié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 quotespropriété: open-quote, close-quote, no-open-quoteet 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 quotespropriété. Par exemple, un élément à l'intérieur d'un élément.

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 quotesque 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 quotesvaleurs du début.

Les valeurs no-open-quoteet no-close-quotearrê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