: dir () - CSS-triki

Anonim

:dir()Psevdo-razred v CSS omogoča elementi, ki se izbere na podlagi smeri jezika, kot je določeno v označevalni HTML. V dokumentu lahko v resnici tečeta le dve smeri, in sicer od leve proti desni in od desne proti levi. Pomislite na to kot na način za oblikovanje elementov, ki jih odlikuje različna jezikovna usmerjenost.

 
.item:dir(rtl) ( background: red; color: #fff; )

Psevdo-razred sprejme samo eno vrednost in vrne nič, če je vnesenih več kot ena vrednost.

Oglejte si psevdo-izbirnik Pen: dir, avtor Geoff Graham (@geoffgraham) na CodePen.

:dir(rtl) vs. (dir=rtl)

Element lahko izberemo tudi glede na njegovo jezikovno smer, tako da uporabimo izbirnik poizvedbe za ujemanje:

.item(dir=rtl) ( background: red; color: #fff; )

To sicer deluje, vendar se razlikuje od :dir(rtl)tega, da element izbere le tako, kot je natančno določeno v oznaki HTML. Na drugi strani :dir(rtl)bo povohal jezikovne nastavitve uporabniškega agenta in izbral element, ne da bi bil v HTML-u izrecno naveden.

To je velika težava, ker bodo elementi, ki izrecno ne navajajo jezikovne smeri, podedovali diratribut svojega najbližjega prednika, ki ga vsebuje. To lahko privede do scenarija, ko z uporabo (dir=rtl)izberete dodatne elemente, kot jih nameravate.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
Ne 17 * Ne Ne Ne

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
Ne 85 Ne Ne

Več informacij

  • Specifikacije 4. stopnje
  • Chromium Issue # 576815
  • Napaka WebKit # 64861
  • Mozilla dokumentacija
  • Zahteva za funkcijo Microsoft Edge
  • Stanje platforme Chromium
  • PostCSS :dir()polifil