Fundamentals of Browser Rendering Css Overview PT 1
Download as pptx, pdf0 likes253 views
The document outlines the fundamentals of browser rendering, detailing the process from HTML and CSS to the creation of the render tree and layout. It emphasizes the CSS box model, explaining how elements are represented as boxes and discusses different box types such as block, inline, and inline-block. Additionally, it covers manipulation techniques for browser layout, including floats and their effects on document flow.
Fundamentals of Browser Rendering Css Overview PT 1
- 1. The fundamentals of the browser rendering - part 1 By Barak Drechsler
- 2. How css feels like...
- 4. 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.
- 6. 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.
- 9. Play Time - Box Models https://plnkr.co/edit/XNYbkiuXiS H49haIhdCv?p=preview
- 10. 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...
- 11. Play Time - Height & Overflow https://plnkr.co/edit/23kJgu8u1A ssnLlHVt27?p=preview
- 13. 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.
- 14. 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.
- 15. 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.
- 16. Play Time - inline, block, inline- block https://codepen.io/barakdr/pen/ GNrBRg
- 17. 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)
- 18. 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
- 19. 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)
- 20. Play Time - floats https://plnkr.co/edit/Bz4hS2E9e mkbr3fvts16?p=preview
- 21. 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.
- 22. Questions?
Editor's Notes
- #5: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
- #6: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
- #14: https://github.com/vasanthk/css-refresher-notes
- #15: https://github.com/vasanthk/css-refresher-notes
- #16: https://github.com/vasanthk/css-refresher-notes
- #18: https://github.com/vasanthk/css-refresher-notes
- #19: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction
- #20: https://developer.mozilla.org/en-US/docs/Web/CSS/float
- #22: https://developer.mozilla.org/en-US/docs/Web/CSS/float