Is CSS3’s ‘move-to’/content: pending(…) supported in any browsers?

Problem

“How do I re-order elements using pure CSS” is a commonly asked question. And you have to use Javascript for it.

However I recently discovered move-to, a new part of CSS3, which would seem to solve the problem of re-ordering content. The introduction to that module, gives an example of moving images around.

However I tried to use CSS3’s move-to, but it doesn’t work. Here’s a simple example:

CSS:

<style> 
#div1 {
move-to: end-of-div2;
}
#div2:after {
content: pending(end-of-div2);
}
</style>

HTML:

<div id="div1">This is div1</div> 
<div id="div2">This is div2</div>

Is move-to supported in any browser (desktop or mobile)? Or am I doign something wrong?

Problem courtesy of: Rory

Solution

My usual reference for all things of this nature is CanIUse.com.

This is usually a very good resource for finding out what browsers a given feature is supported by.

But it seems that this feature isn’t even mentioned on the site, let alone listed as having any support.

Also, the W3C link you provided shows the feature as a “working draft”, which means it is at a very early in design.

I make a point of keeping my ear to the ground with regard to new CSS/HTML features, and the fact that I hadn’t heard of this feature at all before now would also imply that it’s still at fairly early days.

Given all that, I’d guess that browser support right now would be minimal if any.

However, even if it is supported, it would definitely require a vendor prefix, since it’s still only a working draft.

Working draft also means that the syntax is subject to change, so you might find browser support it with different syntax.

If you can’t find any current release browsers that support it, you might want to check the dev release versions of Chrome and Firefox, to see if it’s supported in there — if nothing else, that would give you some clue as to how long it will be before it’s likely to become available in a full release.

Solution courtesy of: Spudley

View additional discussion.