CSS με το ζόρι!

Η CSS (Cascading Style Sheets) είναι μία stylesheet language που χρησιμοποιείται στο World Wide Web για να μορφοποιεί τα γραφικά markup αρχείων (π.χ. των html). Εν ολίγης, επειδή θέλαμε να διαχωρίσουμε τον κώδικα του σχεδιασμού από τον κώδικα των πληροφοριών, βάλαμε τον πρώτο σε ξεχωριστό αρχείο με τη δικιά του γλώσσα. Έτσι λοιπόν, η αυστηρή XHTML για να είναι valid, απαιτεί όλα τα στοιχεία που αφορούν τη μορφή να ΜΗΝ ορίζονται με HTML κώδικα μέσα στη σελίδα όπως είχαμε συνηθίσει στο παρελθόν.

Από την εποχή που το Διαδίκτυο άρχισε να γίνεται μόδα (περίπου το 1997), ξεκίνησαν να εμφανίζονται πολλοί διαφορετικοί web browsers (φυλλομετρητές διαδικτυακού ιστού..). Netscape, Microsoft Internet Explorer, Opera, όπως και ο καινούργιος παίχτης Mozilla Firefox, είναι κάποια από τα μεγάλα ονόματα εκεί έξω αυτή τη στιγμή. Για να μπορέσουν να προσελκύσουν περισσότερους χρήστες, οι σχεδιαστές προσπάθησαν να κάνουν τους browsers τους περισσότερο φιλικούς και εύχρηστους, “θυσιάζοντας” όμως πολλές φορές τα standards!

Τι είναι τα standards; Όταν πρόκειται να γράψουμε κώδικα στη γλώσσα C, ακολουθούμε το ANSI C standard ώστε όταν το πάμε σε οποιονδήποτε C compiler να το καταλάβει και να το μεταγλωττίσει. Στην περίπτωση της CSS το ρόλο του compiler αναλαμβάνουν οι browsers οι οποίοι – δυστυχώς – δεν έλαβαν απολύτως υπ’ όψη τους το CSS standard του W3C. Το αποτέλεσμα φυσικά είναι ο ίδιος CSS κώδικας να εμφανίζει διαφορετικά γραφικά από browser σε browser.

Ευτυχώς για εμάς, οι κατασκευαστές άφησαν κάποιες “τρύπες” πίσω τους :). Με άλλα λόγια, οι μηχανισμοί που χρησιμοποιούνται για να μεταγλωττιστεί ο CSS κώδικας, έχουν προβλήματα! Ακολουθώντας τη λογική: “it’s not a bug, it’s a feature”, οι web designers του κόσμου βάλθηκαν να εντοπίσουν και να καταγράψουν όλα αυτές τις ατέλειες ώστε, με τη βοήθεια αυτών, να “αναγκάσουμε” τους φυλλομετρητές να εμφανίσουν τις σελίδες όπως εμείς θέλουμε. Αυτές τις τεχνικές τις ονομάζουμε CSS filters (επειδή ακούγεται πιο “επαγγελματικό” από το CSS hacks :P).

