@djEban

Как браузер выполнить наложение эти стилей в данном случае?

Есть такие стили
.title {
  color: red;
  height: 30px;
}

@media screen and (max-width: 1000px) {
  .title {
    display: none;
  }
}


Если зайдет клиент с разрешением <= 1000px, то браузер сначала наложит стили цвета и высоты, а потом скроет блок, или он поймет, что будет накладываться display: none и не станет выполнять другие стили?
То же самое касается и оверрайда стилей:
.title {
  color: red;
  height: 30px;
}

@media screen and (max-width: 1000px) {
  .title {
    height: 60px;
  }
}

Браузер сначала задаст высоту 30, а потом 60, тем самым вызвав два рефлоу?
То есть куда улчше было бы использовать еще и @media min-width?
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Длинный ответ:
https://developer.mozilla.org/ru/docs/Web/Performa...

Короткий ответ:
Для каждого узла найдёт соответствующие правила и применит наиболее приоритетное из них. В данном случае - из медиа. А вот эта формулировка "сначала одно потом другое" - лишена смысл. Файл само собой читается последовательно, а не все строки одновременно.

Браузер сначала задаст высоту 30, а потом 60, тем самым вызвав два рефлоу?

Рефлоу - это когда уже страница была отрисована. На первичной отрисовке это, по идее, произойдёт в первом случае при построении render tree(title в него не попадёт, так как display: none), во втором, при компоновке. Но в обоих случаях до первичной отрисовки.

То есть куда улчше было бы использовать еще и media min-width?

Зачем намеренно утяжелять дерево стилей?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы