Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

CSS Crib Sheet Archive

November 25, 2003

The Crib Sheet has moved to a permanent home. I threw it into this site’s template for now, but I may choose to do something differently, eventually. Perhaps a PDF or two. The good news is that my print style sheet should allow for a relatively clean printed version for now.

I’m referring the Sheet to this post, and leaving it open for comments indefinitely. Feel free to add more suggestions below. Remember the focus: practical, real-world tips that aren’t picked up in the spec, or by the validator. Things that are easy to trip over, and may not make sense without external knowledge.


Reader Comments

1
bw says:
November 25, 01h

I vote for Matt too. Quick genius.

2
November 25, 03h

New Tip: Don’t link to empty style sheets as ‘placeholders’ for future style sheets (like a handheld sheet or print sheet). Mac IE5 chokes on the empty style sheet and the page tajes forever to load. Instead, have at least one rule (or perhaps even a comment?) in the style sheet so that MacIE doesn’t choke.

3
November 25, 11h

We need a new “memory aide” for link order that includes focus. I’d like to suggest one – “Love Violins, Hate Flutes and Accordions.” Anyone have a better idea?

4
Dris says:
November 25, 12h

“Lions Vicious Have Fangs for Appetizers”

5
November 25, 12h

I got it! SW Geekitude + CSS Geekitude:

Lord
Vader’s
Handle
Formerly
Anakin

6
Dave S. says:
November 25, 12h

Matt wins, if for no other reason than to stop this thread from being completely derailed with clever initialisms… ;)

7
Michael Ward says:
November 26, 02h

RE: Remember “TRouBLEd” borders.

I’d also add that the borders are specified in a clock-wise order, starting with top.

8
Tim Bray says:
November 26, 02h

I have trouble finding things in big CSS files, so I adopted a rule that feels the tiniest bit counter-intuitive when you explain it, but you get used to instantly.

Sort all your CSS rules alphabetically; in multipart rules, alphabetically RIGHT to LEFT, thus:

a { whatever } /* matches <a> */
.cc a { whatever } /* matches <div class=’cc’>… <a> */
#banner { whatever } /* matches < div id=’banner’> */
html>body #banner { whatever } /* ditto */
a.brillig { whatever } /* matches <a class=’brillig’> */
.ct {whatever } /* matches <whatever class=’ct’> */
img { whatever } /* matches <img> */
img.inline { whatever } /* matches <img class=’inline’ */
#head ul { whatever } /* matches <div id=’head’> … <ul> */

It’s probably more important to have a rule than to sign up for this or any other one in particular.

9
Justin says:
November 27, 08h

How about separating colours, fonts, from layout? Do most people think that’s good practice or just a personal choice.

While I’m on the topic, if you did separate colour and layout into 2 sheets, how would you handle items like borders that affect both. For example, you’ve got a sidebar that is width-sensitive and includes a border. Would you use “border-width: 3px; border-style: none solid;” in the layout sheet and “border-color: #000;” in the other?

10
Tony C. says:
November 30, 01h

RE: Consider accessibility when using image replacement

Thanks for a great article on image replacement. I’ve been struggling with this myself recently…

I’m testing the Shea Enhancement, and I’m having problems eliminating the padding at the bottom in IE. (Mozilla displays it correctly.) Since this is in my logo/header section, I need to the backgrounds to match up perfectly. Here’s what I’m using:

/* the CSS */
#pageHeader, #pageHeader h1, #pageHeader h2 {margin: 0; padding: 0;}
#pageHeader h1 {
width: 840px;
height: 53px;
position: relative;
}
#pageHeader h1 span {
background: url(images/heading-1-top.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#pageHeader h2 a:link, #pageHeader h2 a:visited {background: #CCC url(images/heading-1-bottom.gif) top left no-repeat; width: 840px; height: 43px; margin: 0; display: block;}
#pageHeader h2 span {display: none;}

/* the HTML */
[div id=”pageHeader” title=”my title”]
[h1][span][/span]My Site Dot Com[/h1]
[h2][a href=”/”][span]My Site Rocks[/span][/a][/h2]
[/div]

No matter what I try, I can’t get the 6 pixels of margin out of the H1 tag in IE. If I remove the text after the empty span, there’s no margin…If I set a -6px margin, it works in IE, but overlaps in Mozilla…Any ideas?

Thanks…

11
jim says:
November 30, 11h

Something I learned the hard way:

Whenever you’re floating multiple divs inside a non-floated container div, ALWAYS remember to add this following the final float:

[ div style=”clear: left;” ]

IE may forgive you but other browsers won’t!

12
Justin says:
December 02, 10h

Thanks for posting that! I optimized my CSS sheet and I’m much happier with the way it looks and it downloads much quicker now… I’ll be linking to you when my blog is complete!

13
diskgrinder says:
December 04, 05h

In the (perhaps rare) occasion when a user has stylesheets off but javascript on I’ve found this method is sometimes useful:
set an empty div to be absolutely positioned to (say) left:10px just after the body tag. Give an id of something like “stylesOn”, then with inline javascript, you can check for stylesheets “on” this way:

if(document.getElementById(“stylesOn”).offsetLeft==”10”){
//stylesheets are on

do stuff that relies on stylesheets being on

}else{
don’t do stuff
}

some caveats:
this is by no means fully tested (works in IE5 mac, haven’t tested it elsewhere)
it’s ugly and there’s probably a neater way of doing it.
offsetLeft is probably deprecated (but works on all the mac browsers I’ve tested it on - camino, safari, ie, moz)
add your own complaint

14
Stephanie says:
December 04, 06h

I’m with Michael Ward on the borders mnemonic. I’ve seen two or three letter-based ones like yours, and I don’t understand why no book or tutorial ever bothers to mention the word CLOCKWISE. It’s so much easier.

Besides, Lord Vader’s Handle has clawed its way into my brain, and evicted all the other mnemonics I once knew.

15
Liz C. says:
December 04, 07h

Justin wrote on November 27, 2003 at 08:45 AM:
>How about separating colours, fonts, from
>layout? Do most people think that’s good
>practice or just a personal choice.

Funny you should mention that. I’m busy converting my sites over to all-CSS styling, and I was thinking of trying to have a separate choice of color scheme, at least, in addition to layout choice. I figure, I’ll design the choice of layouts to include a certain color scheme in each one, but I’ll also let the viewers override that with other available color schemes if they want.

Personally, I’d like to see people attempt some color-independent layouts. I know there’s a few cases where I rather liked someone’s layout, but the color scheme was atrocious, and vice versa. Plus if your layout is color-independent, it’ll still look good even if a person needs to use a user sheet with their own color scheme for whatever reason.

Of course, ideally you could try to take this as far as you wanted… a modular thing where a person could choose fonts, color schemes, image sets, navbar position, etc. Of course, whether or not anyone would actually want to go that far as anything other than an eye candy experiment is beyond me.

The one big caveat to color separation, at least, that I can think of is that it might be hard to come up with some background images that look good with various color schemes. There are some minor issues, too… having an extra connection for each page, having an extra file to keep track of, the fact that two files will be larger than one combined one, due to the need for the selectors to be specified in each file, etc.

Personally, I’d say that if you want to attempt color (or other property)-independent styles, then go for the separation. But if you need a certain style to have a specific everything to work, probably better to just keep it all in one.

>While I’m on the topic, if you did separate
>colour and layout into 2 sheets, how would
>you handle items like borders that affect
>both. For example, you’ve got a sidebar
>that is width-sensitive and includes a
>border. Would you use “border-width: 3px;
>border-style: none solid;” in the layout
>sheet and “border-color: #000;” in the other?

If there is a way to separate out border color using simply the shorthand property, I haven’t figured it out… everytime I try the color just won’t “take”. So I find that I need to write all the border properties out.

16
Gatan says:
December 04, 08h

I’d like to post french a translation of this article on my blog. Do you give me your approbation Dave ?

17
Dave S. says:
December 04, 08h

Of course!

18
Gatan says:
December 05, 05h

The french translation is avalaible @ this adress :
http://www.shinze.com/index.php/2003/11/28/40-LesBonsConseilsDePappyDave
Feel free to comment, (postez vos commentaires).

19
Dave S. says:
December 05, 10h

To add: adding div {border: solid 1px #fff;} to a layout *really* helps debug layout problems.

20
December 08, 09h

Along similar lines as comment #19, a co-worker and I just came up with a technique to solve the common de-bugging question, “Where the heck is that gap coming from?”

First try using the * selector to determine the offending property like this:
* { margin: 0 !important; }
* { padding: 0 !important; }

Once you’ve narrowed down the property you can find out which tag is causing the gap like this:
div { margin: 0 !important; }
ul { margin: 0 !important; }

21
jim says:
December 09, 08h

Hey Dave, how about this for an idea? Until all browsers comply with the box model why not avoid the use of horizontal padding altogether and just use margins instead? That way we can say adios to all those hacks. On my home page I am currently using no padding at all. Is there a problem with this that I’m missing?

22
December 10, 08h

Dave,

“To add: adding div {border: solid 1px #fff;} to a layout *really* helps debug layout problems.”

Just a minor minor adjustment, but using #f00 instead of #fff is even nicer. Nothing can be overlooked when it has a big shiny RED border, but especially when designing layouts that use light colors a white border can be overlooked.

I personally generally use “border: 10px solid red;”
It’s just debug CSS so I won’t bother with doing a time-consuming #f00 when typing ‘red’ will suffice. :)

23
December 18, 06h

IE treats the border styles of inset and outset quite differently than Mozilla and Opera. IE’s version of inset and outset almost looks like two borders around the element.

Your best bet to make elements look like push buttons: use a border-style: solid and set the colors for border-top, border-right, border-bottom, and border-left individually.

24
Zoe says:
January 02, 09h

Great run-down of common CSS issues. One item I would suggest adding: Make sure you include a complete doctype on every page, preferably one that puts browsers into standards mode.

25
Alex H. says:
January 04, 09h

The following tip should be revised:

- Don’t use quotation marks around paths/URLs.

The reason you gave was that IE5/Mac chokes on quotation marks. In reality, it only chokes on *single* quotes. IE5/Mac handles double quotes without any problem (I’ve been using them forever).

26
Dave C. says:
January 09, 01h

I immersed myself heavily into the depths of CSS design and now I am stuck with an enigma: ALT tags..
If anyone knows how to utilize these under css please share it, its hard to justify making a well designed visual site using css layouts that can use the images displayed with quality search engine optimization. Tell me I missed something critical. Or is it all entirely about balance, Danielson.

27
joy bower says:
January 09, 12h

Re: Best Practices
This can be a potentially priceless resource. Thanks for hosting it. I noticed something as I read through.
It’s not clear to me which tips work/have been tested in which browsers/versions. Knowing these things would be very helpful.

28
Aaron Pinero says:
January 30, 08h

I don’t know if someone already mentioned this but I haven’t seen it in the discussion so I thought I would bring it up. Maybe it’s just stupidly obvious but I have come to believe that minimizing the use of classes should be a best practice. Or, another way of saying this is apply CSS attributes to basic HTML tags first (H1 { color:#ffffff; }) rather than using classes. Following this rule helps provide basic formatting to CSS-ignorant browsers (and text-based browsers). A web page that is styled using lots of SPAN and DIV tags doesn’t look like much in Lynx. I know that for most folks this really isn’t an issue, but think of it as a courtesy for surfers with a physical or technological impairment.

29
Mike says:
February 11, 05h

Never forget the “background-color” tag in the “body” tag.

If you want the background of the body to be white, always include body { background-color:#ffffff; } for those of us who don’t have a default window background color of white.

Some offenders:
www.yahoo.com
www.aol.com
www.sprint.com
www.pepsi.com

30
JamesC says:
April 08, 08h

Don’t know if this is news, but if you open your page in IE and save as “Web page, complete” it will save any linked style sheets in an expanded form, splitting all your grouped rules into individual rules

.this,.that,.theother{rules}

Becomes

.this{rules}
.that{rules}
.theother{rules}

Can be handy when trying to figure out what rule applies to what element.

31
JamesC says:
April 08, 08h

May want to ignore that, looks like it only saves the rules it understands. Could be usefull in its self but needs a longer look.

32
Alex says:
May 18, 12h

this piece of content is translated into Russian and published at http://www.webmascon.com/topics/coding/41a.asp

33
-jul- says:
May 25, 11h

Box model is wrong? CSS3 helps you! Peter-Paul Koch knows the fix: http://www.quirksmode.org/css/box.html . Just wait for Safari for support.

34
August 26, 06h

When it comes to layouts, a thing that is very oftenly forgot is the question “How important is this mismatch between browser A and B, does it need fixing?”

I believe a lot of people tend to fix small differences which have no effect on the page itself, but for it “to look the same”. Not everything is obliged to look the same, just as long as it satisfies.