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

Question

[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?

Answer 1

[Вадим]

Длинный ответ:
https://developer.mozilla.org/ru/docs/Web/Performa...

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

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

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

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

Зачем намеренно утяжелять дерево стилей?

Comments

[djEban]

Я так понимаю, целесообразно писать и max-width, и min-width только в том случае, если стили сильно отличаются
Например,

@media screen and (min-width: 1001px) {
     .wrapper {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       height: 500px;
       background-color: red;
     }
   }

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

[Вадим]

djEban, Верно.
А ещё есть подход mobile-first, который предполагает, что сначала идёт вёрстка под мобильные, с подглядыванием на десктопную.
Это связано с тем, что на мобильных поток элементом более "естественный" для восприятия.
Но это нужно Вам будет отдельно погуглить. Но суть в том, что при таком подходе пишут стили медиа не через max-width, а через min-width

[djEban]

Вадим, понятно. Спасибо

[Вадим]

djEban, Хотя вот тот пример кода что Вы скинули выглядит странно.
Один из вариантом можно сделать стилями по умолчанию без вынесения в отдельные медиа.

[djEban]

Вадим, ну этот пример, видимо, не совсем понятен ввиду его, да, странности, так как подобное редко встретишь. Я хотел показать, что на ПК нам нужен грид + высота фиксированная и цвет фона. А на мобилке - только флекс

[Вадим]

djEban, Ну вот в мобайл фёрст подходе это выглядело бы примерно так:

// мобильные стили, без медиа
.wrapper {
  display: flex;
}

// Десктопные стили (при условии что было решено считать десктоп от 1001px)
@media screen and (min-width: 1001px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 500px;
    background-color: red;
  }
}

[Вадим]

djEban, а в классическом desktop-firs наоборот, display: grid были бы обычными стилями, а @media max-width: 1000px - мобильными