CSS performance question

Question

I am wondering when writing css rule, which one below render faster:

#avriable_info table td {width: 250px; font-size: 13px;}

or

#avriable_info table td {
    width: 250px; 
    font-size: 13px;
}

Answer 1

The difference is two line breaks. This difference is eliminated by the parsing of the file and is unnoticable compared to the parse time of the CSS.

Answer 2

Neither one will be "faster" to render than the other because most parsers will normalize a file before parsing. e.g. Getting rid of white spaces and new lines and such.

Now, if you have a huge file that isn't being gzipped across the wire then the first one will download faster to the client than the second one which will allow the browser to start rendering it before the larger, slower one.

Answer 3

Neither will make any noticeable difference. A couple of newlines in your CSS is gong to make no more than a few CPU instructions difference to the rendering.

Maybe if you had a million lines of CSS you might notice a millisecond's difference, but if you're optimising that much (especially on a webpage!) you have far more serious issues to worry about (and they're not code related! ;-)).