Create usable and accessible application rather than asking users to update the user agent
Sitting here at my home and googling the net for IE6 related articles on a charismas vacation. Crazy right? I could only read 'kill IE6' in almost all the links that google fetched. I could hear this cry is more from the Designers & Developers who initially failed to test the design in IE6 and later couldn’t handle the monster. I may get more critics if I say don’t kill IE6. It’s nearly impossible to kill it at least for 10 more years to come.
If you are building a web application that would be consumed by corporate, believe it guys you cannot get way. There are still large number of business applications out there that rely on IE5.5 & IE6 and IE7 or higher version would however break them. Some enterprises have made large investments in an infrastructure that is only compatible with IE. So there is no way out.
I thought I must share my experience so I started writing. May be somebody out there would be benefited.
Before you start off, don’t overlook the fact that IE was the best browser to support CSS earlier. There are few styling issues still exist that you need to be aware off before you start your design. If you can handle these in the initial stage you can merrily complete your design.
- Width in IE6 =width + padding + margin (IE6 would calculate the width of an element plus right and left Margin and Padding.)
- Min width/ Min Height is totally ignored
- Hover States – IE6 only support hover on <a> tag and not just about anything. (So CSS based dropdown menus would not be a good choice here. You would need to write a JavaScript for the same if at all you want a dropdown menu )
- Alpha transparency png format do not support IE6. But you can always use solid png image format (without transparency) not an issue.
- Overlay for dropdown menu and popup window (Listbox/ Select element z-index)
These are few issues that would need your attention. You can avoid them in your design but make sure you don’t ignore the testing from day one.
Solutions
You can have multiple style sheets depending on the browsers or platform. This would give you complete control over the styling issues
Browser specific style sheet would be better option rather than trying to hacks the browser, as it would be easy for maintenance.
Add a main style sheet above all for the modern browser and later keep adding on as per your requirement. The main_stylesheet.css should have all the style for a default browser version that you support.
Hide Code <link rel="stylesheet" type="text/css" href=" main_stylesheet.css" / > <!-- This code sets up browser specific CSS ->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href=" earlier-ie.css" />
<![endif]-->
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
<!-- This code sets up platform specific CSS ->
<script language = "JavaScript">
if (navigator.appVersion.toLowerCase().indexOf("win")!=-1)
{
<!-- This sets up the Windows-specific CSS code -->
document.writeln("<link REL=stylesheet HREF=\"stylesheet_win.css\">")
}
else {
<!-- This sets up the Mac-specific CSS code -->
document.writeln("<link REL=stylesheet HREF=\"stylesheet_mac.css\">")
}
</script>
If supporting all major browser is going to hinder your delivery. You can simple divert the user to a specific page stating that 'Application right now does not support this browser' and later you can work on the issues and conditionally permit the user.
Hide Code <script language="javascript">
if (navigator.appName.indexOf "Microsoft")!=-1){
browser = "IE";
}
else { // unknown browser
window.location = "Non_IE.html";
}
tv = navigator.appVersion
browserver = tv.substring(0,tv.indexOf "."));
if (browserver == 5) browserver = 6
bv=tv.indexOf("MSIE")
if ( bv!= -1) {browserver = tv.substring(bv+5,bv+6)}
browsersubver = tv.substring(tv.indexOf(".")+1,tv.indexOf("(")-1);
browsersubver = parseInt(browsersubver);
if (browsersubver < 10){browsersubver = "0" + browsersubver}
// forward based on browser and version.
// update the code to your requirements, where to forward.
if (browserver >= 6) {
if (browser=="IE")
{
window.location = "default.html";
}
else {
window.location = " Non_IE.html ";
}
}
else {
window.location = " Non_IE.html ";
}
</script>
Recently I read an article about Google Chrome Injects Itself into Internet Explorer with Chrome Frame. This allows Chrome’s rendering engine to run within MS IE 6, 7 & 8. User can download and switch to Chrome rendering and JavaScript engine with no noticeable changes to the user interface. http://www.readwriteweb.com/archives
It’s good news. This add-on for Internet Explorer is not the solution, because the enterprises may not want the user to download this add-on for number of reason.
But if you are developing a website you can probably add a single line of code to do the magic.
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
When Google Chrome Frame detects this tag it switches automatically to using Google Chrome's rendering engine which will allow them to seamlessly enjoy modern web apps at blazing speeds, through the familiar interface of the version of IE that they are currently using.
For those who were not aware of the png issue in IE6 or still want to use png with transparency background (which is a bad idea) can run a JavaScript function client side to apply a Microsoft filter and get the transparency right.
If you are using jquery you can use this function to apply the filter. You would need to add 'clear.gif' image in the Images folder.
Hide Code function PNGsFixIE6() {
if (/msieMSIE 6/.test(navigator.userAgent)) {
$('img').each(function() {
if (this.src.indexOf('.png') > 0) {
var source = this.src;
var w = elementWidth(this);
var h = elementHeight(this);
if (this.src.indexOf('/Images/') > -1) {
source = source.substring(0, this.src.indexOf('Images/')) + 'Images/clear.gif';
}
else if (this.src.indexOf('/images/') > -1) {
source = source.substring(0, this.src.indexOf('images/')) + 'Images/clear.gif';
}
this.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + this.src + '", sizingMethod="scale")';
this.src = source;
this.width = w;
this.height = h;
}
});
}
}
Also remember to call this function each time your page loads or if the application is build in ajax it is important to call the function for every request/ instance.
Overlay issue in IE6.
Most of the developers struggle to get the div layer above the Listbox/ Select in IE6. IF you are not aware of the fact that it is impossible to get it just by z-index you would simply kill your time. Two approach to this solution.
Hide Code - Write a JavaScript function to find all the Listbox/Select in the page and hide it, when the popup or menu is visible and switch it back when it is hidden.
Example:
function showPopup() {
if ($('.popupClass').css('display') == 'none') {
$('.popupClass').show();
hideDropdowns();
}
else {
$('.popupClass').hide();
showDropdowns();
}
}
function hidePopup() {
if ($('.popupClass').css('display') == 'block') {
$('.popupClass').hide();
showDropdowns();
} else {
$('.popupClass').show();
hideDropdowns();
}
}
function hideDropdowns() {
if (/msieMSIE 6/.test(navigator.userAgent)) // Only for IE6
{
$('select').css('visibility', 'hidden');
}
}
function showDropdowns() {
if (/msieMSIE 6/.test(navigator.userAgent)) //Only for IE6
{
$('select').css('visibility', 'visible');
}
}
- Mask it with a iframe. (IE6 specific)
You would need to write a function to get a iframe just below the menu/ popup this would be tricky if the menu or popup height and width are not fixed.
Don’t worry jquery has made it easy for the developers. Download the plug-in from 'http://plugins.jquery.com' and quickly fix it.
Usage assuming that you already know jquery
$('.popupClass').bgIframe();
jquery plug-in would auto fit your menu/ popup's
Before I conclude I would like to say when IE6 is around and users using it is on a high scale, we cannot or shouldn’t ignore it. Live the reality. Look at market share.http://marketshare.hitslink.com/
Somewhere down the line some designers and developers forget the fact that it’s all about users and user experience. We must create usable and accessible application rather than asking users to change/ update the user agent. Not everyone has control over users or internet so remember to design for the masses.
