CSS hacks

Τα CSS hacks είναι γραμμές κώδικα μέσα στο CSS αρχείο που σκοπό έχουν να αντικαταστήσουν συγκεκριμένο κομμάτι του CSS με κάποιο άλλο ώστε να έχουμε το καλύτερο δυνατό αποτέλεσμα στην εμφάνιση μιας σελίδας σε όλους τους browsers.

Στην πραγματικότητα τα περισσότερα από τα hacks αφορούν τον Internet Explorer 6 και τις παλιότερες εκδόσεις του. Ο IE είναι ως γνωστόν ο browser που προξένησε τα περισσότερα προβλήματα στο Web design και ακόμα μας ταλαιπωρεί.

Τα παρακάτω hacks είναι απλές και έτοιμες να εφαρμοστούν λύσεις και σε καμία περίπτωση αυτό το κείμενο δεν είναι ένας πλήρης οδηγός των CSS hacks.

To !important hack

#nav {
border: 1px solid #ccc; !important;
border: 1px solid #ccc;
}

To hack έχει να κάνει με τη δυσκολία του ΙΕ6 (και των παλιότερων εκδόσεών του) να διαχειριστεί διαφορετικά properties σε ένα κανόνα. Συνεπώς ο ΙΕ θα διαβάσει το δεύτερο στυλ για το border, ενώ για τους μοντέρνους browsers θα υπερισχύσει το !important.

Από τη στιγμή που ο παλιός ΙΕ μεταφράζει το “dotted” σε “dashed” και κάνει το border να φαίνεται άσχημο, με το hack αυτό λέμε ότι το border για τον ΙΕ θα είναι solid γραμμή.

Όλα αυτά είναι λυμένα για τον ΙΕ7.

To star hack

a:hover {
border: 1px dotted #ccc;
}

* html a:hover {
border: 1px solid #ccc;
}

Ο πιο πάνω κώδικας ορίζει ένα κανόνα και το star hack τον ανατρέπει. Αυτό γίνεται κατανοητό μόνο για τις παλιές εκδόσεις του ΙΕ.

Έτσι, όπως και στην προηγούμενη περίπτωση, το dotted border δε γίνεται αντιληπτό από τον ΙΕ.

To hack ch­ild selector

html>body{
background: url(back.png);
}

Αυτό το hack κρύβει από τον IE6 (και τις παλιότερες εκδόσεις του) την εικόνα back.png.

Αυτό συμβαίνει χάρη στο child selector “>” τo οποίο δε γίνεται αντιληπτό από τον ΙΕ, ενώ οι άλλοι browsers το καταλαβαίνουν και λαμβάνουν υπόψη τους τον κώδικα που ακολουθεί. O IE7 επίσης καταλαβαίνει το child selector.

Θα μπορούσε να είναι πολύ χρήσιμο αν το back.png ήταν μια διαφανής εικόνα, που ως γνωστόν τα διαφανή .png αρχεία επίσης δε γίνονται αντιληπτά από τον ΙΕ.

To hack attribute selector

div[id="content"] {
background: url(back.png);
}

Όπως και πριν, στο hack υπάρχει το attribute selector “[id=”...”]”, το οποίο δεν καταλαβαίνουν οι παλιές εκδόσεις του IE με αποτέλεσμα να μη διαβάζεται καθόλου από αυτόν και τελικά η εικόνα να μη φαίνεται.

Ένας άλλος τρόπος αντιμετώπισης των προβλημάτων του Internet Explorer είναι τα Conditional Comments στα οποία αναφέρθηκα λίγο παλιότερα. Δεν μπορώ να πω ότι η μία λύση είναι καλύτερη από την άλλη, αλλά όσο περνάει ο καιρός μάλλον τείνω να προτιμώ την ευκολία των hacks.