Easier Cross-Browser CSS3 Features [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 years ago.

Improve this question

To add box-shadow to a HTML element, I currently have to do this:

box-shadow: 2px 2px 3px #969696;

-moz-box-shadow: 2px 2px 3px #969696;

-webkit-box-shadow: 2px 2px 3px #969696; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);

At this point, it seems to me that this amount of code for a simple gradient is ridiculous at this stage of the web. Not to mention the maintenance time- if I want to change the color, I have to change it four times for each vendor prefix. (This also applies for things like CSS3 Gradients).

What's a better, more optimized way for handling this simply? I'm aware there are large non-standard fixes like CSS3 Pie, but in my experience, they take forever to load and I st开发者_开发问答ill have to write code for Firefox & Webkit. Do I need to resort to server-side code to do this? I'm just really frustrated working with redundant awkward-looking code.

---

You could use any of the following to ease your sorrows:

Dynamic Stylesheet Languages/CSS Extensions

• LESS
• Sass
• Compass (Sass Framework)

CSS 3 Generators

• Prefixr
• CSS 3 Please
• CSS 3 Generator
• Mother Effing HSL
• Mother Effing Text Shadow
• CSS 3 Maker
• CSS Gradient Generator
• CSS Filter Effects

---

cssSandpaper is what you are looking for.

---

Use Less CSS framework with bootstrap's preboot here http://markdotto.com/bootstrap/