Bite-sized CSS & HTML nuggets

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!

The CSS profilers are coming!

Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance. First the Opera team showed off their upcoming style profiler, and now the WebKittens are tinkering on a CSS selector profiler too.

One of the features of these tools is to calculate how long your selectors take and then show a list of the worst offenders. But as you can see from the screenshots, and as noted by Pavel Feldman:

I can see selector matching taking single digit milliseconds. I know from the timeline panel that layout takes hundres of milliseconds or even seconds.

So the relevance of this information may be rather marginal. Perhaps more interesting then is the fact that the Opera Dragonfly style profiler shows the exact moment and location of paint events and layout reflows. Definitely some exciting developments to keep an eye on!

Using letter-spacing breaks right-to-left text in Opera on Windows

Granted, this might seem a pretty exotic scenario, but a very plausible one nevertheless: using letter-spacing breaks right-to-left text in Opera on Windows. On Windows XP the character order seems to be reversed, and on Vista and Windows 7 the order is fine but characters are no longer joined – while scripts like Arabic, Urdu, etc. rely on this. (Thanks to @BifterComic for the Vista results.)

Here’s a JSFiddle to test, and some screenshots to get an idea. The first line is without any letter-spacing, the second one has a positive value, and the third line has a negative letter-spacing.

So if you have a page with RTL text, remember to reset any letter-spacing to avoid running into this issue. I filed a bug at Opera to report it.

Update: Apparently the Opera team was working on some issues with hardware acceleration, which fixed this bug. The fix is in the new development snapshot, so it shouldn’t take too long for this bug to eventually disperse into thin air.

CSS hack to target Opera

Last week – while I was working on my new personal site – I had to find a way around Opera not supporting pointer-events. After a quick round of googling, I stumbled upon a CSS hack to target Opera only. That way I was able to simply hide the overlaying generated content that was stealing pointer events from underlying links.

x:-o-prefocus, .intro:after {
    display: none;

:-o-prefocus is a prefixed pseudo-class which was added in Opera 9.5 and allows styling of form elements reached via spatial navigation. Since x is a non-existing element, we’re not really using it here, but the trick is that other browsers don’t understand this selector and therefore disregard the whole rule. Problem solved.

Here’s a simple JSFiddle demonstrating the hack.

Spaced out & stretched background images

Talking about the CSS Backgrounds and Borders Module Level 3, have you ever heard of the space and round values for background-repeat?

The spec says this about space:

The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area.

And round will stretch your image:

The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.

Support is limited, but both Opera 11+ and IE 9+ are first of class. Demo - Bugzilla bug for Firefox

Background-position from right or bottom

Following the CSS Backgrounds and Borders Module Level 3 spec, Opera can now take 4 values for background-position. This means you can position a background-image from the bottom and right side as well – finally!

background-position: bottom 40px right 20px;

This is great news for anyone who has ever had to make a fluid design or a right-to-left layout! I hope other browsers pick this up soon as well.

See it in action here.