Chrome 137 Beta – нововведения в CSS

В бету Хромиума 137 добавили несколько крутых фич для CSS, и первая из них – if() в CSS! Функция if() – лёгкий способ на основе CSS-переменных описывать условные значения для свойств. Например можно простым способом описать переключение светлой и тёмной темы только через одну переменную:

:root {
  --dark-color: #232323;
  --light-color: #f5f5f5;
}

body {
  --color: var(--light-color);

  background-color: var(--color);
  color: if(
    style(--color: var(--light-color)): var(--dark-color) ;
      else: var(--light-color)
  );

  @media (prefers-color-scheme: dark) {
    --color: var(--dark-color);
  }
}

Функция if() на данный момент – сокращение синтаксиса для кастомных CSS-функций.

Вторая крутая фича – логические свойства для изменения порядка в a11y-дереве. Это полезно для тех случаев, когда порядок элементов изменен через order во Флексах, или через grid-area в Гридах. До 137 Хромиума доступность таких элементов страдала, т.к. порядок визуально был один, а через скринридеры – другой. Теперь мы сможем ещё лучше настраивать Accessibility.

Из приятных плюшек нам добавят более лучшую поддержку функции shape(), добавленной в Chrome 136, которая позволяет описать кастомный путь для обрезки контента, а со 137 версии эта функция станет доступна и для настройки отступов.