CSS 101 – η ιστορία

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

Εν αρχή ήταν η HTML – μια γλώσσα markup, που καθορίζει δηλαδή το είδος του κειμένου που βρισκεται κλεισμένο μέσα σε δύο ετικετες (tags). Μπορεί να είναι τίτλος, παράγραφος, εικόνα, λίστα… Με την HTML βοηθάμε το κείμενο να εμφανιστεί στον browser με τρόπο που να είναι κατανοητός. Κατανοητός μεν αλλά μάλλον βαρετός. Μαύρα γράμματα, λευκές σελίδες, εικόνες στη σειρά. Στρατιωτάκια. Στην αρχή λοιπόν προστέθηκαν δειλά δειλά μερικές ακόμα ετικέτες (όπως το font που αλλάζει τη γραμματοσειρά) και μερικές ιδιότητες (όπως το color που έβαλε χρώμα στη ζωή μας). Κι αφού πέρασαν οι πρώτες απόπειρες ο «εμπλουτισμός» συνεχίστηκε κάποιες φορές και με τέρατα όπως το blink που γέμισε τις σελίδες με τίτλους που αναβόσβηναν και το marquee με τις φράσεις που έτρεχαν στην οθόνη. Τέλος, επειδή κάθε ετικέτα έχει έναν συγκεκριμένο τρόπο να εμφανίζεται στον browser (π.χ. τα heading είναι έντονα και τα blockquote αυξάνουν το περιθώριο από την άκρη της σελίδας) άρχισαν να χρησιμοποιούνται οι ετικέτες με τρόπο που να επηρεάζει τη μορφή και όχι να υποδηλώνει τη σημασία του κειμένου που περιέκλειαν. Σ’ αυτήν την κατηγορία ανήκει και η χρήση των πινάκων για διευκόλυνση του layout. Το αποτέλεσμα ήταν παραφουσκωμένες σελίδες που αργούσαν αφάνταστα να κατέβουν, δύσκολες στη συντήρηση ή την μετατροπή, με δομή που δεν είχε σημειολογική ερμηνεία. Όταν πια το πρόβλημα πήρε πια μεγάλες διαστάσεις χρειάστηκαν δραστικές λύσεις. Απόλυτος διαχωρισμός μορφής και περιεχομένου. Οι πρόσθετες ετικέτες καταργήθηκαν και μια νέα γλώσσα επινοήθηκε για να διαμορφώνει την εικόνα των στοιχείων. Ονομάστηκε Cascading HTML Style Sheets, ή πιο σύντομα CSS.

δεν είναι εικόνα, είναι styles in action

Η λογική της λειτουργίας των φύλλων στυλ είναι απλή: Για κάθε ετικέτα καθορίζουμε συγκεκριμένες ιδιότητες. Για παράδειγμα, μπορούμε για την ετικέτα <p> (παράγραφος) να καθορίσουμε γραμματοσειρά Tahoma μεγέθους 95% σε χρώμα κόκκινο με λευκό background, δεξιά στοίχιση και περιθώριο 10px γύρω της. Αν την ορίσουμε στο φύλλο στυλ, η ρύθμιση αυτή θα ισχύει για όλες τις παραγράφους του σάιτ. Αντί λοιπόν να φορτώνουμε κάθε ετικέτα <p> ξεχωριστά με όλες αυτές τις ιδιότητες, τις καθορίζουμε μια και καλή στο CSS.

Ποιά είναι τα πλεονεκτήματα από τη χρήση CSS:

  • Ομοιομορφία – όλες οι σελίδες του σάιτ σας έχουν παρόμοιο στυλ
  • Εύκολες αλλαγές μορφής σε όλο το σάιτ – ολόκληρη κατηγορία ετικετών μπορεί να τροποποιηθεί με αλλαγή μιας γραμμής, ενώ χειρονακτικά θα χρειαζόταν να αλλάξετε κάθε εμφάνιση της συγκεκριμένης ετικέτας σε κάθε σελίδα
  • Μεγαλύτερη ταχύτητα στο κατέβασμα: από τη στιγμή που ο επισκέπτης βλέπει την πρώτη σελίδα του σάιτ σας, το αρχείο CSS κατεβαίνει και φυλάσσεται στην cache του υπολογιστή του και δεν χρειάζεται να ξαναφορτωθεί – έτσι όλες οι επόμενες σελίδες κατεβαίνουν πολύ πιο γρήγορα.
  • Βελτίωση χρηστικότητας και προσβασιμότητας (που πιο απλά σημαίνει ότι το σάιτ σας απευθύνεται σε μεγαλύτερο ποσοστό επισκεπτών)

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

Και μερικοί χρήσιμοι σύνδεσμοι:
Εδώ θα βρείτε μια εκτενέστερη εισαγωγή από τη Wikipedia.
Η επίσημη σελίδα του World Wide Web Consortium (W3C) και η επαιτειακή που γιορτάζει Δέκα χρόνια CSS.

Advertisements

Σχολιάστε

Εισάγετε τα παρακάτω στοιχεία ή επιλέξτε ένα εικονίδιο για να συνδεθείτε:

Λογότυπο WordPress.com

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό WordPress.com. Αποσύνδεση / Αλλαγή )

Φωτογραφία Twitter

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Twitter. Αποσύνδεση / Αλλαγή )

Φωτογραφία Facebook

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Facebook. Αποσύνδεση / Αλλαγή )

Φωτογραφία Google+

Σχολιάζετε χρησιμοποιώντας τον λογαριασμό Google+. Αποσύνδεση / Αλλαγή )

Σύνδεση με %s

Δημιουργήστε ένα δωρεάν ιστότοπο ή ιστολόγιο στο WordPress.com.

Αρέσει σε %d bloggers: