A text-decoration-skippropriedade especifica onde um sublinhado, sobrelinhado ou tachado deve quebrar Isso melhora a legibilidade do texto decorado e corrige a gramática de pontuação para alguns idiomas.
Aqui está um exemplo:
a ( text-decoration-skip: ink; )Atenção! O inkvalor foi alterado para uma propriedade totalmente nova text-decoration-skip-ink: auto;,.
Se o seu navegador suportar essa propriedade, você notará aqui que os descendentes de cada caractere (como “y” e “p”) têm pequenos espaços em branco ao redor da borda:
Veja o Pen text-decoration-skip por CSS-Tricks (@ css-tricks) no CodePen.
Se o seu navegador não oferece suporte a esse recurso, isso é o que você deve esperar da propriedade em um navegador compatível:
text-decoration-skip em OSX e iOS
No final de 2014, a Apple fez uma mudança text-decorationnos navegadores Safari e iOS que imita como text-decoration-skip: ink;deveria funcionar. Embora nenhum dos text-decoration-skipvalores tenha sido implementado oficialmente ainda, você pode desativar esse comportamento padrão com -webkit-text-decoration-skip: none;.
Veja o Pen -webkit-text-decoration-skip: none; por CSS-Tricks (@ css-tricks) em CodePen.
Relacionado
text-decorationtext-decoration-colortext-decoration-linetext-decoration-style
Mais Informações
Rascunho do Editor do Módulo de Decoração de Texto CSS Nível 4text-decoration-skipno MSDN.- Discussão sobre adição
trailing-spacescomo um valor da lista de mala direta do W3C. - Melhorando a legibilidade do texto para usuários disléxicos com sublinhados à tinta
- text-decoration-skip no MDN
- text-decoration-skip-ink no MDN
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 91 | 87 | Não | 88 | TP |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14,0-14,4 * |