CSS3 = Fail

22nd of June 2010 5

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?

Filed under § CSS, Design, Jquery — Tagged with , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Share it!

Was it good for you to?

Sponsors

Support for the site!


5 great comment(s) for this post

  1. Glenn Nelson 3:43 pm 22/06 of 2010

    I’m honestly glad that someone out there understands that just because you can make some little sh*tty site that looks great in Chrome but sucks everywhere else doesn’t cut it. Making a site that looks the same and functions the same in all browsers is what marks a true web developer. This site is definitely one I’m going to follow.

    Reply
  2. A2daK 11:07 am 10/05 of 2010

    CSS3 is a great step forward in my opinion. You can easily code up fallbacks if you are worried about css3 styling degrading properly on old browsers. Im fairly sure that most modern browsers (Chrome, FF4 & Safari) support the majority of CSS3 properties.

    Users who have old browsers such as IE6/IE7 or just IE in general deserve to suffer a little. They end up suffering ascetically.

    Some of the webkit only transform CSS3 is a bit wild but never useless…

    Reply
  3. Level 5 (of 10) Watch out, this user is an admin! His job is to make everything on this site work well - don't mess with him!

    Tommie Hansen (16 comments) 9:15 pm 11/05 of 2010

    @A2daK: I agree that it CSS3 a step forward…. for CSS.

    I’m not worried. The problem is more that we tend to see a trend where people show off their “glorious” stuff with the latest “cool” thing that doesn’t work for 70% of users.

    It is a little like when people that design only on MACs show of their cool stuff with the problem being that it look like crap on a PC due to difference in anti aliasing. It’s just so blatantly lame on unprofessional.

    The reason i wrote the post is due to the fact that i’m so sick of posts showing the latest and greatest in CSS3, but that never seem to consider those other 70% that lives in the real world (“real world” as in The Matrix — yes!).

    For now CSS3 seems to be more about effects and less about *REAL* layout. I really miss stuff like cross browser columns (for text content) etc that really *WORK* (not a javascript hack that “sort of work”).

    Reply
  4. Chris Caldwell 6:56 pm 30/01 of 2010

    If this article was written when browser support for javascript was just coming into practice you’d have written something to the effect of “don’t use javascript because it’s not the supported by the lowest common denominator browser”.

    Honestly, if we keep pandering to IE as the lowest common denominator – we as a design/dev community are saying go ahead IE, dictate the course of the web to us. However; if we build for the future of the web we want, by providing better experiences in browsers that are support modern standards and techniques, we can help drive technology forward.

    Browser update models and release structures have changed for the better ensuring faster adoption of new standards and the IT departments and out moved browser manufacturers that aren’t paying attention will be left behind.

    And if the content is also designed to work on these outdated browser platforms then there is absolutely nothing wrong with using new techniques and tools that modern browsers support.

    Your jQuery example only supports the argument for CSS3 being used and implemented. Does anyone remember the day when your web pages had to work without javascript. This argument, in my opinion holds no water. CSS is a presentation layer and should be used for visual styles as well as layout.

    I agree that ‘progressive enhancement’ is a viable approach but favour ‘graceful degridation’ as it’s focus is on pushing technology forward first.

    Progressive enhancement VS Graceful Degradation is the real debate at the heart of this article.

    Progressive Enhancement == Build for the world as it appears at this exact moment and extend it to more mature browsers that are driving the technology.

    Graceful Degradation == Build for the world we want and ensure that people using reasonably older technology can still get to the content.

    Both will achieve a similar result, but the intent and purpose are different. Do you want to push the technology forward or slow it down and try to keep it where it’s at?

    Reply
  5. celine borse 2013 8:52 pm 11/07 of 2010

    Ask no more: The answer, it seems, is hormones (what else?).

    Reply

Your opinion matters. Add it below.


Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Popular posts this month
  • 5 Random posts
  • Cufon: Fixing the damn flickering Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less ...
  • Top posts this month Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less ...
  • jQuery simple tabs Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less ...
  • Simple CSS menu Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less ...
  • Simple CSS buttons Today Smashing Magazine is writing about not being afraid of using CSS3. As a major publisher where lots of less ...

Follow me @design_byme RSS Design Feed

Copyright Tommie Hansen since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.