45. Block formatting context (BFC)
Floats, absolutely positioned elements, block
containers (such as inline-blocks, table-cells, and
table-captions) that are not block boxes, and block
boxes with 'overflow' other than 'visible' (except
when that value has been propagated to the
viewport) establish new block formatting contexts
for their contents.
@gregwhitworth {layout}
46. Block formatting context (BFC)
@gregwhitworth {layout}
Absolute
Positioned Box
This box creates a
new BFC
70. DOM Tree
Basic Example
<body>
<p>
width: 50px
text
node
Box Tree
CSS Box
CSS Box
Line Box Line Box
Why are there 2 line boxes for
the 1 text node?
@gregwhitworth {layout}
82. Box Tree
CSS Box
CSS Box
Line Box
float: left
@gregwhitworth {layout}
<article>
<button>
83. Box Tree
CSS Box
Line Box
float: left
background: orange
padding: 3px 10px;
border: 2px solid blue;
margin: 5px;
@gregwhitworth {layout}
84. Box Tree
CSS Box
Line Box
SHARE IT
@gregwhitworth {layout}
Max Width
SHARE
IT
Min Width
115px
86px
85. Box Tree
CSS Box
CSS Box
Line Box
SHARE IT
@gregwhitworth {layout}
<article>
<button>
86. Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
SHARE IT
@gregwhitworth {layout}
<article>
<button> <p>
87. Box Tree
CSS Box
CSS Box CSS Box
Line Box Line Box
@gregwhitworth {layout}
Lorem ipsum dolor sit
SHARE IT
amet, consectetur adi
<article>
<button> <p>
88. Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB
@gregwhitworth {layout}
Lorem ipsum dolor sit
amet, consectetur
SHARE IT
adipiscing elit. Nullam pell<article>
<button> <p>
89. Box Tree
CSS Box
CSS Box CSS Box
Line Box LB LB LB
@gregwhitworth {layout}
Lorem ipsum dolor sit
amet, consectetur
adipiscing elit. Nullam pellentesq
SHARE IT
<article>
<button> <p>
91. A box—such as a page box,
column box, or region—that
contains a portion (or all) of a
fragmented flow.
Fragmentainer
@gregwhitworth {layout}
92. <body>
<div>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras nibh
orci, tincidunt eget enim et,
pellentesque condimentum risus. Aenean
sollicitudin risus velit, quis tempor
leo malesuada vel. Donec consequat
aliquet mauris. Vestibulum ante ipsum
primis in faucibus
</div>
</body>
HTML
CSS
div {
columns: 2;
column-fill: auto;
height: 300px;
}
@gregwhitworth {layout}
velit, quis tempor leo
malesuada vel. Donec
consequat aliquet mauris.
Vestibulum ante ipsum primis
in faucibus
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
nibh orci, tincidunt eget enim et,
pellentesque condimentum risus.
Aenean sollicitudin risus
Work on layout, we handle the CSS parsing, cascade and then creation of the box tree
Goals: Understand the rendering pipeline and how your CSS can impact it
Help when investigating issues with your layout
Aid in building more performant pages by understanding how various approaches impact the pipeline
Niels covered DOM tree creation yesterday during HTML day, so we’ll just stick to the CSS specific stuff
Selector
Selector
Selector
Selector
For types that take type value-percentage you should only have auto, %, px
a BFC understands how to position its children and its geometry is not affected by floats
In order to know how big this box is, and to proceed with laying out the rest of the tree which requires the inline content to flow around that of the float, we need to measure the box with that of its content.
We do a content measure pass by doing layout in unconstrained space.
After the content measurement is done, the item is laid out using this information, but within the available space of that of its containing block.
Since this is a float, we pass the space that is taken up by the float to that of its parent. This is done so the other inline content can take this into account when its their turn to lay out.
We pass in the geometry of the exclusion area taken up by the float. This is done so the other inline content can take this geometry into account and flow around the float.
The inline origin of this line box starts at the end of the inline end position of the float. Then it lays out as much text as it can, then backtracks – just like in our Hello World example.
a positioned element with a z-index with a value other than auto or for example using opacity. Additionally there are partial stacking contexts, but we won’t be going into that today.
The purpose of compositing is to take multiple composition layers that are filled with painted scenes and combine them into one.
This slide shows the example of the animation
Example CSS to achieve the pulsing effect
Based on various heuristics, Clippy here is promoted to its own composite layer.
So what does that mean to have it’s own layer, looking back at the rendering pipeline what paint produces is actually two images, rather than one. Both are placed into GPU memory
Then compositing combines them together into one image
Quick Question,
What is at coordinate
x: 45px y:75px?
Quick Question,
What is at coordinate
x: 45px y:75px?
Example CSS to achieve the pulsing effect
Example CSS to achieve the pulsing effect
Quick Question,
What is at coordinate
x: 45px y:75px?
Example CSS to achieve the pulsing effect
Quick Question,
What is at coordinate
x: 45px y:75px?