Using jQuery to avoid classititis in IE6
IE6 lacks CSS 2 support and as a CSS guy - this generally sucks to deal with. One particular pain point is when stylizing form elements. Sometimes overlooked - it has become one of the first things I usually attack when developing a website. I can’t stand unstylized forms. I tend to leave buttons alone, but slapping a 1px border on input,textarea and select elements can work wonders. But due to lack of CSS 2 support in IE6 there is no easy way to differentiate html elements like these:
<input type="text"/>
<input type="submit" value="submit"/>
This leads to a term Jeffery Zeldman coined as “classititis� - the extraneous use of class assignments in markup. To deal with IE6 I previously would create markup such as this:
<input class="text" type="text" />
<input class="submit" type="submit" value="submit" />
to give myself the proper style hooks required to differentiate the elements.
With browsers that support CSS2 - Firefox, IE7, Safari, etc (basically every one nowadays except IE6) it is easy to use proper CSS2 selectors
input[type=text] { /* styles /}
input[type=submit] { / styles */}
However, leveraging jQuery and some simple rules can cleanup our markup and avoid classititis. We can even add in sharp focus/blur based styling behaviors for an enhanced prettification of otherwise boring form elements.
Enter jQuery
I am a huge fan of jQuery. I’ve used quite a javascript frameworks but none of them stuck more than jQuery. Between the thriving community, excellent documentation, and plethora of plugins - you can’t go wrong.
I frequently reuse code snippets of useful functions and css rules that I’ve accrued over time (more on my CSS toolkit another time). Here is code that allows me to avoid the trap of classititis due to lack of CSS2 support in IE6:
$(document).ready(function() {
$("input[@type=password], input[@type=text]").addClass("text");
$("input[@type=password], input[@type=text], textarea").focus(function() {
$(this).addClass("focus");
//focus class provides a hook to alert the user
});
$("input[@type=password], input[@type=text], textarea").blur(function(){
if ($(this).find(".focus")) {
$(this).removeClass("focus");
}
});
});
input type=”text” try typing in some text and taking focus off the input box
textarea
CSS that will pull it all together
input.text, textarea, select {
color: #777;
padding: 2px 5px;
font-size: 110%;
border: 1px solid #333;
background: #fafafa;
}
.focus {
background: #fff !important;
color: #000 !important;
}
Be sure to check out 456bereastreet for an excellent article on CSS 2.1 selectors.
Popularity: 21% [?]
