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

(Αυτή η σελίδα χρησιμοποιεί CSS style sheets)

Το παρόν έγγραφο είναι μετάφραση του άρθρου «Cascading Style Sheets. CSS tips & tricks».
Αυθεντική εκδοχή του εγγράφου βρίσκεται μόνο στην ιστοσελίδα W3C http://www.w3.org/Style/Examples/007/target
Η παρούσα μετάφραση ΔΕΝ είναι επίσημο έγγραφο της W3C.
Όλα τα κοπιράιτ ανήκουν στη W3C.
Το παρόν έγγραφο μπορεί να έχει λάθη της μετάφρασης και εσφαλμένη εκτύπωση.
Συγγραφέας: Dimitris Papadopoulos
Το έγγραφο μεταφράστηκε με υποστήριξη: w3 site ιστοσελιδα

:target επιλογέας

Στοιχείο με καρτέλες

Αναγνώριση

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

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

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

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

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

Αυτό είναι το στοιχείο που αντιστοιχεί στο αντικείμενο 1. Δεν πρέπει να είναι φανερό, εκτός αν ακολουθήσατε έναν σύνδεσμο ο οποίος δείχνει διεξοδικά στο "#αντικείμενο1".

Αν πηδήξατε στο αντικείμενο 2, τότε αυτό το στοιχείο θα πρέπει να είναι φανερό.

Αυτο το στοιχείο είναι φανερό αν κάνατε κλικ πάνω στο τρίτο αντικείμενο του μενού. Το στοιχείο έχει μια 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"…

Tab 1
One might well argue, that...
Tab 2
... 30 lines of CSS is rather a lot, and...
Tab 3
... that 2 should have been enough, but...
Default
... it works!

Αναγνώριση

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

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Δημιουργία 6 Feb 2003;
Τελευταία ανανέωση $Date: 2008/01/11 18:26:31 $ GMT