CSS quotes
La proprietà CSS3 quotes definisce i simboli usati per le citazioni testuali
La proprietà quotes permette di personalizzare i caratteri utilizzati per racchiudere le citazioni, solitamente rese tramite il tag
<q>
o con pseudo-elementi. È particolarmente utile per adattare lo stile delle virgolette a convenzioni linguistiche differenti (come « » per il francese o tedesco).
Sintassi
Significato dei valori principali:
"open-quote" e "close-quote": coppie di stringhe che definiscono le virgolette aperte e chiuse da usare. Possono essere personalizzate con simboli tipografici, virgolette singole/doppie, ecc.
none: Disabilita completamente l'uso di virgolette automatiche.
inherit / initial / unset: Valori globali CSS per ereditare o reimpostare il comportamento.
Esempio proprietà: quotes
Codice Esempio: quotes
.quotes-example {
quotes: "«" "»" "‹" "›";
}.quotes-example q::before {
content: open-quote;
}.quotes-example q::after {
content: close-quote;
}.quotes-none {
quotes: none;
}.quotes-none q::before,
.quotes-none q::after {
content: "";
}
Contenuto Esempio: quotes
Esempio di utilizzo della proprietà quotes
In questo esempio, la proprietà quotes viene utilizzata per personalizzare i simboli di apertura e chiusura delle citazioni create con il tag <q>:
Frase con citazione: Questa è una citazione in stile europeo
.
Citazione senza virgolette: Citazione visivamente neutra
.
HTML e CSS completo per l'esempio:
<style>
.quotes-example {
quotes: "«" "»" "‹" "›";
}
.quotes-example q::before {
content: open-quote;
}
.quotes-example q::after {
content: close-quote;
}
.quotes-none {
quotes: none;
}
.quotes-none q::before,
.quotes-none q::after {
content: "";
}
</style>
<div class="quotes-example">
<p>Frase con citazione: <q>Questa è una citazione in stile europeo</q>.</p>
</div>
<div class="quotes-none">
<p>Citazione senza virgolette: <q>Citazione visivamente neutra</q>.</p>
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.192
