Μπλοκάρετε τους χρήστες που χρησιμοποιούν IE6.
Βαρεθήκατε να υποστηρίζετε τον IE6 και τα προβλήματα που δημιουργεί; Το Web Design Blog σας παρουσιάζει μία εύκολη τεχνική από το css-tricks.com ώστε η ιστοσελίδα σας να μην είναι ορατή στους χρήστες που χρησιμοποιούν IE6. Ακόμα με την χρήση JavaScript μπορείτε να προσθέσετε στοιχεία προβολής και να τα παραμετροποιήσετε σύμφωνα με τις αρέσκειες σας.
Δεν προτείνεται η συγκεκριμένη τεχνική να εφαρμοστεί στους πελάτες σας, αλλά σε κάποια projects που υπάρχει η δυνατότητα επιλογής.
Δείτε το παράδειγμα (απαραίτητη η χρήση ΙΕ6) | Download απαραίτητα αρχεία.
Βήμα 1ο : ΕΝΕΡΓΟΠΟΙΗΣΗ ΑΝΙΧΝΕΥΣΗΣ
Στο πάνω μέρος του κώδικα της σελίδας, μέσα στο <head> προσθέτετε τα δύο js αρχεία που θα ενεργοποιήσουν το «μπλοκάρισμα» της ιστοσελίδας στον ΙΕ6.
…
<script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
<script type=”text/javascript” src=”jquery.ie6blocker.js”></script>
</head>
Ουσιαστικά το ie6blocker.js script είναι το αρχείο που ανιχνεύει τον ΙΕ6, έτσι μπορείτε να χρησιμοποιήσετε εναλλακτική μέθοδος όπως:
JavaScript
var IE6 = (navigator.userAgent.indexOf(“MSIE 6”)>=0) ? true : false;
if(IE6) {
… do stuff …
}
Κώδικας
<!–[if IE 6]>
<script type=”text/javascript” src=”jquery.ie6blocker.js”></script>
<![endif]–>
Ωστόσο από τη στιγμή που είναι απαραίτητη η ενεργοποίηση της JavaScript για να γίνει η ανίχνευση, ουσιαστικά είναι η ίδια φιλοσοφία. Άρα μπορείτε να χρησιμοποιήσετε όποια μέθοδος θέλετε.
Βήμα 2ο : ΕΦΑΡΜΟΓΗ jQuery
Τώρα που ενεργοποιήθηκε η ανίχνευση «μπλοκαρίσματος» του ΙΕ 6 μπορείτε με την χρήση jQuery να δημιουργήσετε κάποια στοιχεία προβολής ώστε να ενημερώνετε τον χρήστη για το τι συμβαίνει.
Οδηγίες και παράμετροι
Στο συγκεκριμένο παράδειγμα θα χρησιμοποιήσουμε 2 divs, το ένα θα δημιουργεί το «σκοτείνιασμα» παρεμφερές του Thickbox στην ιστοσελίδα που προβάλλουμε και το άλλο θα εμφανίζει το ενημερωτικό μήνυμα στο κέντρο της οθόνης, αναλυτικότερα:
1o div = σκοτείνιασμα
$(“<div>”)
.css({
‘position’: ‘absolute’,
‘top’: ‘0px’,
‘left’: ‘0px’,
backgroundColor: ‘black’,
‘opacity’: ‘0.75’,
‘width’: ‘100%’,
‘height’: $(window).height(),
zIndex: 5000
})
.appendTo(“body”);
2ο div = ενημερωτικό μήνυμα
$(“<div><img src=’no-ie6.png’ alt=” style=’float: left;’/><p><br /><strong> <p><br /><strong>Η ιστοσελίδα δεν υποστηρίζει IE6.</strong><br /><br /> Παρακαλώ <a href=’http://getfirefox.org’>ενημερώστε τον browser σας</a>.</p>”)
.css({
backgroundColor: ‘white’,
‘top’: ‘50%’,
‘left’: ‘50%’,
marginLeft: -210,
marginTop: -100,
width: 410,
paddingRight: 10,
height: 200,
‘position’: ‘absolute’,
zIndex: 6000
})
.appendTo(“body”);
Μπορείτε να αλλάξετε το μήνυμα και το γραφικό απλά αλλάζοντας τις παραπάνω παραμέτρους.
Δείτε το παράδειγμα (απαραίτητη η χρήση ΙΕ6) | Download απαραίτητα αρχεία.
Το συγκεκριμένο άρθρο δεν δημοσιεύτηκε με σκοπό να σταματήσει την χρήση του IE6, η επιλογή εφαρμογής της παραπάνω τεχνικής είναι καθαρά στην υποκειμενική κρίση του καθενός.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Μπλοκάρετε τους χρήστες που χρησιμοποιούν IE6. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
