Hidden Assumptions of CSS Zealots

I’ve been in an argument on a discussion list with a CSS Zealot. They’re the kind, like the Web Standards Project, or Zeldman, or even sometimes Eric Meyer who say that using W3C-approved code in a certain way is not just a superior technological or business choice, but a moral imperative. You are a Bad Person if you do not accept The Way.

Fittingly, one of the premiere sites for this sort of religous proselytizing (they make Mac advocates look like pussies, quite frankly–the only people they remotely compare to are the Stallmanesque GNU Cadres) is CSS Zen Garden, the Light and the Way.

It’s a nifty trick–some nicely structured markup, almost totally unlike anything you’d see in the real world of commercial Web development, that can be totally changed in look and feel through CSS ONLY. Oh, except for the buttload of images that no dialup connection could ever support (hmm…where’s the navigator.connectionSpeed property so I can detect that…gotta be in the docs somewhere).

But, admittedly, it’s a nifty trick, and a nice playground.

However, much as the Japanese government of 1934 had some un-Buddhist principles (or today for that matter), there are a couple of biases their rhetoric assumes you share if you are a Good and Right-Thinking Arya- I mean, Person.

Caveat and Disclaimer: The group is not monolithic, and here I publicize and sometimes even (hell, usually) exaggerate for comic effect the more extreme positions taken by the more extreme advocates. However I am trying to expose some contradictions, hidden value judgements, and distortions that the more adamant parts of the group make. I’ll leave it for someone more skilled and less pissed off than me to make the subtle, reasonable case. I’m here to blow it out of proportion so you can see the bits I’m talking about writ large–much like an actual assistive application.

Poor or Thrifty People Are Worth Less than Rich Spendthrift People

There are two rallying cries they screech, given any opportunity. To hell with old browsers, and include the handicapped and other devices. The idea is that old browsers should not be supported (some say give them a less perfect design, some say they should only get words and a grey background), but we must adjust to the limitations of people rich enough to have screen readers or techno-toys like PDAs or Web-enabled cell-phones. These, you see, are Gods, whereas clods who can’t afford to upgrade to a new machine, OS, or have a high speed connection to download a new browser are Clods, and should just get off the Web and get back to sweeping up the area around their couch at Starbucks as they impress everyone with the ability to read the same sports scores available on the newspaper on the table with their cell phone.

Seriously, not everyone is able to get a Modern Browser. If you have a Mac from before 1999, you probably can only get one browser to work without crashing every few minutes–Netscape Navigator 4. So even though it’s a trivial (and still Standards-Compliant) matter to give you a design that looks as good as Modern Browsers, tough shit. You don’t deserve to be on the Web. So if you even get text, you should be thrilled.

However, we mustn’t add any work to the designers of cell phones, and we mustn’t acknowledge the fact that most assistive devices simply enlarge the screen, regardless of what application is on there, rather than re-parsing code. Their technical limitations are Good Limitations, whereas lack of money is simply not an excuse.

Old people who are technophobic and make do with an older system that they know rather than relearning every time Bill Gates wants revenue also need not apply. They should probably just die, anyway, or become rich and purchase Assistive Devices. If black on dark grey text is hard for you to read, then you should have worked harder at the coal mine, gramps! Now, go greet me at Wal-Mart.

Slow Connections Indicate Slow Thinking

Many of the mind-bogglingly weird hacks CSS Zealots go through in their quest to remove tables (even from places tables make sense, just for good measure, say some) include positioning rather large graphics to make up for the fact that 100% height, if you are a member of the W3C, only means the hight of your current browser window, even though width means the current width of the document, not your browser window. Notice that most blogs are three column affairs or that the color behind a column stops when the content does? That’s because CSS just can’t hack it. So to make up for it, they believe that bandwidth is free, even if you’re in Africa.

But wait, say they, you won’t have to download as much code per page, and you’ll only have to download the graphics once! The second part is the same no matter what style of code you use, and the first doesn’t make up for the increased size of the graphics they’re forced to sling around.

And their designs aren’t about inclusion, but in taking advantage of modern technology. Except for applications for the blind that haven’t been updated since the mid-Nineties. Apart from that, it’s exclusive and modern. I mean inclusive and standards-based–but only a subset of standards. Oh, shit, what do they stand for again?

