👩‍💻 Удаление единиц измерения из любых CSS значений

Хотите преобразовать значение длины в значение без единицы измерения?

Из любого значения 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