Εχεις μια ιστοσελίδα. Ή έστω ένα blog. Και ασχολήθηκες αρκετά με τα CSS για να εμφανίσεις όμορφα το περιεχόμενο, έπαιξες και στο photoshop κι έφτιαξες και header για να είναι πιο ωραίο. Σου άρεσε μάλιστα τόσο πολύ που έφτιαξες παραπάνω από ένα style sheets.
Ωραία. Και τώρα χρειάζεσαι ένα τρόπο για να αλλάζουν δυναμικά αυτά στα styles και να είναι ευτυχισμένοι κι εσύ κι οι επισκέπτες σου.
Σχεδιάζοντας το site
Τα style sheets ενώνονται με τις σελίδες μέσω μιας λίστα με links στο <head>. Υπάρχουν τρεις διαφορετικές σχέσεις style sheets και σελίδας: persistent, preferred, και alternate.
PERSISTENT
Αυτά τα style sheets είναι πάντα ενεργά (ισχύουν πάντα) και "συνεργάζονται" με το τρέχον style sheet. Χρησιμοποιούνται για κανόνες που είναι κοινοί σε κάθε σελίδα. Για να γίνει ένα style sheet persistent, το attribute rel πρέπει να είναι "stylesheet" και δεν θα πρέπει να υπάρχει attribute title.
πχ.
<link rel="stylesheet"
type="text/css" href="paul.css" />
PREFERRED
Αυτά τα style sheets είναι εξ'ορισμού ενεργά (ισχύουν όταν φορτώνεται η σελίδα). Απενεργοποιούνται όταν ο χρήστης επιλέξει κάποιο εναλλακτικό style sheet. Για να γίνει preferred ένα style sheet, το attribute rel πρέπει να είναι "stylesheet" αλλά και να έχει ονομαστεί με το attribute title.
πχ.
<link rel="stylesheet"
type="text/css" href="paul.css"
title="bog standard" />
ALTERNATE
Αυτά τα style sheets επιλέγονται από τον χρήστη σαν εναλλακτικά του preferred style sheet. Επιτρέπουν την προσωποποίηση του site και την επιλογή του αγαπημένου θέματος του επισκέπτη. Για να οριστεί ένα style sheet ως alternate, το attribute rel πρέπει να είναι "alternate stylesheet" και να έχει ονομαστεί με το attribute title.
πχ.
<link rel="alternate stylesheet"
type="text/css" href="paul.css"
title="wacky" />
Αλλάζοντας τα Styles
Οταν φορτώνεται μια σελίδα για πρώτη φορά, ενεργοποιούνται τα persistent και preferred style sheets. Τα alternate ενεργοποιούνται από το χρήστη. Το W3C (World Wide Web Consortium) λέει ότι οι browsers θα πρέπει να δίνουν επιλογή για το style sheet που θέλει ο επισκέπτης να χρησιμοποιήσει, και προτίνει πως ίσως θα έπρεπε να υπάρχει ένα drop-down menu ή μπάρα εργαλείων.
Ως τώρα λοιπόν, έχουμε τα style sheets και τα έχουμε ορίσει όπως θέλουμε, δίνοντας και εναλλακτικά στο χρήστη. Υπάρχει όμως ένα μεγάλο πρόβλημα. Ο Firefox έχει ένα μενού επιλογών για τα style sheets μέσα στο δικό του μενού View. Ο Internet Explorer δεν έχει καν, τέτοιο μενού. Δεν μπορώ να το χαρακτηρίσω και λειτουργικό πολύ εύκολο αυτό.
Κάπου εδώ έρχεται η Java.
Το Scriptάκι
Χρειαζόμαστε λοιπόν ένα script που να μας επιτρέπει να αλλάζουμε τα style sheets αλλά και να κάνει τη διαδικασία εύκολη στον χρήστη.
Ολες οι οδηγίες για το πως και γιατί δουλεύει η Java, λεπτομέρεις για τα cookies κλπ. υπάρχουν στο σχετικό άρθρο του A LIST apart.
Στο ίδιο άρθρο υπάρχει συγκεντρωμένο το σκριπτάκι που θα αναλάβει να κάνει τα μαγικά που θέλουμε.
» Download styleswitcher.js
Μαγείρεμα
Ανέβασέ το στο server που φιλοξενείται το site σου και πρόσθεσε τον παρακάτω κώδικα κάτω από τα style sheet link elements:
<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>
Εκεί που θέλεις να εμφανιστούν οι επιλογές για την αλλαγή των style sheets, πρόσθεσε τα παρακάτω (δες για παράδειγμα το style switcher αυτού του blog στη στήλη πάνω δεξιά):
<a href="#"
onclick="setActiveStyleSheet('default');
return false;">change style to default</a>
<a href="#"
onclick="setActiveStyleSheet('paul');
return false;">change style to paul</a>
Μόλις ο χρήστης επιλέξει ένα από styles, η επιλογή θα σωθεί σε ένα cookie στο μηχάνημά του. Ετσι την επόμενη φορά που θα επιστρέψει στο site θα φορτωθεί το δικό του αγαπημένο style sheet.
Simple!
3 σχόλια:
Γεια σου ρε CM, μεγάλε δάσκαλε!
Θα στο ξαναπώ. Συνέλεξε τα αυτά τα άρθρα και φτιάξε μια web-o-paedia. Καλό είναι να είναι κάπου συγκεντρωμένα. Είσαι ζωντανή βιβλιοθήκη.
Tero
Καλά, μη τρελαθούμε κι όλας.
Μια απόδοση σε ένα άρθρο έκανα από το #1 site για CSS, κι αυτό γιατί το έψαχνα.
;)
εχω να σου δώσω τέτοια link, όσα θες
Wonderful and informative web site. I used information from that site its great. »
Δημοσίευση σχολίου