If You Wear Glasses, You Must Be Blind

CSS Zealots always state that their code is more Accessible. True, if you use a voice-based browser, the lighter markup, if used structurally and carefully, can indeed be much more pleasant to listen to when consuming their pages. However, they act as if

  1. There are tons of people with severe sight problems (true, after a fashion)
  2. Anybody with a sight problem can be lumped in that group to make them seem bigger than older or limited browser users (especially if you include WebTV and AOL in the ranks of old browser users)
  3. And all of these people use a device that takes raw, unrendered HTML and parses it by its own rules, generally to convert it to Braille or audio.

Bullshit.

  1. The percentage of people on the Web with profound sight loss is pretty small, certainly smaller than the number of Netscape 4 users
  2. Not everybody with a vision problem, not even the free-spending, increasingly geriatric Baby Boomers they rely on for their example of the Sort of Person You Want Around, uses any assistive device or does anything more than put on a pair of glasses. This is not because of some Republican (or UN) conspiracy, but because glasses do the job just fine and are less hassle.
  3. Among those who do, most either:
    1. Increase the font size in their browser
    2. Reduce the resolution of their screen (640×480 on a 21″ monitor is pretty frickin’ huge)
    3. Use an application that can enlarge a part of the screen, no matter what application is in the foreground
    4. or use assistive software that depends on the browser to first render the information, and then takes that rendering as a basis of either enlarging or speaking the text
  4. Also, by paying just a modicum of attention, you can make those extreme devices for that tiny group happy while still using tables for some layout purposes

Dynamic Web Apps Are Inflexible

CSS Zealots act as if every purpose in the world must be served by their frickin’ XHTML. Computer-to-computer, server-to-client, mobile devices, assistive devices, and client apps other than Web browsers will always read their div-labeled content (and check the presentational class names for semantic meaning, I suppose). They seem to come from a world where only static (X)HTML exists, and content is not stored in databases or XML or any other format. And if they do, programmers are all morons who can’t structure their code to separate content from logic from presentation–though they’re smart enough to design sophisticated, logical, and clean markup from their crazed-spaghetti-code applications.

I have news for them–crap code in the application means crap markup coming out. There are very few exceptions where spaghetti-coded apps generate clean, semantic markup. If you’re smart enough to like clean code and separation of presentation and content, then you’re smart enough to provide completely different output for each use of your content. So there’s WML for cellphones, a multitude of binary and text-based formats for application-to-application programming, HTML for browsers, and RSS for aggregators.

Generally you don’t even want the exact same content to go to cellphones as to browsers as to some random application. You want something shorter (Use XSLT! Shout the Zealots, proving my point, since XSLT is just another tool for doing what I’m referring to, and only exists on the client side in…wait for it…BROWSERS (well, one, anyway, and we only care about IE, right? Oops.)). So do that logic on the server side, and provide different access points for different devices. If reliable, you can even detect them and change accordingly (however, reliability of detection isn’t assured; best to let the client go to something specifically for it).

Additionally, as structured content, XHTML is bad, and the crap the Zealots produce is worse. Most of their content is in structurally undifferentiated div tags. Other tags, such as semantic-free spans or extraneous divs, litter the page. A few headers and some paragraph and list tags ocasionally make an appearance, but as the Zen Garden demo demonstrates, having too many of those gets in the way of the Cross-Browser compatibility (minus old browsers) they offer. But they have pioneered the return of the acronym tag, so they’ve got that going for them. They may also make the trains run on time, too, I’ve heard.

We Use Semantic Structural Markup And No Excess Tags, Except Where We Don’t

Putting divs inside other divs. Putting spans with no attributes, even clases or IDs around content. Arguing that a table declaration is unsemantic while a plain div imparts great meaning.

Those are a few of the things our friends, the SS, I mean, CSS Zealots do in their markup. I’ll give them points for trying to keep it down to the minimum possible, and I’ll even admit that a table is a semantic construct that’s being repurposed for not-exact applications. Still, they act as if their farts smell like lilacs and their code has no concessions to presentation.

Were that true, most of it wouldn’t have div tags, which only say “the enclosed is grouped together in some vague way.” This particularly galls when they have the option to put a bit of text in a paragraph tag but use a div instead. There’s almost no presentational reason for it, and several semantic arguments against it. If a div can hold a single image and a group of other divs or a group of paragraphs or just plain text, then what does it tell a machine parsing the document for semantic meaning?

