Quotes - Propriété CSS

quotes

Résumé des caractéristiques de la propriété `quotes`

Description rapide

Caractères utilisés pour les guillemets.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

auto | none

Pourcentages

Ne s'appliquent pas.

Valeur initiale

auto

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété quotes passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Génération de contenu

Références (W3C)

🡇

🡅

CSS Generated Content Module Level 3

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Schéma syntaxique de `quotes`.

Schéma syntaxique de la propriété quotes.
Les liens du schéma donnent accès à plus de détails.

Précisions concernant le schéma ci-dessus :

char1 et char2 sont deux chaînes, entre apostrophes ou entre guillemets. Classiquement chacune de ces chaînes ne comporte que un seul caractère.
La syntaxe peut être répétée pour définir plusieurs niveaux d'énumération.

Description de la propriété `quotes`.

La propriété quotes définit quelles seront les caractères utilisés comme marques de citation (guillemets, chevrons, etc.) lorsque la propriété content est utilisée pour générer ces caractères.

Voici quelques exemples de paires de caractères couramment utilisés comme marques de citation :

“ ” « » ‹ ›

Astuce : les caractères tels que « » ou “ ” ne sont pas toujours faciles à trouver sur le clavier, mais vous pouvez les copier-coller à partir de notre outil codes des caractères UTF en cherchant "quotes" ou "guillemets".

Lorsque vous utilisez des caractères UTF dans la feuille de styles pensez à indiquer @charset "utf-8"; au tout début de la feuille de styles. Voir la directive @charset.

Valeurs pour `quotes`.

quotes: auto;

Les marques de citation sont choisies par le navigateur en fonction de la langue déclarée ou reconnue pour le texte de l'élément.
quotes: none;

Aucun caractère n'est généré même si la propriété content a la valeur open-quote; ou close-quote;.
quotes: '<' '>';

Deux caractères entourés chacun par des apostrophes ou des guillemets, et séparés par un espace. Ils seront utilisés par la propriété content comme caractère d'ouverture et de fermeture des citations.

Par défaut les caractères utilisés en langue française sont les chevrons doubles ( « » ).
quotes: '«' '»' '‹' '›';

Il est possible d'inscrire plusieurs paires de caractères afin de faire ressortir les niveaux de citations : les citations incluses dans une première citation utiliseront la deuxième paire de caractères.
quotes: initial; (auto) quotes: inherit; quotes: revert; quotes: revertLayer; quotes: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `quotes`.

L'animation de quotes peut produire quelques effets visuels utiles pour attirer l'attention du lecteur. Puisque la propriété n'accepte pas de valeurs numériques, il faudra décrire toutes les étapes dans l'animation. Ici trois étapes ont été nécessaires, et l'animation est jouée en aller-retour (alternate).

Être raisonnable en toutes circonstances ? Il faudrait être fou... ⁽¹⁾

(1) Raymond Devos

Manipulation de la propriété `quotes` par programme.

Avec Javascript, modifier la valeur de `quotes`.

Javascript peut facilement modifier la valeur de la propriété quotes, il faut simplement faire attention à ne pas créer de confusion entre le séparateur de chaîne de CSS et celui de Javascript. Comme ces deux langages acceptent indifféremment les apostrophes ou les guillemets, il est facile de trouver une syntaxe correcte. Nous avons opté pour l'apostrophe en CSS, et le guillemets en Javascript.

Javascript propose deux syntaxes dont voici un exemple ci-dessous.


	let el = document.getElementById('id');
	el.style['quotes'] = "'«' '»'";
	// ou
	let el = document.getElementById('id');
	el.style.quotes = "'«' '»'";

Avec Javascript, lire la valeur de `quotes`.

L'exemple de code ci-dessous récupère la valeur de quotes affectée directement à l'élément par l'attribut style ou par le code ci-dessus. Il ne récupère pas la valeur affectée via un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['quotes'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.quotes;

Avec Javascript, lire la valeur calculée de `quotes`.

La valeur calculée est celle qui résulte de la cascade des héritages. Elle est toujours définie même si aucun style n'existe pour la propriété. Dans ce cas la valeur calculée est la valeur initiale, c'est à dire auto dans le cas de quotes.


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('quotes');

Avec JQuery, modifier la valeur de `quotes`.

JQuery permet d'obtenir le même résultat que Javascript, mais avec une syntaxe plus courte.


 $('#id').css('quotes', "'«' '»'");

Avec JQuery, lire la valeur calculée de `quotes`.


	let value = $('#id').css('quotes');

Autres exemples de code.

Retrouvez d'autres exemples de code Javascript et JQuery sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété quotes et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Cette deuxième option permet de voir comment est mémorisée (sérialisée) la valeur de quotes. Dans le cas de quotes on voit que la valeur est stockée telle quelle, sans modification.

Simulateur avec la propriété `quotes`.

Sur ce cadre ci-dessous nous avons appliqué les propriétés suivantes afin de générer les marques de citation avant et après le texte. La propriété quotes définit quel type de marques sera utilisé.

#demo1::before {content:open-quote;} #demo1::after {content:close-quote;}

La propriété CSS quotes permet de choisir les caractères utilisés. Le jeu de caractères UTF-8 contient de nombreuses formes de guillemets : “ ” « » ...

quotes :

auto

none

Le snobisme, c'est une bulle de champagne qui hésite entre le rot et le pet. ⁽¹⁾

(1) Serge Gainsbourg.

Prise en charge de `quotes` par les navigateurs.

La propriété quotes ne pose pas de problème de compatibilité : les navigateurs actuels la reconnaissent bien, y compris la valeur auto dont le traitement est plus complexe.

Colonne 1

Support par les navigateurs de la propriété quotes, qui définit les caractères utilisés comme guillemets par la propriété content.

Colonne 2

Prise en charge de la valeur auto comme valeur pour la propriété quotes. Le traitement de cette valeur est assez complexe : le navigateur doit choisir les marques de citation en fonction de la langue du texte.

Propriété
quotes

Valeur
auto

Estimation de la prise en charge globale.

96%

94%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Chrome

Edge

Internet Explorer

Opéra

Firefox

QQ Browser

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Opéra Mobile

Samsung Internet

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété `quotes`.

CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

Introduction de la propriété quotes (version 2.xx du langage CSS).

04 Novembre 1997
Document de travail.
24 Mars 1998
Proposé à la recommandation.
11 Mai 1998
Recommandation.
Module CSS - Contenu généré - Niveau 3

Pas de changement concernant la propriété quotes.

14 Mai 2003
Document de travail.

Voir aussi, à propos de l'insertion de contenu.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété quotes fait partie du module CSS Generated Content Module.
Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

content

Ajoute du contenu dans le document, principalement avec les sélecteurs ::before et ::after.

Fonctions :

⚠

leader()

Utilisée avec la propriété content, cette fonction permet d'insérer des points de suite.

⚠

target-counter()

Renvoie la valeur d'un compteur, qui peut être insérée dans le document avec la propriété content.

⚠

target-counters()

Renvoie la valeur hiérarchique d'un compteur, qui pourra être insérée dans le document avec la propriété content.

⚠

target-text()

Renvoie le texte d'un élément désigné par une URL.