Proprietà CSS text-decoration-skip
La proprietà CSS text-decoration-skip specifica le parti del contenuto da ignorare. Scopri i valori e prova gli esempi.
La proprietà CSS text-decoration-skip era pensata per controllare quali parti del contenuto di un elemento una linea di decorazione del testo (sottolineatura, sopralineatura o linea di barramento) avrebbe dovuto saltare anziché attraversare.
Si applicava a tutte le linee di decorazione disegnate dall'elemento e ereditate dai suoi antenati. L'idea era poter evitare che una sottolineatura tagliasse gli spazi, gli elementi sostituiti come le immagini, o i discendenti delle lettere come "g" e "y".
In pratica la proprietà non è mai stata implementata. I produttori di browser hanno suddiviso la sua funzionalità nella proprietà dedicata text-decoration-skip-ink — che controlla il salto dei glifi delle lettere — e la text-decoration-skip originale è stata rimossa dalla specifica. Questa pagina la documenta come riferimento; non usarla nel nuovo codice.
Il valore ink — l'unica parte di questa proprietà di cui i browser si siano mai interessati — è stato spostato nella propria proprietà text-decoration-skip-ink. Questa è la proprietà che quasi certamente vuoi usare oggi.
Quando usarla
Mai in nuovi progetti. text-decoration-skip è obsoleta e non supportata in nessun browser attuale, quindi dichiararla non ha alcun effetto. Le due conclusioni pratiche:
- Per evitare che una sottolineatura si scontri con i discendenti delle lettere, usa
text-decoration-skip-ink: auto(questo è il comportamento predefinito moderno). - Per stilizzare le sottolineature stesse, usa
text-decoration-line,text-decoration-color,text-decoration-style, o il shorthandtext-decoration.
Potresti ancora incontrare text-decoration-skip in fogli di stile o tutorial più vecchi — riconoscerla (e sapere che non fa nulla) è il motivo principale per conoscerla.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | Bozza (Obsoleta) |
| Sintassi DOM | object.style.textDecorationSkip = "spaces"; |
Sintassi
Nella specifica ora rimossa, il valore era la parola chiave singola none oppure una o più parole chiave separate da spazi dall'elenco seguente.
/* Single keyword */
text-decoration-skip: none;
text-decoration-skip: objects;
/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces edges;Esempio della proprietà text-decoration-skip
Poiché nessun browser implementa text-decoration-skip, la sottolineatura di seguito viene disegnata direttamente attraverso tutto — la proprietà viene semplicemente ignorata. L'esempio è mantenuto per mostrare la sintassi storica:
Esempio di codice CSS text-decoration-skip
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
margin: 1em;
color: #ccc;
font-size: 2em;
text-decoration: underline;
text-decoration-skip: edges;
}
</style>
</head>
<body>
<h2>Text-decoration-skip property example</h2>
<p>
<em>Lorem,</em>
<em>ipsum is simply dummy text</em>
</p>
</body>
</html>Risultato
Questa proprietà è obsoleta e non supportata nei browser moderni. L'esempio non produrrà alcuna modifica visiva.
Valori
| Valore | Descrizione |
|---|---|
| none | Non viene applicato alcun salto. La decorazione del testo viene quindi disegnata per tutto il contenuto testuale. |
| objects | Salta le decorazioni sugli elementi sostituiti (come le immagini) o le caselle inline-block. |
| spaces | Tutti gli spazi vengono saltati. |
| leading-spaces | Lo spazio bianco iniziale viene saltato (separatori di parole più qualsiasi letter-spacing o word-spacing iniziale). |
| trailing-spaces | Lo spazio bianco finale viene saltato (separatori di parole più qualsiasi letter-spacing o word-spacing finale). |
| edges | L'inizio e la fine di ogni linea di decorazione sono leggermente rientrati rispetto al bordo del contenuto del riquadro decorante, in modo che le sottolineature adiacenti non si fondano visivamente. |
| box-decoration | Le aree di margine, bordo e padding del riquadro vengono saltate. |
Compatibilità con i browser
| Browser | Supporto |
|---|---|
| Chrome | Mai implementato |
| Firefox | Mai implementato |
| Safari | Mai implementato |
| Edge | Mai implementato |
| Opera | Mai implementato |