Διαφορετικά CSS για διαφορετικούς browsers

To να κατασκευάζεις διαφορετικά stylesheets για διαφορετικούς browsers είναι κάτι που δε θέλω να κάνω με τίποτα. Όμως μερικές φορές πρέπει να λερώνεσαι και με τέτοιες δουλειές, αν θέλεις να τρέχει το site σου με το σωστό τρόπο.

Τα κομμάτια του κώδικα που ακολουθούν δεν είναι ακριβώς hacks, αλλά μάλλον ένας συνδυασμός κανόνων ώστε να μπορέσει ένας designer να λύσει προβλήματα τα οποία προκαλούνται συνήθως από (ποιον άλλο;) τον Internet Explorer.

Ας υποθέσουμε ότι έχουμε ένα style, που το ονομάζουμε global.css και που εφαρμόζεται όπως πρέπει στον Firefox, στον Opera και στον IE7, αλλά όχι σε παλιότερες εκδόσεις του IE.

Βήμα #1

Σε πρώτη φάση κάνω import το style με τον ακόλουθω τρόπο και το κρύβω από κάθε έκδοση του IE.

<style type="text/css">@import "global.css" screen;</style>

O “κανόνας” mediatype “screen” είναι το κλειδί, που κρύβει το style από τον IE. Προσοχή όμως: το να εισαχθεί ένα style με την εντολή @import μπορεί να μη γίνει αντιληπτό από αρκετά παλιούς άλλους browsers.

Βήμα #2

Αυτή τη στιγμή υπάρχει ένα style που δε γίνεται αντιληπτό από τον IE (όλες οι εκδόσεις). Για να προχωρήσει κάποιος από αυτό εδώ το σημείο πρέπει να χρησιμοποιήσει κάποια conditional comments. Στο σημείο αυτό προτείνω δύo links, μία εισαγωγή στα conditional comments και ένα άρθρο γιατί τα conditional comments είναι χρήσιμα.

Τα παρακάτω expressions διαβάζονται από πρακτικά όλους τους browsers:

<!--[if ! IE 7]><style type="text/css"> @import old.css </style><![endif]>

<!--[if IE 7]><style type="text/css"> @import global.css </style><![endif]>

Στα παραπάνω κομμάτια κώδικα τα πράγματα είναι σχετικά απλά. Η πρώτη γραμμή αναγκάζει όλες τις εκδόσεις του ΙΕ εκτός της 7 να διαβάσει ένα κατάλληλο style, το old.css. Η δεύτερη γραμμή αναγκάζει τον ΙΕ7 να διαβάσει το global.css.

Όλα λοιπόν τώρα είναι μια χαρά, εκτός από μένα που έπρεπε να σπαταλήσω αρκετές ώρες ώστε να βρω αυτή τη λύση για κάτι που θα έπρεπε να είναι default.