Получение размера окна на чистом CSS

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

Определение свойств

Правило @property — это новая функция в CSS, которая позволяет разработчикам создавать пользовательские свойства и задавать их типы, наследование и начальные значения. Используя эту функцию, мы можем считывать определенные значения и передавать их в пользовательские свойства.

В примере ниже мы определяем два пользовательских свойства, --w_raw и --h_raw, представляющие ширину и высоту окна соответственно:

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

• syntax: '<length>' указывает, что тип свойства — длина.
• inherits: true указывает, что свойство может быть унаследовано.
• initial-value устанавливает начальное значение свойства в 100vw и 100vh, которые являются шириной и высотой окна просмотра.

Удаление единиц измерения

Теперь мы получили значения ширины и высоты окна, но они все еще включают единицы измерения. Как удалить единицы, чтобы получить чистые числовые значения? Это вопрос математики, поэтому нам нужно использовать математические инструменты в CSS: atan2(y, x) и tan().

• Функция atan2(y, x) возвращает угол (в радианах) от оси x до точки (x, y)
• Функция tan() вычисляет тангенс заданного угла

Комбинируя их, мы можем получить чистые числовые значения. Здесь мы передаем var(--w_raw) и 1px в качестве параметров, чтобы вычислить угол ширины и затем преобразовать его в число. Таким образом, мы преобразуем ширину и высоту в безразмерные величины и сохраняем их в переменных :root.

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

Отображение чисел

Теперь, когда числовые значения хранятся в CSS, как их отобразить? С помощью счетчика!

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

Мы создаем псевдоэлемент ::before в теле, чтобы отобразить содержимое CSS.

• counter-reset инициализирует счетчики h и w и устанавливает их значения в var(--h) и var(--w).
• content: counter(w) «x» counter(h); отображает счетчики ширины и высоты в формате «ширина x высота».

Готово!

Теперь у вас есть индикатор размера окна, реализованный на чистом CSS.

Браузер будет обновлять значения --w и --h в реальном времени и отображать их на странице. Весь процесс полностью обходится без JavaScript.

Нажмите здесь, чтобы попробовать онлайн-демонстрацию.

Перевод статьи “Get Window Size in Pure CSS”.