Use Elements as Background Images with -moz-element
We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards takes ages more than it should, we should all be thankful. One interesting CSS property you probably haven't heard of is -moz-element, a Mozilla-implemented CSS property that allows developers to use HTML elements as an element background!
The HTML and CSS
Let's assume that an HTML element exists within the current page, and it's style however a background should be. It has a CSS gradient, text, and numerous CSS properties:
<div id="mozElementBack" style="border:1px solid #999;width: 200px; height: 100px; color: #fff; background: -moz-linear-gradient(top, #063053, #395873, #5c7c99);"> I'm in the background. </div>
I've inlined the styles on the element, but -moz-element will work with styles declared in style tags or external stylesheets. With the element existing within our page, we can now use it as a "background" for another element:
#mySpecialElement {
/* mozElementBack exists as an element within the page */
background: -moz-element(#mozElementBack) repeat;
}
Simply setting the -moz-element to the element ID, theoretically, converts the given element to a background image, allowing for background-repeat capabilities, and so on. Also note that the background updates as the element content and style updates, so you're working with a "live" background!
An incredible CSS property, no? The ability to use an existing HTML element as a CSS background is wild, but thanks to Mozilla, it's entirely possible. Let me know if you can think of a great, real-life usage of this property. The advantage I see in -moz-element is that you can include text in backgrounds, as well as elements generated from scripts you don't control (social bookmarking JS files, for example). What an interesting implementation though!
You say you are thankful to Mozilla and WebKit for their interesting proprietary CSS properties. Ok, when we talk about CSS3 non-standard-yet properties I agree. But there are lot of these feature that are not part of W3 specifications, or only drafts (that’s the case of this element() function). So, completly vendor-specific features. What does this suggest to us? http://en.wikipedia.org/wiki/Browser_wars#Consequences
“We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I’m thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards takes ages more than it should, we should all be thankful”
Well said that man!
Careful though or Lea Verou and the standards Stalinists will eye you for internment in the cyber archipelago.
I see one of them above has already been taking notes
I think element() would be quite useful for creating watermarks, as demo’d in this dabblet from a few weeks ago:
http://dabblet.com/gist/1729950
Cool. but is it fully cross browser?
doh! did you read the intro of the post?
like from red alert… affirmative!
What is actually pretty mind bogglingly useful is the fact that you can use the background-size property in conjunction with this. This means that you can make responsive layouts, where the text also scales. So you can recreate the effects of ctrl +/- like zooming in and out. It would be AMAZING if this was at least iOS compatible…
I love this post. Great job. I hope to see more. Thanks for sharing with us.
That’s a pretty cool idea. I could think of a few uses, mainly for aesthetics e.g. video as backgrounds etc.
It’s kinda weird though, i notice (at least on Fx nightly) that when I highlight text in the source
-moz-element, the background copies text is also selected – could be handy but it’s a bit freaky :-)Is there a way to tell “use the current element as background”? I’m thinking about box reflection using “:after” pseudo-class and this awesome “element()” feature!
Sometimes the cute little vendor prefixes can indeed be useful if one can find the right ones.
For a lot of folks all them little vendor cufflinks (-Khtml -Ms -O -Moz -Webkit -Web-Kit -atsc -wap -mso) are a pain, but long before this big tidal wave of them , I had discovered the div.style[‘foo’] test for undefined and “”, and simply added the fairly trivial few lines of code that lets me pretend for the most part that they don’t exist so I can just author my W3C valid pages prefix free and the css in my pages and files just adapt themselves on the fly even before document.readyState gets to it’s 4th state “complete”.
All this stuff just makes for interesting opportunities. In many circles one sorta sees this rivalry between the differing technical and artistic camps, but the game is as it’s been all along , coming up with clever ways to turn the chaos into the well mannered servant and performer that keeps the users clicking .
Even jQuery here has been house broken and no longer leaves little piles of plugin initialization code here and there as the css classes now trigger the loading and configuration here it not so much a line of that stuff needed.
I still remember when anyone hearing the word “Internet” would 99% of the time say “The inter-what?”
So now , I and hopefully a few of those -moz- cufflinks will sit down and codger up a convincing range (slider) control for moz so it too can spin
those 3D egyptian pyramids made out of those CSS triangles I’ve managed to sneak the brick texturing onto.
It’s still as much fun today to tame and train the the technical critters as it was in the days before Apple and Microsoft came along
I used this to create a Windows Aero/iOS7 effect in FX: http://jsfiddle.net/KeithHenry/RgBzH/1/
I can’t get anything like it to work in any other browser though, so here’s hoping element becomes part of the spec.
It fun but verrrrrrrrrrrrrrrrrrrry slow checkout this cover flow effect demo: https://github.com/amirouche/nova-tunes (only master branch use -moz-element, I removed it in the gh-pages branch because it’s way too slow).
Keep it steady!
Like Keith, I used -moz-element to create an iOS7-Effect. Here is a draggable Version.
http://jsfiddle.net/aL5zD/
Any security concerns?
This is pretty awesome! =) I tried selecting text on the repeated element, and the selection is visible on the bigger block in background.
Too bad that we don’t have the same thing on Chrome, I had an idea…