Divitis and Classitis: Two new words in my CSS vocabulary!

Yes, “divitis” and “classitis” are the two latest words that I have added to my CSS vocabulary. But unlike normal language words, these two are added to make sure that I never use them, or atleast minimize their use.

So, what do they mean? Divitis is when someone uses unnecessry <div> tags in their markups. For example:

<div id=”menu”>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
</div>

The above example has unnecessary div element. Instead, it could have been easily done as:

<ul id=”menu”>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Likewise, classitis is the over use of the class attribute. For example:

<p class=”address”>
Ahsanul Bari<br />
House-17, Road-3/A, Sector-5<br />
Uttara, Dhaka-1230<br />
</p>

In the above example, we could easily use the <address> tag instead of using the class=”address” like:

<address>
Ahsanul Bari<br />
House-17, Road-3/A, Sector-5, <br />
Uttara, Dhaka-1230<br />
</address>

The above two examples are really simple, but I hope you got the point. Avoiding divitis and classitis helps to write mark-ups, that are more semantically correct.

Styling an input type=”file”

If you are ever in a situation where you need to style an input element with type=”file”, you will be very surprised to find that almost no styling is possible directly. This is because, no browser supports styling for <input type=”file”>. Only the “size” attribute was there, that gave some control over its width. Other than that, I had no luck.

Lucky I stumbled upon this page: http://www.quirksmode.org/dom/inputfile.html. This has a very clever techique, that actually styles an input element of type=”text” and an image, makes the original input type=”file” invisible, and places it over the fake input, to give the impression of a styled file uploader. A very sexy hack indeed!