Cross browser functionality for CSS3

In the recent post on “CSS3 and HTML5 for the Real World” I see this snippet:

-webkit-transform: translate(45px,-45px);
-moz-transform: translate(45px,-45px);
-ms-transform: translate(45px,-45px);
-o-transform: translate(45px,-45px);
transform: translate(45px,-45px);

I find it disappointing and sad that entries must be entered for each browser. Surely there is a better way.


Hi robtcallahan. Welcome to SitePoint. :slight_smile:

It’s only a temporary situation. CSS3 is not a finished product yet (so to speak). That last line is expected to be the final version, but in the mean time, browser makers are allowed to experiment with these properties so that we can play with them before they are truly born. If you don’t like all those lines, then don’t use them, and wait until CSS3 is truly ready for use. :slight_smile:

[PS: I’ve moved this thread to the CSS forum.]

Of course, even when (if?) CSS3 becomes final, nothing will retroactively fix older browser versions. FF3, for example, is never going to recognize border-radius. So, as long as you want to cater to the older browsers, you’ll be stuck with the extra attributes.

LESS « The Dynamic Stylesheet language

I never like using JavaScript to address browser deficiencies because

  1. Performance.
  2. JavaScript can be turned off.
  3. The script might not play nice with all browsers and/or new browsers.