Text-decoration-skip-ink - CSS-Tricks

Anonim

text-decoration-skip-inkto właściwość, która kontroluje zachowanie underlinei overline(ale nie line-through), gdy linia przechodzi przez część znaku / glifu. Daje to precyzyjną kontrolę nad tym, jak podkreślenia lub nadkreślenia oddziałują ze znakami, które wystają ponad górę lub wiszą poniżej dołu linii.

Wcześniej było to obsługiwane za pomocą text-decoration-skip: ink;kombinacji właściwość / wartość, ale po dyskusjach o tym, jak poradzić sobie z problemem kaskadowych stylów niezamierzonego nadpisywania stylów o niższym priorytecie (ze względu na liczbę dostępnych opcji text-decoration-skip), poszczególne właściwości zostaną podzielone na nowe właściwości podobny do text-decoration-skip-ink. Aby uzyskać więcej kontekstu i przykłady, dlaczego zostało to zmienione, zobacz tę dyskusję na GitHub i protokół grupy roboczej CSS omawiający właściwości.

Domyślnie przeglądarki „pomijają” obszary, w których „atrament” znaku przecina podkreślenie, na przykład:

Możesz zmienić to zachowanie, aby wymusić podkreślenie / nadkreślenie, aby przechodziło przez znak, ustawiając text-decoration-skip-inkna none.

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

Powoduje to przecinanie linii przez znaki:

Składnia

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

Wartości

text-decoration-skip-ink akceptuje następujące wartości:

  • auto jest wartością domyślną i „pomija” podkreślenia / zakreślenia podczas przechodzenia przez znak.
  • none przetnie to podkreślenie / nadkreślenie bezpośrednio przez twoje wiszące litery y i wysokie t.

Przykład

Zobacz przykład Pen text-decoration-skip-ink
autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
91 87 Nie 88 TP

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 14, 0-14, 4 *

Związane z

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

Zasoby

  • Dokumentacja MDN
  • Stylizacja podkreśla w Internecie
  • Użytkownicy z dysleksją i podkreślenia typu „skip-ink”