jwz - CSS is BS

jwz

			www.jwz.org
			userinfo
			archive
			rss

Links

[

DNA (Log) (iCal) WebCollage (LJ) Mixtapes

]

CSS is BS [Wed, 30-Apr-2003 2:43 AM]

[	Tags	\|	computers, dnalounge, lazyweb, nscp, www	]
[	music	\|	Throwing Muses -- Hate My Way	]

So today I noticed that someone at the office has been printing out the calendar pages and taking notes on them. I never use paper, but I've long since gotten used to the fact that other people do; but this was just incredibly bothersome because it's extra wasteful: there's that menu on the left, and the text all comes out as gray on white, and is pretty unreadable.

I know that if you've drunk the CSS kool-aid, it's possible to make things print sanely: change colors, leave certain items off the page, etc. So I started poking around with using CSS on the DNA pages.

I thought I'd start off with something simple: instead of using tables to do my headings, like

Contacting Us

I should be able to just do

<H1>Contacting Us</H1>

and have it look the same once an appropriate style sheet was in place, right? "Here is how we render H1."

Wrong. As far as I can tell, that can't be done with CSS. The closest you can get is this:

Contacting Us

with the box going all the way to the edges of the page. As far as I can tell, there's no way to tell the size of the box to be based on the size of the text. You can tell it to be exactly 30% of the page width -- but that's not the same. The only way to do it is to wrap the H1 inside a TABLE!

Contacting Us

So I can replace my table-based layout with... table-based layout?

I have learned (or in some cases reconfirmed) a few other things about CSS, too:

Web designers, and especially blogging web designers, are self-important fuckheads. This might be tolerable if they were right, but by and large they're also dumbasses.
Everybody who fancies themself a CSS expert uses pixel-based layout for everything. Their shining examples of elegance always include boxes that are exactly 400 pixels wide, and that specify font sizes in pixels (not even points!) This is better than auto-flowing auto-sizing table layout... why?
Most of the time, these examples look like ass on my screen, presumably because I'm not running Windows and don't have the same fonts that they do. Or maybe because they're all using 50-inch monitors and sit with their noses on the glass, the only way those miniscule fonts could actually look readable to someone.
They never measure in "em" units, so that their boxes might have at least some relation to the size of the text inside them.
This may or may not be because "em" doesn't work consistently across various browsers.
Oh, "em", a term from the world of physical typesetting, is supposed to be the width of a capital letter M, and used only for horizontal measure; the vertical measures are ascent, descent, leading, and sometimes "ex" (height of a lower case "x".) CSS defines "em" as being the height of an M instead (making it synonymous with "ascent"), which makes it generally about twice as big as you'd expect if you know anything about this stuff. Nice. That's like redefining "centimeter" because it seemed more convenient at the time. (Except sillier, since "em" is an older unit of measure than centimeter is.)

Really what I'd like to do is just leave my pages as-is, but insert something that says, "oh, if you're printing, change all the colors like so, and leave the menu out." But I'm not sure that's possible without going whole-hog into the CSS madness, or at least starting to tumble down that slippery slope.

And a slippery slope it is. Here's a great example: once you start doing anything with CSS font sizes, you can't ever use the FONT tag again.

Have you noticed that when you post to LiveJournal and do <FONT SIZE="-1">, the font actually gets bigger? Feel the love as the Mozilla people mark my bug report Resolved Invalid. This is because the FONT tag, when used to request a font "one tick smaller than the current size" has no knowlege of what the current CSS font size is -- and they claim this is the right and sensible thing! Like, HTML thinks the font size is "3" and then it sets it to "2", instead of noting that the font size is "14px" and then setting it to "12px". You get screwed if, as is often the case with LiveJournal, your "2" font is still bigger than whatever the font specified in the style sheet is.

Let me say that again, because I still can't really fathom it: they think that the current behavior, of asking for a smaller font and getting a bigger font, is the correct behavior.

This kind of crap, among other reasons, is why web sites should never, ever specify the font family or size of their default text. Just use the default, always. Web browsers let users pick their default font families and sizes for a reason. Are you listening, brad?

Update: scroll down...

link

Comments:

From:

mattlazycat
Wed, 30-Apr-2003 3:45 AM (UTC)

(Link)

“This kind of crap, among other reasons, is why web sites should never, ever specify the font family or size of their default text. Just use the default, always. Web browsers let users pick their default font families and sizes for a reason. Are you listening, brad?”

