posted on:November 12, 2008

100 CSS compatibility or degrade correctly


I was talking with a front-end developer friend recently and was arguing that I would only use CSS3 rounded corners and shadows in the near future. No more pixel perfect for IE if it degrades correctly. My friend was not far from being outraged, for him, the user experience is King, and all users should have access to the same experience.

New CSS properties have enabled us with so many possibilities. Shadows and rounded corners are now possible in CSS3 but we have a problem, IE users do not see them. Should we use them anyway or should we implement longer CSS tricks to get those beautiful effects for IE users.

From an ethical point I agree with my friend, we should always have a website with no graphical difference in all major browsers. It’s part because most back-end developers can’t stand HTML and CSS browsers compliancy that front-end developer job exists. Clients also pay for something they should get, when 50% of their users base do not see those effects, one could argue that there is a problem.

At the same time, should we lose countless hours implementing CSS hacks and add loading time to our sites? All this because Microsoft has been lazy and stopped to work on IE until Firefox came along and by the same way stopped the CSS advancement in genral.

In my day to day work, we had started using less rounded corners and practically no shadows because of the integration hassle. Now the designers can have all the fun they want without getting all the front-end team on the verge.

An example?

If you want all your users to see your effects here is what you would need to do:

Create 4 png rounded corners and 4 shadow bar and enclose all this in a array of divs or a table. You will also need your preferred IE6 png hack. The designer changed his mind about the color? How unfortunate, redo all your png. Add a bit of debugging time in the bag, because that’s also likely to happen.

Now with CSS3, we just had these CSS lines, and we are done in 1 minute.

border: 1px solid #b2c0cb;
border-radius: 7px;
box-shadow: 1px 1px 15px #5c5c5c;

*For now we need to add some other css lines to target the browser because it is not yet completely implemented .

Methods

What is even more frustrating is that Microsoft will not add these properties in IE8. Come on! Rounded corners will be outdated before they have them implemented. In fact they were so busy trying to meet Acid 2 that they didn’t even implement one new CSS3 feature since IE7, beside page-break (Webkit scored 100 on the acutal Acid 3 test by the way..). Have a look at this MSDM page, it tells a great story about Microsoft and CSS implementation.

Maybe I’m only a bored and angry front-ender who should do better, but I decided to stop hacking through my site and stop adding complexity and loading time when there is no need to be. Front-end should be less complex. As long as it look ok in IE, features like rounded corners and shadows will stay for Firefox, Safari and Chrome.

** Box shadows are coming in Firefox 3.1

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (11 Comments)

  1. Brian
    November 13, 2008

    While businesses have a legitimate concern for the user experience, there's an alternative point of view here. Internet Explorer is an inferior product, but by hacking CSS to make everyone's user experience the same, you remove any incentive for that user to upgrade. The average user doesn't care about standards compliance - he cares about the way things look. If there is no tangible benefit to choosing an alternative browser, there's no reason for him to switch away from Internet Explorer. If developers stop hacking to accomodate IE users, there will be an actual benefit from switching to an alternative. If this were a large enough trend, it could force a change - either a significant drop in Internet Explorer's market share or a commitment from Microsoft to implement new features.
  2. Ben
    November 13, 2008

    I don't necessarily agree with Brian that by not supporting IE we're giving users a reason to upgrade. The fact is that most users probably don't even know other browsers exist, or don't care, which is certainly supported by the statistics on how many people still use IE. So if a user who lacks knowledge or care sees a web page that looks a little dodgy, they'll judge the design itself, not the compatibility of their browser. Which is why we have to support IE whether we like it or not.
  3. Rob Hofker
    November 13, 2008

    I think this is the only sensible way forward. I have been pondering about this approach for some time and like you I come to the conclusion that it's time to move on. Let it gracefully degrade in IE (6, 7 or 8) just like we used to do with NN4. The *better* browsers will indeed look better and there's no need for backward compatibility for *fancy* things like rounded colors and shadows. Heck, it's time to stop supporting not just IE6, stop supporting IE all together! Just check if it just plain looks sort of OK and that it is still usable. Nothing more.
  4. theamoeba
    November 14, 2008

    Why must we be held back by users who do not upgrade? I mean, build with the latest techniques and then go back and create the hacks for the older/unsupported browsers later.
  5. Christian Dalsvaag
    November 18, 2008

    I totally agree with Brian. We have to drop the support for IE, but developers need to agree on this, how will we get change if we do nothing? I'm not releasing any more pages built "for" IE; actually I'm displaying notices via Javascript (Alert) to the user that he is using an outdated version for users (< IE 7) but I'm dropping all IE support from now on; it's just a hassle. It takes time for us as the developers, and it costs money for the customers. We need to force the users over to a more standard-compliant market, and by using JavaScript Alerts we can tell them this - and provide them with an URL to FF, Safari or whatever. Great post btw.
  6. Kim H
    November 19, 2008

    Many people I've spoken to and including myself charge extra for pixel-perfect IE rendering, yet the company I work for demands it. The way I see it, IE users are generally less web-savvy people, and typically use their computers with suspicion. Unlike Mozilla, I think it is a mistake that Microsoft does not force them to upgrade their browsers, as, from experience from working with my parents, many IE users don't even realize that IE7 exists. . Further, many do not even realize that their browser is sub-par and outdated. Great post, also. It certainly gets me thinking.
  7. Rahul
    November 24, 2008

    I totally agree with Kim H. Even today too, people with whom I've been around, don't seem to realize that there is this new version of IE which is IE7. And still a large portion of the ppl still don't even know that there are other browsers other than IE. So it is a bit kinda dilemma for designer like us whether to really design sites for cross browser compatibility or rather a much 100% CSS compatibility. But actually, we do have to update ourselves with the latest in technology too. Oh yes btw, thanks for this article on CSS. I'm always interested on articles abt CSS.
  8. Baz L
    December 1, 2008

    Just dittoing everyone I guess. There used to be this: http://www.savethedevelopers.org/ That informed the user to upgrade (even to IE7, so it wasn't just a Friefox movement). They included a neat lil' javascript snippet that would detect IE 6 and below and popup a nice, unobtrusive, link to download IE 7. Now the site just redirects to IE's page. Great job.
  9. john
    December 9, 2008

    it's cool articles!~~~
  10. Michael
    December 19, 2008

    "So if a user who lacks knowledge or care sees a web page that looks a little dodgy, they'll judge the design itself, not the compatibility of their browser. Which is why we have to support IE whether we like it or not." NO. As others have said, give incentives to upgrade, and give a link!
  11. Lance22
    April 8, 2009

    Yeah, like it or not that's what you have to do. I was hoping that IE 8 would be better in release than it was in beta but alas it's little better with CSS than IE 7. In a perfect world we could have one style sheet easily understood by all browsers. But, it's not a perfect world and never will be.

Sorry, the comment form is closed at this time.