Subscribe to blog updates via email »

Eliminating extraneous DIV tags

June 05 2004 – 12:23pm

I just read an article with a pretty intriguing proposal in it. If I understand it correctly, Luke Redpath proposes that the next CSS specification include an ability to specify that an element contain other elements by default. This would be an ideal way to create visual effects that would otherwise require extraneous DIV tags. For example, for the technique, Onion Skinned Drop Shadows, the code would look something like this:

.wrap1, .wrap2, .wrap3 {
display:inline-table;
/* \*/display:block;/**/
}
.wrap3 {
padding:0 4px 4px 0;
background:url(corner_tr.gif) right
top no-repeat;
}
/* CSS rules from the future */
.wrap1 {
contain: .wrap2
float:left;
background:url(shadow.gif) right
bottom no-repeat;
}
.wrap2 {
contain: .wrap3
background:url(corner_bl.gif) left
bottom no-repeat;
}
img .shadow {
contain: .wrap1
}
/* end CSS rules from the future */

Now, instead of your markup looking like this:

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<img
src="object.gif"
alt="The object casting a shadow"
/>
</div>
</div>
</div>

It would look like this:

Build your 100-word writing habit with my free email course. Click here to sign up »

<img class="shadow"
src="object.gif"
alt="The object casting a shadow"
/>

I think this would be a big step toward separating presentation from content.

This post is filed under Uncategorized.