Dvorak Rants on CSS

John Dvorak writes on CSS after working on redesigning his weblog, the article ended up being extremely funny. From the write-up:

As we move into the age of Vista, multimedia's domination on the desktop, and Web sites controlled by cascading style sheets running under improved browsers, when will someone wake up and figure out that none of this stuff works at all?!

Comments

Two problems

[rk]

1. John Dvorak, unfashionably late as always. It's news that CSS has problems? Hasn't anybody who's done even casual web development known this for six or seven years now?
2. To summarize Dvorak's argument: "OMG Inheritance is just too hard to understand LOL"
3. ("Two problems" "Three, Sire!") When someone characterizes something as "extremely funny", I'd like to think the article will at least make me grin once. I'll admit to a moderate anti-Dvorak prejudice, but it came off closer to the neighborhood of "extremely stupid" than "extremely funny".

Re:Two problems

[eln]

Katz^WDvorak is complaining about it now because he finally got around to trying to redo his blog with it. From the article, it appears he's basically experiencing some pain with his first exposure trying to format using a technology that he doesn't really understand. No real surprise there.

Sure, CSS has issues, but most of his frustration appears to stem from the fact that he really doesn't know much about CSS.

Re:Two problems

[Gospodin]

Don't worry, IE7 will solve all of your problems.

[insert failed attempt to keep a straight face here]

Re:Two problems

[Bogtha]

it appears he's basically experiencing some pain with his first exposure trying to format using a technology that he doesn't really understand.

Precisely. The first clue should be when he says:

CSS's real benefit was that the layout not only could be changed easily but also could become dynamic: The content is stored in a database and presented as necessary, with instant updates. With dynamic content, it's possible for 100 people to go to the same Web site and get 100 different versions.

What the hell is he talking about? Not only is that not CSS's "real benefit", I can't even figure out how he managed to get the idea that this is what CSS is all about. Did he take one look at the CSS Zen Garden and completely miss the point or something?

He can't even get basic facts and terminology right:

The first problem is the idea of "cascading." It means what it says: falling--as in falling apart. You set a parameter for a style element, and that setting falls to the next element unless you provide it with a different element definition.

Nope, wrong. That's inheritance. The cascade is when you resolve rules found in multiple stylesheets.

You don't "set parameters for style elements" at all. Style elements are instances of the <style> element type, and they are used to include parts of a stylesheet in an HTML or XHTML document. You don't set parameters for elements either. He could be talking about attributes, or perhaps properties, it's hard to tell when his terminology is so muddled.

Finally, this bit is hilarious:

Worse yet, nobody except the most techie insiders wants to talk about this mess.

That's right, he's been totally oblivious to CSS, and now, when he starts to learn a bit about it, he blames his ignorance on some sort of conspiracy! That's right, us "techie insiders" have been keeping the truth from you, muhahaha!

Re:Two problems

[Zaplocked]

[insert failed attempt to keep a straight face here]

Not running an ACID2 compliant web browser, I see :)

Re:Two problems

[laffer1]

Yes, Microsoft is at fault for not updating IE in so many years and then only supporting a few new things in ie7. However, its not just Microsoft. Netscape didn't follow standards until it was too late (netscape 6 was not soon enough). Mosaic sucked for a long time. As a designer, I want all browsers to support the exact same things with the exact same behavior in 99 percent of cases. (implementations will vary some) However thats a pipe dream.

How about this: All browsers must support CSS1 completely and CSS 2.1's positioning at least. floats and centering with margin: auto should frickin' work. Then we need something like SVG and png w/ transparency. That would at least allow us to do flash like things and use a decent graphics format. Flash is bad since it doesn't support all platforms. Most people say its great because it work on x86 linux, windows and the latest OSX. What about everyone else? (*bsd, solaris, linux on any other kind of processor, OS/2, etc)

We also need a decent video format that is cross platform for streaming. I don't care what it is just so that everyone actually has it. I'm sick of not getting to watch news feeds because i don't use MSIE with WMP 10 or 11 series. (yes MSNBC you suck) I can't even watch it in firefox on WINDOWS.

Please someone with a brain come up with standards and find a way to force these people to use them. That is the real trick. Its not just microsoft but all the idiots who only develop for whatever the hell is on their computer that they like.

Re:Two problems

[YA_Python_dev]

Instead of using some WYSIWYG editor I decided to strike it out on my own and write a page from scratch using the "standards" that the W3C touts.

Writing web pages following the standards is a good thing, but making a complex CSS layout work with some buggy browsers out there is hard. The solution is to not recreate the CSS from scratch, but starting from an already debugged existing layout.
E.g.:

1. http://css-discuss.incutio.com/?page=CssLayouts
2. http://www.dezwozhere.com/links.html
3. http://www.positioniseverything.net/articles/onetr uelayout/

Too many CSS web developers are trying to reinvent the wheel.

Re:Two problems

[Just Some Guy]

With all do respect, I shouldn't have to be a "decent" web designer to be able to put up a personal homepage that looks the same in all browsers.

You're halfway right, but only in that decent web designers understand that their pages won't look the same in all browsers. That's the nature of the medium. If you can't truly come to grips with that concept and work with it instead of against it, then you'll never become good.

Again, web is not print, and you're only hurting yourself if you try to treat it as such. Real web design recognizes that users have different browsers, operating systems, plugins, extensions, fonts, sizes, monitors, gamuts, resolutions, DPIs, and so on. It is completely, utterly impossible to make an end run around those differences. Either make a design that scales and flows well on every client you can get your hands on (including Lynx and cell phones), or make a pretty PDF and be done with it.

Re:Two problems

[ars]

'Don't worry, IE7 will solve all of your problems."

Well, actually it does. Except I'm talking about this IE7: http://dean.edwards.name/IE7/

I installed that, and suddenly I was able to write standard css, and not go crazy trying to make IE work.

It's actually quite wonderful. I don't know why Microsoft can't aford to fix it's own bugs, and needs other people to do it for them, but hey, at least it works.

What's the alternative?

[KingSkippus]

The real problem is that no two browsers--let alone no two versions of any one browser--interpret CSS the same way! The Microsoft browser interprets a style sheet one way, Firefox interprets it another way, and Opera a third way.

The problem is not with the CSS standard, the problem is with implementations of that standard. IE has been on a different planet for years when it comes to implementing standards. It's kind of laugable that there's the "Microsoft CSS standard," then there's the real CSS standard.

Firefox does better, and unlike Microsoft, they're actually trying. (And making a damn good effort of it, IMHO, it's actually really close from what I can tell.)

I don't have much experience with Opera, but I haven't had much trouble with it when dealing with CSS.

Remember several years ago when several car manufacturers got busted for putting bad tires on new cars? No one argued that having tires on cars was a broken idea. The same is true in this case. Don't ditch CSS, just fix the friggin' browsers.

Besides, what exactly is the alternative? Putting style tags on each element? For one thing, you'll run into the same problems, and for another, I'm confused as to how that is easier than using CSS. Going back to tag-level formatting? No thanks. Frankly, that was a hideous idea when they came up with it the first time.

It was a nice rant, though, but misdirected.

Re:What's the alternative?

[jfengel]

