Afraid of CSS and valid code? Read this.

Well, I suppose not too many people who read what I write here are actually afraid of CSS and valid code. Nevertheless there is a good article by Ben Henick at A List Apart that is well worth reading since it can help you with arguments the next time you end up in a discussion with somebody who is afraid of CSS and Web standards.

In 12 Lessons for Those Afraid of CSS and Standards Ben shares the most important lessons he learned on his way from table layouts to mastering CSS. I can definitely relate to much of the article since I’ve had to learn many of the lessons myself. One of the hardest was this:

Lesson No. 2: It’s not going to look exactly the same everywhere unless you’re willing to face some grief… and possibly not even then

Once I learned that lesson everything became a lot easier. Minor rendering differences between browsers or platforms don’t bother me much anymore, and I can’t remember having a client complain about that in the last several years.

What I find a bit curious is that many people who haven’t yet learned this lesson use tables for layout since they “look the same everywhere”. I say that is a myth, since using tables for layout will not make things look exactly the same everywhere either. I remember the bad old days of using JavaScript based browser sniffing and document.write() to load different CSS files (with nothing but font sizes and colours) for different browsers into table based layouts.

Besides, very few people who are not web designers will take screenshots of a site in ten browsers on three operating systems and compare them in Photoshop.

Posted on October 11, 2006 in CSS, Quicklinks, Web Standards