Earlier I said that XHTML was piss-poor for processing by other applications because it doesn’t provide enough semantic constructs, and it has no way to create new ones. Here, the CSS Zealots’ use of the markup doesn’t even rise to the standards they claim to set, or even could achieve. One acronym tag doesn’t make up for failing to use most other semantic tags from the days of HTML 2, guys.

All Web Standards Are Equal, but Some Are Right and All Others Are Wrong

So if my page validates as HTML 3.2 or HTML 4 Transitional, do I get any credit for following Web Standards?

Pffft. Dream on, silly man who isn’t out of a job and wanking off about how things should be done. Those of us who don’t code Web sites for a living but instead either collect unemployment or lecture others on how to behave simply do not approve.

CSS and XHTML will get you points. Well, really only CSS 2 and XHTML Strict. But if you were a real man you’d use CSS 3 and blame the browsers for not supporting it. ‘Cuz CSS 3 is L337. Well, mainly because otherwise they’d still support the crappy browsers that have different workarounds than the workarounds they like to support now.

Write to the Standard, Not to the Browser–Except for Mozilla

Most advocates at some point lose control and say “you can just write to the standard and let the browser makers worry about compliance.” These are generally people who are out of work or lecture for a living. They for damn sure don’t have clients who pay them for results and complain when they get crap.

Additionally, they always announce a new technique with “and it works in Mozilla.” Well, why not just code up something that SHOULD work, based on reading the spec, and let the browser makers deal with it? That’s because even in their circle-jerk world, if it doesn’t render it’s pretty useless.

Write to the Standard, Instead of Browser Hacks–Except for Our Hacks

As long as a validating parser accepts it, the advocates generally don’t mind nasty hacks that use the standard in ways it was clearly not meant to be used. Tantek’s IE box model hack is a prime example. You don’t even care about voices, but you depend on a bug in IE to get the two to agree.

Whatever happened to write to the standard and let the browser makers worry? Oh, IE happened. When they couldn’t get it to work in the browser that won the installation war, they frantically looked for ways that would honor the letter but not the spirit of the standard, while decrying others who did the same with the HTML 4 standard. They claim these hacks only happen in CSS, which is presentational, but as I mention above, they also use non-semantic tags to get around issues like IE 6 not understanding the proper rendering of margin-left: auto.

So again, their hacks and non-semantic tags are good, while yours are bad. Yet they frequently claim that you can write without them, until you bring up that you can’t. Then they quickly claim that “everybody knows” that you still have to hack, despite the fact they said the opposite earlier.

Conclusion

So there you have it. They value certain devices over others, and make no allowance for any circumstance that might favor a device they’ve deemed “bad.” They make exaggerated claims about the benefits and sweep the difficulties under the rug. If these weren’t their primary arguments, it would be no big deal. But as I’ve shown above, they undercut their own best arguments and leave you with nothing more than personal preference or suitability to a specific, limited set of circumstances. None of that justifies the shrill, moralistic tone they take nor the lack of understanding they display for people who have to code for a living instead of for a hobby.

