Home/ Questions/Q 6109885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:27:15+00:00

For all CSS3 properties I have to use different vendor prefixed versions to support

  • 0

For all CSS3 properties I have to use different vendor prefixed versions to support different Render Engines. Here is an example:

-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;

background:#dee0e1;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f2f3), to(#dee0e1));
background:-moz-linear-gradient(#f1f2f3, #dee0e1);
background:-o-linear-gradient(#f1f2f3, #dee0e1);
background:linear-gradient(#f1f2f3, #dee0e1);

For a border-radius I have to use 3 different properties and for a background gradient I have to use background property in 5 different way. It increase the size of CSS.

Is there a way to use only one property and make Firefox 1-5 understand it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    LESS is a CSS language that compiles to normal CSS and gives you the ability to abstract away a lot of the tedious elements of writing stylesheets such as typing multiple vendor prefixes every time.

    Here’s a decent tutorial on making the vendor prefix problem less painful:

    http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/

    You know the drill quite well. Want to
    give some section of your website
    rounded corners with CSS3? Then you’ll
    require nothing short of three vendor
    prefixes: webkit, moz, and the W3C
    recommended form. Isn’t that a huge
    waste of time — not to mention screen
    space? What if, instead, we could use
    a class file? Well, we can! I’ll show
    you how today.

    .. and here are the LESS classes from the tutorial: http://snipplr.com/view/47181/less-classes/

    • 0