Monday, March 28, 2005

I demand the head of the style attribute

Quick Note: this is a piece I've been mulling over for some time now, it's only now that I've gotten around to having enough desire to actually document it. Essentially, I apologize for any slight logical mistakes or terrible grammar, but I believe them to be on the account of the time, not having not thought the issue over. enjoy!

Since it's after 3 am on a school night and I have "nothing better to do" (read: "insomnia"), I decided to go ahead and indulge myself and peruse the archives over at daringfireball.net. I don't know anything about the site or its author, but I find myself "uh huh"ing in agreement when presented with his arguments. I don't think I've ever read anything so reasoned and clear on the internet.

I did notice, however, that he uses a lot of inline style changes, i.e. denoting things as code or italicizing things. This made me think: the style attribute of XHTML tags needs to be deprecated immediately.

I didn't have any particular desire to investigate daringfireball's code, but I do know that I see a lot of sites on the net that use formats like <span style="colodygoop: #333;"> to denote a section of code that needs to render as a different color from the rest. I operate on the level as something of a minimalist purist, in that I think things like tables and image files need to be removed completely from the HTML layout ideology, allowing for faster render times and vastly decreased bandwidth expenditures. You may have noticed that, over the course of my own site's existence, I have severely decreased my dependence on anything graphical, and I've actually avoided entirely use of nonstandard stylistic elements with the lone exception of the font tag.

When I started doing "web design," I used Claris HomePage (I think that's what it was called, anyway) because I didn't know any better, and, more important than that, it was free to me and easy to use, especially given my frail mental state immediately following the utter asskicking Pascal programming unleashed upon me in 10th grade. I had some frames, some images next to my content links, and then nothing else but text in a funny font. Then I got to college, and at some point during the 5 year odyssey that's ensued, a friend opened my eyes to the relative glory of XHTML and CSS, as well as the heap of good their pairing can unleash upon the world at large. I then went through my "codebase" and stripped all the font information, closed all my tags appropriately, and designed a stylesheet. Not long after that, I decided to do things properly and redesigned my site from the ground up. It was a good deal of effort initially, but it's really paid off since then, as it made dealing with updates a lot easier while I was still doing everything by hand, and made dealing with blogger-as-an-update-agent a lot easier to transition to while maintaining my individuality, which I have quite clearly put to good use [looks around, sees boring ass layout, runs away /].

So why remove the style attribute? Well, one of the things my friend and the reference material he pointed me toward collectively taught me about the web is that standards exist for a reason, and that reason is generally to make everyone's life easier. In the case of CSS, the motive is simple: maintain the original spirit of hypertext without subjecting everyone to horrible quantities of obfuscation in code while maintaining an interesting presentation media. Stated cleanly, CSS's goal is to "separate structure from presentation to maximize portability and accessibility" (thanks webstandards).

It is almost needless to say that total separation of presentation and markup is neigh impossible, at least in the confines of the English language. Our native devices of emphasis are differing presentation of text, that is to say that italic and bold text are necessary sometimes, as are larger and smaller typefaces. w3schools.com claims that the tags I just used to provide that example text can be set aside for richer presentation using stylesheet elements and, I can only assume, the span or pre tag. Technically speaking, this is correct and possibly even valid, but there comes a slight problem when you start adding stylistic information inline: you're no longer separating structure and style. In fact, you're actually clogging your otherwise clean markup with things that belong in a stylesheet. Example being, let's say I want a section of purple italicized text (for God only knows what reason), and I want to do so inline. I can do this two different ways:

Choice a: <span style="font: oblique 16px Tahoma, sans-serif; color: #808;">go text</span>
which renders like this:
go text

Choice b: in a stylesheet, define a specific-use id or even class for span or em, like this:
span.wackyemphasis {font: oblique 16px Tahoma, sans-serif; color: #808;} which, when paired with a <span class="wackyemphasis"> tagset, renders this:
go text

[edit from 2019: apparently I lost the battle or my stylesheet broke in the intervening years, because these no longer look the same and I don't know or care why anymore. I actually kind of can't believe I didn't turn caring this much about web standards into a profession somehow, and I also can't imagine summoning this much energy for something that doesn't matter anymore]


Those two things should look exactly the same to you (note: users of Safari or other .css caching browsers would need to clear their cache if they've visted my site recently), but I accomplished them in two very different ways. I am maintaining a clearer codebase by writing things in <em> tags than I am by writing <span style="font-style: oblique;">. It's better for everyone that way; the WAM server has to send you less, you have to download less, your computer has to chew on less before you see the page, and if you need to read the page by source somehow, it's a lot easier to read two letters than it is to read twenty, as it would also be much easier to universally strip out.

I can only speculate as to the reason for the continued use of the style attribute, but it seems to me a lot easier to put any inline style information in either an import style tag in that particular document's <head> section or to choose a style that you might actually want to reuse from time to time and add it to your site's primary .css file.

... if only I were in charge of the internet.

No comments:

Post a Comment