https://developer.chrome.com/blog/if-article?hl=ru В chrome уже работает оператор if в css. property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4); А вот реальный пример: button { aspect-ratio: 1; width: if(media(any-pointer: fine): 30px; else: 44px); } Ранее это нужно было бы написать так: button { aspect-ratio: 1; width: 44px; }

@media (any-pointer: fine) { button { width: 30px; } } Сейчас умеет работать с запросами style(), media() и supports(). В целом, может пригодиться. Главное не сильно увлекаться. .card { --status: attr(data-status type()); border-color: if( style(--status: pending): royalblue; style(--status: complete): seagreen; else: gray); background-color: if( style(--status: pending): #eff7fa; style(--status: complete): #f6fff6; else: #f7f7f7); }``