Child selectors are slower than more simple brethren. Is this true?

This is a affirmation that Jon Sykes sought out data for after he read the work of Jim Barraud.

His conclusion?

The skinny is that child selectors are a major performance issue.

This seemed to make sense, but to me I needed some sort of proof rather than just being told it’s that way by someone, so over the last two days I’ve tried two approaches to see if I can replicate the issue.

The first one was rather a half-assed idea that afterwards seems fundamentally flawed as a benchmark.

So I took a new approach which does seem to return some valid and rather interesting findings, particularly regarding Safari and Firefox 3 and how they react to child selectors and performance.

The tests show that there is slow down using child selectors over direct class name declarations in IE6, IE7 and Safari 3. Safari 3 being the most

impacted by child selectors. Firefox 2 has some impact, and Firefox 3 doesn’t seem to be impacted at all.

That said, this is a very extreme test, it is not often you’d have 20,000 class definitions in a single page or that all of them would use 4 levels of child selector.

Some developers said that .className may not render correctly compared to table tr td.className if you have 2 different rule sets. Since the second is more specific, it will take precedence.

What do you think? If this is true and I will have use more css classes.

When you are developing a site, there is a heck of a lot of “refreshing” going on. You start to get a pretty good feel for what your browser is going to pick up on a single refresh, and what it won’t. For example, I find that if I over-write an image file on the server, it will take me two refreshes for that image to update on the live site.

There is a little trick to prevent CSS caching that I can be used also on javascript scripts. To prevent the caching I add a timestamp ( I used a Unix Timestamp) to the end of the src link.

<link rel=“stylesheet” type=“text/css” href=“style.css?<?=time()?>“ />

Which results in this:

<link rel=“stylesheet” type=“text/css” href=”style.css?1138618081“ />

The theory here is that that link will change every second, and the browser will be tricked into thinking this is a new stylesheet and loading it fresh every time. Jason Edmond Beaird had the same idea and even created a little bookmarklet to force it.

My tests suggest that it works pretty well. What do you think? Do you know a better/smarter/faster way to do it?

IE 6 actually had the best CSS support of any browser when it first came out… SEVEN YEARS AGO. The little bugs in it’s CSS support still haunt us to this day. I still get comments from people who roundly reject any technique that doesn’t work in IE 6. While I generally refuse to pander to IE 6’s limitations, I still feel it is important to make things look right in it whenever possible. Here are that major bugs in IE that’ll get you every time:

Read the rest of this entry »

A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK!
There are many CSS layouts out there. Some rely on AP (Absolutely Positioned) elements, others use FLOATs. The former method is considered bad practice for its lack of flexibility while the latter is a powerful solution in building robust layouts.

Unfortunately, like most powerful tools, FLOATs can be a dangerous method to employ or at least very frustrating. First of all, the FLOAT concept itself is not easy to properly understand, and second of all, FLOATs are a source of many browser bugs (mainly IE bugs) which make FLOAT constructs difficult to master across browsers… and easy to break.

This article demonstrates an original solution that addresses semantics, construct, and design issues to deliver robust layouts.

Read the tutorial or take a sneak peek to the demo.

There have been a number of occasions when looking over other developers CSS I notice bits of code similar to the following…

#div {
      margin-top: 20px;
      margin-bottom: 10px;
      margin-right: 5px;
      margin-left: 25px;
      padding-top: 10px;
      padding-bottom: 15px;
      border-width: 1px;
      border-style: solid;
      border-color: #666666;
      font-family: Verdana, Helvetica, Arial;
      font-size: 14px;
      font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Read the rest of this entry »