Comments

  1. October 11, 2006 by Nick

    It probably took me about a year of experimenting to finally “get” CSS and semantic markup. I did the usual progression, from all tables to all divs to why-oh-god-does-this-not-work-in-IE to semantic markup.

    It took about a year because I did much of that learning on my own time—as a Web developer, my job was to get sites programmed and out the door, not to reformat whatever the designers gave me because it wasn’t “right.” And the designers were giving me sliced-up layouts directly out of Photoshop. Many of those sliced-up layouts didn’t translate well to CSS layouts, and nobody seemed to care but me.

    I was in a particularly difficult position because the company that I worked for did behind-the-scenes work for designers, who in turn interacted with the clients. I couldn’t explain the benefits of accessibility to clients directly; the best that I could do was to try to start a designer-developer relations program to explain accessibility and standards. It was pretty successful, but I did meet resistance—the old way of doing things made them money. Why risk change?

    The other problem is that CSS isn’t intuitive. The W3C has forgotten that what made HTML originally popular was that it was stupid silly easy. CSS isn’t silly easy. Try explaining the concept of “clearing a float” to someone in one sentence. You can’t.

    Finally, after having recent experience developing in ASP.NET 2.0—which a LOT of enterprise businesses use—I’ve learned that its native CSS support is abysmal. Sure, you can override renderers and produce semantic markup, but how many people change the defaults? I bet not many.

    The secret to CSS acceptance lies not in browser support but in tool support: the Photoshops, the ASP.NETs, and the Dreamweavers of the world determine what the Web looks like. A List Apart is just preaching to the choir.

  2. October 11, 2006 by manuel

    Besides, very few people who are not web designers will take screenshots of a site in ten browsers on three operating systems and compare them in Photoshop.

    The and here (emphasis mine) is very important and you’re using it correctly. Anyway, I’d like to highlight it in case people belives taking screenshots of a site is ‘deprecated’.

    Comparing screenshots in photoshop is ridiculous. Taking screenshots of a site, however, serves to prove the client or your supervisor that the site works well enough in your target browsers beyond IE and FF. (Like, your floats aren’t falling apart in IE Mac, or your font-size isn’t way too small in Konqueror, I mean, large layout-breaking diffs, not a pixel here or there)

  3. October 11, 2006 by BillyG

    Manuel beat me to the best sentence.

    It’s nice to know that the two I’m concerned with (because of the group that uses them), are the two that render best for me: FF & Opera. (Sorry no inhouse Mac).

    I have IE pretty close but your article takes the words right out of my mouth.

  4. October 11, 2006 by Bill Higgins

    Besides, very few people who are not web designers will take screenshots of a site in ten browsers on three operating systems and compare them in Photoshop.

    Great point - the only people who will be keenly aware of the differences are the designers and developers; everyone else will likely always live in their browser of choice all of the time.

  5. October 11, 2006 by Kevin

    I love that last sentence too. Made me smile.

  6. October 11, 2006 by sole

    Can we buy t-shirts with Roger’s face and a “He’s my idol” lema below? Can we? please!

    Last sentence was superb. As usual!

  7. October 12, 2006 by Jonathan E

    Besides, very few people who are not web designers will take screenshots of a site in ten browsers on three operating systems and compare them in Photoshop.

    Agreed, in fact, very few people who aren’t web designers even have more than 1 browser installed on their computer (or are aware that they have more than 1).

  8. October 12, 2006 by Aaron Allport

    I must say that I agree with Nick, and that it is the tools which have to offer good support for CSS and produce valid sematic markup.

    I have been an asp.net 2.0 developer for a couple of years now, and Visual Studio 2005 still makes me laugh with its support for CSS and markup. I have had to create some asp.net 2.0 boilerplate markup pages and few different CSS sheets that I have to import into my web projects, just to save me hassle.

    Apparently, Microsoft are supposed to be geeting serious with their upcoming Expression Web tool (currently in Beta 1). We’ll see…..

  9. October 12, 2006 by Damian Karlson

    Does anyone have any recommendations as to the easiest way to check their sites in the various browsers? I usually check in IE6, FF & Opera (but not that often with Opera — I probably should). What is considered due diligence and what is going overboard?

    How does one check with IE6 and IE7? There isn’t a standalone IE6 that I’m aware of, and IE7 installs over the top of IE6. And what about Mac? I don’t own one yet.

    Any suggestions or ideas would be great.

  10. October 12, 2006 by Matthew Ginop

    This maybe a little off topic, but when should we determine the right time to stop supporting certain browsers (e.g.: IE5)?

  11. October 12, 2006 by Justin Wignall

    Just a quickie for those people mentioning asp.net 2.0, take a look at the work going in to

    http://www.asp.net/CSSAdapters/

    “Expression Web” will use .NET 2.0 framework and so AFAIK the controls will have the same issues as using VS 2005.

  12. October 12, 2006 by Cris

    I say that is a myth, since using tables for layout will not make things look exactly the same everywhere either.

    So true. I think this myth persists in part because to the people who say it, “everywhere” still means “in IE/Win and in Netscape/Win.” And maybe they’re beginning to add “Firefox/Win” to the list.

  13. October 13, 2006 by Matt Robin

    “Besides, very few people who are not web designers will take screenshots of a site in ten browsers on three operating systems and compare them in Photoshop.”

    (Hides!)

    Oh wait…you said: who are ‘not’ web designers…phew - I feel more normal about that now! ;)

    Yeah - pixel perfection is a rotten myth created only to turn brains in to a sticky goo from repeated frustration! It’s a novice lesson learned the hard way (for some).

  14. October 13, 2006 by Splat

    Lucky I’m a web designer…

    I was recently working for a client where they did want their sites to look pixel perfect in Win IE and Win FF. So I got my CSS working in FF, then took a screen grab and set that as my background image on the body element, and got to work applying hacks for IE… what a mess.

    There were still some parts that weren’t perfect, but I don’t think the client ever checked it anyway.

  15. October 14, 2006 by Wulf

    lol @ last para

  16. October 14, 2006 by Sami

    Damian: From what I’ve understood, there are several different ways to run IE6 and IE7 on the same computer. However, I think the following method is one of the easiest ones (tested on Windows XP):

    1. Install IE7 normally from Microsoft’s website.
    2. Download ie6eolas_nt.zip from the Browser Archive at evolt.org. Simply extract the contents of the ZIP file to some directory (for example, “C:\Program Files\IE6”) and run iexplore.exe. Now the standalone IE6 should be operational.
    3. In order to make conditional comments work in both IEs, follow the instructions provided in the “Repairing Conditional Comments” section in Taming Your Multiple IE Standalones.

    So far, I have only encountered two problems with the standalone IE6:

    • Print preview doesn’t work (a blank window is displayed)
    • The browser crashes every time the Favorites menu is opened

    Aside from the above glitches, the standalone IE6 seems to be working fine. You can also have both IE6 and IE7 running at the same time, too.

  17. October 16, 2006 by Damian Karlson

    @Sami

    Very helpful post. Thank you! For some reason, I thought that an IE6 standalone wasn’t available.

    Now if only there was an easy solution for the Mac problem. :)

  18. October 26, 2006 by Wulf

    @Damian

    As far as testing for Safari, there’s Swift, an open source browser for Windows based on WebCore and JavaScriptCore, the rendering and JavaScript engines used in Safari. It’s designed to let web developers test their sites for Safari without a Mac. It’s currently in the early Alpha stages, but it looks promising. :)

    More info: http://www.webstandards.org/2006/08/09/safari-for-windows/

    Homepage: http://webkit.org/

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.