Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The fundamentals
of browser
rendering - part 2
By Barak Drechsler
Recap from our previous
session...
1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout =>
pain...
Today's Agenda
We now have to see, how can we define how elements are aligned together.
Floats
Positioning
Collapsing Marg...
Float
The float CSS property specifies that an element should be taken from the normal flow and
placed along the left or r...
Play Time - floats
https://plnkr.co/edit/Bz4hS2E9e
mkbr3fvts16?p=preview
Floats Tricky Parts
Float - summary
1. When an element is floated it is taken out of the normal flow of the document. It is shifted
to the lef...
Positioning
1. Positioning allows you to move an element around the document.
2. We have 4 types of Positioning:
a. Static...
Static
The default value for all elements, represents the normal document flow.
Position related attributes have no effect...
Relative
This keyword lays out all elements as though the element were not positioned, and then adjust
the element's posit...
Absolute
Do not leave space for the element. Instead, position it at a specified position relative to its
closest position...
Fixed
Do not leave space for the element.
Instead, position it at a specified position relative to the screen's viewport a...
Play Time - Positions
https://plnkr.co/edit/JosJySkjT7V
Ah4xuTp98?p=preview
Collapsing Margins
CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can
combine to f...
Play Time - Collapsing Margins
https://plnkr.co/edit/wvaBa6A7R
9snWJVxoIOP?p=preview
Stacking context is the three-dimensional conceptualization of HTML elements along an
imaginary z-axis relative to the use...
Play Time - Stacking Context no
z-index.
https://plnkr.co/edit/9ygOvS1BiB
qsyatxcCML?p=preview
Positioning and assigning a z-index value to an HTML element creates a stacking context, (as
does assigning non-full opaci...
Play Time - Stacking Contexts
https://plnkr.co/edit/tzW4NsFWA
Hu0TLjAWEO1?p=preview
MDN menu example
Stacking Context - Summary
1. Stacking Context, is the concept of how the browser renders elements in the 3rd dimension
(f...
Other Worth Knowing...
1. Css Transform
2. Css Pseudo Elements, check this
3. MDN, anytime you are not sure about
what's g...
Questions?
Fundamentals of Browser Rendering Css Overview PT 2
Upcoming SlideShare
Loading in …5
×

Fundamentals of Browser Rendering Css Overview PT 2

Overview of the browser rendering process,
and all the CSS properties that define how our pages will look.

  • Be the first to comment

  • Be the first to like this

Fundamentals of Browser Rendering Css Overview PT 2

  1. 1. The fundamentals of browser rendering - part 2 By Barak Drechsler
  2. 2. Recap from our previous session... 1. We discussed the browser rendering flow DOM + CSSOM => Render Tree => Layout => paint. 2. Each element is box. 3. It size 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)
  3. 3. Today's Agenda We now have to see, how can we define how elements are aligned together. Floats Positioning Collapsing Margins Z-index and elements visibility order (stacking context).
  4. 4. 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)
  5. 5. Play Time - floats https://plnkr.co/edit/Bz4hS2E9e mkbr3fvts16?p=preview Floats Tricky Parts
  6. 6. 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.
  7. 7. Positioning 1. Positioning allows you to move an element around the document. 2. We have 4 types of Positioning: a. Static (default) b. Relative c. Absolute d. Fixed
  8. 8. Static The default value for all elements, represents the normal document flow. Position related attributes have no effect (top, left, etc…) Only usage is to override and reset other position values. Isn’t affected by z-index.
  9. 9. Relative This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned (MDN) - The Element starts where it should have been - You can move it from it’s original position via (top, left, etc…) - limits the scope of absolutely positioned child elements
  10. 10. Absolute Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. (MDN) - The element is out of the browser flow, meaning it won’t be affected by other elements. - Also it won’t affect other elements flow. - Will be relative to it closest non static parent, or to the html tag itself if none found.
  11. 11. Fixed Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context (MDN).
  12. 12. Play Time - Positions https://plnkr.co/edit/JosJySkjT7V Ah4xuTp98?p=preview
  13. 13. Collapsing Margins CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. (W3C SPEC) In short: when two topbottom margins touch each other they collapse 1. The higher margin is taken, and the smaller collapse to 0. 2. Negative and positive margins are added up rather than collapse. 3. Two Negative margins collapse, with the smaller one taken.
  14. 14. Play Time - Collapsing Margins https://plnkr.co/edit/wvaBa6A7R 9snWJVxoIOP?p=preview
  15. 15. Stacking context is the three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes. (MDN) Elements Order without z-index, are formed by the HTML hierarchy: 1. Last elements in HTML order will be displayed on top. 2. Positioned Elements have higher priority over static elements, which is strong then html order. 3rd Dimension, stacking context
  16. 16. Play Time - Stacking Context no z-index. https://plnkr.co/edit/9ygOvS1BiB qsyatxcCML?p=preview
  17. 17. Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity). Stacking contexts can be contained in other stacking contexts, and together create a hierarchy of stacking contexts. Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed. Each stacking context is self-contained: after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. Z-index & multi hierarchy stacks
  18. 18. Play Time - Stacking Contexts https://plnkr.co/edit/tzW4NsFWA Hu0TLjAWEO1?p=preview MDN menu example
  19. 19. Stacking Context - Summary 1. Stacking Context, is the concept of how the browser renders elements in the 3rd dimension (facing browser window). 2. By default context order is derived from html order (last element on top) 3. Default order gives priority for positioned elements over static elements. 4. Each context can host more contexts, each stacking context is self-contained. 5. New contexts are created by certain conditions a. HTML root
  20. 20. Other Worth Knowing... 1. Css Transform 2. Css Pseudo Elements, check this 3. MDN, anytime you are not sure about what's going on...
  21. 21. Questions?

×