Наверняка вы сталкивались с тем, что в CSS нельзя делить, умножать, складывать и вычитать разные единицы измерения. То есть запись
calc(100vw / 1px) не работает. А ведь так можно было бы получить количество пикселей в ширине вьюпорта, что можно было бы использовать для каких-нибудь интересных анимаций или других эффектов. Не ширину вьюпорта, а именно число пикселей, без единиц измерения.Джейн Ори хакнула современные возможности CSS и всё-таки получила ширину вьюпорта числом.
1. Регистрируем CSS-переменную с типом
<length>. Так браузер позволит использовать её в операциях с длиной, что пригодится нам дальше.
@property --100vw {
syntax: "<length>";
initial-value: 0px;
inherits: false;
}
2. Используем обратные тригонометрические функции в CSS, а именно тангенс и арктангенс:
--width: calc(
tan(atan2(var(--100vw), 1px))
);
Из школьного курса геометрии можно вспомнить, как работают тангенс и арктангенс. По сути здесь записано
--100vw / 1px, зачем-то обёрнутое в вычисления. Но именно благодаря вычислениям в итоге внутри --width будет лежать число, а именно 100vw в пикселях. Если записать просто calc(var(--100vw) / 1px), вы получите ошибку.В комментариях к статье Темани Афиф справедливо пишет, что сейчас в Chrome не учитывается тип делителя, что по сути является ошибкой браузерной реализации. То есть напишите там хоть 1px, хоть 1em, разницы нет. Но в будущем, когда тригонометрические функции починят, код с пикселями будет всё равно работать.
https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j
