Style Sheets Ιστού
Συμβουλές & κόλπα CSS

Η ':target' ψευτο-κλάση

Μια URL διεύθυνση συνήθως δείχνει σε μια σελίδα. Αλλά όταν η URL τελειώνει σε "#κάτι" τότε στοχεύει σε κάποιο συγκεκριμένο στοιχείο σ' αυτήν την σελίδα. Οι πλοηγοί τυπικά προσπαθούν να σιγουρέψουν ότι το επιθυμητό στοιχείο είναι φανερό και αν είναι δυνατόν στην αρχή της οθόνης.

Με τον επιλογέα ':target', μπορείτε να προσθέσετε μια συγκεκριμένη διαμόρφωση στο επιθυμητό στοιχείο, έτσι ώστε αυτό να λάβει περισσότερη προσοχή.

Αλλά μπορείτε να κάνετε περισσότερα. Μπορείτε να κρύψετε ή να δείξετε στοιχεία ανάλογα αν είναι ο στόχος ή όχι. Παρακάτω είναι ένα παράδειγμα. Δείχνει ένα μικρό μενού με τέσσερα αντικείμενα που το καθένα είναι συνδεδεμένο με κάποιο κείμενο. Στην αρχή όμως δεν φαίνεται καθόλου κείμενο. Κάθε αντικείμενο είναι σύνδεσμος σε στοιχείο με επιθυμητό ID (#αντικείμενο1, #αντικείμενο2...) και αυτά τα στοιχεία είναι μόνο εμφανή μόνο όταν είναι ο στόχος του τρέχοντος URL.

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

Εδώ φαίνεται πως λειτουργεί. Υπάρχουν δύο σημαντικά μέρη, ο κώδικας HTML και η ιδιότητα 'display'. Πρώτα το έγγραφο HTML. Έχει κάποιους δυνδέσμους και στοιχεία με αντίστοιχα IDs:

<p>
  <a rel="nofollow" href="#item1">item 1</a>
  <a rel="nofollow" href="#item2">item 2</a>
  <a rel="nofollow" href="#item3">item 3</a>
  <a rel="nofollow" href="#default">clear</a>
<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

Οι κανόνες της διαμόρφωσης πρώτα κρύβουν όλα τα P μέσα στο DIV, αλλά μετά πανωγράφουν αυτά για το P που είναι ο τρέχων στόχος:

div.items p {display: none}
div.items p:target {display: block}

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

Βασικά, εμείς προσθέσαμε ένα ':not(:target)', για να κάνουμε βέβαιο ότι μόνο CSS3 πλοηγοί θα κρύψουν το στοιχείο. Έτσι οι καλύτεροι κανόνες είναι αυτοί:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Διεπιφάνεια με καρτέλες

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

Παρακάτω είναι ένα παράδειγμα. Δεν χρησιμοποιεί 'display: none', αλλά 'z-index'. Αν θέλετε να γνωρίζετε πως δουλεύει, κάντε απλά ένα "view source"…

Αναγνώριση

Αυτή η σελίδα είναι βασισμένη σε μια προτώτυπη ιδέα του Daniel Glazman. Δείτε την επεξήγηση στο δικό του "blog" στις 9 Ιανουαρίου 2003 και την δικιά του επίδειξη στις 13 Ιανουαρίου.