Testing Internet Explorer 8: CSS3 for Web Design

Monday 23 March 2009 10:55 CSS3 introduces many exciting new features for webdesigners and webdevelopers. These features can help you create some common webdesign techniques like rounded corners, opacity and dropshadows just by typing out some CSS rules. Let's find out whether Microsofts newly born baby, Internet Explorer 8, supports these CSS3 features or not.

By Peter Slagter

Internet Explorer 8 Final released

It was thursday the 19th of March when Microsoft released Internet Explorer 8. Microsoft said the following about IE8:

Get where you want to go faster with real world performance.
Use more of the web, easier.
Stay safer from real world threats.
Build on real world interoperability, standards, and compatibility.

Nice. A safe, fast and up-to-date browser, released by Microsoft. But how modern is it? Does it support any of the new features CSS3 introduces?

An introduction to CSS3

CSS3 is the new CSS-standard, which is set to take over from CSS2.1. CSS3 introduces a huge variety of ways to create flexible and attractive designs. Even though the CSS3 specification is still in development, there are some very exciting new features for webdesigners to be implemented in the specifications. These features can help you create some common Web design techniques like rounded corners, transparent boxes and dropshadows just by typing out some CSS rules.

I'm aware of the fact that in reality we can't use any of these CSS rules yet, because not every browser fully supports them. Some of the CSS3 features are already implemented in modern browsers like Firefox 3, Safari 3, Google Chrome 1 and Opera 9.6. Does Internet Explorer 8 join this list of modern browsers, supporting the new features CSS3 is going to introduce?

Testing the CSS3 implementation

Transparency using RGBA and opacity

The use of PNG files with alpha-transparency is a modern and common design feature. CSS3 enables you to directly specify an alpha-value or opacity setting in your CSS. A simple test case in which we test the support of the opacity and rgba properties:

This is how it looks in compatible browsers.
Full support in: Firefox 3, Safari 3, Chrome 1.
Partial support in: Firefox 2, Opera 9.6 (no support for rgba).
No support in: Internet Explorer 8.

Rounded corners

Another commonly used webdesign feature is rounded corners, which are usually made by placing background-images or using empty elements. If you need some examples of current techniques, check out this list of 25 rounded corner techniques. CSS3 allows rounded corners to be set in your CSS files, which would eliminate every of the existing techniques. Let's see if your browser supports the border-radius property:

This is how it looks in compatible browsers.
Full support in: Firefox 2 & 3, Safari 3, Chrome 1.
No support in: Internet Explorer 8, Opera 9.6.

Border Image

A new border feature CSS3 introduces, is the border-image property. With this feature you can set an image to be used as a border instead of the normal border of an element. This feature is split up into border-edge-images and border-corner-images. If your browser supports this CSS3 feature, a colorfull border should be displayed in the following test case:

This is how it looks in compatible browsers.
Full support in: Firefox 3.1 (upcoming), Safari 3, Chrome 1.
No support in: Internet Explorer 8, Opera 9.6.

Box Shadow

CSS3 has a nice new feature called box-shadow, to create dropshadows with CSS instead of using images. The property takes four values: three lenghts (the shadow offsets & shadow blur) and the color of the shadow:

This is how it looks in compatible browsers.
Full support in: Firefox 3.1 (upcoming), Safari 3, Chrome 1.
No support in: Internet Explorer 8, Opera 9.6.

Text Shadow

Even though i'm not a fan of heavy usage of dropshadows, CSS3 also introduces a text-shadow feature. Who needs Photoshop? ;) The property text-shadow takes the same four values as box-shadow:

This is how it looks in compatible browsers.
Full support in: Firefox 3.1 (upcoming), Safari 3, Opera 9.6.
No support in: Internet Explorer 8, Chrome 1.

@font-face (custom fonts)

One of the coolest new features of CSS3, is enabling the developer to use his/her own fonts with the Web Fonts module. The @font-face rule provides the bridge between an author's font specification and the font data, which is the data needed to format text and to render the abstract glyphs to which the characters map - the actual scalable outlines or bitmaps. Fonts are referenced by style sheet properties. The @font-face rule takes two properties: the definition of the font-family and the source (url) of the font:

This is how it looks in compatible browsers.
Full support in: Safari 3, Opera 10 (upcoming), Firefox 3.1 (upcoming).
No support in: Firefox 3.0, Internet Explorer 8, Chrome 1.

HSL & HSLA Colors

CSS3 adds numerical hue-saturation-lightness (HSL) colors as a complement to numerical RGB colors. According to the W3C, the RGB color model has two limitations:

RGB is hardware-oriented: it reflects the use of CRTs.
RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.

