jQuery Pugin or CSS3

Question

Once you’ve taken the leap to start using the jQuery library (or another JS library of your choice) for many “simple” tasks you are faced with the dilemma of 3 development approaches:

• use the CSS3
• use a mixture of CSS3 and jQuery i.e. add a class defined in CSS using jQuery
• use a jQuery plugin where available – which usually intelligently chooses between native CSS or another solution.

With regards to the following types of CSS3 enhancements, should one always use the plugins approach?

• Rounded Corners
• Rotating things
• Simple animation / transitions
• Transparent Colours
• Rounded Corners
• Text Shadows Box Shadows
• Multiple Backgrounds

I am less concerned with performance but more concerned about speed of development and long term maintenance. I also need to support IE6 and Macs. So I'm thinking jQuery/plugins all the way but if you know any better please share your experience.

If there are lots of plugins do people combine them into one download?

Thanks

Mike

---

mkoistinen's answer prompted me to write this but it was too big to fit in as a comment.

I think this kind of decision depends on your project needs. In the majority of cases I think you are absolutely right plugins can be over kill. Especially for the experienced 'front end engineer' with good HTML, CSS and JavaScript skills.

In my case we have a lot of different people involved, wide range in skills, different teams/3rd parties/off shore, delivering a complex site with content and forms.

The jQuery plugins offers:

• a lower learning curve for those less able
• reuse across different parts of the business
• accessibility is important
• theme roller support is also important
• we have forms that could use the majority of the widgets
• support from the jQuery team (and Microsoft if you are using .net)

That said, this is not a cut and dry decision. I think we will have to feel our way as we gain experience.

Some of our team like jQuery Tools http://flowplayer.org/tools/index.html - it looks good and has a smaller footprint but I think we actually want most of the additional functionality in jQuery UI.

Answer 1

While I absolutely LOVE jQuery, I'm not a huge fan of 'plugins' in general (some of them are awesome though). Mostly because they are often "one solution fits all" types of things that adds a lot of filesize to the overall download and complexity to the code I write.

Case in point, I recently looked at some of the Drag-and-drop libraries for jQuery and found that they were all nicely done, but were huge. In some cases > 300K minified. I ended up writing what I needed myself in less than 200 lines (commented) of JS that I simply included into my existing code base. Will it work for everyone's drag-and-drop needs? Probably not, but I don't need to weigh down this clients' customers with code that I'm not using.

jQuery is important to me because it levels the playing field (browser inconsistencies, etc.). This is important to me and my clients AND speeds up general development, so its easy to justify. Some other plugins just aren't always justifiable in the same way.

Answer 2

You should follow a progressive enhancement methodology.

Add css on top of your html for things css can do. e.g. rounded corners etc. then add jquery stuff on top for only things jquery can do. And then use jquery to change css3 to improve UX.

This means with javascript turned off you still get the cool css3 features.

Another consideration is that you should use feature detection and not browser testing to fork you code to create cross browser code. There are some articles on alistapart and on the web about feature detection.

Answer 3

• Rounded corners - use CSS. For Explorer, use CSS3Pie.

  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  behavior: url(/PIE.htc);
  

• Rotating things - use CSS. For Explorer, use their custom filter() CSS.

  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  

• Simple animation / transitions - Use JQuery. (CSS animations aren't widely supported enough yet)

• Transparent Colours - Use CSS. For Explorer, use filter().

  filter: alpha(opacity=90);
  opacity: 0.9;
  

• Rounded Corners - see above ;)

• Text Shadows Box Shadows - For Explorer, use CSS3Pie, as per rounded corners.

• Multiple Backgrounds - And again, CSS; for Explorer, use CSS3Pie.

So the message at the end of all that: Most browsers except MS Explorer support most of what you've asked for. For MS Explorer, get the CSS3Pie.

Answer 4

First off, I recommend going with progressive enhancement because this allows you to have a decent looking sight with JavaScript disabled.

Secondly, instead of using plugins for everything, I would use the Modernizr Library. Modernizr allows you to maintain a very good degree of control over CSS3 features, and it has a very intuitive syntax making a low learning curve.