-
200926 Aug
Posted in Browsers, CSS3 Previews
As well as all the new CSS features we mentioned previously, Firefox 3.6* is gaining a brand new property value: image-rect. This allows you to clip an area of a background image to display only part of the whole.
It uses Mozilla’s proprietary prefix, and takes two values: a URI for the image, and the boundaries of the clipped area (as four comma separated values, like the clip property):
foo { background-image: -moz-image-rect( url(<uri>), <top>,<right>,<bottom>,<left> ); }So as an example:
.aside { background-image: -moz-image-rect( url('link.png'), 0, 32, 26, 0); }The most immediate use of this will be for making image sprites, but I’m sure the creative CSS community will be able to think of more applications for it.
I’ve created a quick demo for this; if you have a recent nightly*, you should be seeing a single picture of Link above, which changes on mouseover. Anyone not running a recent nightly will see three static Links.
* Despite
image-rectbeing planned for inclusion in 3.6, it currently only works in nightlies of Firefox 3.7 (mozilla-central branch).You can skip to the end and leave a response.
-
Comments
-
01.
I’ve been playing around with this myself this morning, trying numerous variations of the syntax as discussed here:
https://bugzilla.mozilla.org/show_bug.cgi?id=113577
No joy in version 3.7a1pre
-
02.
Firefox 3.6 adds background clipping – CSS3 . Info | Firefox News on Twitter says:Comment » August 26th, 2009 at 1:04 pm
[…] See the rest here: Firefox 3.6 adds background clipping – CSS3 . Info […]
-
03.
I was needing exactly this the other day. Hopefully the Webkit team will implement this shortly as the two teams seem to be following each other closely.
-
04.
Boris says:Comment » August 26th, 2009 at 1:37 pm
I don’t get the use of these proprietary things.
Did you ever make a site that could use them because you could ignore all the browsers but the one that supported this proprietary thing?
In my eyes they are nifty for demonstrations on CSS sites, but they have no real-world value.. -
05.
Adam Luter says:Comment » August 26th, 2009 at 1:48 pm
@Boris, well usually you can use them if you have some sort of fallback that works. The best working example is rounded borders, you specify a border, then specify that it’s rounded. Viola, old browsers look fine, new browsers look spiffy.
However, in this case, you could specify an alternate background-image first, then specify your fancy background image. BUT, one of the biggest problems with CSS here, is that this probably isn’t good enough. What you really need is the ability to query if this feature exists and then apply a *set* of rules based on that feature’s presence — not just the background-image itself.
As a simpler example, say we are not satisfied with borders not being rounded on older browsers. We’d like to specify a background image that has the rounded border. We *can’t* do this because we’d also have to unset the border rule or it will draw over our background image! So, we’d like to instead ask if border-radius is supported then set both the border, the radius and unset the fall back background image.
Without this sort of mechanism, you are quite right, Boris, these new features have a limited audience and limited value.
-
06.
@Boris:
Proprietary prefixes are good for when browsers are trying out new features but are not ready for them to be ‘official’ yet; they should degrade gracefully, so users without compatible browsers see the default state.
For example, you could have an element with a border, and apply -moz-border-radius and -webkit-border-radius to it so users of Firefox/Safari (etc.) see rounded corners, users of IE don’t. It doesn’t affect the content at all.
It allows more experimental coders to play with new elements and report back to the W3C to help shape the spec. For example, pointing out the drawbacks in the Webkit & Mozilla implementations of border-radius on this site led to the W3C updating the spec.
When a property is seen to be stable, the proprietary prefixes are removed – for example, -moz-opacity is now just opacity.
So they do have many pracictal uses, but whether or not you use them on a production site is up to you.
-
07.
@Boris – Certainly at such an early development stage these functions aren’t intended for widespread use – rather to give designers a chance to experiment and play around with new functionality, so that the W3C and browser vendors can respond and adapt to any feedback/criticisms of the new specifications.
-
08.
I got it working just fine, using the 0826 Minefield nightly :-).
In your sample code in the article you use ‘px’; drop it.
And check the error console… (always a good place to start when playing with things). I guess we’ll see a dev-doc, one of these days. -
09.
I’ve just updated to 0826, was using 0825 previously, but still having problems, even without the px – would you care to share your code Philippe?
-
10.
And I tried both with and without unit values, and neither worked for me. Could you post your code?
-
11.
Boris says:Comment » August 26th, 2009 at 4:52 pm
@Chris, Peter Gasston & Adam Luter
I see I was too fast to judge. If this is indeed meant as a step in between, then I see the use. If however this is a way to have a second way to implement a similar feature (I’m thinking about the moz-inline-block), I have a hard time sharing the enthousiasm.
-
12.
Firefox 3.6 adds background clipping - CSS3 . Info · killer firefox says:Comment » August 26th, 2009 at 7:17 pm
[…] See original here: Firefox 3.6 adds background clipping – CSS3 . Info […]
-
13.
@Philippe: I’ve updated to the very latest nightly and tried every variation of the syntax, and still no result. Could you explain how you got it working?
-
14.
http://dev.l-c-n.com/_temp/-moz-image-rect.html
(will be deleted in a week’s time)
Tested with 0825 & 0826 builds on OS X 10.5.8.div {
background-image: -moz-image-rect(url(../_img/dummy80.png), 0, 32, 100%, 0);
background-repeat: no-repeat;
background-position: 20px 20px;
}
displays a 32px wide slice of the image (which is 80x80px). -
15.
Great, Philippe! Thanks! It was indeed me getting the syntax wrong. I’ll update the post shortly (the demo should work now).
-
16.
-
17.
Emil Ivanov says:Comment » August 27th, 2009 at 2:28 pm
This property is very valuable! Damn many of the CSS3 properties are but the implementations are so slow, like this thing is from 2001 year!
-
18.
Why not allow use of polygons and circles, similar to the tag in HTML?
-
19.
Why not allow use of polygons and circles, similar to the AREA tag in HTML?
-
20.
Ant says:Comment » October 5th, 2009 at 12:48 pm
Yay, repeat-x and repeat-y could be possible in 1 sprite.
-
21.
Firefox 3.6 is looking pretty cool. I want to see tab processes though. Just google “factopo” and you can see more information.
-
22.
The problem is you never know when you should implement it.
-
23.
December says:Comment » July 10th, 2010 at 6:29 pm
why aren’t px or % required for the [length] values like in every other css length value
-
24.
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
25.
CSS background image hacks » Skyowner.com Blog - Tuch the sky says:Comment » March 19th, 2011 at 1:32 pm
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
26.
[…] came into my mind how I’ve read about something like background-clipping the other day. Mozilla made a good point with -moz-image-rect but it is far from being widely […]
-
27.
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
28.
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
29.
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
30.
CSS background image hacks | DWH-UK.com : Great Themes at Sensibles Prices! says:Comment » March 15th, 2013 at 10:57 pm
[…] the future, there will be other alternatives. Firefox 3.6 added -moz-image-rect to allow background images to be cropped. But this is not supported by other browsers and looks […]
-
01.
