- Every DOM element (even text) is modelized in CSS by a box, and{' '} + Every node of{' '} + + the render tree + {' '} + (even text) is modelized by a box, and{' '} it is really important to understand how this box system works to master layout techniques and every little detail about CSS.
@@ -63,97 +81,73 @@ const Kata: NextPage = () => ( for every CSS property there is a difference between the specified value in your CSS code and the value that is actually computed by the browser. - {' '} - Most of the time the specified and computed values will be the same but in - a lot of cases the browser will override the specified value. +
- The box model properties will impact (or not) the box characteristics{' '}
- depending on the display mode.
+ A quick demonstration: the browser might not honor the width property if there
+ is a min-width property. Thus, the width specified property and actual box
+ characteristics will be different.
- You can change the display mode with the display CSS property. We’ll see it
- more in depth in the next kata but for now remember that there are two main display modes:{' '}
- block and inline.
-
width and height properties are respected.
- width and height properties do not apply.
-
- All elements have a default display mode. For instance, div, h1{' '}
- and p are block by default while a, strong and{' '}
- span are inline.
-
- In the above example, something is not really intuitive: if you inspect the first box with - the dev tools, we end up with a distance from border to border included of 222px. Let’s - bring up the box model again: + In the above example, something is not really intuitive: if you inspect the box with the dev + tools, we end up with a distance from border to border included of 122px. Let’s bring up the + box model again:
- We get 222px because: 1px from left border + 10px from left{' '}
- padding + 200px from width + 20px from right padding{' '}
- + 1px from right border = 222px. This is not intuitive because most humans will
+ We get 122px because: 1px from left border + 10px from left{' '}
+ padding + 100px from width + 20px from right padding{' '}
+ + 1px from right border = 122px. This is not intuitive because most humans will
consider a box what is delimited by the borders. But fear not!{' '}
There is an alternate box model.
The default box model is the content-box model. The other box model is the{' '}
border-box model. In this model, the width and height characteristics{' '}
- are defined as content + padding + border. By setting the box-sizing property,
- you can change the model used.
+ are defined as content + padding + border.
+
+ By setting the{' '}
+
+ box-sizing
+ {' '}
+ property, you can change the box model used for this box.
@@ -214,65 +216,243 @@ const Kata: NextPage = () => ( display: block; border: 1px solid black; padding: 10px; - width: 200px; - height: 200px; + width: 100px; + height: 100px; } -Block box`} +Box`} + /> +
+ The box characteristics are computed from the CSS properties depending on the + current layout. +
+ ++ There are four main layouts to know: Flow, Table, Flex and Grid. We will see each of them in + following katas.{' '} + + After learning all the main layouts, you’ll have a good understanding of which one is the + more adapted to your specific case. + +
+ ++ + A layout is a set of rules and CSS properties to dictate how boxes will interact with each + other. + +
+ +Let me list some implications of this definition:
+ +flex-direction for the Flex layout),{' '}
+
+ but it will also make use of standard properties (width,{' '}
+ margin...)
+
+ width: auto;) can behave differently in the context of
+ different layouts
+
+ flex-direction)
+ will be completely useless in the context of other layouts
+ + You should see layouts as a toolbox: within the context of a layout, you’ll + be able to predict how elements will place next to each other. You don’t like a layout’s + ruleset? Change your toolbox and use another layout. +
display property
+
+
+ You can switch between layouts with the{' '}
+
+ display
+ {' '}
+ property.
+ {' '}
+ This property have two possible syntaxes:
+
display: [shorthand];: the old syntax, supported by all browsers
+ display: [outer] [inner];: the new, full syntax,{' '}
+
+ supported by all modern browsers (you might not have it if you have Chrome < 115)
+
+ + In this kata we’ll learn this property with its full, two values syntax to better understand + what happens. This syntax specify the outer display type and the{' '} + inner display type. +
+ +block and{' '}
+ inline. If the parent layout is not Flow, the outer display type is ignored.
+ flow, table, flex, grid and many
+ more...
+ If you played a bit with the live editor, you may have noticed two issues.
+Think of it like this:
+ +For legacy reason we usually use shorthands, for instance:
+ ++ Shorthands are not a bad thing and you should continue to use them, however + the two value syntax is better for learning purposes. +
No worries! We’re going to understand what happens in the next two katas:
- -+ We will see the Flex layout in a further kata, our next goal is learning the Flow layout + (the default layout!). +
border-box model is actually more intuitive
display property changes the layout by changing the{' '}
+ inner display type of the box.
+ + Prerequisite: knowledge from the{' '} + Box model and Layout kata is necessary to + understand the concept of outer/inner display types. +
+- Read this kata carefully. It may be the most important kata of the dojo as it - addresses the most commonly misunderstood concepts of CSS and thus is one of the biggest - sources of CSS frustration. + The Flow layout is the basic default layout and is optimized for the primary role of a webpage + (like this one): display lines of text content with eventual boxes (such as images) between + paragraphs.
-- So far, we’ve learned CSS properties to style one element and change its color, - width, font size... but web pages are made of hundreds, often thousands of elements. -
++ + This may be the most important part of the dojo. The Flow layout is the default layout and + thus applies almost everywhere in a web page. By learning it correctly, many CSS + frustrations will disappear. + +
+ +- - A layout is a set of rules and CSS properties that dictates how multiple{' '} - elements will interact between each other. - {' '} + The Flow layout always happens in a{' '} + + Block Formatting Context + + . A BFC is created in certain conditions, including by:
-Let me list some implications of this definition:
-flex-direction for the flex layout),{' '}
-
- but it will also make use of standard properties (width,{' '}
- margin...)
-
+ The root html element
width: auto;) can behave differently in the context of
- different layouts
-
+ Flex and Grid items if they are neither Flex nor Grid nor Table containers themselves
float) will be
- completely useless in the context of other layouts
+ Elements with position: fixed or position: absolute
flow-root inner display type
+ - You should see layouts as a toolbox: within the context of a layout, you’ll - be able to predict how elements will place next to each other. You don’t like a layout’s - ruleset? Change your toolbox and use another layout. -
- -- There are four main layouts: flow (the default one), flex, grid, - and table. There are others, but they are more anecdotic.{' '} - - As flow is the default layout and you won’t use flex on every single DOM - element ever, you MUST master it. There is no way around it. Let me repeat - that: No. Way. Around. It. - {' '} - This is the goal of this kata. -
- -- Other layouts will be addressed in the second part of the dojo. After learning all the main - layouts, you’ll have a good understanding of which one is the more adapted to your specific - case. -
- -- Again,{' '} - - a layout is a set of rules and CSS properties that dictates how multiple{' '} - elements will interact between each other. - {' '} -
-- Hold on to your butts, because this kata is probably the most difficult part of this whole - website but also the most important. -
- -- The flow layout introduces a concept: the formatting context. Think of it as a - mini-layout inside the flow layout. The spec says that there are two formatting - contexts in the flow layout: -
- -Inside a BFC, the browser will recursively crawl every nested element:
-- We’ll see how each formatting context works further down, but for now, keep in mind that - there are block and inline contexts. -
- -- For this dojo, we will be working in English but take note that in other languages the - writing mode of the page could change and invert the block and inline directions to - horizontal and vertical respectively. -
- -Let’s sum up what we’ve learned:
+flow inner display type, the browser will flag the
+ element and its children as participating in the flow layout.
+ {' '}
+ We also say that the elements are in the flow. It will then scan the inner
+ display type of the children and continue.
+ flow inner display type, the
+ element itself will participate in the flow but its children will not be added to the flow
+ and the browser will stop there.
+ - How do I know which formatting context applies? This is one of the most - confusing parts of CSS, because it is implicit. There are four rules: + + Reminder: most elements will have a default display value that will make them participate + in the flow. +
-<html>{' '}
- element creates the higher one in the box tree
- <p>, <section> or{' '}
+ <div> will have a default of display: block flow;{' '}
+ (shorthand: display: block;)
<strong>, <em> or{' '}
+ <span> will have a default of display: inline flow;{' '}
+ (shorthand: display: inline;)
- (Yes I know that using block container box and block-level box is super - confusing but those are the exact terms in the spec.) + When every nested element is scanned, the browser ends up with a soup of boxes that + participate in the flow and that will be used for the layout algorithm.
+
+ Once the browser have determined which boxes will participate in the flow,{' '}
- But what are block-level and inline-level boxes?
- {' '}
- Remember, in CSS everything is a box.
- Text-related elements such as <strong>, <em> or{' '}
- <span> will create inline-level boxes. Other elements such as{' '}
- <p>, <section> or <div> will create
- block-level boxes.
+ it looks at their outer display type (which is either block or{' '}
+ inline) and create block-level boxes and inline-level boxes{' '}
+ accordingly.
+
+
+ One more definition: we call a block container box any box that will contain{' '} + block-level boxes or inline-level boxes. (Yes I know that using{' '} + block container box and block-level box is super confusing but those are + the exact terms in the spec.)
+ There is only one rule with block container boxes: a block container boxes{' '} + must contain only block-level boxes or only inline-level boxes.{' '} + + There can be no mixup between block-level boxes and inline-level boxes in a block + container box + +
+
What if I have some text that is not wrapped in inline elements such as{' '}
<span>?
{' '}
- In order to fix the rule of the inline formatting context (it must contain only inline-level
- boxes), the browser creates anonymous inline-level boxes around unwrapped text. You can’t
- select them with CSS but you can still inspect them with the dev tools.
+ In order to have only inline-level boxes in the parent block container box, the browser
+ creates anonymous inline-level boxes around unwrapped text. You can’t select them with CSS
+ but you can still inspect them with the dev tools.
<block>?
{' '}
- In order to fix the rule of the block formatting context (it must contain only block-level
- boxes), the browser creates anonymous block-level boxes around inline-level children. Again,
+ In order to have no mixup of block-level boxes and inline-level boxes in the block container
+ box, the browser creates anonymous block-level boxes around inline-level children. Again,
you can’t select them with CSS and you can’t inspect them with the dev tools (but
trust me, they are here).
- One thing that must be cleared up before going forward is that all these layout rules are - about boxes, not elements. DOM elements can create inline and block-level - boxes, but then you can forget about the DOM and only think in term of boxes. -
- -
- Furthermore, when creating boxes the browser will look at all the descendants in the DOM
- tree.{' '}
-
- By default, every element will be handled by its nearest parent block container box
-
- . We say that it will participate in the parent’s formatting context, or that it’s{' '}
- in the flow. That’s why the example below renders exactly the same as the example
- above, even if the DOM is different. All boxes are handled by the nearest block container
- box (created by the <html> element).
-
- If we try to sum up all of this, the browser takes all the elements, turns them into boxes - (block-level and inline-level boxes), arrange them in a block container box, introduces - anonymous block-level and inline-level boxes and creates formatting contexts accordingly. + If we try to sum up all of this, the browser takes all elements participating in the flow in + a block formatting context, turns them into boxes (block-level and inline-level boxes), + arrange them in block container boxes and introduces anonymous block-level and inline-level + boxes accordingly.
@@ -354,36 +271,32 @@ in a
Remember, we are dealing with boxes here.{' '}
- A formatting context doesn’t care about DOM elements. It only cares about block-level
- boxes and inline-level boxes.
+ The Flow layout doesn’t care about DOM elements. It only cares about block-level boxes and
+ inline-level boxes.
{' '}
The browser will see five boxes to group together:
- Thus, the
-
- To change the default behavior of DOM elements, you must use the{' '}
-
-
- In this kata we’ll learn this property with its full, two values syntax to better understand
- what happens.{' '}
-
- If you are on Chrome, you can temporarily switch to Firefox/Safari or use this matching
- table to achieve the same results:
-
-
- Now that we’ve cleared up these two syntax, let’s see how the{' '}
-
- Thus, a
- Now, let’s say we have a paragraph of elements forming an inline formatting context. We also
- have a block element, for instance a button, that we want to inline in our text.
+ Now, let’s say we have a paragraph with inline-level boxes. We also have a block element,
+ for instance a button, that we want to inline in our text. How can we do this?
<div> element
<span>
- <span>
<div> breaks the inline formatting context and forces a block
+ Thus, the <div> breaks the "no-mixup rule" and forces a block
formatting context by introducing anonymous block-level boxes around the groups of
inline-level boxes. The browser tries to reconcile other CSS properties in the most logical
way possible. Here, you can see that there is a border on the bottom, left and top sides of
- the first anonymous inline-level box and the right border is on the last anonymous and empty
- inline-level box (increase the border’s width if it is not clear enough).
- display
- {' '}
- property.
- {' '}
- This property has two possible syntaxes:
- display: [outer] [inner]; property is most commonly used with shorthands (
- block, inline, flex...) but here we’ll learn it with
- its full syntax to understand what happens.
-
-
-
- display: [shorthand];: the old syntax, supported by all browsers
- display: [outer] [inner];: the new, full syntax,{' '}
-
- supported by Firefox and Safari but not Chrome (yet)
-
-
-
-
- {fullSyntax}
- {shorthand}
- display: [outer] [inner] property works.
-
-
-
- block and inline.
- flow (participate in the parent’s formatting context), flow-root{' '}
- (create an independent formatting context using the flow layout), and other layout
- keywords such as flex and grid.
- <span> element defaults to display: inline flow;{' '}
- (same as display: inline;) and a <div> element defaults to{' '}
- display: block flow; (same as display: block;).
+ the first anonymous inline-level box and the right border is on the last anonymous
+ inline-level box.
flow. If the
inner display type is flow, the children of our button will participate in the
parent flow. The only child of our button is an unwrapped text, therefore an anonymous
- inline-level box, therefore an inline formatting context will apply everywhere and our
- button will lose some of its block-level box properties that we want to keep. By choosing{' '}
- flow-root, we force the creation of an independent block formatting context.
+ inline-level box, therefore our button will lose some of its block-level box properties that
+ we want to keep.
+
+ By choosing flow-root, we force the creation of an independent Block Formatting
+ Context. The BFC will introduce a root block container box that will honor block-level boxes
+ properties.
- Good! At this stage, you should have a good grasp of when and where formatting contexts - apply, and how to switch between them. + Good! At this stage, you should have a good grasp of how block-level boxes and + inline-level boxes are organized, and how to alter this organization. {' '} Don’t hesitate to let your brain cool off and think about it twice. I’m repeating myself but it probably is the most confusing concept about CSS, and it is really important to truly{' '} understand it.
+ ++ We then move on to the final part of the layout algorithm.{' '} + + Right now, we have a boxes tree with block container boxes containing only block-level + boxes or only inline-level boxes. + +
- Now that you know what are formatting contexts and where they apply, we can learn their - rules. Remember, a{' '} - - layout is a set of rules and CSS properties that dictates how multiple{' '} - elements will interact between each other, - {' '} - and a formatting context is a mini-layout inside the flow layout. Let’s learn the rules of - the block formatting context. + When a block container box has only block-level boxes as children,{' '} + block formatting applies:
- Next, we learn the rules for the inline formatting context. Let’s bring up the schema from{' '} + When a block container box has only inline-level boxes as children,{' '} + inline formatting applies. Let’s bring up the schema from{' '} the styling text kata to understand what is the line height and the baseline:
@@ -704,17 +538,40 @@ div {width or height on inline boxes
vertical-align
{' '}
property sets how an inline-level box should behave in the vertical direction. Possible
- values are baseline (the default), top (the box will stick to
- the top of the line), bottom (same but at the bottom of the line),{' '}
- middle (centers vertically inside the line,{' '}
+ values are baseline (the default, will align the baselines of the boxes),{' '}
+ top (the box will stick to the top of the line), bottom (same
+ but at the bottom of the line), middle (centers vertically inside the line,{' '}
which is not the same as baseline!
@@ -792,6 +633,7 @@ html {
values:
+
Ooof! That was a hard one. Now you should have enough knowledge to truly understand and use - the flow layout! In the next katas, we’ll focus on edge case behaviors that break - the flow layout such as overflowing content and positioned elements. + the Flow layout!
<html> element creates a block container box,{' '}
- display: flow-root; is another way to create one
- display: [outer] [inner]; property changes the{' '}
- outer display type and inner display type of an element
+ The Flow layout happens in a Block Formatting Context (BFC) created by the{' '}
+ flow-root inner display type{' '}
+
+ and many other cases that you can find on MDN
+
+ .
flow inner display type and
+ their children will participate in the layout.
flow, flow-root, flex, and{' '}
- grid are all valid values
+ Inside a BFC, the browser will group block-level and inline-level boxes so that there is
+ no mix of block-level and inline-level boxes using anonymous block-level and{' '}
+ anonymous inline-level boxes.
display: block; is the same as display: block flow;
- display: inline; is the same as display: inline flow;
- display: inline-block; is the same as{' '}
- display: inline flow-root;
- display: flex; is the same as display: block flex;
- display: inline-flex; is the same as display: inline flex;
- grid and table)
- width, height and{' '}
margin
diff --git a/components/Table/Table.module.scss b/components/Table/Table.module.scss
index dca0615..3e1b7c1 100644
--- a/components/Table/Table.module.scss
+++ b/components/Table/Table.module.scss
@@ -8,7 +8,7 @@
.table {
border-collapse: collapse;
- width: 100%;
+ margin: 0 auto;
}
.table-header-cell {
diff --git a/services/skills.tsx b/services/skills.tsx
index 5e9ed55..596a031 100644
--- a/services/skills.tsx
+++ b/services/skills.tsx
@@ -99,35 +99,39 @@ export const SKILLS = {
},
'box-model-alternatives': {
skill: 'What are the two possible box models?',
- kataUrl: PAGES.TheBoxModel.url() + '#i-broke-the-box-model',
+ kataUrl: PAGES.TheBoxModel.url() + '#box-sizing-property',
},
'box-model-layout': {
skill: 'In CSS, what is a layout?',
- kataUrl: PAGES.TheBoxModel.url() + '#definition',
+ kataUrl: PAGES.TheBoxModel.url() + '#layouts',
},
'box-model-common-layouts': {
skill: 'What are the most common layouts?',
- kataUrl: PAGES.TheBoxModel.url() + '#definition',
+ kataUrl: PAGES.TheBoxModel.url() + '#layouts',
},
'box-model-outer-inner-display': {
skill: 'What are the outer and inner display types?',
- kataUrl: PAGES.TheBoxModel.url() + '#mastering-formatting-contexts',
+ kataUrl: PAGES.TheBoxModel.url() + '#display',
+ },
+ 'flow-layout-block-formatting-context': {
+ skill: 'What is a Block Formatting Context?',
+ kataUrl: PAGES.FlowLayout.url() + '#block-formatting-context',
},
'flow-layout-boxes': {
skill: 'How inline and block boxes are laid out in the Flow layout?',
- kataUrl: PAGES.FlowLayout.url() + '#definition',
+ kataUrl: PAGES.FlowLayout.url() + '#inline-block-boxes-grouping',
},
- 'flow-layout-block-formatting-context': {
- skill: 'What are the rules of the block formatting context?',
- kataUrl: PAGES.FlowLayout.url() + '#block-formatting-context',
+ 'flow-layout-block-formatting': {
+ skill: 'What are the rules of block formatting?',
+ kataUrl: PAGES.FlowLayout.url() + '#block-formatting',
},
'flow-layout-margin-collapsing': {
skill: 'How does margin collapsing work?',
- kataUrl: PAGES.FlowLayout.url() + '#block-formatting-context',
+ kataUrl: PAGES.FlowLayout.url() + '#block-formatting',
},
- 'flow-layout-inline-formatting-context': {
- skill: 'What are the rules of the inline formatting context?',
- kataUrl: PAGES.FlowLayout.url() + '#inline-formatting-context',
+ 'flow-layout-inline-formatting': {
+ skill: 'What are the rules of inline formatting?',
+ kataUrl: PAGES.FlowLayout.url() + '#inline-formatting',
},
} satisfies { [key: string]: Skill };