Получение размера окна на чистом 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”.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх