Now that Opera has joined other browsers with their imple­ment­a­tion of CSS3 fea­tures, it becomes increas­ingly inter­est­ing to test and try these to see if they could become part of a stand­ard work flow.

This post focuses on just a few issues I ran into while exper­i­ment­ing. Perhaps later — or in another life — I might add some pos­it­ive example of the pos­sib­il­it­ies of these addi­tions but then again there are already plenty of people doing good work in that area.

In a test I did I noticed that Firefox did not yet sup­port this but worse: it does not degrade nicely. In my opin­ion it should just have used the first image lis­ted but instead I stared at a white back­ground with no image at all.

I have read that to have it degrade nicely you need to add an extra back­ground rule before you list the mul­tiple back­grounds. This seems rather bloated and unne­ces­sary to me.

Having said that, this would how­ever work as a work-around.

Example code

element {
    background: url(fall-back-bg.gif) top left no-repeat;
}
element {
    background: url(bg-one.gif) top left no-repeat,
                url(bg-two.gif) top 35px no-repeat,
                url(bg-three.gif) bottom left no-repeat,
                url(bg-four.gif) left repeat-y;
}

So far the column lay­out mod­ule has been imple­men­ted — to a degree — in Safari and Firefox. Opera (10.5) does not yet sup­port it. Google Chrome (Mac) is a web­kit browser but I’ve found a few dif­fer­ences between it and Safari.

I do think it is usable as it degrades nicely in browsers that do not sup­port it.

As we will see in examples below for now I think this should be used spar­ingly because for one Safari has a weak imple­ment­a­tion and also because I think most users will not like read­ing long texts on screen divided in columns that will make them have to scroll back up to read the text in the next column.

Used in sep­ar­ate blocks of con­tent with mostly just para­graphs could be a nice break in the flow of an art­icle and I think that would be a rather fair way to make use of this.

Issues with the column mod­ule layout

As said before by oth­ers the use of columns that have its text auto-flow through to the next column, does raise a few issues. Some have poin­ted out that cur­rently it is not pos­sible to keep cer­tain ele­ments together like hav­ing a head­ing attached to its paragraph.

On top of that I also do not see a way to keep a head­ing from flow­ing over mul­tiple columns should it be long enough and start­ing at the end of a column.

I know there are prop­er­ties called ‘break-before’ and ‘break-after’ and such but from what I under­stand from the W3C Candidate Recommendation of CSS Multi-column Layout Module is that these are only meant for prin­ted media. Please feel free to cor­rect me if I am wrong here.

Safari has some strange issues with these columns and I think these are bugs or rather a very poor imple­ment­a­tion of the mod­ule. Below you’ll find some examples of these issues.

While writ­ing this art­icle I noticed another glitch in Safari and how dif­fer­ent it acts as opposed to Firefox in regards to the multi column lay­out mod­ule. When I inser­ted the code above for the multi-background work around example, I noticed that in Safari the text is clipped on the right side, while in Firefox it is not and will act more like when overflow:visible had been set on it. I am not sure which one of these is at fault here. One could argue that because the code is inside a pre ele­ment the code should be shown ‘as is’ but does that mean the part that goes out­side the defined column should be vis­ible? Or not?

By the way: I fixed this for this post by redu­cing the font-size and adjust­ing the spaces before the text within the pre element.

Text-shadow seems to work in most browsers and should degrade nicely. Heck, offi­cially it’s a CSS2 fea­ture. Box-shadow now works in Opera (10.5) as well.

I did notice a glitch though when a drop shadow is set on an image that has a trans­ition applied to it. After the trans­ition has fin­ished — in my case it was a rota­tion from 5 degrees back to 0 degrees — some­times the shad­ows remain in their pos­i­tion for a frac­tion of a second before being redrawn.

Box-shadow on image ele­ments with a trans­form also have some issues. In all browsers when you have a trans­form set on an ele­ment like rota­tion of 5 degrees, it looks like the shadow is not being redrawn accurately.

As men­tioned above there are still issues with the trans­ition and trans­form fea­tures espe­cially in com­bin­a­tion with drop shad­ows or inside an ele­ment that has column-count set.

Border issues after rotation

Opera and Firefox both have issues draw­ing a bor­der around an ele­ment that has a trans­form applied to it. In this case a 5 degree rota­tion. In Opera the bor­der is just screwed up com­pletely, in Firefox as well but to a lesser degree.

A work around for this would be to not have the bor­der on the image ele­ment but a sur­round­ing ele­ment instead. But then we might as well stick to adding extra ele­ments for IE as well to cre­ate drop shad­ows and roun­ded corners, right?

Well I guess it depends on what you’re after with either of these fea­tures. Most of them are safe to use to a cer­tain extent as long as you know if and how it degrades in older browsers.

Some of these addi­tions to CSS could be real time savers and that will prob­ably be a reason for a lot of people to start using it. We will prob­ably see an even more accel­er­ated imple­ment­a­tion of CSS3 stuff in 2010 by all browser makers. I guess whether this is a good thing or not is for us — design­ers and developers to find out by keep­ing an eye on their implementations.