Another Blow To IE 6, This Time From WordPress.Com
Another Blow To IE 6, This Time From WordPress.Com
0 comments
Do You Still Use Internet Explorer 6?
0 comments
Our recent post on WordPress 3.2′s plans generated some interesting discussion, with the bulk of it centered around the discontinuation of support for Internet Explorer 6 in the Dashboard.
Internet Explorer 6, now almost ten years old, was once a power house in its own right. Now, the browser is drowning under its poor support for web standards, a pool of modern web technologies that it can never support, and a flood of hacks that many sites need to employ just to provide a decent browsing experience for IE 6 users. IE 6 was superseded by Internet Explorer 7 in 2006, followed by IE 8 in 2009, and recently IE 9 last week. Of course, alternatives to Internet Explorer, like Firefox, have been around much longer.
According to Microsoft’s own Internet Explorer 6 Countdown, 12% of the world still uses the ten-year old browser. The highest concentration of IE 6 users is in China, with 34.5% of the country still using it, but usage is down to 2.9% in the USA and 3.5% in the UK.
There certainly could be an economic issue or general inability to upgrade keeping IE 6 alive, as the browser only requires Windows 98 to run, while IE 7 requires Windows XP. Firefox seems to have finally pulled the old releases that were still compatible with Windows 98, but Opera supported Windows 98 all the way up to 10.63 (released October 2010), and potential users can still download it here.
With such a powerful and modern alternative to IE 6 available, even to Windows 98 users, the question remains as to why there are so many users still on such an outdated browser.
If you’re a fan of IE 6, please leave a comment and let us know why. If you work for a company that forces you to use IE 6, march on down to the IT department and demand to know why you’re forced to use such an archaic browser.
IE6 PNG Fixes – SuperSleight & Unit PNG Fix
Comments Off
A few weeks ago a new javascript, Unit PNG Fix, was released by Unit Interactive for an IE6 and below PNG support fix. Up until now I have been using SuperSleight with no issues. So I decided to do a little research this morning to find out what made Unit’s Interactive PNG fix better than good old SuperSleight.
At first glance Unit PNG Fix has the benefit of being smaller (1k .js file, 1 transparent .gif). SuperSleight has a total of 3 files (two .js files and (one 3k, the other 2k, and the transparent .gif), but you can choose to use either one of the SuperSleight .js files – so if you prefer to use the mini version of SuperSleight it would just be 2k.
Both are called the same way in the
Unit Interactive lists the benefits of it’s script as:
- Very compact javascript: Under 1kb!
- Fixes some interactivity problems caused by IE’s filter attribute.
- Works on img objects and background-image attributes.
- Runs automatically. You don’t have to define classes or call functions.
- Allows for auto width and auto height elements.
- Super simple to deploy.
24 ways introduced SuperSleight as having the following qualities:
- Works with both inline and background images, replacing the need for both sleight and bgsleight
- Will automatically apply
position: relativeto links and form fields if they don’t already havepositionset. (Can be disabled.) - Can be run on the entire document, or just a selected part where you know the PNGs are. This is better for performance.
- Detects background images set to
no-repeatand sets thescaleModetocroprather thanscale. - Can be re-applied by any other JavaScript in the page – useful if new content has been loaded by an Ajax request.
After creating a few png transparent images and testing both methods here are my pros and cons of each:
SuperSleight
PROS:
- No need to edit .js files with image link when both are placed in the same directory (ie: root).
- Plug and play – just upload the supersleight-min.js and x.gif to your root directory, plug in the link to the file in an IE conditional and it works.
CONS:
- Get IE warning about “blocked content”. Need to click top warning popup to activate supersleight.
- Comes packed with two .js files: supersleight.js and supersleight-min.js. Could be confusing to a lay-person as to which file to use, and if both are needed.
- Loads slightly slow. On pages with multiple PNGs in IE6 you see a “gray flash” before the PNG fix kicks in.
Unit PNG Fix
PROS:
- Smaller size. But only by 1k.
- No popup warning that their is active content.
- Seems to load multiple images faster than superselight. A page with about 20+ transparent pngs loaded almost instantly without the “gray flash” commonly seen before the js kicks in for IE6.
CONS:
- Comes with the path to the clear.gif image linked in the /images folder.
So overall, I have come to the conclusion that it seems Unit Interactive’s Unit PNG Fix is indeed a better alternative to good old SuperSleight. Let’s just keep hoping that user will keep updating their IE6′s until there is virtually no one using IE6.
Using IE Conditionals For Cross Browser Compatibility
Comments Off
What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.
IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)
For example, say you have some margin adjustments to make that effect only IE6, in the head of your HMTL document you could put this:
Or, say you need it to affect IE6 and all previous versions:
The above code tells the browser to apply these styles to IE6 and any version LESS THAN it.
You can also use the and/or syntax (& / |) if you need the styles just applied to certain versions:
You can also use the & symbol to combine styles for one browser ex: [if (IE 6) & (IE 5)].
If you have a substantial amount of styles (or aren’t using a templating system where the header is isolated) I recommend using the conditional to link to a seperate IE stylesheet:
See more examples and the complete variable list over at Microsoft’s Developer Network.
