3

We build WordPress themes and I want to know it is neccessary to use all browsers properties instead of ONE?

For example we wrote this for "transition" property:

-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
-webkit-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;

But we can use only this and as I see this work in all modern versions of all browsers:

transition: all 350ms ease-in-out;

Why we need to wrote all properties for every browser with same values? We want to support modern browsers only (for example we don't need to support Firefox 4 or Chrome 5 or IE 7 for example). Are we still need to use all properties or can use just one? I see that different sites uses this differently and don't know who is right? This take a lot of time to add all properties for every browser when theme have a lot of CSS styles and selectors that support different prefix for different browsers. Thanks!

Dmitry
  • 499
  • 1
  • 3
  • 19
  • 2
    Just check which browser versions support the unprefixed, and figure out which ones you want to support. – SLaks Jun 11 '14 at 19:57

2 Answers2

4

Use them when browsers don't yet support the un-prefixed version. You can tell whether a browser supports it by visiting a site like Can I Use? or Mozilla's Developer Network.

Unfortunately for developers, browsers implement features at different times and in different orders, all with varying levels of support. This means we will always need to be aware of the current levels of implementation for features we want to use. It's the cost of doing business.

There are frameworks out there that can do feature detection, like Modernizr, but they require effort in installing, using, and implementing graceful degradation.

TylerH
  • 20,799
  • 66
  • 75
  • 101
0

I like to use MDN's CSS reference since you can see all css properties along with their browser compatibility/prefixes.

Shmoopy
  • 632
  • 5
  • 15