Βαρεθήκατε να υποστηρίζετε τον 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, η επιλογή εφαρμογής της παραπάνω τεχνικής είναι καθαρά στην υποκειμενική κρίση του καθενός.
October 3rd, 2008 at 10:02 pm
Σίγουρα θα το κάνω… δεν αντέχετε άλλο ο IE 6. Είναι σίγουρο πως οι χρήστες έχουν πειρατικό software, γιατί άλλωστε να χρησιμοποιούν αρχαίο browser, τώρα που ειδικά κυκλοφόρησε ο ολοκαίνουργιος IE 8 (BETA).
Αν το σκεφτείς… Θα βοηθήσει και την Microsoft έμμεσα, αφού έτσι θα μπορέσει ελέγξει τους παράνομους “σπιτικούς” χρήστες.
Καλό script, Caio
October 4th, 2008 at 2:26 pm
Πολύ καλό άρθρο, ωστόσο ποτέ δεν “μπλόκαρα” τους IE6 χρήστες σε κάποιο site, ωστόσο γούστα είναι αυτά…
October 4th, 2008 at 6:21 pm
Πραγματικά ντρέπομαι για τον κλάδο του web design & development στην Ελλάδα όταν βλέπω τέτοια άρθρα που ουσιαστικά προτρέπουν τους developers να φέρονται ρατσιστικά απέναντι στους χρήστες επειδή δεν ξέρουν 5-6 fixes για ένα browser και βαριούνται να τα ψάξουν.
Ευτυχώς δεν έχουν όλοι αυτή την νοοτροπία αλλιώς θα είχαμε όλοι ακόμη και σήμερα IE6 γιατί κανείς δεν θα είχε υποστηρίξει τον firefox στο ξεκίνημα του. Ευτυχώς που τότε δεν είπαν όλοι “δεν αντέχεται άλλο ο netscape”.
October 6th, 2008 at 10:27 am
Αγαπητέ Βαγγέλη,
Θα ήθελα να σου επισημάνω πως το Web Design Blog δεν δημοσιεύει άρθρα τα οποία να προτρέπουν ή με οποιοδήποτε υποκειμενικό χαρακτήρα να τονίζουν κάποια άποψη στους αναγνώστες. Έχουν κύριο σκοπό την σωστή και αμερόληπτη ενημέρωση των Ελλήνων Web designers/ developers για επίκαιρα θέματα που γνωστοποιούνται και εφαρμόζονται στην παγκόσμια κοινότητα του κλάδου μας.
Η τεχνική που προβάλλεται στο συγκεκριμένο άρθρο έχει κυκλοφορήσει στο εξωτερικό εδώ καιρό και οι Έλληνες αναγνώστες και επαγγελματίες έχουν το δικαίωμα να το γνωρίζουν ασχέτως αν θα το χρησιμοποιήσουν στην δουλεία τους ή όχι.
Σχετικά με τα bugs που αναφέρθηκες, υπάρχει προηγούμενο άρθρο που εξηγεί και επιλύει τα προβλήματα που δημιουργεί ο IE6 διεξοδικά.
Εντέλει, σίγουρα γίνεται κατανοητό, όπως αναγράφεται στο τέλος του άρθρου η επιλογή για επαγγελματική ή προσωπική χρήση της συγκεκριμένης τεχνικής είναι στην κρίση του καθενός.
Σε ευχαριστώ για το ενδιαφέρον σου και την συμμετοχή σου.
October 7th, 2008 at 11:12 pm
Συμφωνώ με τον Γιάννη. Εντελώς τυχαία πέτυχα αυτό το post http://www.usabilitypost.com/2008/09/05/drop-ie6-support-give-people-a-reason-to-upgrade/
Στο εξωτερικό σκέφτονται πολύ σοβαρά από ότι φαίνεται να σταματήσουν την υποστήριξη του IE 6 και δικαιολογημένα πιστεύω.
October 10th, 2008 at 11:06 am
Ενα άρθρο με όλα τα γνωστά προβλήματα και fixes για τον ΙΕ θα ήταν πολύ ενδιαφέρον!
October 10th, 2008 at 11:50 am
Και μόλις είδα ότι υπάρχει ήδη….:P
March 20th, 2009 at 4:14 pm
http://blog.hugsformonsters.com/post/87657240/overly-judgemental-ie6-splash-pages hihi!
March 20th, 2009 at 4:20 pm
@homunculus Ευχαριστούμε για το link αν και είναι λίγο “καυστικές οι ατάκες” που προσφέρονται
June 26th, 2009 at 11:16 pm
…να πω και εγώ το εξής ? Ωραία (αν και δεν παίζει να μπλοκάρω ΙΕ στα site που φτιάχνω) αλλά ο ΙΕ 8 είναι καλός ?
γιατί έχω την εντύπωση ότι έχει περισσότερα ακόμη προβλήματα και από τον 6 ?
October 16th, 2009 at 12:20 am
[quote]Η ιστοσελίδα δεν υποστηρίζει IE6. Παρακαλώ ενημερώστε τον browser σας ….[/quote]
με link για FF? δεν είναι και πολύ σωστό αλλά μου αρέσει ο τρόπος που σκέφτεσαι
Δεν κρίνω το άρθρο που καλώς δημοσιεύεται αλλά όσο και αν αυτό κάνει τη ζωή μας λίγο (ή πολύ) δυσκολότερη, δεν γίνεται να συζητάμε αν είναι σωστό να μπλοκάρουμε τους χρήστες με IE6 τη στιγμή που τα ποσοστά χρήσης είναι ακόμα μεγάλα. Τι θα εξηγήσεις, για web standars ή ότι έχει σ**τά για μηχανή και ρεντάρει για τον γάιδαρο καβάλα?
Καλό είναι βέβαια να ξέρουμε πως μπορούμε να το κάνουμε ώστε σωστό ή λάθος να έχουμε αυτή την επιλογή, οπότε ευχαριστώ για τη δημοσίευση