: μη έγκυρος χρήστης - CSS-Κόλπα

Το :user-invalidείναι ένα CSS ψευδο-class που είναι σύμφωνα με την πρόταση της CSS Selectors Level σχέδιο 4 εργασίας ότι επιλέγει ένα στοιχείο μορφή ανάλογα με το αν η αξία, όπως είχαν εγγραφεί από το χρήστη είναι έγκυρη όταν ελέγχεται σε σχέση με το τι ορίζεται ως αποδεκτή τιμή στο η σήμανση HTML μετά τον αλληλεπίδραση του τελικού χρήστη με τη φόρμα πέρα από αυτήν την εισαγωγή. Στην πραγματικότητα, :user-invalidέχει κληθεί "Ψευδο-κλάση αλληλεπίδρασης χρήστη" επειδή είναι μοναδικό στον προσδιορισμό μιας ενέργειας χρήστη στην επιλογή ενός στοιχείου.

Πάρτε την ακόλουθη σήμανση HTML για μια βασική φόρμα με αριθμητικό πεδίο:

Ποσότητα:

Το αριθμητικό εύρος που ορίζεται από τη σήμανση HTML για την είσοδο είναι μεταξύ 1και 10αλλά η προεπιλεγμένη τιμή έχει οριστεί σε 11. Αυτό σημαίνει ότι η τιμή δεν είναι έγκυρη μόλις φορτωθεί η φόρμα.

Ωστόσο, η :user-invalidψευδο-τάξη δεν θα τεθεί σε ισχύ παρά μόνο μετά την πραγματική αλληλεπίδραση του χρήστη με τη φόρμα πέρα από την εισαγωγή της στο πεδίο. Αυτή η αλληλεπίδραση είναι η διαφορά μεταξύ :user-invalidκαι :invalid. Η ίδια αρχή ισχύει για τις τιμές της εισαγόμενης φόρμας που ορίζονται από :in-range, :out-of-rangeκαι :required.

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

input:user-invalid ( color: red; )

Η παρακάτω εικόνα απεικονίζει τις διαφορετικές καταστάσεις μεταξύ :validκαι :user-invalidβάσει του παραπάνω παραδείγματος HTML.

Η διαφορά μεταξύ μιας έγκυρης τιμής (αριστερά) και μιας μη έγκυρης τιμής που εισήγαγε ένας χρήστης μετά από αλληλεπίδραση με τη φόρμα.

Το μπερδεμένο πράγμα με εδώ είναι πόσο στενά σχετίζεται :invalidκαι :user-invalidείναι. Εάν χρησιμοποιηθούν μαζί, μπορεί να είναι δύσκολο να διακρίνουμε τα δύο:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Η διαφορά μεταξύ `:invalid`(κεντρικού) και μη έγκυρης τιμής που έχει εισαχθεί από έναν χρήστη (δεξιά) μπορεί να είναι δύσκολη στη διάκριση

Χρησιμοποιώντας το ένα πάνω στο άλλο ή έχοντας ξεχωριστό στυλ μεταξύ των δύο μπορεί να αποδειχθεί καλύτερη εμπειρία χρήστη σε μια πραγματική περίπτωση χρήσης.