On the font-weight vs. text-decoration distinction, CSS is inheriting the terminology from typesetters and type designers. Technically, "Times Roman" and "Helvetica" designate "typefaces". "Times Roman Bold" and "Helvetica Italic" are "fonts". It's a property of the design itself; the bold and italic aren't simply automatically-derived versions of the typeface but require an artist to sit down and design them separately. (Some even incorporate the size; Times Roman 24 isn't always just a zoomed-out version of Times Roman 12).

(It gets even more complicated with the notion of "font families", but I don't understand the distinction there, either.)

Underlining, on the other hand, is just something you do to it; there isn't any "Times Roman Underlined". That makes it a property of the text, not of the font or face. You don't need a designer to add it.

It sucks that you need such details to do something that you get just by pushing a button in every WYSIWIG word processor in the world. What we need, and what I haven't seen yet, is a WYSIWIG designer for CSS. I envision something equivalent to what Word and OpenOffice call "character styles", but frankly most people don't use them even when they're available.

And Word/OpenOffice still lack (for the most part) an equivalent of CSS layout, which is the part I still find hard. As you point out, CSS's box model seems to be missing some really basic ideas, and that causes many people to just say, "This is 300 pixels wide and it looks fine at a font size I'm comfortable reading and I don't want to f*** with it any more."

Dvorak, IT's own Andy Rooney

[OakDragon]

Didja ever notice how web pages look different? Why do we have all these fonts? Shouldn't one or two fonts be enough?

Ah yes, material for years.

Extremely Funny?

[neonprimetime]

Ok, I'll summarize the funny parts.

1. _
2. _
3. _

The only reason I use CSS is because color coordination does not run in my genes.

Whycome?

[Anonymous Coward]

Whycome when Dvorak troll he gets linked to and when I trolls I get modded down?
Dat jus not fair.

Re:Standard versus Proprietary?

[mopslik]

I'm in the process of starting our CSS layout from scratch for all of our blogs (I hired one graphic designer and have 2 more volunteers). We've spent 40 hours in the last week testing a few ideas on a variety of browsers and they're a mess.

The troubles you are experiencing are not CSS problems, per se, but rather piss-poor browser implementations of CSS. If browsers followed the specs, you'd probably eliminate 99% of the issues right off the bat.

interactive transcript

[revery]

Cast:
John Dvorak: played by a angry, crying, screaming Horatio Sanz
Normal Human: played by you (unless you are John Dvorak)

Dvorak: CSS IS STUPID!! I CAN'T MAKE IT WORK SO IT SUCKS!!! STUPID STANDARDS BODIES!!! WHY DON'T THEY MAKE ALL THE BROWSERS WORK THE SAME?!?!? WHY!?!?!

Normal Human: Uhm, John. The standards bodies aren't in charge of the browsers. And lot's of people use CSS on sites that look practically identical on all the major browsers.

Bvorak: NO THEY DON'T. I CAN'T MAKE IT WORK, SO IT SUCKS!!!

Normal Human: Maybe if you bought a good book on CSS. Something by Eric Meyer...

DVORAK!: BUT IT CASCADES!!!

Normal Human: It's suppopsed to cascade. Just calm down.

DVORAK!!!: A BEAR ATE MY PARENTS!!!!

Normal Human: ...

DVORAK!?!?!: KHAAAAAAAAAAAAN!!!!!

Normal Human: I hate you.

Internet Connection Losing CSS data??? WTF???

[rainman_bc]

If your Internet connection happens to lose a bit of CSS data, you get a mess on your screen.

When does that happen? When the web server times out because the CSS is too big to host out? Or when Dvorak's AOL connection kicks him off because his free 100 minutes has run out?

C'mon...

Damn Right

[martinmcc]

Unsurprisingly there are a lot of 'omfg css is so easy, you are just doing it wrong' and 'its the implementers problem' type replies. While both these statements are true, they are missing the point.

CSS in principle is a good idea, and in practice, even in its current state, is a great improvement on the alternative, but the fact remains that in order to do a non trivial design that works across all in-use browsers it is going to take a lot of work. To do this in a standard way (without relying on browser quirks) takes more work still. Not particularly hard work, but can be very time consuming. Granted, this is the fault of the implementations, but that is a bit of a moot point to the person who has to spend the hours trying to remove a 1 pixel gap from the side on image in ie, without breaking the appearance in firefox.

As a professional web developer, I rarely am meet with issues that I have any difficultly understanding, the problems come when you design an elegant solution for a problem, implement 99% of it, then find some bug in one of the technologies used requires you to throw it all out and start again, rushing a ugly and hard to maintain solution in order to meet deadlines and avoid the broken bits. Experience help to avoid this, but when you multiply the amount of technologies typical in a web project (server, db, client side scripting, server side scripting, content (html), display (css)) etc. by the number of implementation that may be used for each one, factoring in the rate of change these technologies go through, it become impossible to be ready for all possible limitations/ errors in implementation.

Re:Damn Right

[Anonymous Coward]

No, no, no! I've said it before and I will say it again. The fault is not with the CSS standard, or even with the implementations (though IE has held the Web back by nearly a decade now). the fault is with people who think that a one-pixel gap is so important that they are willing to spend hours trying to remove it. I truly wish to god that pixels had been completely eliminated from the CSS spec, because its presence just encourages people to use it as a unit of measure and think that is acceptable. I bet that one-pixel gap is a problem because you are using an image-based layout, and you are using pixel-locked image formats. Therefore, it is your own damn fault.

CSS was designed for content-based pages, not image-based pages. It is the marriage of a content-specific styling mechanism with an "OMG I need this pixel-precise and exactly matching the colors I see on my mis-tuned CRT with my ultra-tiny font sizes because I never set my system DPI properly" mentality of image-based layouts, predominately springing from graphic designers with their roots and training in a paper-based world, that causes the problems. Stop and realize that CSS is designed to deal with screen sizes from 4" to 56", font sizes from 6pt to 66pt, DPIs from 40 to 350, languages from right-to-left English to BIDI combinations of Latin and Hebrew, text-based terminals to LCD-based graphical terminals to CRT-based graphical terminals to pure-audio sans-graphics terminals, and CSS manages to have a single unified language for dealing smoothly with all of these in a single styling system, and be downright ashamed at your small-minded pixed-based layout woes.

Have you ever tested your pages with a default font size of 8pt and 17pt? On systems with a DPI of 67 and 148? Do you take your pretty page, un-maximize the browser window, grab a corner, and wave it around like mad to make sure that your layout doesn't break no matter what the window dimensions are? Do you put your page on a 21" monitor with 120 DPI and maximize it, to make sure you are not leaving 70% of the window as wasted blank space? (::cough:: cnn.com ::cough::) Stop whining about your stupid pixel and start paying attention to what is TRULY important in web development.

Experts should be optional

[bill_mcgonigle]

Sure, CSS has issues, but most of his frustration appears to stem from the fact that he really doesn't know much about CSS.

He's probably used to HTML. The Web exploded because HTML was easy and anybody could 'get it'. I taught my grandfather HTML over lunch on a sheet of paper in the late 90's. This was good for the web, despite how people bitch and moan about their refined aesthetic sensibilities being offended by amateur GeoCities pages.

Since then the programmers have taken over. HTML documents need to have an XML namespace declaration at the top that most mortals can't remember. The CSS inheritance model is nonsensical, I need a 2-page cheat-sheet to get the syntax right, its designer thinks declaring aliases are 'too complex' and it takes a bona fide css expert to get css positioning working across browsers with a design that survives user-preferred fonts.

I'll start worrying about all this when browsers stop rendering the transitional DTD styled with basic CSS and positioned with tables.

Re:Experts should be optional

[joebok]

...Since then the programmers have taken over. ...

As a programmer, I would like to distance myself from that - it's the graphic artists who have messed everything up. People who are insistant about they want this font here and that font there and this needs to be 2 pixels to the left but that needs to be mint yellow... The people that want it to "look nice" rather than to work are the culprits!!

Re:Experts should be optional

[bill_mcgonigle]

Ah, yes, quite right. That's another facet of the same problem, I think, the de-democratization of the web. I was thinking more about how you need to be a computer scientist to understand the CSS inheritance model, writing javascripts to work around browser incompatibilities, how getting simple jobs done on the web often involves dealing with xml, xml-schema, xpath, xquery, and their ilk, etc., but the designers certainly are doing their best to make websites into magazines rather than interactive hypermedia user interfaces. Personally I don't need random stock photos of smiling people with dreadlocks and thick rimmed plastic glasses using laptops to use a website. Or Flash.

This is why I couldn't stomach web programming!

[Theovon]

I've been writing code since I was 5 when my dad taught me Fortran. As a pre-teen, I learned BASIC. In high school, I learned C and Pascal. In college, I learned LISP, Ada, and C++. My "favorite" language right now, simply because I am having more fun with chip design, is Verilog. Suffice it to say that I have a lot of experience with programming and programming languages and quite radically different ways of thinking about encoding algorithms (software and hardware design are very different from each other).

Coding web pages makes me violently ill.

Back in 2003, I decided to learn web programming. In the process, I learned to hand-code HTML, CSS, Javascript, Java, SQL, and PHP. PHP, I can handle, because it's simple and straight-forward and designed to make back-end writing easy (although I understand that there have been some developments with Ruby since then). SQL makes sense, since it's specialized for database manipulation.

But when it comes to developing front-end web content, I just cannot justify using three different languages for one thing. I mean, I do understand the idea behind specializing languages (PHP vs. SQL), so in the abstract, I see a reason for making a separation between structure/content (HTML) and formatting (CSS). I just have a visceral reaction to having to use two different languages with two different syntaxes at once in this context. Embedding SQL in PHP doesn't bother me. For some reason, CSS and HTML bother me. I think it's because I feel like they're haphazzardly slapped together and FORCED to get along. PHP and SQL have no relation. Each is designed for its function. HTML evolved from a structural markup language into a total mess, and then CSS was invented as a bandaid. Along the way, no one ever thought to actually unify them. And then there's Javascript.

CSS, HTML, Javascript, and Java each has its own different name for each kind of DOM object. WTF!

If you want to do the full gamut of web front-end programming, you have to learn four names for every object or attribute!

What were these people thinking?

They weren't.

And it's never going to get better. 100 years from now, web programming will be tainted by the legacy evolutionary path everything went through.

Just wait for the Semantic Web. Yet another syntax to learn. No unification AT ALL.

Re:Internet Connection Losing CSS data??? WTF???

[Bogtha]

It's when there's a hole in one of the tubes, all the CSS starts to leak out.

Re:Standard versus Proprietary?

[Waffle Iron]

Sure it has its flaws, but you can be assured that if it looks nice in one browser, it'll look nice in all of them the same.

For me, all Flash sites look exactly the same: Click here to download plugin.

Sorry, I don't want a plugin that's mostly used to enable advertisers to max out my CPU. Whatever, there's millions of other sites on the web to see. I'll just move on to the next one.

Blame Internet Explorer

[Nurgled]

If you want to complain, complain about Internet Explorer. Mozilla, Opera and (as far as I know) Safari all support the CSS table rendering model, which can do almost everything that HTML tables can. The main thing it lacks is support for colspan and rowspan, but for your average website layout (banner across the top and one or maybe two sidebars beside the content) you can get away without using either.

Of course, Internet Explorer only supports the bare minimum of the stuff in that chapter, and even then only when applied to HTML tables. Nor does Microsoft plan to support it in the near future. Most people don't even know that CSS can do table rendering because of Microsoft's lack of support, but the truth is that for all of CSS's warts, simple table-based layouts are actually right there in the CSS2 spec and will work just fine in every modern browser except Microsoft's.

Every Time Dvorak Speaks

[jokerr]

Baby Jesus cries :'-(

Whole PC world: It doesn't work and nobody cares

[dpbsmith]

His rant can be extended to the whole PC world in general. The infancy of the personal computer industry began in an atmosphere of "selling the dream" and never worrying that it couldn't be delivered... and has never grown up.

Computers with sixteen-slot S-100 busses that couldn't possibly drive sixteen cards.

The Apple ][ which had no fan. The first time I saw one, I said, "Wow! they must have brilliant thermal engineers." Then the owner explained that the reason why the cover was off was that if he put the cover on it would overheat and shut down. They didn't have brilliant thermal engineers: they didn't know that they needed thermal engineers.

I remember a guy who kept talking about how wonderful his North Star Advantage was. I asked him if it was reliable. He said, absolutely, he had had no problems with it whatsoever. So the next time I was in his office, I asked for a demo. "Oh, I can't," he said. "The power supply burned out last month." "But," I said, "I thought you said you hadn't had any problems with it." "I haven't had any problems with the computer," he said. "Just the power supply."

And that, in a nutshell, is the way the PC industry has been since its inception. CSS is just one of many examples. People tried to achieve consistent appearance with HTML, and couldn't because it wasn't designed for that and different browsers rendered it differently. So, they invented CSS, whose whole reason for existence is to allow Web pages to be written to a standard that will be rendered consistently by all browsers. And it doesn't really work, and nobody cares.

How about all those USB devices whose instructions tell you never to plug them into a hub?

How about all the CDs that burn and verify without error... and can then be read in about 95% of all CD readers?

How about all the Bluetooth thingies that won't interoperate properly with other Bluetooth thingies?

How about all the Windows releases, each of which is going to solve the security and usability problems of the previous releases?

It goes on and on... but it doesn't matter because nobody expects the stuff to work any more...

Mark your calendars

[paralaxcreations]

This marks the day Dvorak realized the same frustrations of myspace kids everywhere. Hell, he even wrote a blog complaining about it.

"Dear Diary,
I don't understand why CSS won't work on my site! OMG, all I want to do is make every div tag on my page 50% transparent, why does it slow things down so much?? Sometimes I think everyone's out to get me. In the end I ended up using Tom's myspace editor, but now I have a link to his page on my page and I don't know how to get rid of it. I hate my life.

-J.D."

Re:Standard versus Proprietary?

[MilwaukeeCharlie]

For me, all Flash sites look exactly the same: Click here to download plugin.

For me, all Flash sites look exactly the same, too: a little clickable "Play" arrow. If I want the content, I click it; I leave it blocked if (as in most cases) it's an advertisement.

You didn't tell us what browser you use, but if it's in the Netscape/Mozilla/Firefox family, go ahead and download the Flash plugin you've been resisting, and then this Flash Block plugin as well.