Notes: Between the Stylesheets

Here is a collection of some notes I took at the Between the Stylesheets panel, complete with linky goodness. Update: Tantek’s post.

Jeffrey: The thing about CSS, it’s hard to understand unless you first think about markup. It’s hard to rethink the way you approach X/HTML. There’s so much to do that it seems strange to think about HTML, but in fact it’s important. We now have the chance to party like it’s 1993, we have the chance to write it like it was meant. We (designers) could do that until browsers became compliant. Saves Bandwidth. Work is now more accessible.

Tantek: Clean up your markup. If you don’t have valid markup, you’ll have tons of problems. Close your tags. No inappropriate nesting, not about birds, but about tags matching up right. All things you can check quickly with a validator. [Computer crashes, apology for using OS 9.]

Jeffrey: Introductions, WASP

Tantek: Bed and breakfast markup, people are using bold and break tags incessantly. Change markup to be more semantically meaningful. Many effects such as leading, text-transform, et al that you can use. HTML gives you a wide array of tags. Breaks are useful for things like poetry and code. [Are they that far apart?] Don’t use tags that are more semantic than the meaning, like don’t use a heading tag to get larger text.

Eric: Some things to do with a simple markup. Take a simple unordered list. Block and inline elements, etc. There isn’t a complete separation between structure and style, because you can have structure without style, but you can’t have style without structure. Talks about CSS Edge.

Jeffrey: Mark Newhouse’s ALA Taming Lists article. When I redesigned I did it publicly. I wanted three areas. Walking through the redesign of the Daily Report, div by div.

Question: How do you pre-load hover states? [Update: Jeffrey now has posted a full explanation. I have put his comment into the text below.]

Jeffrey: Use the HOVER state image as the background image on the element. That causes the hover state image to load while the page itself is loading, and saves you from having to write junk markup to force a display issue.

Use the DEFAULT state of the image as the background on the a: (link) rule for the element.

Use the HOVER state again as the background on the a: hover pseudo-class rule for the element.

The hover image will load as the page loads but it won’t display immediately. Instead, the default image will display, because the default image is used for the link state, and when the page loads the link state is what?s active. When the visitor hovers, the hover rule kicks in, and its background image is already preloaded thanks to your having used it on the element rule itself.

Tantek: Put the images in a display: none div.

Question: [The guy just missed the style switcher on Zeldman’s site]

Question: What is the general percentage of browsers that support CSS robustly?

Eric: Depends on your server logs.

Jeffrey: Hybrid layouts, we’re CSS/table agnostic at Happy Cog. Use a basic table layout and a simple stylesheet for older browsers and and more sophisticated stylesheet imported so Netscape 4 can’t see it. There’s a myth that I’m afraid I helped propagate that you should exclude users. It’s the opposite, you should try to include as many as possible.

Tantek: CSS should include as many users as possible.

Eric: New ESPN.com.

Jessica: A lot of clients are moving to CSS but for clients, especially the ones that change their mind a lot, has made things a lot easier.

5 thoughts on “Notes: Between the Stylesheets

  1. I give up. I can’t read through all of these notes. I have neither the time nor the attention span. But I will be back with a vengeance!…when you have entries that consist of more than just transcription. 🙂

  2. Question: How do you preload hover states?

    Jeffrey: Use the HOVER state image as the background image on the element. That causes the hover state image to load while the page itself is loading, and saves you from having to write junk markup to force a display issue.

    Use the DEFAULT state of the image as the background on the a: (link) rule for the element.

    Use the HOVER state again as the background on the a: hover pseudo-class rule for the element.

    The hover image will load as the page loads but it won?t display immediately. Instead, the default image will display, because the default image is used for the link state, and when the page loads the link state is what?s active. When the visitor hovers, the hover rule kicks in, and its background image is already preloaded thanks to your having used it on the element rule itself.

  3. I’ve updated the notes to reflect your extended comments. It’s a very interesting technique that I’ll have to try around here.

SHARE YOUR THOUGHTS