The Art & Science of CSS – Free book

Πότε μπορεί να πει κανείς ότι έχει αρκετά βιβλία  CSS; Εγώ πάντως είμαι μάλλον αχόρταγη προς το παρόν και μαζεύω μεθόδους και συμβουλές από παντού.

Το Sitepoint προσφέρει (δωρεάν) σε ηλεκτρονική μορφή το βιβλίο The Art & Science of CSS. Στους συγγραφείς συμπεριλαμβάνονται διασημότητες του χώρου όπως ο Cameron Adams και ο Jonathan Snook. Το βιβλίο χωρίζεται σε κεφάλαια που πραγματεύονται τα βασικά δομικά στοιχεία μιας σελίδας (headings, images, backgrounds, navigation) καθώς και κάποιες εφαρμογές που χρησιμεύουν στο styling στοιχείων όπως φόρμες, rounded corners και πίνακες. Από μια ματιά που του έριξα δείχνει να απευθύνεται σε σχετικά αρχάριους – μόνο προαπαιτούμενο η γνώση HTML. Φαίνεται πάντως αρκετά ενδιαφέρον στον τρόπο προσέγγισης του θέματος και έχει πολλά παραδείγματα.

Οδηγίες για να το κατεβάσετε θα βρείτε εδώ: http://twitaway.aws.sitepoint.com/ . Σας ζητούν απλώς να ακολουθήσετε το @sitepointdotcom για δυο εβδομάδες στο Twitter – ή να γραφτείτε σε κάποιο από τα δωρεάν newsletter τους. Η προσφορά ισχύει για 12 ακόμα μέρες.

Καλό διάβασμα!

Ετικέτες HTML και ιδιότητες CSS

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

Δεν γίνεται να εφαρμόσει κανείς σωστά εντολές CSS σε μια σελίδα άσχημα δομημένη. Επομένως η καλή γνώση και σωστή χρήση HTML είναι απαραίτητη. Ο Emil Stenström στο Friendly Bit έχει φτιάξει έναν κατάλογο από τις πιο χρήσιμες ετικέτες, με σύντομες εξηγήσεις για τον τρόπο χρήσης τους.
Encyclopedia of HTML elements

Οδηγίες για το πώς εφαρμόζονται οι ιδιότητες CSS στα παραπάνω στοιχεία προσφέρει το Sitpoint και μάλιστα θα τις βρείτε ταξινομημένες ανά τομέα της σελίδας που θέλετε να «πειράξετε» – π.χ. το layout, τις λίστες, τα τυπογραφικά στοιχεία κ.λπ. Υπάρχει και αλφαβητικός κατάλογος γι αυτούς που ξέρουν τι ψάχνουν.
CSS Reference

Και γι αυτούς που προτιμούν να μαθαίνουν με παραδείγματα, μια σειρά οδηγιών βήμα προς βήμα για να πετύχετε συγκεκριμένα αποτελέσματα από το web standards software and learning:
quick tutorials

Οι παραπάνω πηγές βοηθούν να μάθει κανείς τα βασικά για τις λειτουργίες των ετικετών και των ιδιοτήτων τους – ελπίζω να βοηθήσουν.

CSS 101 – Γράφοντας κείμενο

Σημείωση: Στα επόμενα παραδείγματα για λόγους συνοχής (και για να μπορείτε να κάνετε copy/paste όλου του περιεχομένου για να φανεί το παράδειγμα στον δικό σας browser) τα φύλλα στυλ θα είναι ενσωματωμένα (embedded) – δηλαδή μέσα στο head της σελίδας HTML στην ετικέτα <style>.

Το κείμενο είναι συνήθως το πρώτο κομμάτι της σελίδας πάνω στο οποίο σκεφτόμαστε να επέμβουμε – εξοικειωμένοι οι περισσότεροι με τους επεξεργαστές κειμένου. Τα φύλλα στυλ μας δίνουν τη δυνατότητα να διαμορφώσουμε την εμφάνιση ολόκληρης κατηγορίας ετικετών, είτε κομματιών της. Μπορούμε δηλαδή να καθορίσουμε τη γραμματοσειρά, το μέγεθος, το χρώμα, τη στοίχιση κ.λπ. έτσι ώστε να είναι ίδιες για όλες τις παραγράφους του κειμένου, αρκεί να ορίσουμε τις αντίστοιχες ιδιότητες στυλ για την ετικέτα μεγαλύτερη <p>.
Σύμφωνα με το CSS1 υπάρχουν 5 ιδιότητες της κατηγορίας font που μπορεί να ορίσει κανείς:

  1. font-family
  2. font-style
  3. font-variant
  4. font-weight
  5. font-size

