Industry Leader in Digital Business

Howto: Using CSS3 in a CSS2 world (part 1: the theory)

You might still remember the messy, colorful and static pages that were common in the nineties when the Internet became available for the majority of the public. The styling of these pages was mostly (if not always) done through HTML-tags and attributes with limited capabilities. With the introduction of CSS (level 1) and CSS (level 2.1) in 2009 it became easy to separate complex styles and code from each other, which enabled developers to create richer designs fitting the specific needs for the website developed. Although CSS (level 3) is still under development, some aspects of this new version of the markup language are already being used on many websites using workaround and images. Examples can be found on many Web 2.0 websites in the form of rounded corners, box-shadows and opacity. In two blogs, I will describe how you can use the new features of CSS (level 3) in such a way that the website will still be viewable in all A-grade browsers (though probably less fancy in non-supporting browsers). Please note that I only discuss the most popular CSS (level 3) features, as it is near impossible to discuss all the changes and additions made in one blog. In my blog next week I will put the theory from this blog into practice to show you what CSS (level 3) can do.

Opacity (all A-grade browsers)

Together with rounded corners, opacity is probably the most wanted features in browsers. As a matter of fact, most browsers do already support opacity for several years, but do so in a different way. For example, you must specify the opacity for Internet Explorer separately from the other browsers in your CSS in older versions (e.g. version 7 and lower):

{code}/* Image with opacity of 50% */
img {
opacity: 0.5;
filter:alpha(opacity=’50’);
}{/code}

While the code opacity: 0.5; is the standard, Internet Explorer used DirectX filters to enable opacity resulting in the addition filter:alpha(opacity='50');. In Internet Explorer 8 the opacity code was changed and the filter-declaration became obsolete in favor of the mentioned standard. However, to support older browsers you must still add this declaration to your CSS sheets. When using JavaScript to change the opacity of objects, you better use reliable libraries like MooTools and ProtoType to change the opacity without having to worry about browser compatibility. In addition, you must be aware that opacity in Internet Explorer 8 (and older) does still lack support for PNG images using opacity. In one of my websites I tried to fade a PNG image with shadows by reducing the opacity every 100ms, but the opaque parts in the image became black in Internet Explorer (so do not attempt to fade a PNG image with opaque parts). Hopefully future patches and versions will take care of this problem.

Rounded corners (FF, Chrome, Opera & Safari)

Rounded corners have been introduced in many websites using background images and other workarounds. CSS (level 3) gives developers the tools to use rounded corners without having to worry about these images or the differences between different browsers (the only difference is probably that it will not work at all in Internet Explorer 8 and lower, the corners will still be at a 90 degrees angle). To make things a bit more complicated, you must specify multiple rules lines to use rounded corners within your website. Please note that all four corners are modified in the example below (changing separate corners in also possible, but the implementation for this is not correct in all browsers).

{code}/* A DIV-container with four rounded corners */
div.myBox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}{/code}

As you can see, you need four lines to force rounded corners in the majority of the browsers. The first line is for browsers using WebKit (e.g. Safari), the second for Mozilla-based browsers (e.g. FireFox) and the third will be the standard in the near future. Also note that not all browsers follow the recommendations by the W3C exactly (though the simple example above works the same in all supporting browsers) when specifying more details.

Box-shadow (FF, Chrome, Opera & Safari)

By using shadows, you can make your pages look stylish and 3D (having depth). With CSS (level 3) you can specify a shadow for many elements of your website, but you will probably use this feature most on DIV-containers, images and tables. As with the rounded corners, you need three declarations in your stylesheet to drop a shadow on an element:

{code}/* A DIV-container with a grey shadow */
div.myBox {
-webkit-box-shadow: 4px 4px 3px #808080;
-moz-box-shadow: 4px 4px 3px #808080;
box-shadow: 4px 4px 3px #808080;
}{/code}

As you can see all three declarations work the same and require four attributes to work. The attributes are respectively the horizontal offset of the shadow, the vertical offset of the shadow, the blur radius (the higher the number, the more blurry the shadow will be) and the color of the shadow. A nice detail is that the specification on the W3C website speaks of ‘multiple shadows’ which would enable even more customization. It is however doubtful whether the multiple shadows will stay a part of the specification and become implemented (currently, there is not support for this as far as I know).

Text-shadow (FF, Chrome, Opera & Safari)

Shadows on text were actually a specification already proposed in CSS (level 2), but was never supported well in any browser except for Safari. Probably this is one of the reason that the standard declaration for this feature is already present in most browsers, thus enabling developers to use text-shadows with only one declaration:

{code}/* A H1-title with a blue shadow */
H1 {
text-shadow: 4px 4px 3px #6374ABC;
}{/code}

The four attributes for this declaration are the same as the attributes for box-shadow and can also be negative for the offsets. In contradiction with box-shadow, text-shadow does support multiple shadows in Opera and FireFox at the moment of writing. The example on this page shows what cool effects your can create with this feature, but as noted this will not work in other browsers.

In short, you must never depend completely on the new features as some browsers (particularly Internet Explorer) are lacking support for this. If the majority of your website visitors are still using Internet Explorer or other (outdated) browsers that do not support this features, than you might want to use the various workaround for shadows and rounded corners instead. On the other hand, using the new CSS features did push the developers of Internet Explorer to finally implement the CSS (level 3) recommendations into their new Internet Explorer 9. Hopefully the Internet Explorer fans will embrace this browser in a timely fashion so all features will become available for widespread usage: they might be surprised by the power of CSS (level 3).

Related Posts