Skip to main content

Are You Using CSS3 Appropriately?


Advertise here with BSA

Are You Using CSS3 Appropriately?

CSS3 is exciting. When it was introduced, it seemed like the untapped potential of Web Design was finally unlocked.

It proposes speedier web page response times due to the reduction of images needed for things such as text effects and web buttons for our UIs.

It cuts back our dependency on JavaScript for visual presentation purposes such as animation effects, not only resulting in less code (always a good thing) but also equating to even better web page performance.

It promises less reliance on expensive graphics software like Photoshop.

But has anything, in the broader scheme of visual design, really changed? We’re still dealing with the same users, the same content and the same user-centered design philosophy.

The new CSS3 capabilities should be treated just like any other web technology we work with: It should always support user-centered design and the site’s goals and purpose. And if CSS3 is applied in any other way than that, then it becomes a dispensable component within our website production process.

CSS3 Does Not Change Design

In terms of design principles and visual presentation best practices, nothing has been altered by CSS3, even when we’ve been given fancy transitions, transforms and typography effects to play with. These are all superficial tools in web design, and we’ve had these things even before CSS3.

From the user’s perspective — which is always the most important viewpoint — these new cosmetic CSS3 properties matter even less. Most users, we must remember, won’t notice the subtle effects we put in our designs, like links changing colors smoothly instead of immediately. These are on the aesthetic level, and shouldn’t get in the way of the user experience.

The real paradigm shift comes in the new way of approaching and carrying out our website design process.

For example, with better support for media queries, we can now more easily produce flexible and responsive web designs that optimize the user experience depending on what browsing device they use. That’s huge, and introduces plenty of new concepts in our traditional site-building methodology.

With the new CSS3 selectors, we now have a much better ability of targeting HTML elements and carrying out animation effects without the use of JavaScript or a web development/Ajax library like jQuery.

CSS3 isn’t about fancy text shadows and gradients; that’s only at the surface of it. It should be about enhancing the user experience and being able to produce better sites in a more efficient manner.

Using CSS3 Appropriately

Now that we have more tools at our disposal, we can design interactions more naturally. We can use these new features to our advantage by applying them where usability and the user experience is improved.

Or we can use CSS3 to our detriment, where we focus on the new superficial CSS3 features, loading up our work with extraneous text shadows, color gradients and fancy rotation effects simply because we can.

When we decide to use CSS3 in our work, we should always keep in mind that function is more important than form. There is an important line between a beautiful design and a good design.

As a rule, only use CSS3 when there’s a good reason to do so. For example, you might use the text-shadow CSS3 property to create a good visual hierarchy, pulling greater attention to more important textual elements. But if everything has text shadows for no other reason than because it looks cool and is out of the ordinary at the expense of readability, then it is definitely not a good use this new web technology.

We have to put usability, accessibility and the user experience at the forefront of the design process. Everything else comes second.

The Bifter is an example of heavy reliance on gratuitous CSS3. The site looks great on a CSS3/HTML5-supporting browser like Google Chrome.

Unfortunately, it almost falls apart in IE7.

In this instance, the experience of users with browsers that do not support CSS3 was neglected for form. The same look could’ve have been created using older web design techniques (e.g. no CSS3, no HTML5, using a PNG fix for alpha transparency, etc.) without sacrificing the user experience of IE7 (and below) web users.

Using CSS3 should:

  • Support — and never hinder — usability, accessibility and UX
  • Improve web performance
  • Speed up website development

If, however, you find yourself in a situation that doesn’t achieve any of the above, then is CSS3 really the right tool for the job?


We’ve been given a lot of power, and thankfully, we’ve been fairly responsible with it so far. As a whole, our web designs haven’t taken a step back because of CSS3. We’re using the new features smartly, pushing the envelope without neglecting the overarching goals of Web Design, which is to support the needs of users.

So long as we continue in this vein and we’re keeping it simple, I don’t think we have to worry about CSS3 being an issue in Web Design.

Related Content
About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

Are You Using CSS3 Appropriately?
Jacob Gube
Tue, 04 Oct 2011 10:00:39 GMT


Popular posts from this blog

Apple will disconnect ‘obsolete’ first-gen Apple TV from iTunes in May

Apple has announced today it will drop iTunes support for some older devices from May 25. This includes the first generation Apple TV, and also any PC running Windows XP or Vista. The company is introducing new security changes which will prevent those devices from using the latest version of iTunes.
Apple says that the original Apple TV is an "obsolete Apple product" and will not be updated to support security changes. Only those with the second generation of Apple TV or later will be able to access the iTunes store.
Windows XP or Vista users won't be able to use the latest version of iTunes, but older Windows computers can still use previous versions without support from Apple. Those who do so, however, won't be able to make new purchases or re-download previous purchases on that computer. If you're on on XP or Vista, you'll need to upgrade to Windows 7 or later to continue using iTunes normally.
The writing was already on the wall for these devices: Wi…

Windows 10: Microsoft retires HomeGroup

Microsoft plans to remove the HomeGroup functionality from its Windows 10 operating system. The company made the first step towards that goal in the most recent Insider Preview version of Windows 10 as it disabled it in that build.
In "a note about HomeGroup" in the release announcement of the Windows 10 Insider Build, Microsoft confirms that HomeGroup will be retired.
The company introduced HomeGroup in Windows 7 as a new option for home users to access printers, files, and media in home networks. The core idea was to assign all devices to a single HomeGroup to share access to files and printers between all devices.
It is unclear how popular the feature was and is. It is clear however that it was never the only option that Windows users had in this regard, and it was not the best either for certain use cases. You could not add Mac OS X or Linux devices to a HomeGroup for instance.
The end of HomeGroup
Easily connecting to and sharing the important pieces of your digi…

BBM Desktop is now a thing for Android BBM beta users!

With BlackBerry Blend having met an arguably early demise, folks looking to use BBM on their desktop have been out of luck. That might soon change, though, as the latest BBM beta release for Android has a BBM Desktop mode.

With BlackBerry Blend having met an arguably early demise, folks looking to use BBM on their desktop have been out of luck with no desktop application available. That will soon be changing, though, as the latest BBM beta release for Android has introduced a new way to bring BBM to your desktop.
Read More »