It’s a disappointing day when you find a single serving site that generates the comprehensive syntax for the
border-radius property, aptly named border-radius.com. Because not all browsers (and browser versions) support the latest and greatest things CSS3 can do, one has to resort to browser targeting yet again. Only this time, one browser’s syntax is different from another browser’s, and becomes a chore to write CSS for each.
There’s a pretty obvious explanation for the existence of browser-specific properties from SitePoint:
Vendorsâ€”browser makersâ€”are free to implement extensions to the CSS specifications that, in most cases, are proprietary to their browser. They may do this for a number of reasons, such as adding new features for users, or for experiments and debugging. Most often, though, the extensions are used to release and test browser features that have been developed in the preparation of W3C drafts that have not yet reached Candidate Recommendation statusâ€”the extensions allow these new properties to be widely tested before they become available as standard CSS properties.
So for starters, the browser-specific CSS has prefixes like:
-moz: Gecko-based browsers like Firefox
-webkit: WebKit-based browsers like Safari and Chrome
-ms: Internet Explorer
(The complete table is listed at the W3C.) That’s fine, but what I don’t get is why the syntax following the prefix isn’t always the same as the standard CSS syntax. The
border-radius property is just one example, which is peanuts compared to the gradients syntax. Compare:
-webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(0,10,148)), color-stop(1, rgb(45,58,246)) ) -moz-linear-gradient( center bottom, rgb(0,10,148) 0%, rgb(45,58,246) 100% )
Sure, we can turn to generators like WestCiv’s and Damien Galarza’s—and we’ll probably be increasingly dependent on them in the future as CSS capabilities and their corresponding syntaxes grow more complex. But why must browser vendors insist on that when it only multiplies the code and maintenance necessary? Does it have to do with the way their engines parse the code, or something less significant?