Journal Keith Russell's Journal: Bad CSS! No cookie for you! [update 2] 4
Somehow, you just knew a surprise would pop up when the redesign went live. And it's all because of tradition.
In the original Slashdot styles, pre- and post-CSS, the <i> tag was used on front page articles to distinguish the submitters' text from that of the editors. In terms of HTML semantics, that was a bit odd, since <blockquote> would be more appropriate. Before CSS, however, <blockquote> was strictly a block element. Taco wanted the submission to be inline, hence <i>.
Now, with the redesign, submitters' text are blocks. However, all of the old articles' <i> "blocks" haven't been converted to <blockquote>. Instead, <i> has been redefined by the new stylesheet as a block element with a left border...
div.article div.intro i {
display: block;
padding: 0 0 0.85em;
margin:.25em 0 .6em 0;
font-style: normal;
border-left: 3px solid #ddd;
}
(All hail Mozilla Web Developer toolbar!)
This has created a rather interesting disconnect between articles, journal entries, and comments. In comments, it looks like the combination of <blockquote> and <i> will give you an article-style "blockquote", with indenting and a left border. It won't, however, italicize the type. For that, you must use <em>. In that way, at least, Slashdot is encouraging modern web standards. If I'm reading the stylesheet right, it looks like <blockquote> alone only indents, and it's the <i> tag that produces the left border.
Because JEs can be submitted as articles now, they follow article formatting rules. That means that <i> == <blockquote>, and <blockquote> == <p>. That is, <blockquote> is ignored.
This means that my NHL picks look like crap right now, since I had been using <blockquote> and <i> as they worked in the old JE stylesheet. Now, it's <em> and <strong> for teh win. A quick find-and-replace should do the trick.
BTW, does anybody know if Firefox can do site-specific user stylesheets? I want font-family: sans-serif back. Tahoma sucks.
Update: I'm not done on fonts yet.
It's just one simple line of CSS, but boy howdy, does it make a mess of things:
font: 82%/150% Tahoma, 'Lucida Grande', 'Lucida Sans', Helvetica, Arial, clean, sans-serif;
I'm not too fond of the small size, but I'm used to Ctrl-Plus, Ctrl-Minus, and Ctrl-0 to tweak font sizes by now. Slashdot's not the first site to assume 20-20 vision on big screens, and they won't be the last.
But the font-family tries way too hard to fit in with the host OS' UI elements: Tahoma for Windows, Lucida Grande for Mac OS X, and Lucida Sans for Linux. (Funny, I would have figured Bitstream Vera Sans for Linux.) What's wrong with the user's favorite font, or the OS/browser defaults? It looks like most sizes are defined as percentages or ems, so the layout should scale nicely as long as the user's preferred font doesn't have really strange metrics.
If nothing else, Slashdot should use Verdana instead of Tahoma. Microsoft recommends Verdana for web pages because Tahoma (which is a slightly condensed version of Verdana) doesn't have distinct italic or bold italic forms, so Windows has to fall back on the old "sheared oblique" trick to generate pseudo-italic forms. Hence, <em>-tagged content looks like ass.
Update 2: (Blatantly stolen from somebody else's sig) Save this to $MOZ_PROFILE/chrome/userContent.css:
@-moz-document domain(slashdot.org) {
body {
font: 100%/150% sans-serif ! important;
}
}
Well that's annoying. (Score:2)
Re: (Score:2)
Re:Well that's annoying. (Score:2)
Re: (Score:2)