CSS is a language with a bunch of topics. There is a developer who knows all unlikely. Honestly, we don't need to know it to do our job. But there is a piece of CSS without that we can't do. It is the goal of my questions.
If you can't answer some questions, don't worry. It means you have a chance to level up your knowledge ЁЯШЙ
Pay attention, I use the Computed value term. It's a property value that you see in the DevTools Computed tab.
What will specificity be of the following selector?
:is(#container, .content, main) {
color: red;
}
The :is()
pseudo-class function helps browsers select the highest from a given selectors list. In our example, a more high selector is #container
. The specificity of this selector is 0, 1, 0, 0
. It will be used for the whole at-rule.
The computed value of the color
property is red
. True or false?
<body>
<span id="container" class="container">content</span>
</body>
.container {
color: red;
}
:where(#container) {
color: blue;
}
True. The :where()
pseudo-class function nulles specificity. So the .label
selector has more specificity. It's why the computed value of the color
property is red
.
What is the computed value of the background-color
property?
<body>
<div id="container" class="container">content</div>
</body>
@layer basic, components;
.container {
width: 1rem;
height: 1rem;
}
@layer components {
.container {
background-color: pink;
}
}
@layer basic {
#container {
background-color: blue;
}
}
Layers are defined in order of priority. The last is more high. So the answer is pink
.
What color will the square be in the following example?
.container {
display: inline;
width: 1rem;
height: 1rem;
background-color: currentColor;
}
If the element has display: inline
the width
and height
properties don't have an effect. We won't see a square.
What is the algorithm for calculating the computed value of the width
property of the .child
element?
<body>
<!-- case #1 -->
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>
<!-- case #2 -->
<div class="parent parent-flex">
<div class="child">content</div>
<div class="child">content</div>
</div>
</body>
.parent {
display: block;
}
.parent-flex {
display: flex;
}
In the case #1 the .child
elements are block-level elements. Their width
property is equal to the width
property of the parent element.
In the case #2 the .child
elements are flex items. Their width
property is calculated depending on content.
What is the computed value of the display
property of the pseudo-elements?
.parent {
display: inline-grid;
}
.parent::before {
content: "";
display: inline;
}
.parent::after {
content: "";
display: flex;
}
block
and flex
. The grid
or inline-grid
values transform inline-*
values of the display
property of the child elements to block alternative.
.parent {
display: inline-grid;
}
.parent::before {
content: "";
display: inline; /* display: block will be here */
}
.parent::after {
content: "";
display: flex; /* display: flex will be here */
}
What is the difference between the default position of the child elements in the case with the parent element with display: flex
and in the case with display: grid
?
The child elements inside the parent element with display: flex
display one by one in line. In contrast, the elements will be displayed one below the other in the case with display: grid
.
What is the computed value of the width
and height
properties of the .child
elements?
<body>
<div class="parent">
<div class="child">content</div>
<div class="child">content</div>
</div>
</body>
.parent {
display: grid;
width: 100rem;
height: 20rem;
}
The width
property of the .child
element is equal to the width
property of the parent element. So the computed value of the width
property is 1000px
.
The height
property of the child element inside of the parent with display: grid
fills all space. If the parent has a few items space will be shared between them equally. So the computed value of the height
property of the child element is 20rem / 2 = 10rem
, i.e 10 * 16 = 160px
.
I use 16px
like a browser's default font size.
The margins of the .child
element end up outside of the parent element in all cases. True or false?
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
/* case #1 */
.parent {
display: inline-flex;
}
.child {
display: block;
margin-block: 1rem;
}
/* case #2 */
.parent {
display: grid;
}
.child {
display: block;
margin-block: 1rem;
}
False. Margins of the child elements don't end up outside the parent element with display: flex
, display: inline-flex
, display: grid
and display: inline-grid
.
Does margin collapsing work inside elements with display: inline-flex
and display: inline-grid
?
No, it doesn't work. Margins will be summed up inside of the element with display: flex
, display: inline-flex
, display: grid
and display: inline-grid
.
The position of the pseudo-element is centered horizontally and vertically. True or false?
.container {
display: grid;
height: 100dvh;
}
.container::before {
content: "";
width: 1rem;
height: 1rem;
margin: auto;
}
True. Browsers will share all space between the childs and the parent's borders evenly.
What is the computed value of the min-width
property?
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
body {
display: block;
}
.parent {
display: grid;
/* min-width: ? */
}
.child {
/* min-width: ? */
}
The initial min-width
value is auto
. So the computed min-width
value of the .child
element is auto
.
But if the block
, inline
, inline-block
, table
or table-*
value is defined for the element the computed min-width
value of its child elements is 0
.
body {
display: block;
}
.parent {
display: grid;
/* min-width: 0 */
}
.child {
/* min-width: auto */
}
How can we use the gap
property to replace the margin
property?
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
.parent {
display: inline-flex;
}
.parent::before,
.parent::after {
content: "";
width: 1rem;
height: 1rem;
background-color: #222;
}
.parent::before {
margin-right: 1rem;
}
.parent::after {
margin-left: 1rem;
}
We should define the gap
property for the .parent
element.
.parent {
display: inline-flex;
gap: 1rem;
}
.parent::before,
.parent::after {
content: "";
width: 1rem;
height: 1rem;
background-color: #222;
}
The computed value of the display
property is block
. True or false?
.container {
position: absolute;
display: inline;
}
True. If the absolute
or fixed
value is defined browsers will transform all inline-*
values of the display
property to block alternatives.
.container {
position: absolute;
display: inline; /* display: block will be here */
}
Why is the computed value of the height
property of the .parent
element equal to 0
?
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
.child {
position: fixed;
}
The element with position: absolute
or position: fixed
is removed from the normal document flow. So the parent elements don't see it. It's why the computed value of the height
property is 0
.
What does the isolation
property do in the following example?
<body>
<div class="parent">
<div class="child">
<span>content</span>
</div>
</div>
</body>
.parent {
background-color: purple;
}
.child {
position: relative;
isolation: isolate;
}
.child::after {
content: "";
background-color: green;
position: absolute;
inset: 0;
z-index: -1;
}
We should remember which stacking context is used by browsers when using the z-index
property.
By default, a root stacking context is the html
element. It's why the pseudo-element is behind the .parent
element without isolation: isolate
.
We create a new stacking context with the isolation
property for the .child
element. So the pseudo-element displays behind the text but in front of the .parent
element.
What is the position of the pseudo-element?
.container {
display: grid;
place-items: center;
position: relative;
height: 100dvh;
}
.container::before {
content: "";
width: 1rem;
height: 1rem;
position: absolute;
bottom: 0;
}
First, the pseudo-elements displays in the center because place-items: center
is applied.
It shifts by Y axis to the bottom parent border after position: absolute
, bottom: 0
are applied because the top
, right
, bottom
and left
properties are more priority than the place-items
property.
What is the computed value of the width
property?
.container {
flex-basis: 250px;
max-width: 225px;
}
The flex-basis
property has priority over the width
property, but its value must also be in the range of values of the min-width
and max-width
properties. So the answer is 225px
.
What is the computed value of the padding
property?
:root {
--padding-vertical-start: 1rem;
--padding-horizontal-end: 2rem;
--padding-vertical-end: 3rem;
}
.container {
padding: var(--padding-vertical-start)
var(--padding-horizontal-end)
var(--padding-vertical-end)
var(--padding-horizontal-start);
}
We should define all parts of the shorthand when using CSS Custom Properties. If we don't make it browsers can't apply values.
It happens in our example. The padding
shorthand requires 4 values. But the developer defined only 3. Browsers can't set paddings. So the computed value is 0
.
Why will the computed value of the background-color
property be green
for the p
element?
body {
background-color: green;
}
p {
--background-color: inherit;
background-color: var(--background-color, inherit);
}
A CSS custom property inherits a value from the same custom property defined for parent elements. If a custom property is omitted browsers will use fallback.
In our example the --background-color
property is omitted from parent elements. So browsers use the fallback, i.e the inherit
keyword that inherits the green
value from the background-color
property of the body
element.
Make the scroll-behavior
property safe with vestibular motion disorders.
html {
scroll-behavior: smooth;
}
We should wrap code using the prefers-reduced-motion
media feature. It'll help to display smooth scrolling only if users allow it in OS settings.
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
What is the computed value of the font-size
property?
html {
font-size: calc(1rem + 1px);
}
Default browser font size is 16px
in most cases. If it isn't changed the computed value of the font-size
property will be 17px
.
P.S. If you wanna get more my CSS tips join to my newsletter CSS isn't magic