I’m pedantic. You know it’s true. Every time I tell you that you’ve used an apostrophe incorrectly (come on, people; it’s not that hard!) or that you probably meant “cornucopia” that time you used “plethora” (El Guapo knows the difference!), you’ve seen my pedantry in action.
But there’s a limit. I will start sentences with “but” or “and” in grammatically incorrect ways. I will let my writing “voice” be more important than absolute precision. And I don’t correct people all the time and for no good reason if they’re just doing the same.
Lately I’ve discovered that I’m only semi-pedantic when it comes to web development. It is starting to drive me absolutely nuts when the “markup police” comment in the blogs and forums I read. These are the people who say, “You have an extra div that serves no purpose except to hold an image. Images aren’t content,” for example.
I found another doozy while researching a way to make blockquotes look spiffy. The tutorial used the blockquote tag AND a div (tsk, tsk, you should have only used the blockquote… the div serves no purpose) because 2 images of quotation marks were needed. The comment that drove me nuts was, “You shouldn’t need an image at all; just use large typography.” … You… idiot…. Using images presents design options not available with pure typography or the limited palette of visual enhancements (eg. borders) that we have available with pure markup. In this case, a browser-rendered quotation mark would have required the typeface to be installed on virtually all end-user machines, would require consistent anti-aliasing between browsers, and STILL would have required a stupid amount of markup to pull off properly.
To these people, I say, “get a life.” On one of the sites I maintain, I still use an old CSS trick for rounded box corners. It’s semantically horrific. Have a look:
1
2
3
4
5
6
7
| <div class="graybox" style="width:100%;">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p>Here's a bunch of content</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div> |
It’s theoretically awful. For starters, I put an inline style (the width:100% on the graybox) which is a no-no for the pedants. But you know? In 99% of the site, I have a specific width I’m using, which is set in the CSS. I could have added an additional class to the CSS instead, but meh… this worked and took 5 seconds, and nobody who might take over maintenance of the site would have a problem seeing what the extra inline style does. Next, it re-purposes the deprecated bold tag to style a bunch of smaller elements that essentially form the rounded corners. The CSS has a class for each of the sub-components of the rounded corners, the end result of which is simply that the “borders” property is being used 1 or 2 pixels at a time to “draw” a rounded corner. This mish-mash of styled “b” tags has absolutely no semantic meaning.
The whole thing is in theory—and for the pedants—awful. But it works. It looks pretty good. It works across all browsers including IE6.
Sometime soon, now that CSS3 is gaining more acceptance, I will substitute the above code with pure CSS rules using proprietary styling (moz and webkit) plus CSS 3 (border-radius property)… until then, I couldn’t care less if my markup isn’t perfectly “semantic”. This may seem like blasphemy to some, but there’s a time when design is more important than purity of markup. I’m much happier to not have boring rectangles everywhere all over the sites I maintain and develop, and I don’t mind “over-using” images or “mis-using” either HTML or CSS to do it.
