I was browsing the popular links on del.icio.us today and stumbled onto Nifty Corners and (via that page) More Nifty Corners. I have to say that I am incredibly impressed with the scripting, but I fear there is something wrong with this picture.
Lately, there have been some border wars over the CSS :hover pseudo-class and its forays into the behavior layer. Sure, it’s easier to have CSS do the work sometimes, but that doesn’t make it right. Frankly, I agree with the concept that behavior should be separated from presentation, just as presentation should be separated from content (which is why I use JavaScript to open and close the faux-<select> in my <select> Something New series).
I am also a big believer in clean, semantic markup, so I become concerned when anyone is adding superfluous code to the document to force a design issue. I know some might say I live in a glass house, but when I see someone putting code like this
| <div id="container"> | |
| <b class="rtop"> | |
| <b class="r1"></b> <b class="r2"></b> | |
| <b class="r3"></b> <b class="r4"></b> | |
| </b> | |
| <!–content goes here –> | |
| <b class="rbottom"> | |
| <b class="r4"></b> <b class="r3"></b> | |
| <b class="r2"></b> <b class="r1"></b> | |
| </b> | |
| </div> |
into their document (even if it is via the DOM), I begin to shudder. Maybe it’s the nagging purist in me, but that just seems wrong.
Are we falling into the old patterns again, forcing design issues through hacky markup? Does the use of non-semantic markup (taking a page from Eric, no doubt) make it OK? Does the fact that it’s inserted via the DOM make it any more valid? Where do we draw the line?
I don’t have the answer, but I think we need to have the conversation.