5 thoughts on “Hidden Assumptions of CSS Zealots

  1. Wow, man, take a breath 🙂

    Seeing as how I imagine I’m one of the “CSS Zealots” here’s my $0.02 on a few of these points.

    “The idea is that old browsers should not be supported (some say give them a less perfect design, some say they should only get words and a grey background), but we must adjust to the limitations of people rich enough to have screen readers or techno-toys like PDAs or Web-enabled cell-phones.”

    No, the idea is that people using browsers that diverge from the spec (which does not equal “old”, though there’s a strong correlation) should still be able to get at the content, which is (after all) the important thing. So we want the Worst Case Scenario for people who insist on using these flawed products to be a less-pretty but still-usable page.

    This is not a particularly rabid attitude to take towards these people, IMO. “Zealots” would insist that people not using True Browsers be blocked from our sites completely. Instead, we’re trying to do the right thing and still work with these people, even though they’re trying to merge onto the highway in a car with three wheels.

    “Old people who are technophobic and make do with an older system that they know rather than relearning every time Bill Gates wants revenue also need not apply. They should probably just die, anyway, or become rich and purchase Assistive Devices.”

    See above. These people are not the common case; better to have an approach that serves the common case and degrades to serve the needs of minorities like technophobic WalMart greeters than to force their needs to dictate how things are for the 99.98% of the population that make up the common case.

    “[T]heir designs aren’t about inclusion, but in taking advantage of modern technology. Except for applications for the blind that haven’t been updated since the mid-Nineties.”

    And that’s the fault of the “CSS Zealots” how? Again, it’s about trying to be inclusive here, not exclusive. If all blind people have are crusty screen readers, we need a spec that works with crusty screen readers (which CSS does).

    “The percentage of people on the Web with profound sight loss is pretty small, certainly smaller than the number of Netscape 4 users.”

    But Netscape 4 users can choose to stop being Netscape 4 users. Can blind people choose to stop being blind?

    If not, why is it OK for Netscape 4 users (who, seriously, are almost non-existant these days) to demand people work around their broken browser, but it’s not OK for blind people to demand the same thing for screen readers/assistive tech?

    And you are aware that accessibility is about more than blindness, yes? That it includes designing around issues like motor-skills impairment (which has a whole range of assistive tech dedicated to it as well)?

    “Use XSLT! Shout the Zealots, proving my point, since XSLT is just another tool for doing what I’m referring to, and only exists on the client side in…wait for it…BROWSERS (well, one, anyway, and we only care about IE, right? Oops.)”

    You’re right, XSLT only exists in one browser. This is because nobody cares about transforming XML in the client. You do your XSLT on the server, starting with structured markup and applying XSLT to send to the client the appropriate file type — XHTML, WML, RSS, or whatever.

    “[R]eliability of detection isn’t assured; best to let the client go to something specifically for it.”

    Which these systems typically do, often by tagging URLs with arguments that specify what type of output the client is expecting (index.xml?output=xhtml, say) so that the links are self-describing.

    “Putting divs inside other divs. Putting spans with no attributes, even clases or IDs around content. Arguing that a table declaration is unsemantic while a plain div imparts great meaning.”

    This almost always is due to people not understanding how CSS works. It takes time for them to un-learn their old habits, so they try to recreate their nested table layouts by nesting DIVs, for example. The idea that *every element can be styled* takes forever to sink in — don’t ask me why.

    As people climb the learning curve, though, this happens less. I’d imagine Zeldman and Eric Meyer are far less guilty of throwing around DIVs and SPANs than I am. And looking at the Zen Garden source code, it actually looks pretty lean given what it allows.

    “This particularly galls when they have the option to put a bit of text in a paragraph tag but use a div instead.”

    See above.

    “So if my page validates as HTML 3.2 or HTML 4 Transitional, do I get any credit for following Web Standards?”

    Yes. Seriously.

    Don’t confuse accessibility with standards compliance — the two are correlated but not the same. You can mark up an HTML 3.2 nested-table nightmare that’s competely standards compliant and horribly inaccessible.

    Mind you, “compliance” with HTML 3.2 is a pretty low bar to set for yourself, and you lose the other benefits of moving to a style-based design, but it is technically Standards Compliant.

    “they always announce a new technique with ‘and it works in Mozilla.'”

    Because Mozilla is the best proxy we have for “and it works in a fully standards-compliant browser”. Even the W3C’s browser project, Amaya, isn’t as up to date as Moz is, so it makes sense to use Moz as the reference platform.

    “As long as a validating parser accepts it, the advocates generally don’t mind nasty hacks that use the standard in ways it was clearly not meant to be used. Tantek’s IE box model hack is a prime example.”

    So you are mad at the “CSS Zealots” for not being zealots?

    As long as IE retains 90%+ of the browser market, and as long as its CSS rendering is as flawed as it is, compromises will have to be made. That’s not ideal, but (again) it’s about inclusion — better to include that 90% than to shut them out and scream “go get a real browser”.

    Tantek’s box model hack takes advantage of a CSS feature that, AFAIK, nobody has implemented in software yet to get around a serious deficiency in the monopoly browser. That’s pretty clever in my book. Am I glad we have to do that? Hell, no. But I’m a pragmatist, and until Microsoft fixes IE I’m going to look for ways to get the most out of CSS without leaving IE users behind. Why does that make me a “Zealot”?

    “None of that justifies the shrill, moralistic tone they take nor the lack of understanding they display for people who have to code for a living instead of for a hobby.”

    I’m hearing more shrillness in this essay (it’s always fun to be compared to the SS) than I am on Zen Garden or A List Apart. Just a thought…

    Like

  2. I’d classify you as a medium-to-mild zealot; and I did disclaim that I was exaggerating for comic and expository effect. Tantek just gave some poetry an extra plus because it validated as XHTML 1.0 Strict. That’s just sad. 😉

    ‘”Zealots” would insist that people not using True Browsers be blocked from our sites completely.’

    http://www.webstandards.org/act/campaign/buc/

    You mean, Zealots would have stopped doing so.

    “These people are not the common case; better to have an approach that serves the common case and degrades to serve the needs of minorities like technophobic WalMart greeters than to force their needs to dictate how things are for the 99.98% of the population that make up the common case.

    If money were no object, I’d agree. But even serving the common case is a hell of a lot cheaper by letting both minorities view slightly sub-optimal output through judicious use of a couple of tables here and there.

    “This almost always is due to people not understanding how CSS works.”

    All the examples I mention I saw on advocacy and how-to sites from established players. See my earlier post about Zeldman. If he can’t do it, I don’t think I can be expected to.

    “Don’t confuse accessibility with standards compliance”

    Actually, I don’t. However, as I note and link to–when WaSP talks about Standards, they mean only some standards and using those standards in a certain way. They conflate accessibility and validation on a regular basis.

    “so it makes sense to use Moz as the reference platform”

    OK, but I’m pointing out that even they can’t live in the Candyland they claim the rest of us should practice. If they said “hey, stick as close as possible, but whenever you have to break away, do it and feel good about it,” I’d be happy. The Zealots (as opposed to the zealots) do not. They even managed to piss off Jamie Zawinsky. 😉

    “So you are mad at the “CSS Zealots” for not being zealots?”

    If some workarounds are OK, why aren’t my workarounds OK? They’re readable in assistive devices, even readable well in assistive devices, they validate, and they don’t require massive bandwidth. But for them it’s either tag soup or no tables for layout. I’d just like them to admit that sometimes in the real world you have to compromise. I’m fine using table-free, semantic XHTML 1.0 CSS as a north star to keep aiming toward, but I’m not willing to spend 50% more time to get the last 5% of compliance. I’m sorry the spec isn’t well implemented and is pretty awkward to use–but that’s a problem for the W3C, not for me to twist myself into a pretzel every time I want a fully liquid 3-column layout.

    “I’m hearing more shrillness in this essay (it’s always fun to be compared to the SS) than I am on Zen Garden or A List Apart.”

    Born of frustration and continual haranguing whenever HTML techniques come up and I say “You know, you can just use minimal tables and do it a whole lot faster and compatibly across browsers unless you have a severe need,” and then getting jumped on with the Litany of the Holy CSS, refusing to acknowledge other routes to achieve the same goals.

    And you did read the disclaimer, right?

    The sympathy I’m asking for here is that I have limited budgets, and as you and I proved, rendering ad-hoc designs in Photoshop from your average designer takes a lot longer in XHTML/CSS than it does making judicious use of the old technology but limiting its harm–even once you’ve become fairly proficient at the stuff. And it’s just not possible to upgrade all your designers to cluefulness so they design things that are easy to render compatibly in HTML+CSS (anybody who allows manual input of HTML cannot allow XHTML yet). Plus there are other ways that may be less expensive to achieve all of their goals. If Zeldman, WaSP, et al would just fucking admit that, I’d lay off.

    Like

  3. For example, see this site:

    http://seepstage.forumone.com/

    It validates as HTML 4.01 Transitional.

    It looks decent in Lynx.

    It looks OK in NS 4. Not great, but OK.

    It looks fine in modern browsers.

    It uses tables for more of the layout than I’d ideally like, but this was the most consistent way to solve these problems.

    And it took me not that long at all to do. Now I could upgrade the look in Lynx and downgrade the look in NS 4 and make it wobble a bit when you went between Moz and IE, and spend half again as much time.

    Is it really so terrible, what I did?

    Like

Comments are closed.