CSS Layouts vs Table Layouts
October 23rd, 2008
Αφορμή για αυτό το post είναι πως τώρα τελευταία βγάζω ένα καλό μεροκάματο μετατρέποντας σελίδες που ήταν φτιαγμένες σε tables σε CSS layouts. Όμως! Πέφτω και σε περιπτώσεις όπου πρέπει να μετατρέψω CSS layouts σε.. CSS layouts! "Πάει αυτός λάλησε" θα πείς και δε θα έχεις και άδικο. Με αυτά που βλέπω όμως. Για ρίξε μια ματιά στο παρακάτω παράδειγμα.
Valid Strict xHTML & CSS παράδειγμα
Αν έχεις κάποιο validation tool θα δείς πως η παραπάνω σελίδα "περνάει" και τα 2 tests. Valid xhtml strict code & css 2.1. Άψογα λές, και τρέχεις να βάλεις στο site, διαφημιστικό flyer, εφημερίδα, βιογραφικό σου πως προσφέρεις υπηρεσίες συγγραφής valid κώδικα σύμφωνα με όλα τα "νέα πρότυπα" (ατάκα από διαφημιστικό flyer που έπεσε στα χερια μου). Για κάτσε όμως. Ένα λεπτό. Για να ξαναδούμε τον κώδικα.
-
<div id="page">
-
<div id="logo">PUTSMAISTER VERSION 2.05.ALPHA.BETA.GAMMA. </div>
-
<div id="navigation">
-
<div class="menuitem">Option</div>
-
<div class="menuitem">Option</div>
-
<div class="menuitem">Option</div>
-
<div class="menuitem">Option</div>
-
</div>
-
<div id="content">
-
<div id="post">
-
<div class="title">This is the title</div>
-
<div class="date">This is the date</div>
-
<div class="thepost">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
-
<div class="thepost">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
-
<div class="thepost">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
-
</div>
-
<div id="sidebar">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
-
</div>
-
<div id="footer">footer</div>
-
</div>
Μα που είναι το λάθος; Δε βλέπω κάτι; Θα πείς εσύ, και εγώ θα απαντήσω:
Είπαν στον χαζό να χέσει και ξεκολιάστηκε. Ο κώδικας μια χαρά περνάει τα tests αλλά αυτό δε σημαίνει πως είναι και σωστός. Σημασιολογικά δεν είναι σωστός. Χρησιμοποιήσαμε divs = divisions = ορισμός περιοχής για τα πάντα και παντού. Κείμενα, μενού, τίτλους, μπάρες, παπάδες κλπ.
Και πως θα μπορούσε να βελτιωθεί; Ρωτάς εσύ.
Να σου πω, για αρχή θα άλλαζα το μενού = λίστα επιλογών σε ένα unordered list. Με άλλα λόγια αντί για:
θα έκανα:
E και τι άλλαξε; Άλλαξε ο προσδιορισμός μιας ολόκληρης ενότητας, βασικότατης, σε σχέση με την υπόλοιπη σελίδα. Και αν βάλουμε το παραπάνω μενουδάκι μέσα σε ένα div με id="navigation", πολύ απλά διαβάζοντας τον κώδικα, καταλαβαίνουμε πως η περιοχή (div) navigation (id) περιέχει την ΛΙΣΤΑ ΕΠΙΛΟΓΩΝ (ul). Ε ξέρω γω, γίνεται πιο απλό; Και με αυτό το τρόπο τηρούμε και ένα βασικό κανόνα. Χρησιμοποιούμε τα διαθέσιμα tags για να δείξουμε ΤΙ ρόλο παίζει κάτι στη σελίδα μας και όχι ΠΩΣ φαίνεται. Για το ΠΩΣ φαίνεται υπάρχουν τα Stylesheets.
Άλλο παράδειγμα.
-
<div class="title">This is the title</div>
6! Ούτε 1, ούτε 2. 6 tags έχουμε στη διάθεση μας για να παίξουμε με τίτλους. Γιατί div; Οπότε ένα απλό
-
<h1>This is the title</h1>
θα έκανε τη δουλειά μια χαρά.
Απο τη μια μεριά καλά κάνουνε και γράφουνε τέτοιο κώδικα, και εμείς πρέπει να ζήσουμε. Και με το εμείς δεν εννοώ "εμείς οι τέλειοι που τα ξέρουμε όλα", αλλά εμείς που βγάζουμε τα μάτια μας για να μάθουμε πως να χρησιμοποιούμε τα tags όσο γίνεται καλύτερα, εμείς που αδειάζουμε τις τσέπες μας για να αγοράσουμε βιβλία και εμείς που γεμίσουμε τους greaders μας με άπειρα CSS feeds για να δούμε πως θα κάνουμε το κόσμο καλύτερο. (Σαν κομμουνιστικό μύνημα σε τηλεβόα μοιάζει το παραπάνω).
Όπως και να έχει, για αρχή ρίξτε μια ματιά στα διαθέσιμα tags, διαβάστε 2 πράγματα σχετικά και πάρτε και κανά βιβλίο, κοστίζει όσο μια (normal) έξοδο για ποτό ή καφέ.