Amen. Especially since Internet Explorer 6's "text size" menu options don't work if you specify absolute font sizes with CSS. This also is "correct" behaviour. It is also cock. Tiny shrivelled lazy-stupid-programmer cock. This is what happens when you design by committee. There's always a posse of sharpnosed little nerds at the back who treat software design-to-spec like they were running a D&D game.

I do everything in CSS now, but it has some major drawbacks, especially with positioning. My life hasn't become magically easier now that I don't have to wrestle with tables. There's no way in CSS, for example to have two columns be the same height, unless that height is the height of the browser window. And vertical align doesn't work. The H1 problem you had is also insanely boneheaded. You might be able to get around it by setting "auto" as the left and right margin width, but then IE5 doesn't do auto margins, and it looks like cock again. (Then again, to be fair, making all headers the same width is probably better, design-wise, but that's not the point is it? The point is that CSS won't let you do what you want.)

The huge sense of self importance you detect in most CSS/XHTML evangelists stems from their utter elation at finally pummelling their design expectations and wrestling with buggy CSS implementations until they finally compromise in some Israel/Palestine sense of the word. They become one of the few, and enjoy rubbing our noses in it. "Well I did it, so you must be able to! Unless you're stupid, that is.. you're not stupid</i>, are you?"</i>

What they forget is that either as designers, they're awful and unambitious, or as people, they suffer from short term memory loss and have forgotten both the hours of fucking around with a style-sheet that they just suffered through, and that the end result is nothing like their original aim. To them, tinkering with a style-sheet is like fucking around in /etc/ for days at a time... for fun.

(Reply to this) (Thread)

From:

jwz
Wed, 30-Apr-2003 2:02 PM (UTC)

(Link)

I thought you might be amused by what your use of the “ entity turned into once Mozilla 1.3 got its hands on it:

Are we living in the future yet?

(Reply to this) (Parent) (Thread) (Expand)

Re: -

mattlazycat Expand

From:

adcott
Wed, 30-Apr-2003 4:33 AM (UTC)

(Link)

This comment probably confirms your self-important fuckhead theory, but what you are attempting is actually possible (well, it worked in Opera7 and IE6 when I tested it)

<style type="text/css">
h1 {
  text-align: center;
  font-size: 1em;
  }
h1 span {
  color: #0F0;
  font-size: large;
  background: #040;
  padding: 6px;
  border: solid 1px #0E0;
  }
</style>

<h1><span>Contacting Us</span></h1>

Contacting Us

and for this...

Really what I'd like to do is just leave my pages as-is, but insert something that says, "oh, if you're printing, change all the colors like so, and leave the menu out." But I'm not sure that's possible without going whole-hog into the CSS madness, or at least starting to tumble down that slippery slope.

I'm not sure if this constitutes as madness or not:

<style type="text/css">
@media print {
* {
  background: transparent !important;
  color: #000 !important;
  }
#menu {
  display: none !important;
  }
}
</style>

(Reply to this) (Thread)

From:

rpkrajewski
Wed, 30-Apr-2003 5:34 AM (UTC)

Bravo !

(Link)

Assuming it works, that is.

I think some of CSS can't be learned on demand; you actually have to a read an overview and internalize the model, which includes basic but almost invisible features such as !important and the display attribute.

(Reply to this) (Parent) (Thread) (Expand)

Re: Bravo ! -

beerfrick Expand

Re: Bravo ! -

rpkrajewski Expand

From:

altamira16
Wed, 30-Apr-2003 6:23 AM (UTC)

Shock and Awe

(Link)

I stumble through CSS, and you have done several things that I did not know were possible.

I did not know that you could do

h1 span{
blah
}

I thought you had to use each tag seperately.
I also did not know you could use the
@ symbol anywhere in CSS.

(Reply to this) (Parent) (Thread) (Expand)

Re: Shock and Awe -

injector Expand

From:

blackirisdancer
Wed, 30-Apr-2003 7:53 AM (UTC)

(Link)

That works, but the <span> tag is really ugly (also, totally content-free). There is a better way:

h1 {
  display: table;
  margin-left: auto;
  margin-right: auto;
  
  color: #0F0;
  font-size: large;
  background: #040;
  padding: 6px;
  border: solid 1px #0E0;
}

The display: table causes the block to wrap itself to the text (shockingly, like a table). The auto margins cause the table to be centered.

Contacting Us

Contacting Us

Contacting Us

Bravo !

Shock and Awe

Contacting Us

CSS in Moderation

Re: CSS in Moderation

Update...

Re: Update...

Re: Update...

Em

Re:

Possible Solution