Proposal: layered CSS background (SVG, png)

Hi, list.

I have a proposal for further CSS (4?) development. I'll try to keep it 
short as possible.
Please, keep in mind that (almost) no SVG background support is 
available right now, so this idea would should be actualised only on 
full SVG background support, or layered png support.

Lets's take a SVG file whitch has 3 groups: group1, group2, group3.

For example, we would like to show only group1 on our declared element:

..class {
background: url('/example.svg') no-repeat 0 0;
background-layer: 'group1';
}


Or, group1 and group3

..class {
background: url('/example.svg') no-repeat 0 0;
background-layer: 'group1,group3';
}

Proposed shorthand:

..class {
background: url('/example.svg', 'group1,group2') no-repeat 0 0;
}

Or multiple backgrounds with layered png (that's why I came up with 
background-layer):

..class {
background: url('/example1.png', '3') no-repeat 0 0, 
url('/example1.svg', 'group3') no-repeat bottom right;
}

So, basically – this idea is based on CSS sprites, just with a little 
bit different approach – with advantages of layering. Attribute 
background-layer should show corresponding SVG group, or png layer.

Disscussion is welcome and encouraged.

Best regards,
Kristaps Karlsons

Received on Friday, 23 April 2010 09:31:11 UTC