Τα CSS hacks ανακαλύφθηκαν επειδή ο κάθε browser -ασχέτως με το πόσο κοντά στα standards βρίσκεται- έχει δική του άποψη για το πως θα ερμηνεύσει τον κώδικα CSS. Περίεργο, αλλά συμβαίνει, και τις περισσότερες φορές οφείλεται σε bugs, με πρωταθλητή τον Internet Explorer.
Κατ' αρχάς να ξεκαθαρίσω πως είμαι αντίθετος στα hacks. Πιστεύω πως αν ο κώδικας HTML είναι σωστός και τα CSS απλά και σωστά μελετημένα, δεν θα συναντήσετε προβλήματα. Εκτός από ένα βέβαια — το «σπασμένο» box model του Internet Explorer 6 (και πριν). Για αυτή την περίπτωση υπάρχουν δύο λύσεις: α) μην χρησιμοποιείται padding σε κουτιά που έχετε καθορίσει το width. Αν χρειάζεστε «αέρα» βάλτε margin στα περιεχόμενα. Αν αυτό δεν είναι εφικτό ή κατάλληλο για την περίπτωση, υπάρχει η λύση β), τα conditional comments του Internet Explorer.
<!--[if lt IE 7]>
<style type="text/css">
#header { background: url(images/photo.gif) no-repeat top left; }
#sidebar ul li ul li { background: url(images/bullet_green.gif) no-repeat left bottom; }
</style>
<![endif]-->Στο site που φτιάχναμε τις τελευταίες μέρες έχει χρησιμοποιηθεί ο παραπάνω κώδικας σε κάθε σελίδα HTML, στο <head>. Πρόκειται για ένα style sheet που περιλαμβάνεται μέσα σε ένα HTML comment (σχόλιο). Τα σχόλια είναι διάφορα… σχόλια ή παρατηρήσεις που μπορούμε να γράψουμε μέσα στον κώδικα για να μας θυμίζει π.χ. για ποιό λόγο επιλέξαμε να γράψουμε κάποιο κομμάτι κώδικα ή περιγραφές των blocks κ.α. Οι browsers φυσικά αγνοούν τα comments και αυτό είναι το ζητούμενο, ωστόσο, ένα σχόλιο σαν το παραπάνω, ο Internet Explorer το «εκτελεί». Στο παραπάνω κομμάτι, απευθύνομαι σε οποιονδήποτε Internet Explorer παλιότερο από version 7 (<!--[if lt IE 7]> — lt=less than) και τον καθοδηγώ να ερμηνεύσει τους παρακάτω κανόνες CSS. Αυτοί οι κανόνες θα λάβουν προτεραιότητα έναντι των ίδιων που υπάρχουν στο default.css αρχείο διότι «εκτελούνται» μετά από εκείνους.
Εκ πρώτης όψεως φαίνονται ίδιοι, ωστόσο υπάρχει μια διαφορά: ο Internet Explorer πριν την version 7 δεν είχε την δυνατότητα να δείξει την 8-bit διαφάνεια που μπορεί να έχει ένα αρχείο εικόνας .png. Έτσι, αντί για τα photo.png και bullet_green.png που θα χρησιμοποιήσουν όλοι οι άλλοι browsers, ο Internet Explorer (6 και παλιότερος) θα χρησιμοποιήσει τα gifάκια που έχω ετοιμάσει για αυτό το σκοπό. Για να δείτε την διαφορά θα πρέπει να σβήσετε αυτές τις γραμμές και να ξαναφορτώσετε τη σελίδα.
Αν θέλετε να μάθετε περισσότερα για τα διάφορα bugs ή αν ήδη έχετε «πέσει» πάνω σε κάποιο και ψάχνετε να το λύσετε, δείτε: Position is Everything, WellStyled.com και centricle.com
(Βαθμολογία: +4, ψήφοι: 4)
Loading ...
