CSS μόνο για τον IE

Ο Internet Explorer ενώ εκσυγχρονίζετε συνέχεια αποτελεί το μεγαλύτερο πρόβλημα των Web Developers, καθώς έχεις τις δικές του ιδιαιτερότητες σε ότι αφορά τον τρόπο αναπαραγωγής ιστοσελίδων και τα Hacks που απαιτούνται στο CSS για να λειτουργήσουν όλα όπως πρέπει.

Στο σημερινό άρθρο θα σας παρουσιάσω τις ετικέτες ελέγχου έκδοσης του Internet Explorer έτσι ώστε να είστε σε θέση να φορτώσετε περιεχόμενο στη σελίδα σας που είναι απαραίτητο για όποια έκδοση του browser θέλετε.

Γιατί να χρησιμοποιήσετε ετικέτες ελέγχου για τα CSS;

• Παρουσιάζονται προβλήματα που χρειάζονται ειδική μεταχείριση
• Για να διατηρήσετε το κεντρικό αρχείο CSS της ιστοσελίδας σας καθαρό από Hacks
• Για να μην δημιουργείτε inline Hacks.
• Είναι μια κοινά αποδεκτή τεχνική, ακόμα και από την ίδια την Microsoft.

Σε αυτό το σημείο θα πρέπει να σημειωθεί πως οι ετικέτες ελέγχου δεν είναι μόνο για τα CSS σας. Μπορείτε να τις χρησιμοποιήσετε για να φορτώσετε επίσης διάφορα σενάρια εντολών (JavaScript) ή ακόμα και να εμφανίσετε διάφορα μηνύματα σε χρήστες με Internet Explorer.

Ο κώδικας

Το καλύτερο σημείο στη σελίδα σας για να φορτώσετε τα αρχεία μορφοποίησης (CSS) είναι το τμήμα head της ιστοσελίδας σας. Οπότε κατά συνέπεια είναι καλό να χρησιμοποιείτε τον κώδικα που ακολουθεί στο ίδιο τμήμα της ιστοσελίδας σας. Η ετικέτα έναρξης, και η ετικέτα τερματισμού για τον έλεγχο είναι έγκυρα HTML σχόλια. Έτσι οι περιηγητές διαδικτύου που δεν μπορούν να κατανοήσουν το νόημα αυτών των ετικετών απλά αντιμετωπίζουν το περιεχόμενο τους ως σχόλιο.

Επίσης οι κανόνες ελέγχου είναι αρκετά προφανείς. Για να κάνουμε ένα λογικό έλεγχο με τον τελεστή «not» χρησιμοποιούμαι το σύμβολο «!». Έτσι, για να πούμε ότι δεν θέλουμε να είναι ο Internet Explorer η σύνταξη θα είναι κάπως έτσι !IE. Επίσης χρησιμοποιούνται οι τελεστές «gt» (greater than) που σημαίνει μεγαλύτερο από, «gte» (greater than equal) που σημαίνει μεγαλύτερο από ή ίσο, «lt» (lower than) που σημαίνει μικρότερο από και τέλος «lte» (lower than equal) που σημαίνει μικρότερο από ή ίσο.

Στόχευση σε όλες τις εκδόσεις του Internet Explorer

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση όλων των περιηγητών διαδικτύου εκτός του Internet Explorer

<!--[if !IE]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 7

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 6

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 5

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση μόνο του Internet Explorer 5.5

<!--[if IE 5.5000]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 6 και κάτω

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 7 και κάτω

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 6 και πάνω

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 7 και πάνω

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Στόχευση στους Internet Explorer 8 και πάνω

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
<![endif]-->

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

Σχόλια

Δεν υπάρχουν σχόλια ακόμα.

Αφήστε ένα σχόλιο

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL