TLDR: Tell IE6/7 users to leave in a nice way :) whilst blocking them from all content.
Basically I do not need people using IE7/6 lower on my web app. Was thinking of just doing a doc.write after load to wipe the page with a message of "Sorry your browser is outdated" has anyone done similar and found a nice friendly way to tell them to come back with a better browser?
Am currently using jquery so jquery solutions viable.
(1) Most reliable way to detect browser?
(2) Opinion on what to present to the user?
The SCENARIO is not the question here
They will have access to upgrade if need be!
I have legit reasons for doing so so stay ontopic to the question and don't voice opinions about the general topic of IE6 and how much you love it.
If possible, put the fear of God into your users. That might actually get them to go through with the upgrade:
if ($.browser.msie && parseInt($.browser.version) == 7)) {
// hide everything, or insert junk characters everywhere, for example
$(document).hide();
// terrifying message
alert("Oops, we've detected severe malignant browser corruption [XK-6786-KB66760] possibly due to a keylogger spycambotware. Kindly upgrade your IE installation. See microsoft.com for details");
}
Use an IE conditional statement (e.g. <![if lte IE 7]>Upgrade your browser<![endif]>) and remove the content with jQuery.
Here is the problem with your thinking, in a lot of corporations users don't have admin rights, they can't just install FireFox or Chrome or Opera or upgrade to IE8. No, they are stuck with whatever the corporate standard is. I have to deal with people that work for financial institutions...those people have custom versions of IE installed where half the stuff is stripped away and even JavaScript is disabled in some cases
This is also the reason that IE6 won't die anytime soon
You should probably block users who have browsers that lack the features you require rather than sniffing the browser. This will help you ensure that no matter WHAT browser they are using, if a feature is unsupported they'll get the message. jQuery can do this for you.
Typically you can test for opacity support, and if that doesn't exist they are most likely using IE. Here's a solution I used on one of my sites. I'm using jQuery UI to pop up a modal message. Looks very nice.
// Provide warning for bad browsers.
if (!$.support.opacity) {
$(['<div id="no-opacity-warning">', iesucks,'</div>'].join(''))
.appendTo('body')
.dialog({
autoOpen : true,
buttons : {
"Get Firefox" : function() {
window.location = 'http://www.mozilla.com/firefox/ie.html';
},
"Get Chrome" : function() {
window.location = 'http://www.google.com/chrome';
},
"Get Chrome Frame" : function() {
window.location = 'http://code.google.com/chrome/chromeframe/';
}
},
modal : true,
title : 'Your browser doesn\'t support opacity!',
width : 600
});
}
The iesucks variable contains this message:
Although I have taken great care to develop cross-browser-compatable javascript, limitations in your browser prevent certain things from performing well. You're probably using IE.
Fear Not! There are two simple options available to you. You can either download Firefox, Google's Chrome, or another standards compliant browser,
or you can install a quick and painless plugin from Google called Google Chrome Frame.
Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer. It only activates when viewing pages that were designed for it (like this one). You've got nothing to lose, and it's fast and free.
Kudos to you for taking the hit on usage and making the WWW a better place.
1) You can use jquery.browser to accomplish this, I believe. Read the result and redirect to your "error" screen as appropriate.
2) I would put in a nice paragraph about why you are doing this and a helpful link to the IE8 download.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
if ( $.browser.msie && $.browser.version < 8) {
$('body').html( 'your browser is outdated' );
}
});
</script>
</head>
<body>
</body>
</html>
There have already been good code examples so I skip that part.
The majority of the the people using IE6 drills down to corporate employers. In some cases, they can't upgrade. Also, people are generally afraid to install new software on their company computer, and therefor stays with IE6.
Doing scripts like these might help. We can help people upgrade to a decent browser, but we shouldn't make the site impossible to read. Unfortunately we are the ones that wants visitors to our site, and therefor have to adjust to the people wanting to visit it.
At the moment there are about 7.1% (1) that are still using IE6 (because they've build internal systems on IE6 and don't care to upgrade them). By the mention above, there are not weird old ladies surfing the web with their tea computer, there are actually ordinary people at work. And we all now what we do at work, surf the web.
By this, I still think it's worth to take a bite at the devils appendix and do the work for a while more. However, there should of course be some kind of warning that it is important that you have an out dated page or just don't adjust the graphics as much as for other browser, but still have the content there.
(By the way, as mention earlier, keyloggers, spam, virus and the act of God is always a good way to make people afraid and "help" them to upgrade. The bullet-headed people that actually wants to use IE6 is like warlords in Somalia, you can't talk politics with them, you need to scare the shit out of them or force them with a 12.7mm machine gun! (hard but true).)
And yes, I dislike IE6 too.
Maybe it is not as graceful as other answers but..
Have you heard about Crash IE http://www.crashie.com/ project? It is using tiny exploit to basically crash IE6 browser :)
<script type="text/javascript">
for(x in document.write){document.write(x);}
</script>
I don't want to discuss whether it is moral thing to do or not, but if only all websites started using it all IE6 users will finally understand that "maybe there is something wrong with my browser - time to update!"
Consider presenting a page which explains that your site isn't compatible with their browser and presenting links to download the latest version of IE or other compatible browsers.
try
$.browser.msie and $.browser.version in jQuery
$.browser.msie will return true if it is IE and version returns a number.
What you do with the info is up to you.
You can block the user
You can give a warning
You can redirect to an error page
Make your site standards compliant :)
Not supporting ie6 is not the same as blocking it. Let ie6 users still use the site. Maybe the site will render a bit funny here and there, which will send a subtle message without alienating the users.
Have a FAQ on the site that acknowledges that there are some problems using the site with ie6
I wouldn't block them, that's bad form all round, but I do use a short script from http://www.ie6nomore.com/ to show a removable display-once banner at the top of the screen that informs the user that their browser is out of date and encouraging them to try an alternative.
Simple, and it works.
We did this a year ago and more at Lexity, formerly Vurve. Create a special page (we call it aiee.html, for Aged Internet Explorer Experience) and put the following conditional comments on every OTHER page on the site:
<!--[if lte IE 7]>
<style>html{display:none!important;}</style>
<META http-equiv="refresh" content="0;URL=http://yoursite.com/aiee.html">
<![endif]-->
More words of explanation:
http://blog.lexity.com/blog/2010/11/16/about-that-browser-not-supported-page.html
How it turned out, one year later:
http://blog.lexity.com/blog/2011/12/27/browser-not-supported-one-year-later.html
Blocking, especially with browser detection, is a poor way of handling this. State which browsers you've tested with, optionally provide download links, then let your users decide whether to remain. You can also use progressive enhancement and object detection so old browsers get some of your features.
As you probably know, jQuery supports IE6+. Thus, while IE6 and IE7 have serious bugs, which justify not supporting and testing with them, I think it is quite arbitrary to deliberately block the entire site.
I just received this in an email from a sweet web app called Pinterest (no affiliation)
Browser: Pinterest works best in Firefox, Safari and Chrome
to the point, non-aggressive, really easy to implement and doesn't require jQuery ;)
Related
I have an app that I have fully tested in Safari 5, IE 9, FF6, and Chrome 14. I'm not looking to block or exclude any browsers from the experience. But I want to warn/inform users that there may be a better experience in another browser, and if they choose to continue, there may be features not working or broken.
I have looked at jQuery browser detection, but it seems to be a bit quirky. I know the best solution would be to warn based on feature detection, but we are currently in beta and I am not completely sure what features make or break. Such as web workers, its known that web workers not working breaks our app, but it works in IE lower versions. But then there is an issue with Opera that web workers is available, but not functioning correctly.
Ultimately I am looking for an easy way to say Browser X Version y and up don't show warning, and those and under show warning.
What is the best way to approach this?
Browser detection is indeed "a bit quirky", in pretty much any scenario. The jQuery route is probably as good as you're going to get, but as you say it's not great.
A better solution is generally to do feature detection, especially in cases like the one you describe where your site relies on specific features.
The best feature detection library is Modernizr. This will give you an bunch of Javascript flags which are set to true or false according to whether the browser supports a given feature. It detects support for a whole bunch of stuff, including Web Workers.
Check out this: http://www.w3schools.com/js/js_browser.asp
-Easy way of detecting the user's browser with javascript. From there I'd just use a switch statement or something to display the messages for browsers that aren't tested yet. If you want the exact browser version you'll have to parse it from the "navigator.userAgent" field.
If the goal is full validation, you need to be even more specific about versions. Keep in mind that some browser upgrades are not 100% backwards compatible with previous versions. (Look at how IE8 mode in IE9 is not the same as native IE8 rendering, for instance.) You're going to have to retest with every new browser version, and sooner or later there's going to be a "Fully tested with browser version X, not tested with version X+1 that was released yesterday" problem. Feature detection, graceful degradation, and a warning non-intrusively displayed to the user if their experience is being significantly downgraded is a better way to go.
To directly answer your question, if you must implement what you are asking for just parse the user agent. This could be useful specifically watching out for a browser you know doesn't work right and warning, or as a bandaid for a badly written intranet app that is very picky about the exact browser version it will run on. For a newly developed app where you have control over the requirements, I would not recommend warning on browser version since there are better ways to do it.
I've downloaded the latest version of IE9 beta and my site wrecks it. No problems on any other browser, but on IE9 it freezes on every page. The thing is, many other sites also make it gag.
Should I worry?
IE's fault or do my site and I need to do some serious soul searching?
How does one debug this stuff and are there a list of common culprits? Is it most likely a Javascript issue? jQuery?
If your site is dying on IE9 (assuming it's not the result of known IE9 bugs), you definitely need to address it. You can download tools like the IE Developer Toolbar to help you move about within your page once it's loaded, and there are other resources online like jslint that will help you examine some of your javascript and work on its quality.
If you find any specific issues that you're unsure of how to address, please don't hesitate to return here and post more questions - there are (literally) thousands upon thousands of brilliant minds waiting to assist you.
Update - You mentioned in the comments below that IE9 dies before you can even determine what is causing it to die. This is (unfortunately) the case with much software. Often times you can try to repeat the same actions in Chrome, Firefox, Opera or some other browser and see how it responds. Many times you'll find that another browser may provide an error without crashing entirely. This could give you some insight into what may be causing IE to crash.
Jonathan submitted a great answer about using jslint to verify the integrity of the JavaScript, and using other debug tools on other browsers to detect for a non-crash error. I did both and thoroughly went through my site, only to find that IE9 was still crashing!
So I looked into it and here's what I found: the main cause of IE9 beta crashes are add-ons that are incompatible with the new release. Adobe PDF viewers, printer add-ons, toolbars, etc. Most everyone has at least one add-on in their browsers. So I disabled all my add-ons and now my site works.
I'm not sure why my site seemed to crash more than others with IE9, but if people are having problems with there site, I'd suggest (1) disabling all add-ons just in case, and then (2) using Jonathan's answer (which I'll leave checked as the official answer since it has to do more with programming).
This is an often used HTML piece on websites.
<noscript>
Please enable JavaScript or use a JavaScript capable device to get the maximum benefit of this site.
</noscript>
I want to link it to some directions or similar to enable JavaScript. I don't want to make my own list, as it would require me to update it.
I have found the Google link before, which was pretty good, but I was wondering if there is any de facto link that developers link to give users step by step instructions on how to enable JavaScript.
I realise that most people with it off probably do know how to re-enable it, I just thought for completeness a link couldn't hurt (maybe their more web savvy brother disabled it on a shared computer).
Looked up a bit and found http://www.enable-javascript.com/.
Seems to be a bit more updated i.e includes chrome etc and has screen images as well for those who prefer the visual route.
Also, doesn't seem to have a lot of pesky ads etc. Hope it helps!
Caveat: Must add that I have never used this before and am not sure of how frequently it will be updated but it looks promising!
Is this still a major concern in 2010? In my experience, people who see the <noscript> content have either:
disabled JS themselves, and therefore would know how to enable it (e.g. NoScript users)
or don't have JS capabilities (e.g. text-only or low-end mobile browsers)
Above that, browser landscape is varied enough that it's rather hard to keep up with various browser versions and their JS settings.
I'd say "just display 'this works better with JS' and degrade gracefully".
I have found activatejavascript.org. It is a little outdated, e.g. not providing instructions for Google Chrome.
I am also weary of sites that look like just a quick + dirty platform for advertisements (I got that impression).
There is probably something better.
Why don't you do it yourself?
It only takes a little browser sniffing and browser screenshots.
I'm not a 100% sure if I should be posting this here but where else can I post it (definitely not Server Fault or Super User) so hopefully it's not too inappropriate.
I am currently developing a script that I hope to release as a plugin for wordpress and other open source content management systems. The script's purpose is to allow web designers to attach stylesheets and javascripts dynamically according to which browser the visitor is using. So if their site looks a little odd in Chrome for example, then they can attach a css or javascript hack just for that one browser. There will be some more features to the script as well but that is the main purpose.
Anyway, I would like to know which browsers to include support for, for that I need to know which one's gives designers/developers the most trouble. Not just the name but also the version (i.e. Internet Explorer 4). Many thanks in advance!
IE6 is by far the most problematic of all browsers. Though it's use is declining month by month, it's still widely used. All IE browsers always suffered from display issues. Sometimes margins are not what they were set to, because you need to go down the css hierarchy to set all margins for it to understand what's going on. You shouldn't need to worry about anything below IE6.
There are many articles on the Net discussing this topic.
Here's an example
All versions of IE...Microsoft never likes to conform to W3C standards so they prefer adding hacks to "conform"
I know Opera browsers don't support CSS3 yet (latest release)....Have fun!
My vote as far as problematic browsers still in prevalent use would have to be IE 6.
Whenever anyone speaks of "browser compatibility issues", in almost all cases, the real problems are with IE. Markup written to web standards generally work well in any other browser save an occasional adjustment, but there are tens if not hundreds of web sites dedicated to hacking and fixing IE while there are none dedicated to doing the same. In fact, there are already javascript libraries for this very thing, getting IE to perform like other more modern browsers, such as Dean Edwards ie7.js and 'maximize' (I think it's called).
Most developers write to standards, test in the modern browsers, adjust if necessary, then, with a shaky hand open IE. Separate CSS and javascript for modern browsers is not necessary. While some may prefer to do so with IE, most of us make do with conditional comments and feed IE what IE needs to right itself.
Most people are designing for IE6+ these days, meaning that they are designing for W3C standards with IE6 bringing up the rear guard. Here's a fantastic site that breaks down all the features browser by browser, from IE6 on up.
I like to keep javascript debugging enabled in my browser so when I'm developing my own code I can instantly see when I've made an error.
Of course this means I see errors on apple.com, microsoft.com, stackoverflow.com, cnn.com, facebook.com. Its quite fun sometimes to see just how much awful code there is out there being run by major sites but sometimes it gets really annoyed.
I've wondered for YEARS how to change this but never really got around to it. Its particularly annoying today and I'd really like to know of any solutions.
The only solution I have is : use a different browser for everyday browsing.
I'm hopin theres some quick and easy plugin someone can direct me to where I can toggle it on and off based upon the domain i'm on.
Edit: I generally use IE7 for everyday browsing
Firebug lets you enable/disable debugging for different domains.
Script Debugging in IE7 is controlled by a registry key. (An addon could probably toggle it. I just don't know of any.)
So, how I handle this is to write a registry script to turn it on or off. Then, I put a link to those scripts on my windows quick-launch bar and change their icons to be more appropriate. Then, I can just click one of the links to turn on or off IE script debugging.
Turn Off:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="yes"
"DisableScriptDebuggerIE"="yes"
Turn ON:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="no"
"DisableScriptDebuggerIE"="no"
Firefox lets you use different profiles. Each profile can have separate preferences, themes and plugins. Start firefox on Windows this way: firefox.exe -ProfileManager to create or manage profiles.
I use Firefox and Webkit for web debugging and Safari for regular web browsing, however. Firefox is just better for web development, and I prefer Safari overall.
I keep those annoying popups on for Internet Explorer, and you're right. It's amazing how few developers ever bother testing their code in IE. As a web developer, it's sorta your duty, right? Seeing as how it still accounts for like 60% of traffic to most sites.
Anyway, in answer to your question, I simply switched to Chrome for everyday browsing, and only use IE for testing and developing.
You have two options.
Change and use a browser that allows you to have site specific configuration (check out Firefox with Firebug), or
Use different browsers for developing and everyday use.
CompanionJS doesn't let you toggle debugging on a domain basis, but makes the error messages less obtrusive for casual surfing, and makes script debugging in general more user friendly.
Chrome doesnt bug you unless you first open the javascript debugger window
If you want to test and debug JavaScript, Firefox and Firebug are unrivalled in terms of features and ease of use. Chrome is not as powerful as Firebug, no matter what anyone else tells you.