Vincent De Oliveira Retour accueil

N'oubliez pas la propriété CSS quotes

Blog

Lecture : 2min

En CSS, la propriété quotes permet de définir le rendu pour les guillemets. Pour cela, une ou plusieurs paires de guillemets doivent être précisées, comme ceci:

blockquote {
    /* une paire de guillemets */
    quotes: "«" "»";
}

Ici, les guillemets typographiques français sont définis pour les éléments <blockquote>. Ils pourraient l'être de manière plus globale, sur <body> ou sur <article> par exemple.

Ensuite, il est possible d'utiliser ces guillemets grâce à la propriété content et aux mots-clés open-quote et close-quote, comme ceci:

blockquote::before {
    content: open-quote;
}
blockquote::after {
    content: close-quote;
}

Pour respecter les règles typographiques françaises, il serait préférable d'ajouter une espace fine insécable après le guillemet ouvrant et une avant le guillemet fermant, ce qui nous donnerait:

blockquote {
    /* une paire de guillemets */
    quotes: "«\00A0" "\00A0»";
}

Et voilà le résultat d'une citation:

Une belle citation utilisant quotes et content: open-quote. Le support est plus que bon et inclus depuis IE8.

Edit: Le micro-framework typographique TinyTypo de @tetue utilise ce principe pour afficher les guillemets en fonction de la langue de la page. Je vous laisse découvrir le code. Merci à @7studio pour le rappel.

D'autres exemples d'utilisation en commentaires!

Si vous avez aimé cet article, pensez à Flattr !

Ce que vous avez toujours voulu savoir sur CSS Nouveau blog, nouveau design!