Η :read-writeκαι :read-onlyεπιλογείς είναι δύο μεταβλητότητα ψευδο-τάξεις με σκοπό να κάνει φόρμα styling ευκολότερη με βάση disabled, readonlyκαι contenteditableHTML Χαρακτηριστικά. Παρόλο που η υποστήριξη του προγράμματος περιήγησης δεν είναι τόσο άσχημη, οι διάφορες εφαρμογές είναι αρκετά περίεργες.
Σύμφωνα με τις επίσημες προδιαγραφές CSS, ένας :read-writeεπιλογέας θα ταιριάζει με ένα στοιχείο όταν:
- είναι είτε
inputη οποία έχειreadonlyούτεdisabledχαρακτηριστικά. - είναι ένα
textareaπου δεν έχει ούτεreadonlyούτεdisabled - είναι οποιοδήποτε άλλο επεξεργάσιμο στοιχείο (χάρη στο
contenteditableχαρακτηριστικό)
Σύνταξη & Παράδειγμα
/* Any element that is not writable */ :read-only ( ) /*… so you might want to scope it */ input:read-only, textarea:read-only, (contenteditable):read-only ( cursor: not-allowed; ) /* Any enabled text input or enabled textarea or element with the contenteditable attribute */ :read-write ( background: white; cursor: text; )Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 36 | 3 * | Οχι | 13 | 9 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9.0-9.2 |
Υπάρχει μια σημαντική διαφορά μεταξύ του τι συνιστάται στις προδιαγραφές και του τι πραγματικά κάνουν τα προγράμματα περιήγησης. Για παράδειγμα, εάν εμμείνουμε στις προδιαγραφές, κάθε στοιχείο που είναι επεξεργάσιμο από το χρήστη αλλά απενεργοποιείται ( disabledή readonly) ή απλά δεν μπορεί να επεξεργαστεί από το χρήστη θα πρέπει να στοχεύεται από έναν ακατάλληλο :read-onlyεπιλογέα.
| Χρώμιο | Firefox | Σαφάρι | ΛΥΡΙΚΗ ΣΚΗΝΗ | |
|---|---|---|---|---|
input | :διαβάζω γράφω | :διαβάζω γράφω | :διαβάζω γράφω | :διαβάζω γράφω |
input(disabled) | :διαβάζω γράφω | :διαβάζω γράφω | :διαβάζω γράφω | :διαβάζω γράφω |
input(readonly) | :μόνο για ανάγνωση | :μόνο για ανάγνωση | :μόνο για ανάγνωση | :μόνο για ανάγνωση |
(contenteditable) | - | :διαβάζω γράφω | - | :μόνο για ανάγνωση |
* | - | :μόνο για ανάγνωση | - | :μόνο για ανάγνωση |
Εν τω μεταξύ, μόνο ο Firefox φαίνεται να το κάνει, και προφανώς δεν είναι πολύ καλά, καθώς θεωρεί μια disabledείσοδο ως :read-write. Όσον αφορά την Opera να μην προσθέτει ετικέτα σε ένα contenteditableστοιχείο :read-write, είναι απλώς επειδή δεν υποστηρίζει contenteditable.