HSL is far more intuitive to use. You can guess the colors you want to use, and if needed, tweak them a little. Besides, you can easily create a set of matching colors by setting the hue to a constant and varying the lightness and saturation. The A in "HSLA" stands for alpha, and allows you to add an alpha-value (as in rgba). If your browser supports HSLA colors, you should see three red blocks, each with a different alpha setting:

This is how it looks in compatible browsers.
Full support in: Safari 3, Firefox 3, Opera 9.6, Chrome 1.
No support in: Internet Explorer 8.

Multiple Backgrounds

Another very cool feature CSS3 Background & Borders Module introduces is the ability to add multiple background images to one box. The 'background' property may have multiple values, separated with comma's:

This is how it looks in compatible browsers.
Full support in: Safari 3, Chrome 1.
No support in: Firefox 3, Opera 9.6, Internet Explorer 8.

CSS3 selector test

From w3.org:

In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.

CSS3 also introduces an enhanced selector-model, which we can test easily using the CSS3 selector test provided by CSS3.info. I've saved the testresult of Internet Explorer 8 (if your browser has scaled the image down: click to zoom in):

Conclusion

Based on the test cases in this article, we can conclude the following:

Internet Explorer 8 supports none of the exciting new features CSS3 introduces to webdesigners and front-end developers.
Internet Explorer 8 only supports 22 of the 43 available CSS3 selectors.

Comparing the CSS3 implementations of IE8 to its modern competitors, we'll sadly notice that IE8 comes last across the finish line. Microsoft did a huge step forward with the release of Internet Explorer 8 where it comes to support of CSS2.1 and rendering speed, but it's still far behind it's competitors.

Thumbs up to Safari, which supports every tested CSS3 features.

Finally

Did you spot a mistake? Please send your feedback and you'll be rewarded with your nickname next to the corrected phrase ;). Feel free to comment or use the contact form on the homepage.

Tags

Reactions on "Testing Internet Explorer 8: CSS3 for Web Design"


Unknown	Placed on: 03-23-2009 13:14	Quote
	@font-face (custom fonts) is supported in FF 3.1 (or better 3.5), tested with FF 3.5b4pre Edited Pjottr has edited this message on: 03-23-2009 13:21
Web2Guy	Placed on: 03-23-2009 14:07	Quote
	CSS3 wasn't a target for the 8.0 build of IE. 100% CSS2.1 was. If you'd looked into it over the past year of public beta testing, and read the public development blog, you would already be aware of that.
yoyo ma	Placed on: 03-23-2009 19:27	Quote
	@web2Guy- They targeted CSS2.1 but also should have added in support for these features of CSS3 or at least some of them. IE8 could have been an awesome browser but will now be obsolete in a matter of months. Just like IE7 and of course IE6. MS needs to move away from the browser war and focus on making their OS better. MS is not as nimble as Mozilla or even Apple for that matter. Unless we see a new rev. in the next 3 to 6 months IE8 will be just like IE6 and plague us for years to come.
combatwombat	Placed on: 03-31-2009 10:13	Quote
	IE? is anyone still using that? Seriously, when are we going to be able to create great, standards-compliant websites and applications without having to factor in the world's biggest malware vector?
Josh	Placed on: 04-30-2009 20:47	Quote
	I'm using the bleeding edge (and surprisingly stable) Chrome build, and it supports everything on this page and all selectors.
Peter	Placed on: 05-01-2009 23:05	Quote
Peter Slagter Fronteer!	Quote Josh wrote: I'm using the bleeding edge (and surprisingly stable) Chrome build, and it supports everything on this page and all selectors. Thanks for your comment, Josh! I didn't test all browsers & nightlies, but I'm sure the next Safari, Opera, Chrome and Firefox release will include support to nearly all of the above CSS3 features. Very nice additions, thats for sure!
Yvan256	Placed on: 05-03-2009 16:56	Quote
	Border Image is not rendering correctly in Safari 4 Public Beta (5528.16). I see the top and bottom borders, the four corners, but no color border on the left or right.
Nicky Hajal	Placed on: 05-16-2009 21:58	Quote
	Actually, this is perfect. In the past, css problems with IE caused functional problems that could not be ignored; it felt important to spend time getting things working in IE. Aside from the selectors, most of the CSS3 updates will be a help mainly cosmetically. I am quite satisfied not offering sexy rounded corners and slick dropshadows to IE users. Functionally, my sites will work; cosmetically, they will be a slight downgrade. That seems like a fair exchange for someone who wants to use an outdated browser that disrespects accepted standards.
