How final CSS values are determined - Value processing

In my last two blog posts I discussed how the browser determines the final values to be used for styling.

In this blog, I examine another part of how the browser determines these values: value processing.

There are a number of steps taken by the browser to produce the final values for elements. All values used by the browser to display content must be in pixels, and there must be one value per property. In order to determine these values, the following cascading series of processes takes place:

1) Declared value - this the value(s) that a browser has determined belongs to a property or element. There are often conflicting declared values at this point.

2) Cascaded value - with the aid of methods I discussed in my previous posts such as source and specificity, a 'winning' value is chosen from the declared values.

3) Specified value - at this point, there may not be values for a property. If a value has not been specified, a default value is inserted here. 

4) Computed value - here is where relative units such as em, rem, are converted to pixels. Relative URLs are also converted to absolute URLs. The conversions that take place at this stage are only ones that can be performed by examining the element and its parents. Conversions which require more expensive operations such as laying out the web page, are not performed at this point.

5) Used value - here is where the remaining calculations, including the ones that rely on the layout of the page take place.

6) Actual value - this the value that is actually used on the page and it may be different than the used value in certain circumstances. For example, if a used value is a decimal, but the browser can only render an integer value, the actual value would be the integer value.

Here is an excellent resource from the W3C for the information above, including a table showing how values progress through the cascade.