CSS/Stylesheets/HTML
A truly useful CSS resource, css.maxdesign presents examples of CSS list treatments, a nicely-executed floatutorial (that’s a tutorial about floating elements), and more. (thanks victor)
Jeff has a nice forward-it-to-the-VP writeup of the business value of web standards.
Zeldman: Designing With Web Standards
Of course, as with most CSS/XHTML sites, all the examples have relatively similar columnar layouts. It’s no accident that news and corporate marketing sites have been the first to embrace CSS/XHTML. Compare the amazing work Move Design has been doing in Flash (“the grid is dead, long live the grid!”).
CSS Zen Garden: The Beauty in CSS Design is a wonderful little site. A few of the designs are quite lovely. I do have to point out that if we need a web site devoted to proving that you actually can design pretty sites with CSS (honest you can), then something ain’t quite right.
Not sure if I ever saw this… WebDogme 01. I don’t think web design in 2001 (or even 2003) has gotten anywhere near where cinema was in 1995, but I always like a good manifesto to mash up the brain.
Eric Meyer on CSS, in particular the browser hacks page.
Zeldman: 99.9% of Websites Are Obsolete. Yeah, but…
In general, I agree, but with 2 caveats:
First of all, a lot of people still use Netscape 4, including some of the people writing the checks to designers.
Second, CSS-P is a big pain in the a**. And don’t send me a link to some CSS layouts page. Yes, it’s fine for putting a few boxes on a page, and you can do some neat stuff with it, but anyone who’s actuallly wrestled with a complex layout (say for a web application) knows that it is downright nasty getting CSS-P (which was designed specifically for layout for gosh sakes) to do what you want. I’m not denying CSS is an improvement over spacer gifs and the like, but it leaves a lot to be desired as a layout language, and requires plenty of ugly hacks of its own. There, I’ve said it.
HTML: OPTGROUP—Option Group.. I didn’t know about this (which is a good sign, because it means I haven’t been spending my time dealing with HTML ;)
I feel like I must’ve seen this before, but perhaps at a time I wasn’t struggling to keep from giving up on &#!% CSS positioning: BrainJar.com: CSS Positioning (thanks, tim!)
OK, so craig actually knows why the dang SELECT box shines through (see last post). Unfortunately he says there’s no way around it. The best I’ve come up with, thanks to a couple smart people, is to use javascript to hide the SELECT box when needed, but, well, that is completely ridiculous. Feh on Microsoft!
If any of you CSS geniuses out there can help me figure out a workaround for this silly bug I will be forever in your debt: INPUT tag CSS bug (it’s a bug in MSIE, that is). Help!
OK, I’m an idiot: CSS2 allows multiple classes. You just separate them with a space. At least I was justified in recognizing the need ;)
As usual, Microsoft already fixed the limitation in the CSS spec I mentioned yesterday. Brian wrote to tell me that you can use a plus sign (union) to apply 2 or more styles: class=”button + defaultButton” But of course it’ll only work in MSIE 5+.
<rant>*ahem* Unless I’m missing something, CSS should allow multiple classes.
For example, say you have multiple submit buttons on a page. Say they fall into two groups, some of which look one way and some another way. But say you want them all to get the same basic style. You should be able to do:
.button { background-color: black; color: orange; }
.buttonBold { font-weight: bold }And then..<input type=button class="button,buttonBold">and have it look like:
Dont’cha think?</rant>
Anyone out there know the story behind the choice of ‘fantasy’ as one of the five generic CSS font families? I’d love to hear it.
What I want to know is why I can’t specify type in CSS to degrade to different sizes, like so:
.sansesque { font: 12px Verdana, 14px Helvetica }Because, given the x-height difference, those are really more equivalent than if both are at the same size. Does anyone know a workaround for this (or a reason it doesn’t make sense)? And no curmudgeonly rants about how ugly Helvetica looks at 14px on a computer screen.
Some good info over on evolt about browser sizes:
Design to realistic window sizes
Real-world browser size stats, part I
Real-world browser size stats, part II
xblog pointed to this badass article on using CSS as a Diagnostic Tool. I’d probably want to do this as bookmarklets, so I wouldn’t have to go into the prefs each time I wanted to see the table structure on a page I was visiting. Very cool, though.
Milov.nl rightly points out that if you use the label tag (described below), you’ll want to add a style rule to make the cursor turn into a hand, so people know they can click on it. Just add LABEL { cursor:hand; } to your stylesheet. Wonder why that’s not the default behavior of the tag.
I may have mentioned one of my pet peeves, which is that nobody codes their forms so you can click on the label to check a checkbox or select a radio button. I haven’t been doing much HTML recently, so I just noticed for the first time that there’s now a tag (IE 4+ only I assume) that makes it mindlessly easy:
<INPUT TYPE="checkbox" ID="foo"><LABEL FOR="foo">click me</LABEL>
Which produces this:
Project cool is no longer “liquid.” Heh.. I guess they read my log.
Ice, jello, and liquid design…. I really don’t understand why this has become a meme right now. There’s nothing immediately new about making scalable designs. I’m not against liquid design—I’m all for it where appropriate—but pages that scale with the browser should definitely not be the end itself. My $.02. (evolt link via xplane)
Zeldman recently sang the praises of the hover pseudo-class and the title attribute. In fact, he (good-naturedly) chastised cam for not using hover. I’d just like to point out that adding a title attribute is great (especially if it adds some good contextual information.. I remember someone calling it ‘microcontent’), but in terms of usability I don’t think it’s a substitute for descriptive link text in the first place. I also like hover—it’s an elegant (i.e. easy) way to accomplish mouseovers—but, again, it’s no substitute for making your links obvious before the mouseover. I guess my point is just that both of these are good additions to link usability, but they can’t make up for opaque link text and less-than-obvious visual link treatments.
The other thing I want to say is that I absolutely agree with him about how much of a shame it is that Microsoft’s business practices have obscured and obstructed its often superior browser design (and implementation). If only we could use Microsoftisms like XMLHttp and data binding…
I’m not sure I entirely agree (a designer is a controller, even if the product allows for audience participation), but there’s something undeniably pleasing about A Dao of Web Design.
For anyone wondering why CSS has more or less failed so far, take a look at RichInStyle.com’s CSS support table. Feh!