Οι συμβουλές εργαλείων είναι σαν το μικρότερο πρόβλημα διεπαφής χρήστη που μπορεί να έχετε. Είναι μικροσκοπικά και συνήθως κρυμμένα. Όταν κάποιος ρωτά πώς να δημιουργήσει ένα, η παραδοσιακή απάντηση σχεδόν πάντα επιστρέφει χρησιμοποιώντας κάποια βιβλιοθήκη JavaScript. Και για πολύ καιρό, αυτή ήταν η λογική συμβουλή. Το ακολούθησα και εγώ. Επιφανειακά, μια συμβουλή εργαλείου είναι απλή. Τοποθετήστε το δείκτη του ποντικιού ή εστιάστε σε ένα στοιχείο, εμφανίστε ένα μικρό πλαίσιο με κάποιο κείμενο και, στη συνέχεια, αποκρύψτε το όταν ο χρήστης απομακρύνεται. Αλλά μόλις στείλετε ένα σε πραγματικούς χρήστες, αρχίζουν να φαίνονται τα άκρα. Χρήστες πληκτρολογίου Καρτέλα στο έναυσμα, αλλά ποτέ δεν βλέπετε την επεξήγηση εργαλείου. Οι αναγνώστες οθόνης το ανακοινώνουν δύο φορές, ή καθόλου. Η επεξήγηση εργαλείου τρεμοπαίζει όταν μετακινείτε πολύ γρήγορα το ποντίκι. Επικαλύπτει περιεχόμενο σε μικρότερες οθόνες. Πατώντας Esc δεν κλείνει. Η εστίαση χάνεται. Με την πάροδο του χρόνου, ο κώδικας συμβουλών εργαλείων μου εξελίχθηκε σε κάτι που δεν ήθελα πραγματικά να κατέχω πλέον. Οι ακροατές εκδηλώσεων συσσωρεύτηκαν. Ο χειρισμός του ποντικιού και της εστίασης έπρεπε να γίνει χωριστά. Τα εξωτερικά κλικ χρειάζονταν ειδικές θήκες. Τα χαρακτηριστικά ARIA έπρεπε να συγχρονίζονται με το χέρι. Κάθε μικρή επιδιόρθωση προσέθεσε ένα άλλο επίπεδο λογικής. Οι βιβλιοθήκες βοήθησαν, αλλά ήταν επίσης περισσότερο σαν μαύρα κουτιά στα οποία δούλευα αντί να καταλαβαίνω πλήρως τι συνέβαινε στα παρασκήνια. Αυτό ήταν που με ώθησε να κοιτάξω το νεότερο Popover API. Ήθελα να δω τι θα συνέβαινε αν ξαναδημιουργούσα μια μεμονωμένη επεξήγηση εργαλείου χρησιμοποιώντας το εγγενές μοντέλο του προγράμματος περιήγησης χωρίς τη βοήθεια βιβλιοθήκης. Καθώς ξεκινάμε, αξίζει να σημειωθεί ότι, όπως συμβαίνει με κάθε νέο χαρακτηριστικό, υπάρχουν ορισμένα πράγματα που εξακολουθούν να ολοκληρώνονται. Τούτου λεχθέντος, αυτή τη στιγμή απολαμβάνει εξαιρετική υποστήριξη προγράμματος περιήγησης, αν και υπάρχουν πολλά κομμάτια στο συνολικό API που βρίσκονται σε ροή. Αξίζει να προσέχετε τον Caniuse στο μεταξύ. Η «Παλιά» επεξήγηση εργαλείου Πριν από το Popover API, η χρήση μιας βιβλιοθήκης συμβουλών εργαλείων δεν ήταν συντόμευση. Ήταν η προεπιλογή. Τα προγράμματα περιήγησης δεν είχαν μια εγγενή ιδέα για μια συμβουλή εργαλείου που λειτουργούσε σε τεχνολογία ποντικιού, πληκτρολογίου και υποβοήθησης. Αν σας ένοιαζε η ορθότητα, η μόνη σας επιλογή ήταν να χρησιμοποιήσετε μια βιβλιοθήκη, και αυτό ακριβώς έκανα. Σε υψηλό επίπεδο, το μοτίβο ήταν πάντα το ίδιο: ένα στοιχείο ενεργοποίησης, ένα κρυφό στοιχείο συμβουλής εργαλείου και JavaScript για τον συντονισμό των δύο.
Η βιβλιοθήκη χειρίστηκε την καλωδίωση που επέτρεπε στο στοιχείο να εμφανίζεται κατά την τοποθέτηση του ποντικιού ή την εστίαση, την απόκρυψη στο θάμπωμα ή την αφαίρεση του ποντικιού και την αλλαγή θέσης/αλλαγή μεγέθους κατά την κύλιση.
Με την πάροδο του χρόνου, η συμβουλή εργαλείου θα μπορούσε να γίνει εύθραυστη. Οι μικρές αλλαγές ενέχουν κίνδυνο. Μικρές διορθώσεις προκάλεσαν παλινδρομήσεις. Ακόμη χειρότερα, η προσθήκη νέων συμβουλών εργαλείων κληρονόμησε την ίδια πολυπλοκότητα. Τα πράγματα λειτούργησαν τεχνικά, αλλά ποτέ δεν ένιωσα τακτοποιημένα ή ολοκληρωμένα. Αυτή ήταν η κατάσταση όταν αποφάσισα να δημιουργήσω ξανά την επεξήγηση εργαλείου χρησιμοποιώντας το εγγενές Popover API του προγράμματος περιήγησης. The Moment I Tried The Popover API Δεν άλλαξα στη χρήση του Popover API επειδή ήθελα να πειραματιστώ με κάτι νέο. Άλλαξα επειδή είχα βαρεθεί να διατηρώ τη συμπεριφορά συμβουλών εργαλείων που πίστευα ότι το πρόγραμμα περιήγησης θα έπρεπε να είχε ήδη καταλάβει. Στην αρχή ήμουν δύσπιστος. Τα περισσότερα νέα web API υπόσχονται απλότητα, αλλά εξακολουθούν να απαιτούν κόλλα, χειρισμό ακραίων περιπτώσεων ή εναλλακτική λογική που αναδημιουργεί αθόρυβα την ίδια πολυπλοκότητα από την οποία προσπαθούσατε να ξεφύγετε. Έτσι, δοκίμασα το Popover API με τον μικρότερο δυνατό τρόπο. Να πώς έμοιαζε:
1. Το πληκτρολόγιο "Just Works" Η υποστήριξη του πληκτρολογίου εξαρτιόταν από πολλαπλά επίπεδα που ήταν σωστά ευθυγραμμισμένα: η εστίαση έπρεπε να ενεργοποιήσει την επεξήγηση εργαλείου, το θάμπωμα έπρεπε να το κρύψει, το Esc έπρεπε να συνδεθεί χειροκίνητα και ο χρονισμός είχε σημασία. Εάν χάσατε μια θήκη άκρης, η επεξήγηση εργαλείου είτε θα έμενε ανοιχτή για πολύ καιρό είτε θα εξαφανιζόταν προτού μπορέσει να διαβαστεί. Με το χαρακτηριστικό popover σε αυτόματο ή μη αυτόματο, το πρόγραμμα περιήγησης αναλαμβάνει τα βασικά: Τα Tab και Shift+Tab συμπεριφέρονται κανονικά, το Esc κλείνει την επεξήγηση εργαλείου κάθε φορά και δεν απαιτούνται επιπλέον ακροατές.
Αυτό που εξαφανίστηκε από τη βάση κωδίκων μου ήταν οι καθολικοί χειριστές πλήκτρων, η λογική εκκαθάρισης ειδικά για το Esc και οι έλεγχοι κατάστασης κατά την πλοήγηση με πληκτρολόγιο. Η εμπειρία του πληκτρολογίου έπαψε να είναι κάτι που έπρεπε να διατηρήσω και έγινε εγγύηση του προγράμματος περιήγησης. 2. Προβλεψιμότητα του Screenreader Αυτό ήταν τομεγαλύτερη βελτίωση. Ακόμη και με προσεκτική εργασία ARIA, η συμπεριφορά διέφερε, όπως περιέγραψα νωρίτερα. Κάθε μικρή αλλαγή φαινόταν επικίνδυνη. Η χρήση ενός popover με κατάλληλο ρόλο φαίνεται και είναι πολύ πιο σταθερή και προβλέψιμη όσον αφορά το τι πρόκειται να συμβεί:
Και εδώ είναι άλλη μια νίκη: Μετά την αλλαγή, η Lighthouse σταμάτησε να επισημαίνει εσφαλμένες προειδοποιήσεις κατάστασης ARIA για την αλληλεπίδραση, κυρίως επειδή δεν υπάρχουν πλέον προσαρμοσμένες καταστάσεις ARIA για να κάνω λάθος κατά λάθος.
3. Διαχείριση εστίασης Η εστίαση ήταν εύθραυστη. Πριν, είχα κανόνες όπως: αφήστε την ενεργοποίηση εστίασης να εμφανίσει την επεξήγηση εργαλείου, μετακινήστε την εστίαση στην επεξήγηση εργαλείου και μην κλείνετε, θάμπωμα της ενεργοποίησης όταν είναι πολύ κοντά και κλείστε την επεξήγηση εργαλείου και επαναφέρετε την εστίαση χειροκίνητα. Αυτό λειτούργησε μέχρι που δεν το έκανε. Με το Popover API, το πρόγραμμα περιήγησης επιβάλλει ένα απλούστερο μοντέλο όπου η εστίαση μπορεί πιο φυσικά να μετακινηθεί στο popover. Το κλείσιμο του popover επαναφέρει την εστίαση στη σκανδάλη και δεν υπάρχουν αόρατες παγίδες εστίασης ή χαμένες στιγμές εστίασης. Και δεν πρόσθεσα κώδικα επαναφοράς εστίασης. το αφαίρεσα.
Συμπέρασμα Το Popover API σημαίνει ότι οι συμβουλές εργαλείων δεν είναι πλέον κάτι που προσομοιώνετε. Είναι κάτι που καταλαβαίνει το πρόγραμμα περιήγησης. Το άνοιγμα, το κλείσιμο, η συμπεριφορά του πληκτρολογίου, ο χειρισμός Escape και ένα μεγάλο κομμάτι προσβασιμότητας προέρχονται πλέον από την ίδια την πλατφόρμα, όχι από ad-hoc JavaScript. Αυτό δεν σημαίνει ότι οι βιβλιοθήκες συμβουλών εργαλείων είναι παρωχημένες επειδή εξακολουθούν να έχουν νόημα για πολύπλοκα συστήματα σχεδίασης, βαριές προσαρμογές ή περιορισμούς παλαιού τύπου, αλλά η προεπιλογή έχει αλλάξει. Για πρώτη φορά, η απλούστερη επεξήγηση εργαλείου μπορεί να είναι και η πιο σωστή. Εάν είστε περίεργοι, δοκιμάστε αυτό το πείραμα: Αντικαταστήστε απλώς μια επεξήγηση εργαλείου στο προϊόν σας με το Popover API, μην ξαναγράψετε τα πάντα, μην μεταφέρετε ένα ολόκληρο σύστημα και απλώς επιλέξτε ένα και δείτε τι εξαφανίζεται από τον κώδικά σας. Όταν η πλατφόρμα σας δίνει ένα καλύτερο πρωτόγονο, η νίκη δεν είναι απλώς λιγότερες γραμμές JavaScript, αλλά είναι λιγότερα πράγματα για τα οποία πρέπει να ανησυχείτε καθόλου. Δείτε τον πλήρη πηγαίο κώδικα στο αποθετήριο GitHub μου. Περαιτέρω ανάγνωση Για βαθύτερες βουτιές στα popover και τα σχετικά API:
«Poppin’ In», Geoff Graham «Διευκρίνιση της σχέσης μεταξύ Popovers και Dialogs», Zell Liew «Τι είναι το popover=hint;», Una Kravets “Invoker Commands”, Daniel Schwarz «Δημιουργία ειδοποίησης αυτόματου κλεισίματος με HTML Popover», Preethi Ανοίξτε το UI Popover API Explainer “Pop(over) the Balloons”, John Rhea “CSS Anchor Positioning”, Juan Diego Rodríguez
Το MDN προσφέρει επίσης ολοκληρωμένη τεχνική τεκμηρίωση για το Popover API.