Συνέχεια

CSS 101 – πρώτα βήματα

Οι ιδιότητες CSS μοιάζουν αρκετά με αυτές των ετικετών HTML. Αν για παράδειγμα θέλουμε να κάνουμε το background μιας σελίδας κόκκινο, στην HTML θα γράφαμε <body bgcolor="#FF0000">
ενώ με CSS έχουμε το ίδιο αποτέλεσμα γράφοντας body { background-color: #ff0000; }
Η βασική σύνταξη του CSS αποτελείται από τρια κομμάτια: selector (που αντιστοιχεί κάθε φορά σε ένα στοιχείο, δηλαδή σε μια ετικέτα HTML, στην προκειμένη περίπτωση το body), property (ιδιότητα του στοιχείου, στην προκειμένη περίπτωση background-color) και value (δηλαδή την τιμή που παίρνει αυτή η ιδιότητα, εδώ #ff0000 που είναι ο δεκαεξαδικός κωδικός του κόκκινου). Για να ορίσουμε ιδιότητες για έναν selector παραθέτουμε μέσα στο άγκιστρο το όνομα της ιδιότητας και μετά από άνω και κάτω τελεία την τιμή του. Δύο διαδοχικές ιδιότητες χωρίζονται με ; π.χ. body { background-color: #ff0000; color: #0000ff;}

Τα φύλλα στυλ μπορούν να εφαρμοστούν σε μια σελίδα HTML με διάφορους τρόπους:

  • inline – δηλαδή μέσα στην ίδια την ετικέτα HTML, χρησιμοποιώντας την ιδιότητα style: <p style="background-color: #ff0000;">
    Η «εντολή» αυτή αφορά μόνο τη συγκεκριμένη ετικέτα p σε αυτήν τη σελίδα. Οι υπόλοιπες παράγραφοι (p) εμφανίζονται με το προκαθορισμένο background-color του browser.
  • embedded – δηλαδή μέσα στη σελίδα HTML, βάζοντας στο head της σελίδας την ετικέτα <style>:
    <html>
    <head>
    <title>Example<title>
    <style type=»text/css»>
    p { background-color: #ff0000; }
    </style>
    </head>
    <body>
    <p>Περιεχόμενο της σελίδας</p>
    <p>Κάθε παράγραφος αυτής της σελίδας έχει κόκκινο background</p>
    </body>
    </html>
    Στην περίπτωση αυτή, όλες οι παράγραφοι της ίδιας σελίδας έχουν τις ιδιότητες που τους καθορίσαμε με CSS.
  • external – με εξωτερικό φύλλο στυλ, το οποίο συνδέουμε χρησιμοποιώντας την ετικέτα <link> στο head της σελίδας:
    <link rel="stylesheet" type="text/css" href="styles/mystyle.css" />*
    όπου mystyle.css είναι το όνομα που έχουμε δώσει στο αρχείο CSS και styles/mystyle.css ή διαδρομή όπου βρίσκεται το αρχείο mystyle.css μέσα στο root directory.
    Το ίδιο αρχείο CSS μπορεί να συνδεθεί σε πολλές σελίδες HTML, ορίζοντας έτσι τη μορφή της ετικέτας <p > ομοιόμορφα σε ένα σάιτ.
    * Το τελικό / στο κλείσιμο της ετικέτας είναι απαραίτητο μόνο αν γράφετε XHTML – στην HTML δεν χρειάζεται

Συνέχεια

CSS 101 – η ιστορία

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

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

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

Συνέχεια

Web standards – μια εισαγωγή

Web standards είναι ένας γενικός όρος για τα επίσημα πρότυπα και άλλες τεχνικές προδιαγραφές που καθορίζουν και περιγράφουν τα χαρακτηριστικό του World Wide Web – λέει η Wikipedia. Για παράδειγμα, η τεχνική που χρησιμοποιείται για τη δόμηση του περιεχομένου είναι η γλώσσα (X)HTML, αυτή που χρησιμοποιείται για τη μορφοποίησή του (χρώμα, γραμματοσειρές, περιθώρια κ.λπ.) είναι το CSS και αυτή που προσδιορίζει τη συμπεριφορά του (π.χ. αλλαγή της μορφής, άνοιγμα καινούριου παράθυρου κ.λπ) είναι η Javascript (ή ECMA όπως ονομάζεται η πρότυπη εκδοχή της).

Ο διαχωρισμός περιεχομένου από τη μορφοποίηση είναι κάτι με το οποίο είναι εξοικειωμένοι οι blogger – γράφουν το περιεχόμενο και αλλάζοντας το template (δηλαδή στην πράξη το CSS της σελίδας τους) μπορούν να αλλάξουν το ντεκόρ χωρίς να επηρεάσουν το «κυρίως πιάτο». Γιατί όμως να τους ενδιαφέρει αυτή η λειτουργία να ακολουθεί κάποια στάνταρντ; Ας υποθέσουμε ότι πηγαίνετε να ψωνίσετε μια ηλεκτρική συσκευή και διαπιστώνετε ότι ξαφνικά κάποιες εταιρίες αποφάσισαν να αλλάξουν το σχήμα της πρίζας έτσι ώστε το αρσενικό της να μη μπαίνει στο θηλυκό του φις στον τοίχο σας – κι όχι μόνο αυτό αλλά η καθε εταιρία έχει δώσει και το δικό της σχήμα, έτσι, για να ταιριάζει με το λογότυπό της βρε αδερφέ… Και τώρα τι; Λύσεις-μπαλώματα θα βρεθούν σίγουρα – ίσως ένα πρόσθετο που θα προσαρμόζει το κάθε φις στην αντίστοιχη υποδοχή, αλλά τι μπελάς αδελφέ μου! Θα πρέπει να το έχετε στο μυαλό σας κάθε φορά που θα αγοράζετε μια συσκευή, αφήστε δε που μπορεί να επηρεάζει και την απόδοση. Λοιπόν, η κατασκευή των ιστοσελίδων με αυτή τη λογική λειτουργούσε και γι αυτό κρίθηκε αναγκαία η εφαρμογή των standards. Όχι βέβαια ότι ξαφνικά λύθηκαν όλα αυτά τα προβλήματα, ίσα ίσα που οι πονοκέφαλοι αυξήθηκαν. Οι browser κάνουν συνήθως του κεφαλιού τους, τίποτα δεν δείχνει ίδιο σε όλους, νέα «μπαλώματα» εμφανίζονται κάνοντας τη ζωή μας περίπλοκη. Γιατί λοιπόν διαλέγω αυτή την περιπλοκή αντί την άλλη; Επειδή έχει μια λογική, επειδή βοηθάει τον χρήστη (έστω και αν ζαλίζει τον κατασκευαστή), επειδή πιστεύω ότι είναι το μέλλον – και σ’ αυτήν την περίπτωση οι browser θα προσαρμοστούν σιγά σιγά και τέλος επειδή μέσα σε όλες τις σπαζοκεφαλιές της έχει ενδιαφέρον. Σε όλους όσους ισχυρίζονται ότι οι σελίδες που είναι σχεδιασμένες σύμφωνα με τα web standards είναι απλοϊκές «τετράγωνες» και δύσκαμπτες, έχω να αντιτάξω τον κύριο Stu Nicholls και το CSS Playground του. Μη ντρέπεστε, κάντε του μια επίσκεψη και δείτε όλα τα alternative styles που προτείνει για την ίδια σελίδα. Την προτίμησή μου την βλέπετε ακριβώς κάτω.

cssplayground.jpg

Για μια πιο new age προσέγγιση, μπορείτε επίσης να πάτε στο CSS zen garden, όπου μπορείτε να βρείτε πιο πειστικά επιχειρήματα από τα δικά μου για το θέμα.

Περισσότερα στα επόμενα…

Blog στο WordPress.com.