Skip links
Main content

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.

« Back

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

1 2 Last page
Unknown
Placed on: 03-23-2009 13:14
@font-face (custom fonts) is supported in FF 3.1 (or better 3.5), tested with FF 3.5b4pre
Edited
Peter has edited this message on: 03-23-2009 13:21
Web2Guy
Placed on: 03-23-2009 14:07
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
@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
IE? is anyone still using that? Wink

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
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
Peter Slagter
User icon
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! Smile
Yvan256
Placed on: 05-03-2009 16:56
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
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
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
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
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
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
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
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
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
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
your bed css text shadow not supportin IE8&7
Zoltan Hawryluk
Placed on: 08-23-2010 00:21
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.
Mike Marcus
Placed on: 10-27-2010 20:33
When I developed for internal web sites (IE x) was the browser we targeted (company policy).

Now my applications are for the WWW and CSS3 has so much to offer. IE 9 will support more of CSS3 than previous renditions. Still I wish MS would get on target.

My pages are now tested against four browsers (Safari for MAC users) and if IE8 will not show as well (I just code around it best as I can).

I am liking Chrome more and more although Firefox is now my primary browser.

Thanks for the article!
Markus
Placed on: 12-07-2010 10:13
IE is dead. Microsoft is just not willing to admit it yet.
Thiruvelan
Placed on: 12-21-2010 06:48
I am in modification of my site http://healthy-ojas.com and just now start thinking of rounded corners and shadow effect for my blocks.

Your article is very much useful for me to achieve rounded corners. Is there any way to work this technique on internet explorer 6, 7 & 8. If you do such an article in support of IE it will be very much helpful, because most of the people searching the web are from IE.
SEO Hyderabad
Placed on: 04-18-2011 21:05
even the text shadows and google fonts are not working poperly in IE8 plz check this site http://www.mpsantoshkumar.info
Discount True Religion jeans
Placed on: 08-10-2011 08:40
We are wholesaling the fashion and luxury jeans . The jeans produced in all fits from relaxed to stretch and a range of rinses and finishes. The style is about cutting-edge, urban living with an emphasis on youthfulness, creativity and urban nightlife. Discount True Religion jeans They are all in good design and quality.
web designers in hyderabad cost of designing
Placed on: 09-01-2011 20:44
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.

www.freelancerhyderabad.com
1 2 Last page

Log in to comment on news articles.