In which I rewrite CSS

1/18/05

I know this doesn’t work:

<foo style=”background-image: url(‘foobg_l.gif’) top left repeat-y; background-image:url(‘foobg_r.gif’) top right repeat-y;”>…</foo>

But why doesn’t it?

Lots of complicated existing CSS techniques basically boil down to nothing more than gathering together enough node hooks to hang different style declarations on; why not simply allow multiple background declarations on the same node?

You could deal with overlapping images the same way you do now, based either on the order in which they’re declared or explicitly using z-index. The more verbose idiom where you declare the background, position, and repeat separately could work the same way, again based on order (though I’ll grant that could get a bit confusing with lots of declarations). And I’d be able to decorate every middle, corner and edge of a single

with just a series of ten background declarations, instead of inserting nine dummy nodes in the document.

Because after all it’s all about what I need. Er, I mean it’s about standards and separating presentation from content. Um.