all-threads-bot

Frontender`s Spectre

[HTML Academy] Великий апгрейд CSS-условий | CSS боль

3 ноября 2025 г., 19:43

28 октября 2025 года случилось историческое событие — CSS получил настоящий апгрейд логики. Теперь `if()` и стилевые контейнерные запросы умеют сравнивать переменные, проверять диапазоны и работать с числами, углами и даже временем. CSS официально перестаёт быть просто языком стилей — он начинает принимать решения. В этом выпуске: - Что нового появилось в Chrome 142 и почему это событие можно считать эпохальным. - Почему старый `if()` был бесполезен и как теперь всё изменилось. - Диапазонные сравнения: “больше”, “меньше”, “равно” — и сравнение переменных между собой. - Как работает новый синтаксис из спецификации CSS Conditional Rules Module Level 5. - Живые примеры: сравниваем `x` и `y`, числа, проценты, единицы измерения и даже результаты `attr()`. - Как CSS теперь может управлять состоянием интерфейса — без единой строчки JavaScript. - Фолбэки: как использовать приём с `sign()` для старых браузеров. Будущее уже здесь: CSS умеет сравнивать, думать и принимать решения — пора пересмотреть, где заканчивается JavaScript и начинается магия стилей. Таймкоды: 00:00:00 Введение в обновление CSS 00:01:04 Пример использования в интерфейсах 00:02:47 Ограничения предыдущего релиза 00:04:40 Новые возможности в Chrome 142 00:05:47 Спецификация и примеры 00:08:12 Дополнительные возможности сравнений 00:10:53 Применение в контейнерных запросах 00:11:42 Экспериментальные функции CSS и их альтернативы 00:12:35 Применение условной логики в CSS Демонстрации → [htmlacademy.ru/demos/239](http://htmlacademy.ru/demos/239) [htmlacademy.ru/demos/243](http://htmlacademy.ru/demos/243) [htmlacademy.ru/demos/241](http://htmlacademy.ru/demos/241) Спецификации → [w3.org/TR/css-conditional-5](http://w3.org/TR/css-conditional-5) [developer.chrome.com/blog/new-in-chrome-142](http://developer.chrome.com/blog/new-in-chrome-142)