:dir()Pseudo-klassi CSS võimaldab elementide põhjal valitakse suunas keeles, mis on kindlaks määratud HTML Markup. Dokumendis saab tegelikult liikuda ainult kahes suunas, mis on vasakult paremale ja paremalt vasakule. Mõelge sellele kui stiilis elementidele, mida eristab erinev keele suunavus.
.item:dir(rtl) ( background: red; color: #fff; )Pseudoklass aktsepteerib ainult ühte väärtust ja tagastab nulli, kui sisestatakse rohkem kui üks väärtus.
Vaadake CodePenilt Geoff Graham'i (@geoffgraham) pliiatsit: dir pseudovalija.
:dir(rtl) vs. (dir=rtl)
Elemendi saame valida ka selle keele suuna põhjal, tehes vaste päringu valija:
.item(dir=rtl) ( background: red; color: #fff; )See tõepoolest töötab, kuid erineb sellest :dir(rtl), et valib elemendi ainult selle järgi, mis on HTML-märgistuses rangelt määratletud. Tagaküljel :dir(rtl)nuusutab kasutajaagendi keele-eelistused ja valib elemendi ilma HTML-is selgesõnaliselt öeldud.
See on suur asi, sest elemendid, mis ei määra sõnaselgelt keelt, pärivad dirselle lähima esivanema atribuudi, mis seda sisaldab. See võib viia stsenaariumi, kus kasutamisel (dir=rtl)valitakse kavandatust täiendavad elemendid.
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| Ei | 17 * | Ei | Ei | Ei |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| Ei | 85 | Ei | Ei |
Rohkem informatsiooni
- Selektorite 4. taseme spetsifikatsioon
- Kroomi väljaanne # 576815
- Veebiketi viga # 64861
- Mozilla dokumentatsioon
- Microsoft Edge'i funktsioonitaotlus
- Kroomi platvormi olek
- PostCSS
:dir()polyfill