The fundamentals of the browser

rendering - part 1By Barak Drechsler

How css feels like...

How css should feel...

Web rendering flow

1. Process HTML markup and build the DOM tree.

2. Process CSS markup and build the CSSOM tree.

3. Combine the DOM and CSSOM into a render tree.

4. Run layout on the render tree to compute geometry of each node.

5. Paint the individual nodes to the screen.

The web building blocks are boxes

The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion.

As a browser renders a web page layout, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another.

The Box Model(content-box)

The Box Model(border-box)

Play Time - Box Models https://plnkr.co/edit/XNYbkiuXiSH49haIhdCv?p=preview

Quick recap for the box properties

Overflow: defaults to visible, requires the box to have explicit height, or percentage to be calculated by parent element height.

Height: isn’t inherited! Any div in the way can interfere with it children heights

Border, padding, margin, are straightforward...

Play Time - Height & Overflow https://plnkr.co/edit/23kJgu8u1AssnLlHVt27?p=preview

Boxes types...

Block

Inline

Inline-block

none

(table, flex, grid)

Block

Block level elements do not sit inline, but break past them. If no width is set, will expand naturally to fill its parent container.

Can have margins and/or padding.

If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned). So, for a block element, it’s not necessary to give it a set width or to give it a width of 100%.

Ignores the vertical-align property.

Inline

Default value for elements. Think of elements like span, b or em

Will ignore top and bottom margin/padding settings, but will apply left and right margin/padding. Only moves horizontally, not vertically.

Is subject to vertical-align property.

Will ignore width and height properties.

If floated left or right, will automatically become a block-level element, subject to all block characteristics.

Inline Block

Very similar to inline to its parents in that it will set inline with the natural flow of text.

Very similar to block to its children in that it can have a width and height and its content can move vertically.

Think of a display:block element that has been rendered (or converted to an image) and then placed in the document inline

Margin and paddings work properly.

Width and height will be respected.

Play Time - inline, block, inline-block

https://codepen.io/barakdr/pen/GNrBRg

Summary

1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout => paint.

2. Each element is box.

3. It height is defined by it box-model, either (content-box or border-box).

4. We have a different types of boxes which affect element behaviour (inline, block, inline-block, flex, none)

The road ahead...

We now have to see, how can we affect how elements are being put together.

The ways to manipulate browser layout:

Floats

Positioning - next session

CSS tables

Flexbox

Grid

Float

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.

A floating element is one where the computed value of float is not none.

(MDN)

Play Time - floats https://plnkr.co/edit/Bz4hS2E9emkbr3fvts16?p=preview

Float - summary

1. When an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box or another floated element.

2. Float elements must be given explicit width, otherwise unexpected behavior could occur.

3. Non-positioned, non-floated, block-level elements act as if the floated element is not there.

4. To make parent of floats take it height, we must clear the floats, a trick could be adding overflow: auto.

5. Bootstrap grid system is float based.

Questions?