Careful Web

Three CSS3 features which works right in all major browsers (Mozilla, Safari and Opera). Yes, IE plays outside with finalizing of CSS2 support.

CSS3 Opacity

Opacity effect is very widely used in graphics and of course in web-design too. Today we can use it not only inside our graphic editor, but with plain CSS feature { opacity: 0.5 }. IE users can be supported with { filter: alpha(opacity=50) } property. You can see lots of demo examples here:

• Opacity for image example;
• Opacity and RGBA quick overview;
• Lots of examples on Mandarin Design page: Opacity and transparency.

Box-sizing

This feature really matters for fast coding of block design. It really simple to use: just specify float, width in percent and box-sizing property. Like this (Mozilla, Opera and Safari uses different declaration):

div.span { width: 50%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Also see live example at CSS3.info box-sizing page.

Overflow-x & overflow-y

Overflow property is improved in CSS3 specification. It allows to specify X and Y axis overflow independently with visible, hidden, auto and scroll options. See examples and tests here.

Text-shadow (bonus)

This one is really fancy and well-know effect. Firefox supporting it only in upcoming 3.1 release. But Opera and Safari already taking care on it. See demo page with reference image on CSS3.info: text-shadow.

A quick thought about upcoming HTML5 standard.

The main advantage of HTML5 is lots of modern web features like:

• embedding multimedia content;
• 2D drawing with canvas;
• new DOM methods;
• Web Forms.

But with XHTML we still have XML comparability, that brings lots of libs and apps which can work with well formed XML/XHTML (aka parsers). So HTML5 is missing that.

HTML5 parsing will come soon after specification release, so we can start to use it believing in future.