css3.gr

Σήμερα θα μιλήσουμε για τον καταστροφέα των κόσμων, το διαφθορέα πολιτισμών, τη νέμεση όλων των web designers ανά τον κόσμο, τον Internet Explorer 6 (θα μου συγχωρήσετε το αρσενικό πρόσωπο, είναι ευκολότερο να προσωποποιηθεί έτσι).

Πρόκειται για έναν από τους πιο συχνούς πονοκεφάλους των ανθρώπων που δημιουργούν websites, τόσο λόγω των πολυάριθμων προβλημάτων που παρουσιάζει στην απόδοση του CSS όσο και στις διαφορές που παρουσιάζει στο Javascript rendering, σε σχέση με τους λεγόμενους “σύγχρονους” browsers (Firefox 3, Safari, Opera, Internet Explorer 7).

Υπάρχουν τελικά τρόποι να μειώσουμε τον χρόνο που απαιτείται για την επίπονη μετάβαση κάθε project στον Internet Explorer 6;

Ακολουθούν μερικές συμβουλές, βασισμένες στην προσωπική μου εμπειρία.

Προσοχή στα .png

Νομίζω ότι ξέρετε καλύτερα από μένα τα προβλήματα που αντιμετωπίζει ο IE6 με τις εικόνες .png. Αφού πλέον γνωρίζετε ότι θα πρέπει να καταφύγετε σε hacks για να δουλέψουν σωστά, φροντίστε ώστε τα .png που χρησιμοποιείτε να είναι έτσι φτιαγμένα που δεν χρειάζεται να οριστεί background-position και background-repeat σε αυτά.

Οι περισσότερες μέθοδοι χρησιμοποιούν το filter AlphaImageLoader, το οποίο έχει προβλήματα με τα παραπάνω properties και δεν θα εμφανίσει σωστά την αντίστοιχη εικόνα. Γι'αυτό αν θέλετε για παράδειγμα να χρησιμοποιήσετε ένα ημιδιάφανο .png ως background, φροντίστε να δημιουργήσετε μια αρκετά μεγάλη εικόνα που να καλύπτει το μέγεθος του content σας και αφήστε κατά μέρος τις μικρές εικόνες και το background-repeat.

Αποφύγετε τα διπλά classes

Με αυτό εννοώ κλάσεις της μορφής class="box small", class="title small", με CSS code σαν τον παρακάτω:

.box.small { width: 200px; } .title.small { font-size: 10px; }

O IE6 τείνει να έχει προβλήματα με δηλώσεις αυτής της μορφής, ειδικά αν και οι δύο classes έχουν το ίδιο όνομα αλλά αναφέρονται σε διαφορετικό property. Μερικές φορές ένα απλό !important θα δώσει τη λύση - αλλά όχι πάντα. Η μοναδική λύση είναι να αποφύγετε τα διπλά classes και να χρησιμοποιήσετε classes της μορφής box box-small, title title-small ώστε να αποφύγετε τις ...παρεξηγήσεις με τον IE6.

Προνοήστε για τα πιο γνωστά bugs

Μερικές φορές, είναι προτιμότερο να προλαμβάνετε παρά να διορθώνετε κάποια bugs. Καθώς η λύση για να δουλέψει το min-height και στον ΙΕ6 είναι σχετικά απλή, φροντίστε για κάθε φορά που το χρησιμοποιείτε, να προσθέτετε μια ανάλογη δήλωση στο conditional stylesheet σας, που αντί για min-height ορίζει το height του στοιχείου.

Χρησιμοποιείτε float: left και margin-left για να μετακινήσετε ένα στοιχείο; Προσοχή στο doubled float-margin bug, ορίστε ένα display: inline και όλα καλά. Χρησιμοποιείτε overflow: hidden σε κάποιο container για να κάνετε clear τα εσωτερικά floats; Φροντίστε να προσθέσετε ένα height: 1% στο conditional stylesheet, ώστε να ορίσετε "με το χέρι" το hasLayout.

Και ποτέ μα ποτέ μην ορίζετε width, margin και padding σε ένα στοιχείο. Box model bug, anyone;

Dotted borders; Ξεχάστε τα!

Ή τουλάχιστον, για λίγο. Δυστυχώς ο IE6 αρνείται να αποδεχτεί την ύπαρξη των dotted borders, με αποτέλεσμα να τα μετατρέπει πάντα σε dashed. Δεν χρειάζεται να αναφέρω πόσο ενοχλητικό είναι αυτό...

Αν θέλετε παρά ταύτα να χρησιμοποιήσετε κάποιο dotted border, φροντίστε να το δημιουργήσετε σαν εικόνα στο Photoshop και να το ορίσετε ως background image στο ανάλογο στοιχείο. Lame, αλλά μόνο έτσι θα εμφανίζεται σωστά σε όλους τους browsers.

Δείξτε υπομονή

Κατά την ταπεινή μου γνώμη, μόνο εφόσον έχει ολοκληρωθεί η σχεδίαση ενός project και η ανάπτυξη σε HTML και CSS είναι η ώρα να ...ελέγξουμε πώς αυτό εμφανίζεται στον IE6. Η παράλληλη ανάπτυξη σε δύο ή περισσότερους browsers μπορεί να έχει περισσότερο ελεγχόμενα αποτελέσματα και λιγότερες δυσάρεστες εκπλήξεις, αλλά εντέλει απαιτεί πολλαπλάσιο χρόνο και δεν αξίζει τον κόπο.

Μην εκπλαγείτε και μην αγανακτήσετε αμέσως όταν δείτε ότι το πολύτιμο design σας απλά δεν βλέπεται σε IE6. Ελέγξτε την HTML και το CSS σας για λάθη, οπλιστείτε με υπομονή και δείτε την όλη διαδικασία με άλλο μάτι. Αν ακολουθήσετε τις παραπάνω συμβουλές, νομίζω ότι η δουλειά σας θα γίνει ακόμη ευκολότερη.

Και προς Θεού, μην αρχίσετε να βρίζετε τον IE6 στο Twitter. Είναι passé.

Flickr credits

• bug of the day by urtica
• Birch Shield Bug by Marko_K
• lady-bug-on-dahlia-series, take582 by -sel
• A Bug by Toby(Yang) Yu
• Bug's life by ms4jah