Мои любимые вопросы о CSS с ответами. Версия 2023 года11.07.2023 17:01

В 2020 году я поделился списком моих любимых вопросов о CSS, который стал довольно популярным, судя по просмотрам. Спустя 3 года CSS изменился, и я решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства.

Работая над вопросами, мне хотелось помочь вам в изучении новых возможностей CSS и тех моментов, которые многие разработчики упускают, судя по моей практике. Также вы можете использовать их, если проводите интервью. Я буду только рад этому. А теперь давайте начнём.

▍ Какая специфичность следующего правила?

:is(#container, .content, main) {
  color: red;
}

▍ Верно ли, что браузеры вычислят значение red для свойства color?

  текст элемента

.label {
  color: red;
}

:where(#label) {
  color: blue;
}

▍ Перепишите следующий код так, чтобы свойства применялись при клике на кнопку, но не применялись, когда на неё сфокусировались при помощи клавиатуры.

.button {
  outline: none;
  color: red;
}

.button:focus:not(:focus-visible) {
  outline: none;
  color: red;
}

▍ Какое вычисленное значение для свойства display у псевдоэлементов ::before и ::after?

.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;	
}

.parent::after {
  content: "";
  display: flex;
}

.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline; /* здесь будет display: block */		
}

.parent::after {
  content: "";
  display: flex; /* здесь будет display: flex */
}

▍ Как по умолчанию отображаются дочерние элементы внутри родительского с display: grid или display: inline-grid?

▍ Чему равняется вычисленное значение для свойства width и height у элементов .child?

  

    
элемент №1
    
элемент №2
  

.parent {
  display: grid;
  width: 1000px;
  height: 400px;
}

▍ Верно ли, что внешние отступы у первого и последнего элемента p выходят за границы родительского элемента?

body {
  display: grid;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

▍ Если добавить display: grid к элементу, будут ли схлопываться внешние отступы у его дочерних элементов?

▍ Псевдоэлемент ::before располагается по центру по горизонтали и по вертикали. Да или нет?

.box {
  display: inline-grid;
  width: 200px;
  height: 200px;
}

.box::before {
  content: "";
  width: 15px;
  height: 15px;
  margin: auto;
}

▍ В следующем примере для свойства padding будет установлено значение 0. Правда или ложь?

:root {    
  --padding-vertical-start: 30px;
  --padding-horizontal-end: 40px;
  --padding-vertical-end: 50px;
}

.box {
  padding: var(--padding-vertical-start) 
	       var(--padding-horizontal-end) 
	       var(--padding-vertical-end) 
	       var(--padding-horizontal-start);
}

▍ Какое вычисленное значение будет у свойства font-size и background-color у элемента p?

body {
  --font-size: purple;
  --background-color: 20px;
	
  font-size: 10px;
  background-color: green;
}

p {
  --font-size: inherit;
  --background-color: inherit;
	
  font-size: var(--font-size, 50px);
  background-color: var(--background-color, red);
}

body {
  --font-size: purple;
  --background-color: 20px;
	
  font-size: 10px;
  background-color: green;
}

p {
  --font-size: inherit; /* здесь значение purple */
  --background-color: inherit; /* здесь значение 20px */
	
  font-size: var(--font-size, 50px);
  background-color: var(--background-color, red);
}

body {
  --font-size: purple;
  --background-color: 20px;
	
  font-size: 10px;
  background-color: green;
}

p {
  --font-size: inherit; 
  --background-color: inherit; 
	
  font-size: var(--font-size, 50px); /* здесь получается font-size: 10px */
  background-color: var(--background-color, red); /* здесь получается background-color: transparent */
}

▍ Почему для элемента p браузеры вычислят значение green для свойства background-color?

body {
  background-color: green;
}

p {
  --background-color: inherit;
  background-color: var(--background-color, inherit);
}

▍ Каким свойством можно сократить количество определённых свойств для псевдоэлемента ::before до трёх?

.parent {
  position: relative;
}

.parent::before {
  content: "";
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
}

.parent {
  position: relative;
}

.parent::before {
  content: "";
  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parent {
  position: relative;
}

.parent::before {
  content: ""; 
  position: absolute;
  inset: 0;
}

▍ Перепишите следующий код так, чтобы определение значений для свойств margin и padding было без использования 0

.box {
  margin: 0 20px 0 40px;
  padding: 30px 0 15px;
}

.box {
  margin-inline: 40px 20px;
  padding-block: 30px 15px;
}

▍ Как с помощью свойства gap можно сократить следующий код до одного правила?

ul {
  display: flex;
}

li:not(:last-child) {
  margin-right: 15px;
}

ul {
  display: flex;
  gap: 15px;
}

▍ Как с помощью свойства isolation расположить псевдоэлемент ::after позади текста, чтобы он не перекрывался фоном элемента .parent?

  

    

      текст элемента
    
  

.parent {
  background-color: purple;
}

.container {
  position: relative;
}

.container::after {
  content: "";
  background-color: green;
  
  position: absolute;
  inset: 0;
  z-index: -1;
}

.parent {
  background-color: purple;
}

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

.container::after {
  content: "";
  background-color: green;
  
  position: absolute;
  inset: 0;
  z-index: -1;
}

▍ Вместо заключения

Мне интересно прочитать, какие темы о CSS, по вашему мнению, я упустил. Или, возможно, у вас есть свой список любимых вопросов. Так что, пожалуйста, делитесь. Я нацелен написать третью версию через 3 года! Ваша помощь будет очень кстати. Спасибо.

Выиграй телескоп и другие призы в космическом квизе от RUVDS. Поехали?

© Habrahabr.ru