Over the last couple of days, I was working on an internal project that allowed me to use things, I would normally had to explain to the client for few solid hours just to – most probably – hear ‘No.’. As Firefox 3.5 came out, supporting lots of features that are in the W3 standard, but were supported only by niche browsers like Safari and Opera, I decided to try out some CSS3 just to see how much easier the work would be for a guy who is used to doing all those hacks like sliding doors, sprites, matted GIFs and so on. Here’s what I think so far.
Diving into CSS3
In case you are not very much into front-end development and you mostly do design or basically spent few last months under the rock, I will say few words about what CSS3 changes in the way of thinking about visual layer of websites and web applications. First of all, CSS 3.0 is a full blown visual standard with all the quirks and tricks that current webdevelopment needs. Selectors, properties and at-rules (@-rules) have been extended to most cases that were problematic in CSS 2.1. Lots have changed in webdevelopment since CSS2 and W3C took some most common use cases just to make webdesigners’ and webdevelopers’ lives easier. If you need details, Sitepoint has awesome reference of the CSS3 standard, grouped by categories, using search etc.
CSS makes your life easier
If you design for the web, you probably very often let your creativity go, made something really, really awesome designwise… you sent it to the head of front-end developer and you got a very long list of tradeoffs that need to be done in the design, because hacking things that are not possible to do would take way too long time and budget. So you go back to the drawing board and try doing something nice yet easy to implement. And here is where CSS3 steps in – in most cases that were hard to implement, W3C defined a de facto standard slash property slash method that allow developers to spend their time on refining code rather than spending 8 hours on hacking thing that is not possible the easy way. Also, since it’s a standard method now, it should fall back gracefully if not supported by legacy browser (and by legacy browser in CSS3 I mean IE7, too). Shadows, rounded corners, multiple background images on one element – everything’s now in the house and developer won’t tell you it takes too much time. I will give you a short example.
Below this paragraph, there is a button. Button has rounded corners and outer glow – creating this in Photoshop is matter of two clicks, including one drag. Developing this in CSS2 required using sliding doors, transparent PNGs and few solid hours of swearing and cursing (believe me, been there, done that). Now, it’s using few properties that are built into the standard.
This is how it looks in up-to-date, standards-compliant browser like Opera, Safari or Firefox 3.5:
Design trade-offs
As a designer, you have to know one thing – web is a very specific medium that has multiple ways of displaying things. Browsers differ when it comes to supporting standards – it’s not designing for print, where everything looks the same. As a designer, you should also adapt the graceful degradation term. You need to be aware that making a website look exactly the same in every major browser requires much more work, which means more money and time you need to spend. Making it look exactly the same in every browser is impossible. Period.
Designers are perfectionists – I know that. That’s why instead of focusing on swarming developers with tickets that say that the website does not work exactly the same in every browser, ask them, what won’t work in not compliant browsers and prepare an alternative that will work and at the same time will be satisfying for you as a designer – that’s what I’m trying to do when designing a website and it works in most of the cases. Build your designer-developer relations on mutual respect, help your developers and you can be sure they will be more likely adapting to your workstyle. Find consensus, let things degrade gracefully rather than look exactly the same – this makes the site lighter, code more clean, easier to search for crawlers et caetera.
Summing up
To sum up – CSS3 is awesome, but be sure that monolithic structures like Internet Explorer won’t support it anytime soon (implementing CSS2 to pass ACID2 compatibility test took them two full version life cycles – from IE6 to IE8), so be prepared for tradeoffs. Designers and developers – work closely together to find places where you can just let something look just good instead of excellent and where it is not possible. Make sites look good in outdated browser just to encourage users to upgrade – this will make web a better place.
0 Response to “First thoughts: using basic CSS3 in a live project”