Ga direct naar


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"

No posts found

Log in to comment on news articles.

Procurios zoekt PHP webdevelopers. Werk aan het Procurios Webplatform en klantprojecten! Zie http://www.slimmerwerkenbijprocurios.nl/.


Hello!

We are employees at Procurios, a full-service webdevelopment company located in the Netherlands. We are experts at building portals, websites, intranets and extranets, based on an in-house developed framework. You can find out more about Procurios and our products, might you be interested.

This weblog is built and maintained by us. We love to share our ideas, thoughts and interests with you through our weblog. If you want to contact us, please feel free to use the contact form!


Showcase

  • Klantcase: Bestseller
  • Klantcase: de ChristenUnie
  • Klantcase: Evangelische Omroep
  • Klantcase: de Keurslager
  • Klantcase: New York Pizza
  • Klantcase: Verhage

Snelkoppelingen