Subscribe to blog updates via email »
Eliminating extraneous DIV tags
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:
WANT TO WRITE A BOOK?
Download your FREE copy of How to Write a Book »
(for a limited time)
<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.
