Κάντε κλικ στο συμβάν σε καθαρό CSS χωρίς:target. Στόχος στο CSS. Πως δουλεύει? Τι γίνεται με τη σημασιολογία και την προσβασιμότητα
Υπάρχει τρόπος χειρισμού συμβάντων κλικ στο CSS χωρίς χρησιμοποιώντας JavaScript. Μπορείτε να χρησιμοποιήσετε τη μέθοδο με :στόχος. Τι γίνεται όμως αν δεν μπορεί να χρησιμοποιηθεί; Υπάρχει και άλλη μέθοδος.
Δείτε το demo. Είναι πλήρως κατασκευασμένο σε CSS, όχι μια γραμμή κώδικα JavaScript. Βασίζεται στην αρχική χρήση των επιλογέων:active και:hover.
Περιγραφή
Πρώτα πρέπει να δημιουργήσετε ένα κοντέινερ που θα περιέχει ένα κουμπί και μπλοκ που εμφανίζονται όταν πατάτε το ποντίκι. Η δομή σήμανσης θα είναι κάπως έτσι:
Πρέπει να κάνουμε το .content αόρατο μέχρι να πατηθεί το κουμπί του ποντικιού στο .wrapper. Για να λύσετε το πρόβλημα, ορίστε την ιδιότητα .content εμφάνιση: κανένα . Στη συνέχεια, όταν πατηθεί το κουμπί του ποντικιού στο .wrapper, θα συμπεριλάβουμε την ιδιότητα display: block για το .content. Γιατί να ορίσετε την ιδιότητα .wrapper:active .content display: block . Σε αυτήν την κατάσταση, το .content θα είναι ορατό μόνο όταν πατηθεί το κουμπί του ποντικιού. Εάν το απελευθερώσετε, το .content θα εξαφανιστεί ξανά. Για να το διορθώσετε, ας βεβαιωθούμε ότι όταν ο δρομέας του ποντικιού είναι πάνω από το .content , στο στοιχείο εκχωρείται η ιδιότητα display: block. Δηλαδή, ορίσαμε την ιδιότητα display: block για .content:hover. Ο κώδικας CSS θα μοιάζει με αυτό:
Περιεχόμενο ( εμφάνιση: καμία; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
Το μόνο που μένει είναι να το «χτενίσεις» εμφάνισηκαι να το ξεκαθαρίσουμε:
Περιτύλιγμα ( θέση: σχετική; ) .κουμπί ( φόντο: κίτρινο; ύψος: 20 εικονοστοιχεία; πλάτος: 150 εικονοστοιχεία; ) .περιεχόμενο ( θέση: απόλυτη; padding-top: 20 px; ) .content li ( φόντο: κόκκινο; )
Το κείμενο του κουμπιού στον παραπάνω κώδικα θα έχει κίτρινο φόντο και οι πληροφορίες που εμφανίζονται όταν πατηθεί το κουμπί του ποντικιού θα έχουν κόκκινο φόντο.
Μπορείτε εύκολα να βρείτε πολλά σεμινάρια στο Διαδίκτυο χρησιμοποιώντας το ψευδο-κλάση:στόχος. Ωστόσο, ας μην ακολουθήσουμε τον κώδικα κάποιου άλλου, αλλά ας προσπαθήσουμε να τον κατανοήσουμε και να καταλάβουμε πώς λειτουργεί; Φυσικά, δεν μπορούμε να κάνουμε χωρίς παραδείγματα.
Τι είναι:στόχος;
Στο CSS:target, αυτή είναι μια ψευδο-κλάση που σας επιτρέπει να επιλέξετε ένα ολόκληρο «κομμάτι» του εγγράφου HTML στο οποίο θα εκτελεστεί κάποια ενέργεια. Αυτό θα μπορούσε να είναι μια παράγραφος κειμένου ή μια επικεφαλίδα, για παράδειγμα.
Οι ψευδο-κλάσεις δεν πρέπει να συγχέονται με ψευδο-στοιχεία, τα οποία μπορούν να επιλέξουν μόνο ένα συγκεκριμένο μέρος ενός στοιχείου, όπως το πρώτο γράμμα ή την πρώτη γραμμή μιας παραγράφου.
Ψευτοτάξεις:
- a:link(color:#111)
- a:hover(color:#222)
- div:first-child(color:#333)
Ψευδοστοιχεία:
- p::πρώτο γράμμα(χρώμα:#444)
- p::first-line(color:#555)
Νομίζω ότι είναι ξεκάθαρο από τη σύνταξη τι κάνει αυτή ή εκείνη η ψευδο-τάξη ή ψευδοστοιχείο. Η πιο δημοφιλής ψευδοκλάση είναι η :hover, την συναντούν όλοι οι webmasters· περιγράφει τα στυλ ενός στοιχείου κατά την αιώρηση. Ο στόχος λειτουργεί παρόμοια και περιγράφει τα στυλ ενός στοιχείου όταν συμβαίνει μια συγκεκριμένη κατάσταση.
Αναγνωριστικά αποσπασμάτων
Εν ολίγοις, αυτό είναι ένα πράγμα με το οποίο είναι δεμένη η ψευδοτάξη μας. Αυτό είναι ένα hashtag με μια λέξη ή φράση που τοποθετείται στο τέλος της διεύθυνσης. Μοιάζει με αυτό:
Αυτή η τεχνική μπορεί να χρησιμοποιηθεί για μεταβάσεις σε ένα άρθρο. Για παράδειγμα, στην αρχή του άρθρου δημιουργείτε έναν μικρό πίνακα περιεχομένων, όταν κάνετε κλικ σε ένα στοιχείο του οποίου ένα άτομο μεταφέρεται στην ενότητα όπου οδηγεί ο σύνδεσμος· η ενότητα πρέπει να προσθέσει ένα αναγνωριστικό.
Αυτό λειτουργεί για καθαρό HTML, δεν απαιτούνται κόλπα. Μικρά αναγνωριστικά.
Χειρισμός ενός κλικ χρησιμοποιώντας:target
Τώρα ας προσπαθήσουμε να βεβαιωθούμε ότι όταν κάνετε κλικ στην επιθυμητή ενότητα από το αυτοσχέδιο μενού μας, το στυλ του τίτλου αλλάζει, δείχνοντας ποια παράγραφος είναι ενεργή αυτήν τη στιγμή.
H1 ( γραμματοσειρά: 30 px Arial sans-serif; ) h1:target (μέγεθος γραμματοσειράς: 50 px; κείμενο-διακόσμηση: υπογράμμιση; χρώμα: #37aee4; )
Ο κώδικας είναι πολύ απλός - όταν κάνετε κλικ, ο τίτλος αλλάζει μέγεθος, χρώμα και υπογραμμίζεται. Μπορείτε να προσθέσετε ζωή (Ruslan, γεια) και να δημιουργήσετε μια κινούμενη εικόνα για την αλλαγή του χρώματος του τίτλου:
H1 ( γραμματοσειρά: 30 px Arial sans-serif; -webkit-transition: color 0,5s ease; -moz-transition: color 0,5s ease; -o-transition: color 0,5s ease; -ms-transition: color 0,5s ease; μετάβαση: έγχρωμη ευκολία 0,5 δευτερολέπτων;)
Η επισήμανση του ενεργού τίτλου είναι καλό, αλλά τι γίνεται αν χρειαστεί να αλλάξετε τη σχεδίαση του κειμένου που τον ακολουθεί; Το CSS μας δίνει αυτή την ευκαιρία. Μοιάζει με αυτό:
H1:target + p (φόντο: #eaeaea; padding: 10px; )
Σε αυτήν την περίπτωση, το σύμβολο συν σημαίνει ότι το στυλ πρέπει να εφαρμοστεί στην παράγραφο που ακολουθεί την επικεφαλίδα. Ετσι, όταν αλλάζει η ενεργή κεφαλίδα, αλλάζουμε και τη σχεδίαση ενότηταςμε το κείμενο που του «ανήκει».
Υποστήριξη προγράμματος περιήγησης
Η ψευδο-κλάση προορισμού ανήκει στην τρίτη έκδοση του CSS και υποστηρίζεται τέλεια από όλα τα προγράμματα περιήγησης εκτός από τον IE, παλαιότερη από την έκδοση 9. Επομένως, δεν πρέπει να την εφαρμόσετε εάν το κοινό σας χρησιμοποιεί αυτό το πρόγραμμα περιήγησης. Αν και, υπάρχει μια διέξοδος - αυτή είναι η Selectvizr, μια βιβλιοθήκη JS με την οποία μπορείτε να κάνετε τον IE να λειτουργεί με το CSS3. Απλώς προσθέτουμε το σενάριο και τέλος, δουλεύει.
Το μόνο πράγμα είναι, εάν δεν χρησιμοποιείτε JQuery ή MooTools, πρέπει να το συνδέσετε για να λειτουργήσει αυτό το σενάριο. Ο επίσημος ιστότοπος έχει έναν πίνακα που δείχνει ποιες βιβλιοθήκες υποστηρίζουν τι. Αν σε ενδιαφέρει, διάβασε το. Αυτό .
συμπέρασμα
Η χρήση ψευδοκλάσεων μπορεί να φαίνεται περίπλοκη, αλλά μόλις καταλάβετε πώς λειτουργούν, μπορείτε να κάνετε εκπληκτικά πράγματα χρησιμοποιώντας μόνο CSS και τίποτα άλλο. Ψευτο-κλάση:στόχος- εξαιρετική επιβεβαίωση αυτού. Με τη βοήθειά του, μπορείτε να αλλάξετε ριζικά την αλληλεπίδραση μιας σελίδας με έναν επισκέπτη. Το παραπάνω παράδειγμα είναι το πιο απλό, αλλά εξακολουθεί να προσθέτει λίγη διαδραστικότητα στη σελίδα. Αλλά αυτό είναι μόνο μερικές γραμμές κώδικα.
Μην το παρακάνετε με την υποστήριξη ομορφιάς και προγράμματος περιήγησης και όλα θα πάνε καλά.
Να εχεις μια ωραια μερα
target="_blank χρησιμοποιείται για τη δημιουργία της ετικέτας άνοιξε το σύνδεσμο σε νέο παράθυρο. Τι είναι όμως το target HTML; Γιατί να είναι κενό; Και το πιο ενδιαφέρον είναι, γιατί υπάρχει μια υπογράμμιση στην αρχή; Ας ρίξουμε μια πιο προσεκτική ματιά σε αυτόν τον κώδικα και ας καταλάβουμε τι κάνει.
χαρακτηριστικό στόχο
Τιμές στόχου
Οι τέσσερις πιο κοινές τιμές για το χαρακτηριστικό target είναι:
_εαυτός
Η μόνη περίπτωση στην οποία μπορεί να συμβεί αυτό είναι εάν η ετικέτα χρησιμοποιείται στο HTML
_κενό
Ανοίγει έναν σύνδεσμο σε νέα καρτέλα ή παράθυρο. Αυτό καθορίζεται από τις τοπικές ρυθμίσεις του χρήστη, στα περισσότερα προγράμματα περιήγησης αυτή είναι μια νέα σελίδα καρτέλας. Ίσως νομίζετε ότι χρησιμοποιώντας αυτήν την τιμή μπορείτε να εφαρμόσετε αναδυόμενες ενότητες διαφημίσεων. Αλλά αυτό δεν είναι αλήθεια. Τις περισσότερες φορές, χρησιμοποιείται JavaScript για αυτό και όχι HTML.
Αυτή η τιμή χαρακτηριστικού στόχου HTML χρησιμοποιείται καλύτερα για το άνοιγμα συνδέσμων προς εξωτερικούς ιστότοπους ή αρχεία PDF σε μια νέα καρτέλα. Χάρη σε αυτό, μετά το κλείσιμο αυτών των καρτελών, ο χρήστης επιστρέφει στον ιστότοπό σας. Αλλά αυτό δεν πρέπει να γίνει κατάχρηση, καθώς θα είναι αρκετά δύσκολο για τον χρήστη να πλοηγηθεί εάν κάθε σύνδεσμος ανοίξει σε μια νέα καρτέλα.
_μητρική εταιρεία
Η τιμή _parent ανοίγει έναν σύνδεσμο στο γονικό πλαίσιο για το πλαίσιο στο οποίο βρίσκεστε. Αυτή δεν είναι μια δημοφιλής τιμή, καθώς οι ετικέτες για τη δημιουργία πλαισίων