CSS3 = Fail

22nd of June 2010 1

CSS3 = Fail

Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less knowing newbies come to read about the latest and greatest in design this is utterly stupid. Why you say?

Here’s why
Beginning a sites design with CSS3 in mind is bad because the end result will for most users (Internet Explorer) not be as you want anyway so you should always design for the most common denominator (Internet Explorer 7 or 8) and make enhancements afterwards (called progressive enhancement in web design terms).

They, Smashing Magazine, continues by showing of a list of “great” stuff that uses CSS3. It’s marvelous but since most people won’t be able to see it anyway why not construct it properly and make it work for everyone? To just do it for the small few is a very bad and unprofessional practice. You wouldn’t last long with clients when all the time you had to explain why this CSS3 only works for about 40-50% of the viewers.

Why, oh.. why just not do it properly so it works for at least 90% instead? Most of the CSS3 based and “cool” stuff can actually be done with some clever CSS, xhtml or why not javascript that reaches around 97% of the users?

Here is an example on how to achieve the popular 1px 1px #xxx text-shadow for example:

$(function () {
//Simple Text Shadow by Tommie Hansen
var m2a = $(“#menu li”); //What selector(s)?
m2a.append(““);
m2a.each(function() {
var dupeText = $(this).text();
$(this).find(“em”).text(dupeText);
});
}); //end dom-ready

This example uses jQuery and appends a basic em-tags to the elements of your choosing. Now all you got to do is format that em-tag with CSS and you’re done — Crossbrowser text-shadows!

And yes, most things with CSS3 is this simple to just apply cross browser so why not promote best practices as well instead of confusing all the newbies with attractive, but useless, stuff and show offs?