Firefox 3.6 adds background clipping

In addition to all the new CSS features we mentioned earlier , Firefox 3.6 * takes on the freshest new property value: image-rect . This will allow you to cut out the area of ​​the background image to show only part of the whole.

It uses the Mozilla proprietary prefix (that is, “-moz-” - approx. Transl.) And takes a pair of input values ​​- the URI of the image and the border of the cut-out area (in the form of four values ​​separated by commas, as  in the clip property ):

foo {background-image: -moz-image-rect (
    url (),
    ,,,
); }

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 come up with other applications.

I prepared a quick demonstration of this property; if you have a recent night assembly of * Firefox, you can see a little above one Link image , which changes when you hover over it. Anyone looking at a recent nightly assembly will see three static links. (There is no technical possibility to drag the demonstration into Habrahabr, look at the original - approx. Transl.)

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