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

01.05.2025, Ссылка на новость

В бету Хромиума 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 версии эта функция станет доступна и для настройки отступов.