Text-decoration-skip - CSS-temppuja

Anonim

text-decoration-skipOminaisuus määrittää, mistä teksti alleviivaus, overline tai lakko-kautta rikkoutuu. Tämä parantaa koristelun tekstin luettavuutta ja korjaa välimerkkien kielioppia joillakin kielillä.

Tässä on yksi esimerkki:

a ( text-decoration-skip: ink; )

Varoitus! inkArvo on muutettu kokonaan uusi ominaisuus, text-decoration-skip-ink: auto;.

Jos selaimesi tukee tätä ominaisuutta, huomaat täällä, että jokaisen merkin (kuten "y" ja "p") jälkeläisillä on vain vähän tyhjää tilaa reunan ympäri:

Katso CSS-Tricksin kynän tekstikoristelu-ohitus (@ css-tricks) CodePenistä.

Jos selaimesi ei tue tätä ominaisuutta, sinun pitäisi odottaa kiinteistöltä tukevassa selaimessa:

teksti-sisustus-ohita kuva

text-decoration-skip OSX: ssä ja iOS: ssä

Vuoden 2014 lopulla Apple teki text-decorationSafari- ja iOS-selaimiin muutoksen, joka jäljittelee miten sen text-decoration-skip: ink;pitäisi toimia. Vaikka mikään text-decoration-skiparvoista ei ole vielä virallisesti otettu käyttöön, voit poistaa tämän oletustoiminnon käytöstä -webkit-text-decoration-skip: none;.

Katso Kynä -webkit-text-decoration-skip: none; jonka on kirjoittanut CSS-Tricks (@ css-tricks) CodePenissä.

Liittyvät

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

Lisää tietoa

  • CSS-tekstikoristelumoduuli, taso 4,
    toimittajan luonnos
  • text-decoration-skip MSDN: ssä.
  • Keskustelu lisäyksestä trailing-spacesarvona W3C-postituslistalta.
  • Parannetaan tekstin luettavuutta lukihäiriöistä kärsivillä musteilla
  • text-decoration-skip MDN: ssä
  • text-decoration-skip-ink MDN: ssä

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.

Työpöytä

Kromi Firefox IE Reuna Safari
91 87 Ei 88 TP

Matkapuhelin / tabletti

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