: στόχος - CSS-Κόλπα

Ο :targetψευδο-επιλογέας στο CSS ταιριάζει όταν το hash στη διεύθυνση URL και το αναγνωριστικό ενός στοιχείου είναι τα ίδια. Για παράδειγμα, εάν η τρέχουσα διεύθυνση URL είναι:

https://css-tricks.com/#voters

Και αυτό υπήρχε στο HTML:

 Content

Αυτός ο επιλογέας θα ταιριάζει:

:target ( background: yellow; )

Και αυτό το sectionστοιχείο θα είχε κίτρινο φόντο.

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

Θα μπορούσατε να το περιορίσετε συγκεκριμένα σχετικά με τα στοιχεία που θέλετε να στοχεύσετε, όπως

#voters:target ( )

Πότε θα το χρησιμοποιούσατε;

Μια πιθανότητα είναι όταν θέλετε στυλ με "καταστάσεις". Όταν η σελίδα έχει ένα συγκεκριμένο κατακερματισμό, είναι σε αυτήν την κατάσταση. Δεν είναι τόσο ευέλικτο όσο ο χειρισμός ονομάτων τάξεων (αφού μπορεί να υπάρχει μόνο ένα και μπορεί να σχετίζεται μόνο με ένα στοιχείο) αλλά είναι παρόμοιο. Οτιδήποτε μπορείτε να κάνετε αλλάζοντας μια τάξη για να αλλάξετε κατάσταση θα μπορούσατε να κάνετε όταν το στοιχείο είναι μέσα :target. Για παράδειγμα: αλλαγή χρωμάτων, αλλαγή θέσης, αλλαγή εικόνων, απόκρυψη / εμφάνιση πραγμάτων, οτιδήποτε άλλο.

Θα χρησιμοποιούσα αυτούς τους κανόνες για το πότε :targetείναι μια καλή επιλογή:

Όταν απαιτείται «κατάσταση»
Όταν η συμπεριφορά jump-down / hash-link είναι αποδεκτή
Όταν είναι αποδεκτό να επηρεαστεί το ιστορικό του προγράμματος περιήγησης

Πώς λαμβάνετε κατακερματισμούς στα URL;

Ο πιο συνηθισμένος τρόπος είναι ένας χρήστης να κάνει κλικ σε έναν σύνδεσμο που περιλαμβάνει κατακερματισμό. Θα μπορούσε να είναι ένας εσωτερικός σύνδεσμος (ίδια σελίδα) ή μια πλήρως κατάλληλη διεύθυνση URL που τυχαίνει να τελειώνει με κατακερματισμό και τιμή. Παραδείγματα:

Go To There Go To There

Συμπεριφορά άλματος

Ανεξάρτητα από το αν πρόκειται για σύνδεσμο ίδιας σελίδας ή όχι, η συμπεριφορά του προγράμματος περιήγησης είναι η κύλιση της σελίδας έως ότου αυτό το στοιχείο βρίσκεται στο επάνω μέρος της σελίδας . Ή, όσο μπορεί αν δεν μπορεί να μετακινηθεί τόσο μακριά. Αυτό είναι μάλλον σημαντικό να γνωρίζουμε, γιατί σημαίνει ότι η εκμετάλλευση αυτής της «δηλωμένης» συμπεριφοράς είναι λίγο δύσκολη / περιορισμένη.

Για παράδειγμα, δοκίμασα κάποτε μια ποικιλία τεχνικών για την αναπαραγωγή λειτουργικών καρτελών CSS, αλλά τελικά αποφάσισα ότι η χρήση του πλαισίου ελέγχου ήταν μια καλύτερη ιδέα, επειδή αποφεύγει τα ζητήματα άλματος σελίδας. Ο Ian Hansson στο CSS Science έχει επίσης μερικά παραδείγματα καρτελών. Το τρίτο παράδειγμά του χρησιμοποιεί :target, και απόλυτα τοποθετημένα στοιχεία κρυμμένα πάνω από την κορυφή της σελίδας για να αποτρέψει τη συμπεριφορά άλματος σελίδας. Είναι έξυπνο, αλλά μια συνολική τέλεια λύση, γιατί αυτό θα σήμαινε ότι η σελίδα θα ανέβαινε προς τα πάνω σε περίπτωση που οι καρτέλες ήταν πιο κάτω σε μια σελίδα.

Περισσότερες πληροφορίες

Άρθρο εδώ για CSS-Tricks: On: target
Επιλογές Επιπέδου 4 προδιαγραφών
Μια απλή συλλογή εικόνων χρησιμοποιώντας: target (πάσχει από το πράγμα άλμα σελίδας, καλό παράδειγμα αυτού) από τον Chris Heilmann
Επίδειξη τεχνικής κίτρινου ξεθωριάσματος (αν και για υπάρχον περιεχόμενο, όχι για νέο περιεχόμενο) από το Web Designer Notebook.
Ένας στόχος CSS, κυριολεκτικά, από τον Caleb Ogden.
CSS: στόχος για σχέδια εκτός οθόνης
Έγγραφα MDN