JQuery Pugin or CSS3

Question

Once you have taken the jump to start using the jQuery library (or another JS library of your choice) for many “simple” tasks, you are faced with a dilemma of three development approaches:

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

Regarding the following types of CSS3 enhancements, should the plugin approach always be used ?

• Rounded corners
• Spinning things
• Simple animation / transitions
• Transparent colors
• Rounded corners
• Text Shadow Shadows
• Multiple backgrounds

I'm less interested in performance, but more concerned about the speed of development and long-term service. I also need to support IE6 and Mac. So I always think about jQuery / plugins, but if you know which is better, share your experience.

If there are many plugins, do people combine them into one download?

thank

Mike

---

Answer

mkoistinen made me write this, but he was too big to fit in the comment.

I think that such a decision depends on your project needs. In most cases, I think that you are absolutely right, plugins can be killed. Especially for an experienced front-end engineer with good HTML, CSS and JavaScript skills.

In my case, we have many different people involved, a wide range of skills, different teams / third parties / off-shore, providing a complex site with content and forms.

jQuery :

• ,
• .
• .
• ,
• jQuery ( Microsoft, .net)

, . , , .

, jQuery Tools http://flowplayer.org/tools/index.html - , , jQuery.

Answer 1

.

css html , css. .. jquery stuff , jquery. jquery css3 UX.

, javascript css3.

, , , - . alistapart .

Answer 2

jQuery, "" ( , ). , " ", , .

, Drag-and-drop jQuery , , . > 300K. , , 200 () JS, . ? , , , .

jQuery , ( ..). , . .

Answer 3

• - CSS. CSS3Pie.

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

• - CSS. () 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 */
  

• / - JQuery. ( CSS )

• - CSS. ().

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

• - . ;)

• - CSS3Pie .

• - CSS; CSS3Pie.

, : , MS Explorer, , . MS Explorer CSS3Pie.

Answer 4

-, , JavaScript.

-, , Modernizr. Modernizr CSS3 , .

Answer 5

Never use jquery. jquery converts document.getElementById ("blah") to $ ("# blah"). and thus makes it one additional step for query analysis and performance degradation. Go on. Jquery is deprecated. Since everyone uses it, you are not attached. Explore the house yourself, and you will find it more interesting and knowledgeable.

Use pure css wherever possible, or use knockoutjs, which is powerful and separates data from ui.