Определение запросов мультимедиа CSS в селекторах

Есть ли какие-либо проблемы (производительность - моя главная задача), если вместо определения селекторов css в запросах мультимедиа (пример 1) вы определяете запросы к мультимедиа в css-селекторах (пример 2).

Пример 1 - селектора css в запросах медиа

@media (min-width: 600px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1000px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

@media (min-width: 1500px) {
  .foo { ... }
  .bar { ... }
  .hello { ... }
  .world{ ... }
}

Пример 2 - медиа-запросы в селекторах css

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.hello {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.world{
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

Возможно, вам интересно: "Зачем это?". В LESS существуют некоторые ограничения, связанные с расширением классов во внутренних медиа-запросах, а также с помощью переменных диапазона.

Ответы

Ответ 1

Короткий ответ, нет. Нет проблем с производительностью при определении медиа-запросов в селекторах CSS.

Но давайте погрузиться в...

Как описано в статье Anselm Hannemann, отличной статье "Эффективность Интернета: один или тысячи медиа-запросов" , нет никакой потери производительности при добавлении медиа-запросов таким образом, каким вы являетесь.

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

.foo {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

.bar {
  @media (min-width: 600px) { ... }
  @media (min-width: 1000px) { ... }
  @media (min-width: 1500px) { ... }
}

Тем не менее, делает количество различных медиа-запросов, которые вы используете. Разные разные min-widths, max-widths и т.д.

Ответ 2

Не должно быть разницы в производительности, чтобы посмотреть, как браузеры обрабатывают мультимедийные запросы. Двигатели браузера сериализуют и вытесняют дублированные медиа-запросы, поэтому им нужно только один раз оценивать каждый медиа-запрос. Кроме того, они кэшируют запросы, чтобы впоследствии их можно было повторно использовать. Не имеет значения, используете ли вы один большой или несколько медиа-запросов в своем коде, предполагая, что ваши значения в основном одинаковы.

Некоторые из возможностей, когда могут возникать проблемы с производительностью

  • Вы используете несколько мультимедийных запросов с разными значениями, а окно браузера изменено. По мере изменения размера окна браузера несколько запросов к мультимедиа могут быть большими накладными расходами на процессоре.
  • Когда селектор CSS слишком сложный. Сложный селектор CSS значительно затрудняет работу, чем несколько запросов к мультимедиа. Поэтому наличие нескольких медиа-запросов внутри сложных селекторов может вызвать проблемы с производительностью.