Implementing CSS3 without the pain

One of the major stumbling blocks when considering whether to implement a CSS3 feature is the plethora of vendor specific syntaxes. Implementing even a relatively simple feature such as border-radius can lead to lots and lots of CSS:

Not only is the code verbose, but remembering the various vendor syntaxes and identifying mistakes requires a good memory and hours of cross browser testing.

The obvious solution to all this seems to be to use a tool that will convert standard CSS3 syntax into the various vendor specifics consistently leaving the developer with a pure undiluted CSS3 stylesheet.

So does this tool exist?

The closest tool that I could find was eCSStender. This is a JavaScript implementation that takes CSS3 styles, detects the browser currently running and converts the CSS3 standard definitions into the relevant vendor specific syntax. The only downside with this is that it requires the browser to execute the translation once the page has loaded. If you are running a web application that is already laden with JavaScript then this may not be the most efficient way of doing things.

In terms of efficiency, converting files just the once on the server side would be the best solution. There are already a couple of CSS tools (LESS and SASS) that do a similar thing with CSS, but not specifically with the CSS3 syntax.

Conclusion

The ideal solution does not appear to exist, but it doesn't stop us imagining it. Firstly, clear separation of the non-CSS3 code and the CSS3 code would allow the default stylesheets to be loaded for all browsers with no pre or post processing on either the server or the client. A server side tool can be then fed the raw CSS3 extension stylesheet and produce the relevant vendor specific stylesheets as static files on the server. A simple piece of JavaScript (or potentially server-side code) can then detect the current browser and serve the CSS3 extension to browsers capable of supporting it.

This solution has several advantages in that the CSS the developer produces is clear, maintainable and future-proof. The files served to the client are compact and specific to that browser and older browsers won't even see the CSS3 code. Finally the JavaScript or server side code to include the relevant stylesheets is compact and quick.

Watch this space...