Η :dir()ψευδο-τάξη στο CSS επιτρέπει την επιλογή στοιχείων με βάση την κατεύθυνση της γλώσσας, όπως καθορίζεται στη σήμανση HTML. Υπάρχουν πραγματικά μόνο δύο κατευθύνσεις που μπορεί να ρέει η γλώσσα σε ένα έγγραφο, που είναι από αριστερά προς δεξιά και από δεξιά προς αριστερά. Σκεφτείτε το ως έναν τρόπο να διαμορφώσετε στοιχεία που διακρίνονται από διαφορετική γλωσσική κατεύθυνση.
.item:dir(rtl) ( background: red; color: #fff; )Η ψευδο-τάξη δέχεται μόνο μία τιμή και θα επιστρέψει null εάν εισαχθούν περισσότερες από μία τιμές.
Δείτε το στυλό-επιλογέα στυλό από τον Geoff Graham (@geoffgraham) στο CodePen.
:dir(rtl) εναντίον (dir=rtl)
Μπορούμε επίσης να επιλέξουμε ένα στοιχείο με βάση την κατεύθυνση της γλώσσας του κάνοντας χρήση ενός επιλογέα ερωτήματος αντιστοίχισης:
.item(dir=rtl) ( background: red; color: #fff; )Αυτό πράγματι λειτουργεί, αλλά διαφέρει από :dir(rtl)το ότι επιλέγει μόνο ένα στοιχείο από αυτό που ορίζεται αυστηρά στη σήμανση HTML. Από την άλλη πλευρά, :dir(rtl)θα μυρίζει τις προτιμήσεις γλώσσας του πράκτορα χρήστη και θα επιλέγει το στοιχείο χωρίς να αναφέρεται ρητά στο HTML.
Αυτό είναι μεγάλη υπόθεση επειδή στοιχεία που δεν δηλώνουν ρητά τη γλωσσική κατεύθυνση θα κληρονομήσουν το dirχαρακτηριστικό του πλησιέστερου προγόνου του που περιέχει ένα. Αυτό μπορεί να οδηγήσει σε ένα σενάριο όπου η χρήση (dir=rtl)επιλέγει πρόσθετα στοιχεία από ό, τι σκοπεύετε.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| Οχι | 17 * | Οχι | Οχι | Οχι |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Οχι | 85 | Οχι | Οχι |
Περισσότερες πληροφορίες
- Επιλογή επιπέδου 4 Προδιαγραφές
- Πρόβλημα Chromium # 576815
- Σφάλμα WebKit # 64861
- Τεκμηρίωση Mozilla
- Αίτημα λειτουργίας Microsoft Edge
- Κατάσταση πλατφόρμας Chromium
- PostCSS
:dir()polyfill