Extending CSS with jQuery – A New Year’s Guide
Preface: Chris Coyier, of CSS-Tricks fame, recently gave an excellent presentation on how to extend CSS using jQuery. I remember seeing this wonderful presentation floating around recently but hadn’t been aware of who the author was until now. I would like to apologize to every one of my readers, including Chris, for posting this article up without any reference to the slides author – my original online source didn’t include any mention of him (or any author for that matter) so I had rather foolishly gone ahead with the use of them without investing more time into researching who put them up. This revised version of the article gives full credit to Chris who is indeed the man that gave the original presentation and was kind enough to give his permission for his slides to be used. I and this article would like to thank him for being the main inspiration behind this topic.
Having viewed Chris’s presentation, I thought I’d write a post around it to help my readers see how jQuery helps us to extend CSS in ways that make our jobs a whole lot easier. I’ve always thought that jQuery was extraordinary framework – allowing both web developers and designers an easy way to harness the full visual capabilities of JavaScript. One of the nicest advantages of jQuery has been ability to extend CSS beyond what was previously capable with simple mark-up alone. In this post, I’m going to show you how to use jQuery to fix cross browser compatibility issues, solve some shortcomings with CSS, do things CSS just can’t do on it’s own and we’ll finally also go through some real-world problems that will be useful to both those new to the framework and those coders who’ve been using it for a while. I hope you find it helpful!.
