If you pay attention to web development, you have probably been hearing about CSS3 and HTML5 off and on now for about a year.If you look into these new technologies, you’ll find demos and descriptions of what developers are capable of when using them. In this blog, I’m going look at how they will (hopefully) bridge some gaps and mend some fences in the sometimes tenuous Designer vs. Developer relationship.
One of the most common Designer vs. Developer gripes is ’rounded’ corners… with or without a drop shadow/outer glow… plus a gradient… plus some opacity… plus some contradicting rollover effect… plus… etc. etc. Sometimes this can be difficult to implement given where and how it’s used, along with how you decide to implement these features. By adding a little ‘style’ to the site, a designer may have inadvertently added a few hours to a project.
The difficulty or extra work isn’t what gets to most developers. Mostly, they would simply like the site to be more streamlined (rather than bulky). To implement rounded corners, drop shadows, outer glows, opacity and gradients – and to ensure that they are cross-browser and legacy-browser compatible – you need to use images. Those images will likely be PNGs. PNGs are not a ‘lossy’ image format like good old JPEGs, and therefore end up being quite a bit larger. With larger file sizes come longer load times for a web site.
With CSS3, web developers can let the rounded corner, opacity, drop shadow, gradient train keep on chugging with a full head of steam. Developers will no longer have to slice-up and combine a designer’s site mock up into sprites or make a myriad number of adjustments to the markup and style sheet to make dreams a reality. In the near future, the developer will be able to do all of this with CSS3! This will drastically cut down on development time and load times as bulky PNG files are no longer required to make these features happen.
Some of these features are technically only supported by certain browser developers at this time, but will hopefully be incorporated into all browsers in the future. This is a slight drawback. Yet some of these features, like CSS3 gradients, allow you to specify fallbacks so if the browser doesn’t support CSS3, it will use the image instead.
Now, I only touched on a very specific area where CSS3 can help the Designer-Developer relationship. There are also transitions, animations, resizing and so on that will become available to developers. These will ease the burden of client-side scripting, but that’s another article.
Unfortunately, not all browsers support CSS3 (yet), and most of the ones that do require a browser prefix to the CSS selector or a CSS selector that only a specific browser will recognize. Patience will be important, since we will be at the mercy of legacy browser versions for while yet. But the sun is beginning to rise. There’s nothing that says you can’t get a head start and slowly implement subtle CSS3 effects now. Once web browsers are ready for it, the sky will be the limit for designers and developers alike!
I have listed a few links below if you would like to learn more about CSS3.
A fun CSS3 sandbox: http://westciv.com/tools/
Mozilla CSS reference and extensions: https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
A blog on all CSS3 developments: http://www.CSS3.info
Google showing off CSS3 and HTML5: http://studio.html5rocks.com/
