December 16, 2003
Look ma, no tables!
Από σήμερα το layout τόσο της ιστοσελίδας μου όσο και του weblog είναι φτιαγμένο καθαρά με CSS, χωρίς τη χρήση tables, ενώ και τα δύο είναι valid XHTML. Η μετάβαση δε μπορώ να πω ότι ήταν όσο εύκολη περίμενα να είναι, κυρίως γιατί θέλω τα πράγματα να 'ναι από 'δω κι από κει, αλλά μετά από λίγα ζόρια έκατσε και άξιζε τον κόπο με το παραπάνω.
Όλα ξεκίνησαν μ' εκείνη την επίμονη βαρεμάρα ενός απογεύματος που δεν έλεγε να τελειώσει που τη βρίσκει κανείς συχνά σ' εμάς τους κομπιουεράδες. Βρέθηκα να παίζω με τα χρώματα στο gimp για αρκετή ώρα.. Ε κάποια στιγμή φάνηκε να βγαίνει κάτι όμορφο..
Και λέω.. "Αφού θα φορέσεις τις γαλότσες και θα χωθείς μες την HTML, δε χώνεσαι με το σωστό τρόπο;" (λέγε με valid CSS/XHTML)...
Οι πίνακες μπήκαν στην HTML για ένα και μόνο λόγο: Για την παρουσιάση tabular δεδομένων. Από τη στιγμή όμως που υπάρχει και το μαγικό border="0", οι web designers άρχισαν να τους χρησιμοποιούν για να τοποθετούν τα αντικείμενα της σελίδας τους εκεί που θέλουν. Αν και αυτό πετυγχαίνει παράγοντας το επιθυμητό αποτέλεσμα, έχει ένα δυσάρεστο side-effect: Ο κώδικας παρουσίασης και τα ίδια τα δεδομένα βρίσκονται στο ίδιο αρχείο, μπλεγμένα μεταξύ τους. Ο web developer αναγκάζεται να έχει μες τα πόδια του κομμάτια ολόκληρα HTML, εκεί που θα έπρεπε να έχει το πολύ-πολύ μερικά custom tags για να παράγει τα δεδομένα στην ιστοσελίδα.
Το πρόβλημα λοιπόν ανάγεται στο εξής: Τα δεδομένα οφείλουν και πρέπει να διαχωρίζονται από την αναπαράσταση τους.
Αυτό γίνεται με τη χρήση των CSS. Αν και υπάρχουν προ πολλού (οι ΙΕ, NN3 υποστήριζαν CSS1 ενώ οι IE4/NN4 υποστήριζαν CSS2), τα τελευταία 1-2 χρόνια φαίνεται πιο επιτακτική η ανάγκη χρήσης τους.
Πλεονεκτήματα των CSS:
- Χρησιμοποιώντας CSS οι σελίδες φορτώνουν πιο γρήγορα (λιγότερος κώδικας, τα CSS γίνονται cached)
- Το κόστος για το hosting μειώνεται μια και μειώνεται το απαιτούμενο bandwidth (και στο ένα τρίτο!)
- Οι σελίδες είναι πιο ευέλικτες για επανασχεδίαση
- Ομειογενής σχεδίαση του website, αφού μια αλλαγή μπορεί να επιρεάσει πολλές (ή όλες) τις σελίδες του website.
- Οι σελίδες είναι περισσότερο προσβάσιμες από ανθρώπους με σωματικές αναπηρίες (με ένα κλικ μπορεί το χρώμα των γραμμάτων να γίνει πιο έντονο) και από ανθρώπους που χρησιμοποιούν άλλους viewers και browsers για το σερφάρισμα τους
- Οι μηχανές αναζήτησης δίνουν ψηλότερη βαθμολογία στη σελίδα
- Σαν bonus, έχεις και ένα ίματζ αβαντάζ πως ακολουθείς παγκόσμια πρότυπα ;)
Όπως καταλαβαίνετε, αν και το learning curve είναι λίγο απότομο, αξίζει τον κόπο με το παραπάνω. Γιατί είναι καλύτερα όταν υπάρχει ένα κοινό πλαίσιο σχεδιασμού και διαδραστικότητας σ'αυτά που κάνουμε..
Resources:- Look ma, no tables! - Eric Costello
- The CSShark Answers FAQs - MaKo
- CSS/edge - Eric Meyer
- From Table Hacks to CSS Layout - Jeffrey Zeldman/alistapart
- Advanced CSS Layouts - webreference.com
- W3C CSS Spec
#1
December 19 2003, 20:31 GMT+2Όντος, μία ιστοσελίδα με CSS έχει πολλά προτερήματα. Τα είδα και εγώ πρόσφατα όταν έφτιαχνα κάτι. Με το CSS να ελέγχει τα πάντα, όλα γίνονται πιο καθαρά!
#2
January 10 2004, 13:32 GMT+2Και εγώ είπα να τα δοκιμάσω. Στην αρχή ήταν δύσκολο επειδή με μερικά tables μπορούσα να κάνω την ίδια δουλειά, αλλά όταν άρχισα να συνηθίζω όπως είπε ο Δημήτρης "άξιζε τον κόπο". Περίπου 300-400 γραμμές html είναι 10-15 γραμμές πλέον, και έχω το πλεονέκτημα να μπορώ να αλλάξω οτιδήποτε μέσα στη σελίδα χωρίς να χρειαστεί να το επαναλάβω σε όλα τα tables και τα cells μου. Προτείνω να το δοκιμάσετε, το χειρότερο που μπορεί να γίνει είναι να μην σας αρέσει:)
Προς τους spammers:
Οποιαδήποτε σχόλια θεωρηθούν ως spam (διαφημίσεις, κλπ) θα αφαιρούνται, τα domains που περιέχονται στα links θα γίνονται blacklisted και δεν θα μπορείτε να ξανασχολιάσετε σ' αυτό τον ιστοχώρο. Τώρα, ξέρετε.