en
Как правильно использовать новый синтаксис Media Query в CSS

Как правильно использовать новый синтаксис Media Query в CSS

Андрей КовтунАндрей Ковтун, 1 мин чтения

Реализация нового синтаксиса Media Queries Level 4 уже появилась во всех браузерах, а конкретнее в Firefox 63+, Chrome 104+.

Зачем нам ещё один синтаксис?

Для начала сравним оба синтаксиса:

Старый:

.teaser__image {
  width: 100%;
}

@media (max-width: 619px) {
  .teaser__image {
    width: 100px;
  }
}

@media (min-width: 620px) and (max-width: 768px) {
  .teaser__image {
    width: 180px;
  }
}

Новый:

.teaser__image {
  width: 100%;
}

@media (width < 620px) {
  .teaser__image {
    width: 100px;
  }
}

@media (620px <= width <= 768px) {
  .teaser__image {
    width: 180px;
  }
}

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

Новый синтаксис можно описать в схеме:

Синтаксис Media Queries Level 4

Что делать со старыми браузерами?

Здесь на помощь придёт PostCSS.

PostCSS — инструмент, написанный на Node.js Андреем Ситником для автоматизации рутинных операций CSS. PostCSS ещё называют Post-processor, так как его обычно запускают уже после начальной компиляции стилей. Возможности PostCSS можно расширять с помощью плагинов.

Самый известный плагин — это autoprefixer, который используют многие, но не многие знают, что он разработан именно как плагин к PostCSS.

Множество плагинов PostCSS позволяют нам писать код, используя новейшие возможности CSS, на выходе компилируя всё это в код, понятный старым браузерам.

Подключаем новый синтаксис

Устанавливаем плагин PostCSS:

npm i -D postcss postcss-media-minmax

Создаём файл postcss.config.js для конфигурации PostCSS.

const mediaMinMax = require('postcss-media-minmax');

module.exports = {
  plugins: [mediaMinMax],
};

Дальше подключаем PostCSS. Это уже зависит от используемого сборщика.

Eleventy

Например для генератора статических сайтов Eleventy (на котором работает этот блог) код подключения будет:

npm i -D eleventy-postcss-extension

И добавляем в .eleventy.js:

const pluginCSS = require('eleventy-postcss-extension')
eleventyConfig.addPlugin(pluginCSS)

Gulp

Для Gulp нужно будет дополнительно установить:

npm i -D gulp-postcss

И затем добавить в pipeline:

const postcss = require('gulp-postcss');

// gulp code here
.pipe(postcss())

Плагины будут подключены из конфигурационного файла, который мы написали ранее.

Nuxt

Nuxt поддерживает PostCSS из коробки. Поэтому для подключения плагинов нужно просто добавить их в соответствующую секцию конфигурационного файла nuxt.config.js:

export default defineNuxtConfig({
  ...
  postcss: {
    plugins: {
      'postcss-media-minmax': {},
    },
  },
  ...
})

Ссылки:

Последнее обновление: