Well, you can also pull these properties by using an undocumented method in MooTools, as I just learned from Mark Obcena. How? It’s very simple as you will see.

Code

1
2

var selector_rules = new Fx.CSS().search('.some_class');
// returns an object with camelCase key's

See, isn’t that simple? Keep in mind that this doesn’t give you every single property. In my tests of running this code with Firebug on GameSpot.com, font-family and overflow properties were missing in the returned object when it clearly shows up in Firebug’s CSS panel.

The Take Away

If you didn’t head over to Andrew’s article to learn the ins-and-outs of his explanation, which I think you should because you’ll understand why you’re using this code, here are the two main things I learned:

Adding a background image to the html and body elements works fine, and you can use it in place of multiple background images that only Safari currently supports.

And…

There’s one big gotcha though: if you need to use absolute or relative positioning for elements inside the body element. I’d assumed that since all elements obtain a positioning context from the body element by default, if I centered the body element the default positioning context should adjust accordingly. I was wrong! The default positioning context remains fixed to the viewport; you have to add position:relative; to the body style to create a new positioning context.

The Code

So, you end up with this awesome code:

1
2
3
4
5
6
7
8
9
10

html {
   background-color: #333;
}
 
body {
    background-color: #fff;
    width: 750px;
    margin: 0 auto;
    position:relative;
}

Thank you Andrew! I’ve learned a lot from your article.

Selectors: Fast to Slow

Jon Sykes did some CSS performance testing and the results show which selectors were fast/slow. You can check out his post for his approach, which includes a zip file of the html files he used. Just so you know, there’s probably more testing to be done, such as testing pseudo-classes and different combination’s of selectors. I’ll just give you the summary of his results, from fastest to slowest.

1. Tag – a
2. Class – .class
3. Descender – div div div p a.class
4. Child – div > div > div > p > a.class

Selectors: Specificity

Remember the saying: “Less is more” because that is the case here. Sitepoint’s CSS Reference’s definition:

Specificity is a mechanism within the CSS cascade that aids conflict resolution. The concept of specificity states that when two or more declarations that apply to the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence.

So when we compare specificity to Jon’s results, the more specific the selector, the slower it is. I also find that the more specific selectors takes up more time and keystrokes.

For example, I have this HTML to style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div class="latest_news">
    <div class="box>
        <ul class="stories_list">
            <li>
                <div class="info">
                    <a class="headline">Around the Globe</a>
                </div>
            </li>
            <li>
                <div class="info">
                    <a class="headline">Current Events</a>
                </div>
            </li>
        </ul>
    </div>
</div>

Example Styles 1.
Say I want to style the headlines in that story list. The general style is short, thus it SHOULD be fast. The override is a little longer so it’s a little slower.

1
2
3
4
5

/* General style to start */
.story_list a {font-size:14px; font-weight:bold;}
 
/* Override style */
.latest_news .story_list a.headline {font-size:12px;}

Example Styles 2.
The following styles the same HTML above, but they are much longer.

1
2
3
4
5

/* General style to start */
div .box .story_list li .info a {font-size:14px; font-weight:bold;}
 
/* Override style */
div.latest_news .box .story_list li .info a.headline {font-size:12px;}

When you compare styles #1 and styles #2, you’ll notice that #1 is easier to override because it’s short. #2 takes a few more class names before it can override the general styles.

Conclusion

So what I’m saying is to keep things short and sweet. It will be easier to override when your stylesheet becomes complex. It will be faster too.

The Solution

It was related to a pseudo selector in CSS, :hover to be exact. I’ll simplify it so it won’t look exactly like what it did on GameSpot. The line was incorrectly coded.

Problem

1

#some_container .anchor:hover{text-decoration:underline;}

Solution

1

#some_container a.anchor:hover{text-decoration:underline;}

Do you see the difference there? The incorrect way was missing the “a”. I’m not totally positive why this would cause IE7 to hiccup but my theory is that IE7 was trying to apply :hover onto the element with the “anchor” class, but had trouble finding it. And because the thread was so long, IE7 MAY have been trying to render and apply the rule to the element with the “anchor” class. Another thing is that the rule wasn’t even being applied in the forum pages, which makes things odd.

If you want to just get to the better solution…

The Example

1
2
3
4

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
</div>

Proceeding with the example, div.clear is placed at the bottom of div.container, which solves the problem. Div.container’s border now wraps all the elements within.

1
2
3
4
5

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
    <div class="clear" style="clear:both;"></div>
</div>

The Better Solution

But why should we even bother placing an extra element? It’s not sexy. Here’s the solution: Use height:1% or width:100% and overflow:auto||hidden on div.container. Height and width on div.container would set the hasLayout property in IE, thus fixing a slew of float/box-model bugs (more on hasLayout). Overflow auto or hidden tells div.container to wrap everything within it.

Note: This won’t work if the element is floated, which would cause it to shrink to the percentage height or width.

The HTML

1
2
3
4

<div class="container" style="border:1px solid #000;">
    <img src="something.gif" height="50" width="50" alt="Alt img txt" style="background:green; float:left;" />
    <p style="margin:0;">Text inside the container div.</p>
</div>

The CSS

1

div.container {height:1%; overflow:hidden;}

1
2
3
4
5
6
7
8
9
10

.example {
    /* long */
    padding-top:1px;
    padding-right:2px;
    padding-bottom:3px;
    padding-left:4px;
 
    /* short */
    padding:1px 2px 3px 4px;
}

To help you with the shorthand, Dustin Diaz took the time to put together a CSS shorthand guide. Way to go Dustin! Check the guide for in-depth descriptions, examples, and Dustins “quirky facts” (such as shorthand defaults).

SitePoint CSS Reference is another source for shorthand properties, or any property in general, you should/could/would use.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Other Resets

There are actually a lot more choices besides Eric Meyers. I found several more at a post on Pinceladas da Web. It is in Portuguese so you may need to translate.

CSS Best Practices Posts:

1. Reset CSS
2. CSS Best Practice #2: Shorthand Properties
3. 
   CSS Best Practice #3: Clear Floated Containers (with Height||Width and Overflow)
4. CSS Best Practice #4: Understand Selector Specificity for Better Speed and Easier Override

Make use of compression and minification if you’ve got large files and lots of ‘em. Besides, your styles should be reusable so you won’t have gigantic files.

Thank you Jon, for such a great in-depth article. Really nice work.