Вы не поверите, но теперь в 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”.