Ας δούμε και λίγο κώδικα. Έστω ότι θέλαμε να εισάγουμε στη σελίδα μας έναν horizontal rule (hr) ο οποίος θα έχει ένα πολύ συγκεκριμένο χρώμα, μέγεθος και στοίχιση (ας πούμε μαύρο (#000000), ύψους 1 pixel, μήκους 80% και να είναι στα αριστερά). Η έκφραση hello there<hr /> βάζει το κλασικό μεγάλο hr το οποίο παρουσιάζεται όπως το θεωρεί ο κάθε browser πιο όμορφο. Αν την κάνουμε <hr class=”myHR”/>hello there και προσθέσουμε τον CSS κώδικα hr.myRH { color:#000000; } παρατηρούμε πως τα αδερφάκια Firefox-Netscape δεν κατάλαβαν διαφορά, ο Opera το είχε ήδη μαύρο by default άρα δεν άλλαξε ενώ ο Internet Explorer το μαύρισε ολοσχερώς! Για να “ξυπνήσουμε” τα παιδιά του Mozilla προσθέτουμε την έκφραση background: #000000; οπότε μαυρίζει σε αυτούς.

Τα hr όπως φαίνονται σε Firefox, Netscape, Internet Explorer και Opera (από πάνω προς τα κάτω)
Τα hr όπως φαίνονται σε Firefox, Netscape, Internet Explorer και Opera (από πάνω προς τα κάτω)

Για να το κάνουμε ύψους 1 pixel προσθέτουμε τη γραμμή height:1px; το οποίο αρκεί για τον Explorer όμως οι άλλοι τρεις δεν κατάλαβαν τι θέλουμε να πούμε οπότε χρειάζεται και η γραμμή border:0px; που θα τους πείσει να εμφανίσουν τη σωστή διάσταση. Για να ορίσουμε το πλάτος 80% προσθέτουμε width:80%; κάτι το οποίο μικραίνει το hr κατά 20% μεν αλλά βλέπουμε πως ενώ στον Explorer είναι στοιχιμένο αριστερά, στους άλλους τρεις είναι στη μέση.

Αυτό μας φέρνει στο πρόβλημα της στοίχισης. Με το κόλπο text-align:left; καταφέρνουμε να στείλουμε το hr αριστερά στον Opera. Με τη γραμμή margin:0; “κολλάμε” το hr αριστερά και στους Mozilla, όμως τώρα παρατηρούμε ένα άλλο πρόβλημα. Η φράση hello there είναι κολλητά στο hr στους Firefox, Netscape και Opera ενώ ο Internet Explorer βάζει κάποιο κενό μεταξύ τους! Αυτό το κενό δε φεύγει ούτε με τη γραμμή padding:0; άρα καλούμαστε να αλλάξουμε τακτική.

Σύμφωνα με τη λογική “if you can’t beat them, join them”, καταλήγουμε στο ότι αν θέλουμε να φαίνεται η σελίδα μας ίδια σε όλους τους browsers, θα πρέπει να κάνουμε τους τρεις να μοιάζουν με τον έναν που διαφέρει. Οπότε πρέπει να πούμε στο hr να βάλει ένα περιθώριο 6 pixels (κατά προσέγγιση) από πάνω του, ώστε να μην είναι κολλητά με το κείμενο. Αν αλλάξουμε το margin:0; σε margin:6px 0px 0px 0px; παρατηρούμε ότι θέσαμε μεν το σωστό κενό στην τριάδα, αλλά ο Explorer απλά προσέθεσε αυτό το εξάρι στο κενό που ήδη διατηρούσε, άρα δεν καταφέραμε τίποτα!

Για να πετύχουμε να αλλάξουμε το κενό μόνο στους τρεις browsers, χρειαζόμαστε έναν τρόπο να τους δώσουμε μια εντολή που δε θα αντιληφθεί ο Explorer. Εδώ θα εκμεταλλευτούμε το πρόβλημα του Internet Explorer (εκδόσεις 4 έως 6) το οποίο τον αναγκάζει να αγνοεί όποια γραμμή CSS ξεκινάει με την έκφραση html>body. Άρα αν προσθέσουμε τον κώδικα html>body hr.myHR { margin:6px 0px 0px 0px; } κάτω από τη δήλωση του hr.myRH παρατηρούμε πως η αλλαγή έγινε μόνο στους τρεις browsers που θέλαμε και τώρα μοιάζουν όλα ίδια.

Είναι εμφανές πως ο καθένας κάνει ό,τι θέλει!!
Είναι εμφανές πως ο καθένας κάνει ό,τι θέλει!!

Μία ιδιαίτερα αναλυτική λίστα με τα γνωστότερα CSS filters μπορείτε να βρείτε στη σελίδα http://centricle.com/ref/css/filters/ όπου είναι χωρισμένα ανά browser και ανά έκδοση για να επιλέξετε αυτά που χρειάζεστε. Το βασικότερο μειονέκτημα αυτών των τεχνικών είναι πως όταν βγουν νέες εκδόσεις των παραπάνω browsers, αυτά τα φίλτρα πιθανότατα θα πάψουν να παίζουν και ίσως αρχίσουν να δημιουργούν προβλήματα στο σχεδιασμό, αντί να τον διορθώνουν. Όταν έρθει εκείνη η ώρα, έχετε το νου σας ώστε να τα αντικαταστήσετε με τους διαδόχους τους ή, κατά προτίμηση, να τα αφαιρέσετε εντελώς επειδή δε θα χρειάζονται πια :)

upON

 

(Κατατέθηκε στο περιοδικό “total XAKER” αλλά δυστυχώς δεν εκδόθηκε)