quotes - Propriété CSS
Résumé des caractéristiques de la propriété quotes
auto
| none
auto
quotes
passe d'une valeur à l'autre sans transition.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 Object 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:
;
- 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 valeuropen-quote;
ouclose-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.
La valeur initiale est :
.auto
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
).
(1) Raymond Devos
Simulateur.
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 : “ ” « »
...
(1) Serge Gainsbourg.
Prise en charge par les navigateurs (compatibilité).
La propriété quotes
ne pose pas de problème de compatibilité : les navigateurs actuels la reconnaissent bien, y compris la valeur auto
qui est plus complexe.
quotes
.
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.
quotes
auto
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que quotes
.
Les spécifications CSS éditées par le W3C sont organisées en modules. quotes
fait partie du Module CSS - Génération de contenu (CSS Generated Content Module). Les définitions suivantes sont également décrites dans ce même module.