Question

Douglas Crockford describes the consequence of JavaScript inquiring a node’s style. How simply asking for the margin of a div causes the browser to ‘reflow’ the div in the browser’s rendering engine four times.

So that made me wonder, during the initial rendering of a page (or in Crockford’s jargon a “web scroll”) is it faster to write CSS that defines only the non-zero/non-default values? To provide an example:

div{  
  margin-left:2px;  
}

Than

div{  
  margin:0 0 0 2px;  
}

I know consequence of this ‘savings’ is insignificant, but I think it is still important to understand how the technologies are implemented. Also, this is not a question about formatting CSS–this is a question about the implementations of browsers rendering CSS.

Reference: http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4

Answer 1

No, depending on your browser, it will unpack the values in different ways before even applying the styles, and in Firefox, it would have a slight effect on the execution speed. It’s a good idea to use shorthand CSS either way though.

If you want to understand how it works, Firefox, unpacks the value:

{margin: 0 0 0 2px;}

as

{margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: .04pt;}

before applying the styles to the page. This is for normalization.

*(.04pt is an estimation)