:indeterminateείναι ένας ψευδο-επιλογέας στο CSS που ονομάζεται για μια κατάσταση που δεν είναι ούτε επιλεγμένη ούτε ελεγμένη. Σε αυτήν την ενδιάμεση κατάσταση μπορούμε να εξετάσουμε τις επιλογές "Ίσως" μεταξύ "Ναι" και "Όχι". Το κράτος δεν είναι πλήρως καθορισμένο, εξ ου και το όνομα: απροσδιόριστο.
Απροσδιόριστα πλαίσια ελέγχου
Το πιο συνηθισμένο μέρος που μπορούμε να δούμε αυτό στο παιχνίδι είναι με τα πλαίσια ελέγχου σε μια φόρμα:
Υπάρχουν μερικά περίεργα πράγματα σχετικά :indeterminateμε τα κουτάκια που αξίζει να σημειωθούν πριν ανακαλύψουμε πώς μπορεί να επιλεγεί στο CSS.
Δεν μπορεί να οριστεί στο HTML
Πρώτα απ 'όλα, δεν υπάρχει τρόπος να ρυθμίσετε ένα πλαίσιο ελέγχου σε μια απροσδιόριστη κατάσταση σε HTML. Στο παραπάνω παράδειγμα ανοίγματος, καταφέραμε να ρυθμίσουμε το δεύτερο πλαίσιο ελέγχου για να το ελέγξουμε ρητά λέγοντας έτσι στο HTML.
Είναι λογικό να υποθέσουμε ότι θα μπορούσαμε να κάνουμε το ίδιο με μια απροσδιόριστη κατάσταση:
Δυστυχώς, αυτό δεν συμβαίνει, οπότε μην χρησιμοποιείτε αυτό το τελευταίο παράδειγμα στον κώδικά σας.
Τη στιγμή αυτής της γραφής, το Javascript είναι το μόνο μέσο για τον ορισμό μιας απροσδιόριστης κατάστασης σε ένα πλαίσιο ελέγχου. Ένας τρόπος για να το κάνετε είναι να επιλέξετε ένα συγκεκριμένο πλαίσιο ελέγχου ανά αναγνωριστικό:
var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;Ο περιορισμός του παραπάνω παραδείγματος είναι ότι το πλαίσιο ελέγχου δεν μπορεί ποτέ να επιστρέψει σε μια απροσδιόριστη κατάσταση μόλις αλλάξει σε άλλη κατάσταση. Αντ 'αυτού, μπορούμε να περιστρέψουμε ανάμεσα σε επιλεγμένες, μη ελεγμένες και απροσδιόριστες καταστάσεις:
function toggle(demo) ( if (demo.readOnly) demo.checked=demo.readOnly=false; else if (!demo.checked) demo.readOnly=demo.indeterminate=true; )Ανατρέξτε στο Pen Rotate Checkbox States από τον Geoff Graham (@geoffgraham) στο CodePen.
Είναι καθαρά μια οπτική κατάσταση
Ένα πλαίσιο ελέγχου μετράει μόνο αν έχει επιλεγεί ή δεν έχει επιλεγεί, ανεξάρτητα από το αν έχουμε ενεργοποιήσει μια απροσδιόριστη κατάσταση. Με άλλα λόγια, το απροσδιόριστο κρύβει την πραγματική τιμή του πλαισίου ελέγχου και δεν υπολογίζεται ως δική του αξία.
Η προεπιλεγμένη εμφάνιση είναι ασυνεπής στα προγράμματα περιήγησης
Όπως οι αριθμητικές είσοδοι, μια απροσδιόριστη κατάσταση δεν διαμορφώνεται με συνέπεια σε κάθε πρόγραμμα περιήγησης.
Συνολικά, ωστόσο, εδώ είναι η υποστήριξη για απροσδιόριστα πλαίσια ελέγχου.
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 28 | 3.6 | 6 | 12 | 6 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4 | 12.2-12.4 |
Απροσδιόριστα κουμπιά ραδιοφώνου
:indeterminate μπορεί να εφαρμοστεί σε κουμπιά επιλογής σε επίπεδο ομάδας, όπου ολόκληρη η ομάδα θεωρείται ότι βρίσκεται σε απροσδιόριστη κατάσταση εάν δεν έχει επιλεγεί καμία επιλογή.
Δείτε το Pen Inderminate Radio Button από τον Geoff Graham (@geoffgraham) στο CodePen.
Πρέπει να σημειώσουμε ότι η χρήση :indeterminateμπορεί να μην είναι η καλύτερη επιλογή για την εμπειρία χρήστη.
Απροσδιόριστες γραμμές προόδου
Μπορούμε επίσης να εφαρμόσουμε :indeterminateστο στοιχείο όπου δεν έχει καθοριστεί ρητά καμία τιμή στο HTML. Δεν υπάρχει ανάγκη για Javascript, αλλά το στιλ του στοιχείου είναι από μόνο του ένα δύσκολο πράγμα που απαιτεί πολλή δουλειά και προσοχή για τη συνέπεια μεταξύ των προγραμμάτων περιήγησης.
Δείτε το στοιχείο Pen Indeterminate Progress από τον Geoff Graham (@geoffgraham) στο CodePen.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 39 | 51 | 11 | 79 | 10.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
Περισσότερες πληροφορίες
- Πρόχειρο CSS Selectors Level 4
- Απροσδιόριστα πλαίσια ελέγχου
- Απροσδιόριστα κουμπιά ραδιοφώνου
- Στοιχείο προόδου HTML5