jQuery has amazing magical powers. It can manipulate any item on the page. Pretty sweet, eh? Today, I am going to show you some of my favorite ways to use it to enhance my CSS. Your designs should always work without the jQuery (or other javascript) that you apply to them if you want a fully accessible site or one that doesn’t break when someone listens to the security warning in IE.
Our favorite jQuery techniques/plugins to enhance your CSS are:
Rounded Corners Don’t you hate it when your corners aren’t rounded in every browser? Or having to use some image based hack to get it just right? This jQuery plugin will fix that for you. Any browser that doesn’t support rounded corners natively will display your corners just how you intended.
Equal Height Columns Sometimes CSS just isn’t enough, and this little script will help you overcome the hurdles that CSS leaves.
Selector Styling Select menus are ugly, and really, they have no alibi, at least not any more. This plugin utilizes the jQuery UI to fix some really ugly HTML elements.
Better tooltips with CSS this tooltip tutorial walks you through better tooltips and creating them with CSS.
Pretty checkboxes and more pretty checkboxes and radio buttons We all know checkboxes look better on a Mac than on a PC. This script changes that. It lets you change yet another one of those ugly default parts of the web with jQuery.
Targeting advanced elements One of the best parts of jQuery is its ability to use advanced selectors, and this indepth guide will explain it to you better than I ever could.
Make an entire div a clickable link This little jQuery plugin will allow you to set a rollover effect and a link on an entire div all while letting your code validate. C’est super chouette!
Super Selector Support from the plugin’s site “In the course of a recent project, I used jQuery to add a first-child class to some <li> elements in our top navigation, to shore up IE6 CSS support without having to alter the markup. After seeing how easy jQuery made that, I realized it’s be possible to write a plugin allowing any browser supported by jQuery capable of supporting all CSS 2.1 selectors. So I wrote SuperSelectors. It goes through your site’s stylesheets, dynamically adding classes to elements so that even IE6 can bask in the glow of properly supporting CSS selectors like ul li:first-child li:nth-child(odd) a:hover.” Ah, thank you!
Better current field highlighting Yes, you can create some field highlighting with CSS, but this technique from Chris Coyier over at CSS tricks is a great way to enhance the usability of your forms.
Some helpful resources are:
