Browser Formatting Context

[00:00:00]
>> Evgenii: So we mentioned the term browser formatting context multiple times. So let's understand what is that. So we mentioned that you have an elements and some kind of a realm. So, when the element falls into this realm, the rules are applied, and the rules can be pretty random.

[00:00:19]
So we can say, okay, if the element falls into the realm, then, for instance, the element should take 100% of the parent width, and it also should be rendered from top to bottom. So we basically replicated the block formatting context. But can we slightly complicate this example and say create a formatting context within the formatting context?

[00:00:46]
And apparently, we can do that. So, we can create a new formatting context, then place the element 2, and we assume that the rules are the same, and the element will take the 100% of the parent container width. But the key difference here that the inner formatting context is completely isolated from the outer formatting context.

[00:01:10]
Once element enters the realm, so it cannot be impacted by any other rules of outer context. We can also complicate this example by creating a new type formatting context, which we can call inline formatting context. So, and I'm gonna repeat the word for mining context multiple times now.

[00:01:32]
So, the element 3 may enter the context and we can say, okay, when the element enters the inline formatting context, it should be rendered from left to right, and it should take the width of the content it contains. And since the element 3 doesn't span full width, so when the element 4 appears in the context, so they render in a row as a string.

[00:02:04]
>> Evgenii: So, what are the key ideas of the formatting context? The first one is isolation, so elements within the context are shielded from the rules of the external context, it's also the scalability. The CSS spec developers, when they want to introduce a new rule set that apply to elements, they create a new context, and the most known one is like flex or the grid.

[00:02:27]
And it's also the predictability. So when you have a strict set of rules, you always know the position of the element and the placement. So it's time to become a browser and try to render the following HTML page going line by line and creating the formatting context like the browser does.

[00:02:47]
So, we start with the HTML. So HTML tag, when you initiate the page, always creates a new formatting context. But when we render the body tag, since body doesn't have any special properties assigned to that. So, the body just enters the formatting context, but it doesn't create a new one.

[00:03:04]
So, same applies to the heading, and same applies to an ordered list. But when it comes to the list element, you see that we applied display inline block. So, when the element has explicit property set for the style for display. This means that this instructs the browser that we need to create a new formatting context.

[00:03:29]
In this case, inline block is the special case of the block formatting context, so there is no inline block formatting context. So we initiated this new formatting context and every element placed now within that will be rendered as an inline block item. And the same applies to the next list item, to the paragraph three and paragraph four.

[00:03:52]
So, now we render this section. So when we render this section, we see that there is a display flex applied. This means that the flex formatting context is used, so every item becomes the flex item. But one thing now we have the span element, and remember we discussed that span creates the inline formatting context.

[00:04:14]
So whatever thing that is placed inside the span becomes inline content, so we created in a new inline formatting context. So, this is how browser constructs the different type of contexts, and how the elements are rendered.
>> Speaker 2: So, can you clarify the context set by the HTML tags themselves or does it have more to do with this CSS?

[00:04:36]
Cuz you could overwrite the default behavior of some of these tags with CSS, right?
>> Evgenii: So, when you initiate the HTML page, so it always sets the block formatting context by default, this is the default behavior. But I think you can override this if you set the style to HTML element.

[00:04:57]
So if you reset the flex, then there's smell we'll have to become the flex for mining context.
>> Speaker 2: Okay, so it's more about the CSS?
>> Evgenii: Yeah.
>> Speaker 2: Okay, the tags just give you the defaults, got it.