Frymaster	Placed on: 06-04-2009 12:50	Quote
	Nicky: I don't know how you can call css3 an "accepted standard". Even css2.1 isn't technically finalised (though it's a candidate reccomendation) I agree IE's adoption of new features is worefully slow, but IE8 _does_ support the standards it says it does.
Aaron McMahon	Placed on: 07-01-2009 06:46	Quote
	I'm a web developer. Although IE8 doesn't support CSS3 well (if at all), I'm at the point where I don't really care. If IE wants to stay stuck in the 90's, fine. I'm going to use all the CSS3 eye-candy where it's appropriate. If I want to use a sweet dropshadow on a rounded-border DIV, I'll do it. Firefox, Opera, Chrome and Safari will show it just fine. IE won't and probably never will. If every web developer adopts this attitude, users and IT departments will catch on and realize they're using an aging and archaic browser, like people who refuse to use a GUI and still swear by command-line interfaces as their primary computer interface. The best part about most of the eye-candy in CSS3 is that it downgrades just fine. IE8 won't display dropshadows, border background images, rounded corners, etc. But that's not mission-critical... it's just eye candy. But users LOVE eye candy. When they look over someone's shoulder and see that person using the SAME website they always use but it looks BETTER, they'll start to catch on that IE is a piece of crap. I hope more eyecandy comes out in CSS3 and in future versions. This is the only thing that will convince users to ditch IE and move to a modern browser that supports modern standards.
McPhong	Placed on: 08-26-2009 10:53	Quote
	CSS 3 may be not accepted standart and technically finalised, but when you have all the major browsers supporting it and only IE8 that doesn't... it is a little bit disappointing, isn't it. It has always been like that, IE is always one step behind, and the most used browser at the same time. It just pull the strings of the Web Standards, slowing down the web stuff, that everybody wants to see active. It's just.... not fair
TheUnderdog	Placed on: 09-13-2009 14:24	Quote
	Users feel as well what the "roadmaps" regarding CSS3 and other important "new" technologies of "the one" and "the others" imply: fat and smart companies will divide the market into users of fusty and smart GUI-flavors - anyone knows, this is just like in the real life. Vote by downloading your favorite browsers and ignore IEx - it is everybody's own job to react and not to wait for a big hero. This is not unfair - this is life!
Erik Jonsson	Placed on: 10-22-2009 17:32	Quote
	No support in: Internet Explorer 8, No support in: Internet Explorer 8, No support in: Internet Explorer 8, No support in: Internet Explorer 8 ..... And people complaining about websites doesn't work. Seriously.. Is this really the majority still use this, how should i say it.. "CRAP"? Microsoft need to sit down and make next one full CSS3 compatible, stop saying it is "awesome" or don't automaticly install IE with windows. And finaly: Is this what we get from the bigest company in the world. just want to laugh to death.
Pooky	Placed on: 11-24-2009 22:18	Quote
	Unfortunately, if you want to have more visitors we have to adjust the page to work on all browsers or disable the opening pages in IE (which is not so smart). If you look at Google Analytics, you will notice an increase using Firefox Mozilla. In my case, for the month of November 2009 is IE 48.18% / 38.61% Mozilla, while in November 2008 was IE 59.51% / Mozilla 20.07%.
oszillo	Placed on: 12-26-2009 20:31	Quote
	cool simple list, not complete but helpfully. i'm developing on big socialnetworks, so the biggest count of time goes into support of old browsers and so on. there is a reason why chrome and safari are in every kind of code up to date. they where build by companys who know about the chance in web3.0. safari with itunes-store and iphone is breaking the walls between consumer-clients. and google does the most cost of developing spending in things who they can do better on all platforms. why so much support from google for the html5-canvas model? and why a ie7.js supportet by google does kill the bugs for such browsers? right.. developing is much quicker in the web then the last years. css3 is not made by w3c, they standardize! they do not so much develop like all the webdevelopers at all do. xml is killing all the old formats from ms office. its open. open like open source. it takes years for MS to include a well done updateservice. firefox, opera and safari made version changes in just some weeks.. IE takes years for. why? nobody is believing in MS but everyone does know, without all the ie users it would not bring enouth money. so time is killing bad ideas. lets hope it does not need so much time .. trident via ie8 try to stop the machine http://www.golem.de/0911/71304.html
CYB34	Placed on: 07-11-2010 14:11	Quote
	Microsoft should let that childish ego aside and start updating IE. Wait... I mean hotfix it!
Banti mathur	Placed on: 07-23-2010 09:08	Quote
	your bed css text shadow not supportin IE8&7
Zoltan Hawryluk	Placed on: 08-23-2010 00:21	Quote
	Good article. One thing to note: IE does support embedded fonts (it has since version 4). Unfortunately, it only accepts fonts in EOT format. When IE4 first came out, they had a horrid tool called WEFT that would convert the fonts, but it doesn't work on vista onwards. However, there are now many tools to do this quickly: take a look at http://www.useragentman..../20/font-face-in-depth/ for many tips on how to do this.