CSS - (Implementation|Processing Model|Rendering)

About

How user agents may implements CSS.

Steps

A user agent processes a source by going through the following steps:

Parsing

Parse the source document and create a document tree (CSSOM)

Retrieving all style sheets associated with the target media type

  • Identify the target media type
  • Retrieve all style sheets associated with the document that are specified for the target media type.

Calculation of the property values

Annotate every element of the document tree by assigning a single value to every property that is applicable to the target media type. Properties are assigned values according to the cascading and inheritance mechanisms.

Generation of the formatting structure

From the annotated document tree, generate a formatting structure. Often, the formatting structure closely resembles the document tree, but it may also differ significantly, notably when authors make use of:

The formatting structure:

  • need not be “tree-shaped” at all – the nature of the structure depends on the implementation.
  • may contain more or less information than the document tree.

For instance, if an element in the document tree has a value of 'none' for the display property, that element will generate nothing in the formatting structure. A list element, on the other hand, may generate more information in the formatting structure: the list element's content and list style information (e.g., a bullet image).

Note that the CSS user agent does not alter the document tree during this phase. In particular, content generated due to style sheets is not fed back to the document language processor (e.g., for reparsing).

Render the output

Transfer the formatting structure to the target medium. E.g.:

  • print the results,
  • display them on the screen,
  • render them as speech,
  • etc.

Rendering is the process by which user agent, after parsing the markup language (HTML, XML,…) and generating the DOM, apply visual rules to the DOM contents in order to draw on the screen.

Documentation / Reference





Discover More
Css - Declaration

Declaration are syntactic expressions that are contained in a declaration block to create a rule A declaration: is either empty or has two parts (separated by a colon (:) and optionally surrounded...



Share this page:
Follow us:
Task Runner