: ορατή εστίαση - CSS-Κόλπα

Η :focus-visibleψευδο-τάξη (γνωστή και ως ψευδο-κλάση «Focus-Indicated») είναι ένας εγγενής τρόπος CSS για το στυλ στοιχείων που:

Είναι στο επίκεντρο
Χρειάζεστε μια ορατή ένδειξη για να δείξετε την εστίαση (περισσότερα σε αυτό αργότερα)

:focus-visibleχρησιμοποιείται παρόμοια με :focus: για να επιστήσει την προσοχή στο στοιχείο που έχει επί του παρόντος την εστίαση.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visibleείναι μέρος του προσχέδιου CSS4 Selectors. Πριν από την υιοθέτηση, η Mozilla παρουσίασε την :-moz-focusringψευδο-κατηγορία για να φέρει τη λειτουργικότητα στον Firefox μπροστά από μια επίσημη προδιαγραφή.

Γιατί χρειαζόμαστε: ορατό στην εστίαση;

Αυτό δεν το :focusκάνει ήδη; Ναι, αλλά υπάρχουν προβλήματα. Η καθαρότερη εικόνα είναι ένα κουμπί που ενεργοποιεί κάποια JavaScript. Φανταστείτε ένα καρουσέλ εικόνας με κουμπιά για εναλλαγή μεταξύ εικόνων. Ας υποθέσουμε ότι έχετε προσθέσει ένα tabindexστα κουμπιά, ώστε να μπορούν να επιλεγούν με πληκτρολόγιο, αλλά όταν πηγαίνετε στη δοκιμή του καρουζέλ με το ποντίκι σας, βλέπετε αυτό το περίγραμμα γύρω από το πανέμορφο κουμπί σας:

Το περίγραμμα προστέθηκε από το πρόγραμμα περιήγησης στις `:focus`

Όχι ότι θα θέλατε να το κάνετε αυτό (για ζητήματα προσβασιμότητας), αλλά πώς το απαλλαγείτε; Ρυθμίζοντας την :focusψευδο-τάξη:

.next-image-button:focus ( outline: none; )

Τώρα το κουμπί σας φαίνεται υπέροχο όταν είναι στο επίκεντρο, αλλά τι συμβαίνει όταν ένας χρήστης κάνει καρτέλες στο κουμπί σας χωρίς ποντίκι αλλά πληκτρολόγιο; Δεν μπορούν να δουν πού έχουν κάνει καρτέλες! Αυτό είναι ένα πρόβλημα γιατί τώρα δεν υπάρχει τρόπος να πούμε ποιο κουμπί εστιάζεται για ενέργειες πληκτρολογίου:

Ένα από αυτά είναι εστιασμένο, αλλά δεν μπορείτε να το δείτε!

Υπάρχει τρόπος να αφαιρέσετε το μπλε περίγραμμα εστίασης, αλλά να δείξετε μια εστίαση που είναι πιο σύμφωνη με τη σχεδίαση του ιστότοπου; Σίγουρα, μπορείτε να πάρετε το κέικ σας και να το φάτε, χάρη σε :focus-visible!

:focus-visibleισχύει μόνο όταν θέλετε πραγματικά μια οπτική ένδειξη για να βοηθήσετε τον χρήστη να δει πού βρίσκεται η εστίαση. Με άλλα λόγια, δεν μπορεί να κρύψει το περίγραμμα όπως :focusμπορεί. (Λοιπόν, θα μπορούσε να το συνδυάσει με το σχέδιο, αλλά οτιδήποτε άλλο.) Τα δύο πρέπει να χρησιμοποιηθούν μαζί με αυτήν την έννοια. Ας προσθέσουμε ένα στο κουμπί μας:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Τώρα, όταν το πληκτρολόγιο χρησιμοποιείται για καρτέλα στο κουμπί, θα υπάρχει μια οπτική ένδειξη της εστίασης:

`:focus-visible` κάνει την εστίαση ορατή!

Πώς καθορίζουν τα προγράμματα περιήγησης πότε κάτι είναι: ορατό στην εστίαση;

Τα προγράμματα περιήγησης έχουν λίγο περιθώριο για να καθορίσουν πότε αυτός ο ψευδο-επιλογέας πρέπει να εφαρμοστεί σε ένα δεδομένο στοιχείο χρησιμοποιώντας τις δικές του ευρετικές. Αρχικά, ας δούμε το προσχέδιο εργασίας CSS4 και στη συνέχεια θα προσπαθήσουμε να το αναλύσουμε. Από τις προδιαγραφές:

Εάν ένας χρήστης έχει εκφράσει την προτίμησή του (όπως μέσω προτίμησης συστήματος ή ρύθμισης προγράμματος περιήγησης) να βλέπει πάντα μια ορατή ένδειξη εστίασης, ο πράκτορας χρήστη θα πρέπει να το τιμήσει έχοντας: η εστίαση-ορατή πάντα ταιριάζει στο ενεργό στοιχείο, ανεξάρτητα από οποιαδήποτε άλλη παράγοντες. (Μια άλλη επιλογή μπορεί να είναι ο πράκτορας χρήστη να εμφανίζει τη δική του ένδειξη εστίασης ανεξάρτητα από τα στυλ του συγγραφέα.)

Κάθε στοιχείο που υποστηρίζει είσοδο πληκτρολογίου (όπως ένα στοιχείο εισόδου ή οποιοδήποτε άλλο στοιχείο που μπορεί να ενεργοποιήσει την εμφάνιση ενός εικονικού πληκτρολογίου στην εστίαση εάν δεν υπάρχει φυσικό πληκτρολόγιο) θα πρέπει πάντα να ταιριάζει: εστίαση-ορατό όταν εστιάζεται.

Εάν ο χρήστης αλληλεπιδρά με τη σελίδα μέσω του πληκτρολογίου, το επί του παρόντος εστιασμένο στοιχείο πρέπει να ταιριάζει: εστίαση-ορατό (π.χ. η χρήση του πληκτρολογίου μπορεί να αλλάξει εάν αυτή η ψευδο-τάξη ταιριάζει ακόμη και αν δεν επηρεάζει: εστίαση).

Εάν ο χρήστης αλληλεπιδρά με τη σελίδα μέσω μιας συσκευής κατάδειξης, έτσι ώστε η εστίαση να μετακινηθεί σε ένα νέο στοιχείο που δεν υποστηρίζει την είσοδο του χρήστη, το στοιχείο που εστιάστηκε πρόσφατα δεν πρέπει να ταιριάζει: ορατό στην εστίαση.

Αν το ενεργό στοιχείο ταιριάζει: εστίαση-ορατό και ένα σενάριο προκαλεί την εστίαση να μετακινηθεί αλλού, το νέο εστιασμένο στοιχείο πρέπει να ταιριάζει: εστίαση-ορατό.

Αντίθετα, εάν το ενεργό στοιχείο δεν ταιριάζει: εστίαση-ορατό και ένα σενάριο προκαλεί την εστίαση να μετακινηθεί αλλού, το νέο εστιασμένο στοιχείο δεν πρέπει να ταιριάζει: εστίαση-ορατό.

Αν αυτό είναι λίγο αφηρημένο, εδώ είναι μια ερμηνεία:

Κατάσταση	Εφαρμόζεται: ορατή εστίαση;
Ο χρήστης λέει ότι θέλει πάντα η εστίαση να είναι ορατή μέσω μιας ρύθμισης	Ναί
Ένα στοιχείο χρειάζεται ένα πληκτρολόγιο για να λειτουργήσει (όπως κείμενο)	Ναί
Ο χρήστης πλοηγείται με πληκτρολόγιο	Ναί
Ο χρήστης πλοηγείται με μια συσκευή κατάδειξης (όπως ποντίκι ή δάχτυλο σε οθόνη αφής)	Οχι
Ένα σενάριο προκαλεί την εστίαση να μετακινηθεί από ένα `:focus-visible`στοιχείο σε ένα άλλο στοιχείο	Ναί
Ένα σενάριο προκαλεί τη μετακίνηση της εστίασης από ένα μη `:focus-visible`στοιχείο σε άλλο στοιχείο	Οχι

Επαναλαμβάνεται: Πρόκειται για οδηγίες και τα προγράμματα περιήγησης θα μπορούν να αποφασίσουν για το τι επιλέγεται :focus-visible. Μπορούμε να περιμένουμε ότι η προφανής περίπτωση πλοήγησης πληκτρολογίου θα αντιμετωπιστεί με προβλέψιμο τρόπο, αλλά τα προγράμματα περιήγησης έχουν τη δυνατότητα να κάνουν τον προσδιορισμό τους, όπως κάθε άλλη δυνατότητα.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.