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

11 Νοέ 2011 | HTML

Δεν επιτρέπονται τα σχόλια.


internet-explorer

Ο 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 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



11 Απριλίου 2012

καλά, μόλις τώρα βρήκα το site σου φίλε μου, κι εγώ νόμιζα ότι δεν υπάρχει κόσμος που ενδιαφέρεται…
Anyway, παρότι έχω διαβάσει τις οδηγίες στο msdn… αυτή η ιστορία είναι κουραστική κυρίως για τους παλιότερους browser…
Όταν πρόκειται να στοχεύω IE συνήθως κάνω copy paste ή δουλεύω με boiler.




12 Απριλίου 2012

Εγώ προσωπικά δουλεύω κατευθείαν με Frameworks που έχουν από μόνα τους μέσα τις απαραίτητες Hackιες, με αποτέλεσμα στο τέλος να πρέπει να κάνω ελάχιστα πράγματα σε IE.


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php