Хотите преобразовать значение длины в значение без единицы измерения?
Из любого значения CSS можно убрать единицу измерения, для получения целого числа!
⚠️ Это экспериментальный хак ⚠️
@property --unitless-val {
syntax: '<integer>';
inherits: true;
initial-value: 0;
}
@property --_u {
syntax: '<length>';
inherits: true;
initial-value: 0;
}
:root {
--val: 25em; /* используем любую единицу измерения длинны (px, em, ex, ch, rem, ...)*/
/* умножаем, затем делим на наибольшее значение, чтобы получить единицу измерения */
--_m: 3.35544e07; /* это значение зависит от браузера */
--_u: calc(var(--val)*var(--_m));
--unit: calc(var(--_u)/var(--_m)); /* = 1em */
--unitless-val: tan(atan2(var(--val),var(--unit))); /* = 25 */
/* В ближайшем будущем можно будет сделать
--unitless-val: calc(var(--val)/var(--unit));
*/
}
/* для Firefox нужно другое значение */
@supports (-moz-appearance: none) {
:root {
--_m: 3.40282e38;
}
}Вы можете подумать, что можно использовать
Infinity в качестве наибольшего значения, но это не сработает, потому что при делении на бесконечность всегда будет получаться 0.Проверено в 👩💻 Firefox, 👩💻 Chrome и 👩💻 Edge. В Firefox работает только с
px, потому что значение преобразуется в px внутри переменной --_u.👩💻 Пример на CodePen
📱 @dev_notes_ru
#css #hack