Bite-sized CSS & HTML nuggets

Unprefix express in full swing

The big vendor prefix discussion comes and goes in waves, but one conclusion that always pops up is that these prefixes should have a shorter lifespan. Of course browser makers may shift the responsability to specification writers, arguing that specs take too long to reach Candidate Recommendation (CR) status. Well, it seems the unprefix express is finally picking up steam.

A few weeks ago we heard about unprefixed transitions, transforms, animations, gradients, IndexedDB (and more) in the next Internet Explorer, and this week the Firefox team anounced exactly the same.

This is all great news. Even better, as Lea Verou noticed:

Keep in mind that this means you don’t have to use the -ms- prefix at all for transitions, animations and gradients, since no stable build of IE was ever released that requires it.

box-decoration-break finally coming to more browsers

One of the lesser known CSS properties I’m really excited about is box-decoration-break. From the official spec:

When a box is broken at a page break, column break, or, for inline elements, at a line break, the ‘box-decoration-break’ property specifies whether box fragments are treated as broken fragments of one continuous box, or whether each fragment is individually wrapped with the border and padding.

This will finally give us a simple solution for this problem for example, and for cut off box-shadows and the like. It would have been great to fully control which properties should be sliced and which ones not, but currently the poperty only has two possible values, slice (the default) and clone. This image – also from the spec – says it all:

So far, only Opera supports box-decoration-break, since 2009 (Opera 10.60). Firefox does have the -moz-background-inline-policy property that specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines, but that’s just a part of what box-decoration-break does. Here’s the corresponding Bugzilla bug.

Last week support for parsing the property landed in WebKit, with the rendering part still to be implemented. Let’s hope box-decoration-break will be available in all browsers soon!

CSS3 text-decoration implemented first in Firefox 6

While browsing the release notes for the freshly released Firefox 6, I noticed it’s the first browser to implement the CSS3 version of text-decoration. Which boils down to three new properties: text-decoration-color, text-decoration-style and text-decoration-line. These allow you to do groovy stuff like:

.yeahbaby {
    -moz-text-decoration-line: underline;
    -moz-text-decoration-style: wavy;
    -moz-text-decoration-color: purple;

So in the future, when you want a slightly less opaque underline on your links, you don’t need to resort to borders but instead use this:

a:hover {
    color: #222
    text-decoration: #888 solid underline;

text-overflow (almost) supported everywhere

The text-overflow property has been around for several years, but what’s new is that Mozilla’s bug #312156 was closed two weeks ago, making Firefox the last browser to implement it. It won’t be available until Firefox 7, but with their new release schedule that should only be a couple of months away – check the compatibility table.

To refresh your memory, here’s how to show an ellips to represent clipped text:

.ellips {
    overflow: hidden;
    white-space: nowrap; /* pre works as well */
    text-overflow: ellipsis;

Perhaps you’re wondering why you need the other properties? Roger Johansson explains the overflow:

If you want to give users a chance of reading the clipped text, you could set overflow to auto instead of hidden to make a scrollbar appear. When this happens, the spec says that browsers should let users scroll to show more content. This only seems to work in Opera and IE9.

But why the white-space condition? How are we supposed to ellips a block of more than one line of text with CSS? Perhaps we need a :last-line pseudo-element?