Text-decoration-skip-ink - CSS-Tricks

Anonim

text-decoration-skip-inké uma propriedade que controla o comportamento de underlinee overline(mas não line-through) quando a linha passa por parte de um caractere / glifo. Isso dá a você um controle preciso sobre como os sublinhados ou sobrelinhados interagem com os caracteres que se estendem acima do topo ou ficam abaixo da parte inferior de uma linha.

Anteriormente, isso era tratado por meio da text-decoration-skip: ink;combinação propriedade / valor, mas após discussões sobre como lidar com o problema de estilos em cascata sobrescrevendo involuntariamente os estilos de prioridade mais baixa (devido ao número de opções disponíveis text-decoration-skip), as propriedades individuais serão divididas em novas propriedades semelhante a text-decoration-skip-ink. Para obter mais contexto e exemplos de por que isso foi alterado, consulte esta discussão do GitHub e as atas do Grupo de Trabalho CSS que discutem as propriedades.

Por padrão, os navegadores irão “pular” áreas onde a “tinta” de um caractere cruza um sublinhado, assim:

Você pode alterar esse comportamento para forçar o sublinhado / sobrelinhado a passar pelo caractere, definindo text-decoration-skip-inkcomo none.

.line-of-text-thats-already-underlined ( text-decoration-skip-ink: none; )

Isso resulta na linha cortando os caracteres:

Sintaxe

text-decoration-skip-ink: auto | none;

Valores

text-decoration-skip-ink aceita os seguintes valores:

  • auto é o valor padrão e irá “pular” sublinhados / sobrelinhados ao passar por um caractere.
  • none cortará esse sublinhado / sobrelinha diretamente através de seus y's e t's altos.

Exemplo

Veja o exemplo de Pen text-decoration-skip-ink
por CSS-Tricks (@ css-tricks) em CodePen.

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 *

Relacionado

  • text-decoration-skip
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-style

Recursos

  • Documentação MDN
  • Sublinhados de estilo na web
  • Usuários disléxicos e sublinhados à tinta