Firefox 3.6 adds background clipping

In addition to all the new CSS features we’ve previously mentioned , Firefox 3.6 * acquires the latest new property value: image-rect . This will allow you to cut the area of ​​the background image to show only part of the whole.

It uses the Mozilla proprietary prefix (i.e., “-moz-” - approx. Trans.) And takes a pair of input values ​​— the URI of the image and the border of the area to be cropped (in the form of four values, separated by commas, as in the clip property ):

foo {background-image: -moz-image-rect (
url (<uri>),
<top>, <right>, <bottom>, <left>
); }

Here is an example:
')

.aside {
background-image: -moz-image-rect (
url ('link.png'), 0, 32, 26, 0);
}

The most immediate application of this will be the production of image sprites, but I am sure that the creative CSS community will be able to think of other uses.

I have prepared a quick demonstration of this property; if you have a recent nightly build of Firefox, you can see a little higher than one image of Link , which changes when you hover your mouse. Anyone who is not looking at the recent nightly build will see three static links. (There is no technical possibility to drag a demonstration into Habrahabr, look at the original - approx. Transl.)

__________________
* Although image-rect is planned to be included in version 3.6, now this value only works in the nightly builds of Firefox 3.7 (the mozilla-central branch ).