Are you up to date on CSS2.1?

CSS2.1 is a working draft with several significant changes.

[papabaer]

I often note webmasters referencing the W3 CSS2 specification, but since late last year, CSS2.1 [w3.org] has been available as a working draft. There are several significant changes from the CSS2 specifications.

The question is? Are you leading a sheltered life? Or are you up to date on the CSS specs? CSS3 is down the road a bit, so for now CSS2.1 should be your primary reference source.

CSS2.1 - Appendix C. Changes [w3.org]

- homework for all!
papabaer

[BlobFisk]

Nice link papbaer - funnily enough I was just looking at some of the CSS3 specs today, and when I looked at the CSS2.1 document I realised that there were a few rules there that I wasn't aware of! Running before I can walk!

Do you have any reliable information on browser support? I know that Safari and Opera 7 say that they are CSS2.1 complaint.

[papabaer]

With regards to popular modern browsers, IE will be "low-man on the totem pole" for quite some time to come (maybe forever!)--so IE testing should suffice as far as limitations go.

CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented. But most of all CSS 2.1 represents a "snapshot" of CSS usage: it consists of all CSS features that were implemented interoperably at the date of publication.

@font-face is gone as well.

The W3 is dropping support for "orphaned" styles, those with little to no implementation in user agents.

Hold overs from CSS2 that should be of concern include the Float property. Multiple, stacked, opposing floats in particular. Opera 7 and IE5.5/6 will allow "ordered opposing floats" while Mozilla will not. Interesting to note, Opera 6 aligned with Mozilla in this regard while Opera 7's behavior is quite different.

The following will "cluster" or retain grouping, of floated elements (IE/Opera 7)

<div style="float: left; clear:left;"></div>
<div style="float: left; clear:left;"></div>
<div style="float: left; clear:left;"></div>
<div style="float: left; clear:left;"></div>

<div style="float: right; clear:right;"></div>
<div style="float: right; clear:right;"></div>
<div style="float: right; clear:right;"></div>
<div style="float: right; clear:right;"></div>

Mozilla, and Opera 6 will position the right floated elements after the last occurance of the left floated elements. In truth, the W3 float rules contain somewhat ambiguous langauge that leaves interpretation open for debate.

To diplay multiple, stacked, opposing floats in proper visual order (emphasis on VISUAL!), Moz requires this:

<div style="float: left; clear:left;"></div>
<div style="float: right; clear:right;"></div>

<div style="float: left; clear:left;"></div>
<div style="float: right; clear:right;"></div>

<div style="float: left; clear:left;"></div>
<div style="float: right; clear:right;"></div>

<div style="float: left; clear:left;"></div>
<div style="float: right; clear:right;"></div>

<div style="float: left; clear:left;"></div>
<div style="float: right; clear:right;"></div>

Kinda like the old "boy, girl, boy, girl" seating arrangment.

I've had several very interesting "discussions" with members of the W3 CSS working group regarding this. There are definite instances where maintaining document and code structure for opposing stacked floats is warranted. Particularly in the use of floating menus. I've actually am proposing a new Float/Clear property, "group." We'll see...

Beware of margins assigned floating elements as well. Opera's behavior respects the margin of the element with precision, while Mozilla will sidle-up in unfortunate ways on occasion.

Take note of the change regarding lengths: [w3.org ] - while not overly crucial, it does warrant attention.