DEV Community

Stas Melnikov
Stas Melnikov

Posted on

You Should Know CSS. My questions to level up your CSS skill

#css #webdev #frontend

Hey, folks!

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.

These questions aren't suitable for beginners. You should have at least one year of experience. Two years is better. This time is enough to understand why I wrote these questions.

Also, you can follow for developing the project on Github.

Let's go!

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.container {
  color: red;
}

:where(#container) {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

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 will a shape be displayed in the following example? 

.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}
Enter fullscreen mode Exit fullscreen mode

If the element has display: inline the width and height properties don't have an effect. We won't see a square. We won't see anything.

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>
Enter fullscreen mode Exit fullscreen mode 
.parent {
  display: block;
}

.parent-flex {
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}
Enter fullscreen mode Exit fullscreen mode

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 1600px.

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>
Enter fullscreen mode Exit fullscreen mode 
/* case #1 */
.parent {
  display: inline-flex;
}

.child {
  display: block;
  margin-block: 1rem;
}

/* case #2 */
.parent {
  display: grid;
}

.child {
  display: block;
  margin-block: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
body {
  display: block;
}

.parent {
  display: grid;
  /* min-width: ? */
}

.child {
  /* min-width: ? */
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

How can we use the gap property to replace the margin property? 

<body>
  <div class="parent">
    <div class="child">content</div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

The computed value of the display property is block. True or false? 

.container {
  position: absolute;
  display: inline;
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.child {
  position: fixed;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
.parent {
  background-color: purple;
}

.child {
  position: relative;
  isolation: isolate;
}

.child::after {
  content: "";
  background-color: green;

  position: absolute;
  inset: 0;
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
alohci profile image
Nicholas Stimpson • • Edited

Some really challenging questions there, made me think quite a lot.

I've got one for you though. For the below code, is the min-width computed value of the .child element = 0?

  <div class="container">
    <div class="parent">
      <div class="child">Test</div>
    </div>
  </div>
Enter fullscreen mode Exit fullscreen mode 
.container {
  display: block;
}
.parent {
  min-width: inherit;
  display: flex;
}
.child {
  min-width: inherit;
}
Enter fullscreen mode Exit fullscreen mode

No, it's "auto".

The value that you see in the DevTools Computed tab is not the computed value but the resolved value.

The computed value is the value that is used for inheritance by child elements when needed.

Also, the min-width computed value of block, inline, inline-block, table or table-* elements is not 0, the resolved value is. If an element's specified value of min-width is "auto", then the computed value is "auto", always.

So the computed value of the .container element is "auto", and this is inherited by the .parent element. The computed value of the .parent element is therefore also "auto". And it follows that the .child element flex item min-width computed value is "auto" too.

Because flex items have special automatic minimum size rules, the resolved value is the same as the computed value, and so you can verify this by checking the min-width value for the .child item in the DevTools Computed tab.

Collapse
 
melnik909 profile image
Stas Melnikov • • Edited

I'm not sure I understand you. The sense of your message is the "computed value" term is not correct. Is it true?

I remember your comment about "computed" and "resolved" values before. I use the terms that developers will see in their tools. If the developers of DevTools use the term that is not correct it's not my problem.

The "computed value" term might be understood not like "computed value" from web-standards. The "computed value" might indicate like something what is a result of calculations.

Please, get me a few points what did you mean

Collapse
 
alohci profile image
Nicholas Stimpson • • Edited

The term "computed value" has a very defined meaning in CSS. The specification says

The final value of a property is the result of a four-step calculation: the value is determined through specification (the "specified value"), then resolved into a value that is used for inheritance (the "computed value"), then converted into an absolute value if necessary (the "used value"), and finally transformed according to the limitations of the local environment (the "actual value").

Any other meaning that you apply to it is incorrect. Now you can call black "white" if you like, but it's not conducive to helping other people understand.

My point is that even taking your definition of the value shown in the DevTools, my example provides what would be a surprising result. That a property value that is 0px in the parent, when inherited becomes a value of "auto" in the child, and that the only way to understand how this can happen is to understand "computed value" and "resolved value" correctly.

Thread Thread
 
melnik909 profile image
Stas Melnikov • • Edited

The 1 point.

A majority of developers doesn't know about the terms of the spec. I know. You too. But my goal is to help people who don't know. I told what is the computed value in the start of the article. It's what people can see in DevTools.

The theoretical knowledge is cool. But it is useless in every day job. People work with DevTools. They see the "Computed" tab. They don't think what the spec names of the "Computed value".

I'm a man who 10 years teach people. My goal is to explain CSS in such a way that will be understood for a majority of people.

The 2 point.

If you want the terms of the spec will be known please write article, create the Github repository with explanations or something other. The comments below my article won't help you.

The 3 point.

Your example is not surprising for me. I know the answer.

Thread Thread
 
wass_supp_6e189b8fb3b6d16 profile image
Wass Supp • • Edited

It is very important to use the correct jargon and technical terms specially when learning. If you start with an incorrect terminology you are likely to reinforce an incorrect understanding over time until you are simply hard to understand and people won't give the time of day. It is a small point here maybe but it can have a huge knock on effect. It is not like you chose Computed Value as a non technical term or colloquialism for understanding. If nothing else this short clarification is very important. You are trying to "level [CSS devs] up" but not speaking in CSS in this case. Over time the browser spec is likely to change, the CSS spec is far less likely. This is why I think this needs clarifying. If you are trying to improve a developers understanding of CSS just concede that you made a mistake and fix it. Arguing after you have agreed you were wrong and not changing your use of language is childish.
I apologise to be so harsh. I think that CSS is underused now'a'days as tailwind/master/windy have grown massively. I don't think this is a good thing and trying to improve peoples CSS skill is admirable. Doubling down rather than saying ok lets fix this is the worst mistake you can make so please don't take this the wrong way

Read next

rogerdimonte profile image

Crear una Ruta en Next JS

Roger -

leapcell profile image

A Brief History of Frontend Engineering

Leapcell -

arindam_1729 profile image

7 Developer Tools That Will Boost Your Workflow in 2025

Arindam Majumder -

annnanya profile image

🚀 My Journey Exploring React 19's New Features

Ananya Singh -