Propriedade CSS text-decoration-skip
A propriedade CSS text-decoration-skip especifica as partes do conteúdo a serem ignoradas. Veja os valores e exemplos práticos.
A propriedade CSS text-decoration-skip foi criada para controlar quais partes do conteúdo de um elemento uma linha de decoração de texto (sublinhado, sobrelinhado ou linha-através) deveria ignorar em vez de traçar por cima.
Ela se aplicava a todas as linhas de decoração desenhadas pelo elemento e herdadas de seus ancestrais. A ideia era evitar que um sublinhado cortasse espaços em branco, elementos substituídos como imagens, ou os descendentes de letras como "g" e "y".
Na prática, a propriedade nunca foi implementada. Os fornecedores de navegadores dividiram sua funcionalidade na propriedade dedicada text-decoration-skip-ink — que controla o salto sobre os glifos das letras — e a text-decoration-skip original foi removida da especificação. Esta página a documenta para referência; não a utilize em código novo.
O valor ink — a única parte desta propriedade que os navegadores alguma vez consideraram — foi movida para sua própria propriedade text-decoration-skip-ink. Essa é a propriedade que você quase certamente deseja usar hoje.
Quando usar
Nunca em novos projetos. text-decoration-skip é obsoleta e não tem suporte em nenhum navegador atual, portanto declará-la não tem efeito. Os dois pontos práticos a reter:
- Para evitar que um sublinhado conflite com os descendentes das letras, use
text-decoration-skip-ink: auto(este é o padrão moderno). - Para estilizar os próprios sublinhados, use
text-decoration-line,text-decoration-color,text-decoration-styleou a abreviaçãotext-decoration.
Você ainda pode encontrar text-decoration-skip em folhas de estilo ou tutoriais mais antigos — reconhecê-la (e saber que ela não faz nada) é o principal motivo para estar ciente dela.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdada | Sim. |
| Animável | Não. |
| Versão | Rascunho (Obsoleto) |
| Sintaxe DOM | object.style.textDecorationSkip = "spaces"; |
Sintaxe
Na especificação agora removida, o valor era a palavra-chave única none ou uma ou mais palavras-chave separadas por espaço da lista abaixo.
/* 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;Exemplo da propriedade text-decoration-skip
Como nenhum navegador implementa text-decoration-skip, o sublinhado abaixo é traçado diretamente por tudo — a propriedade é simplesmente ignorada. O exemplo é mantido para mostrar a sintaxe histórica:
Exemplo de código 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>Resultado
Esta propriedade é obsoleta e não tem suporte nos navegadores modernos. O exemplo não renderizará nenhuma alteração visual.
Valores
| Valor | Descrição |
|---|---|
| none | Nenhum salto será aplicado. Assim, a decoração de texto é desenhada em todo o conteúdo de texto. |
| objects | Ignora decorações sobre elementos substituídos (como imagens) ou caixas inline-block. |
| spaces | Todos os espaços são ignorados. |
| leading-spaces | Os espaços em branco iniciais são ignorados (separadores de palavras mais qualquer letter-spacing ou word-spacing inicial). |
| trailing-spaces | Os espaços em branco finais são ignorados (separadores de palavras mais qualquer letter-spacing ou word-spacing final). |
| edges | O início e o fim de cada linha de decoração são levemente recuados em relação à borda do conteúdo da caixa decoradora, para que sublinhados adjacentes não se fundam visualmente. |
| box-decoration | As áreas de margin, border e padding da caixa são ignoradas. |
Compatibilidade com Navegadores
| Navegador | Suporte |
|---|---|
| Chrome | Nunca implementado |
| Firefox | Nunca implementado |
| Safari | Nunca implementado |
| Edge | Nunca implementado |
| Opera | Nunca implementado |