Вы не знаете CSS. Мои вопросы о CSS с ответами

Рассчитаем специфичность селектора из каждого правила. В первом используется псевдо-класс :where(). У него всегда специфичность 0, 0, 0. У второго правила используется только селектор по типу. Таким образом получается, что специфичность равняется 0, 0, 1. Этот селектор специфичнее, поэтому второе правило побеждает.

:where(.awesome-text) {
  background-color: tomato; /* специфичность 0, 0, 0. */ 
}

span {
  background-color: lightblue; /* специфичность 0, 0, 1. Это правило выиграло */
}

Правильный ответ: lightblue.

Когда у элемента установлено свойство display со значением grid, то по умолчанию браузеры делают свойство height его дочерних элементов таким, чтобы оно занимало всё доступное пространство. По этой причине высота элемента с классом .grid-container будет равномерно распределяться между значениями свойства height у элементов с классом .awesome-block.

У нас их два. Поэтому надо разделить 200px на 2. Получаем 100px.

Правильный ответ: 100px.

На алгоритм расчёта свойства height влияет свойство display. Если элемент с display: block находится внутри элемента, у которого указано свойство display со значением block, то свойство height рассчитывается по высоте содержимого. Это первый наш случай.

Второй элемент с классом .awesome-block является дочерним элементом элемента с классом .flex-direction. У него установлено свойство display со значением flex. В этом случае уже браузеры рассчитывают свойство height так, чтобы оно совпадало со значением свойства height родительского элемента, т. е. элемента с классом .flex-container.

Правильный ответ: Браузеры рассчитывают значение по-разному, потому что элементы с классом .awesome-block находятся внутри элементов с разным значением для свойства display. В частности первый элемент с классом .awesome-block находится внутри элемента с display: block, а второй с display: flex.

Для правильного ответа нужно вспомнить, относительно чего рассчитываются значения свойств top, right, bottom и left при использовании значения relative и absolute для свойства position.

В первом случае браузеры отсчитывают значение от той точки, где располагается элемент до применения свойств top, right, bottom и left. В случае со значением absolute браузеры используют границы родительского элемента с нестатичным типом позиционирования (значения relative, absolute, fixed, sticky для свойства position) или вьюпорта. При этом происходит установка значения для свойств width и height, если они не заданы явно.

По этой причине во втором случае элемент сразу растягивается по всем сторонам. В первом случае такого не происходит. Элемент остаётся на месте и не отображается, потому что у него не задано свойство height.

Правильный ответ: Нет. В первом случае элемент останется на месте, но он визуально не будет отображён, потому что у него не задано свойство height. Во втором случае элемент отобразится на весь вьюпорт.

После добавления свойства position со значением fixed к элементу, он перестаёт влиять на размеры родительского элемента. Он пропадает. По этой причине в нашем примере браузеры вычислят значение 0 для свойства height у элемента с классом .fixed-panel в первом случае.

При значении sticky такого не происходит. Элемент продолжает влиять на размеры родителя. В нашем примере будет вычислено значение 100px.

Правильный ответ: Нет. Значения будут разные. В первом случае браузеры вычислят 0px, а во втором 100px.

Для правильного ответа нужно помнить, что пользовательские свойства — самодостаточные свойства, и для них также работает механизм наследования. Они наследуют значение между друг другом, если у них одинаковое наименование. В нашем примере это --page-background-color.

По этой причине браузеры наследуют значение lightblue из пользовательского свойства --page-background-color из первого правила, а потом передают его в свойство background-color.

Правильный ответ: lightblue.

В нашем примере используются четыре пользовательских CSS-свойства для установки значения для свойства margin. Такое использование пользовательских свойств заставляет передавать все значения для них. Если этого не сделать, то браузеры не могут правильно соотнести значения, а в итоге просто не применят значения.

Это и произошло. В итоге мы увидим, что у свойства margin установлено значение 0 со всех сторон.

Правильный ответ: 0px.

При использовании ключевого слова unset важно помнить о том, что есть свойства, которые могут наследовать значение от родителя, и не могут. Например, свойство color может, поэтому в нашем примере у элемента <p> вместо unset будет использоваться значение #e2e2e2.

Если свойство не может наследовать значение, то браузеры буду использовать значение из веб-стандартов. У свойства background-color это значение transparent. Оно будет использовано в нашем примере.

Правильный ответ: Правда.

При изменении значения большинство свойств вызывают этап перерисовки элемента. Исключением являются свойства трансформации и свойство opacity. В первом случае используется более современная альтернатива для свойства transform со значением translateX(). По этой причине при анимировании свойства этапа перерисовки не будет.

Во втором случае изменяется значение свойства left, поэтому браузеры будут перерисовывать элемент на каждое изменение значения.

Правильный ответ: Нет. Наоборот, в первом случае браузеры не будут рассчитывать геометрию элемента, а во втором будут.

Свойства inline-size и block-size относят к группе свойств, зависящих от направления текста. В нашем примере установлено свойство writing-mode со значением vertical-lr. При этом значении за ширину блока уже отвечает свойство block-size, и для свойства width будет установлено значение 320px.

Правильный ответ: 320px.