{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2f2jd"},{"data":{"image":{"id":"6ac770c8569f0212227a917e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1rfi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы учили CSS по базовому курсу несколько лет назад, часть привычных решений уже можно писать проще. Поле ввода способно подстраиваться под текст, цвет текста — автоматически учитывать фон, а открытый

можно стилизовать без дополнительного класса.","type":"unstyled","key":"dmptu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это не экспериментальные свойства из далёких спецификаций. В 2026 году несколько таких возможностей вошли в Baseline Newly available: они работают в актуальных версиях основных браузеров, хотя поддержку старых браузеров перед использованием всё равно стоит проверять.","type":"unstyled","key":"59mk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разберём пять функций на простых примерах и посмотрим, где они действительно могут пригодиться в проекте.","type":"unstyled","key":"bgqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. field-sizing: поле ввода растёт вместе с текстом","type":"header-two","key":"3dkhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У и

обычно есть заранее заданный размер. Если текста становится больше, приходится отдельно настраивать высоту, прокрутку или писать JavaScript.","type":"unstyled","key":"a8pk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С field-sizing: content элемент может подстраиваться под своё содержимое. Свойство вошло в Baseline 2026 и с июня 2026 года поддерживается актуальными версиями основных браузеров.","type":"unstyled","key":"512kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простой пример:","type":"unstyled","key":"sr4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"textarea {","type":"unstyled","key":"5pj0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"field-sizing: content;","type":"unstyled","key":"94t8b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"min-height: 80px;","type":"unstyled","key":"c18ut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"max-height: 300px;","type":"unstyled","key":"4v1j2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7593b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователь начинает печатать, и поле постепенно увеличивается до заданного максимума.","type":"unstyled","key":"2pd33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"9k0k2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, в форме комментария, чате или поле для короткого описания. Пользователь сразу видит весь введённый текст, а разработчику не нужно отдельно рассчитывать высоту через JavaScript.","type":"unstyled","key":"3mpbs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для обычного однострочного поля это тоже работает. Например, поле поиска может увеличиваться вместе с запросом, пока не упрётся в установленное ограничение.","type":"unstyled","key":"dqd67"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Что попробовать","type":"unstyled","key":"agslq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте обычный <textarea>, добавьте field-sizing: content и сравните его с полем фиксированной высоты. Для первого знакомства с функцией этого достаточно.","type":"unstyled","key":"46s1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Container style queries: компонент реагирует на настройки родителя","type":"header-two","key":"dq4s0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container queries уже позволяют менять компонент в зависимости от размера контейнера, а style queries добавляют ещё один сценарий: можно смотреть на CSS custom properties родителя.","type":"unstyled","key":"5gmri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, у нас есть карточка, которая используется и на светлом, и на тёмном фоне.","type":"unstyled","key":"fq5b5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У контейнера задаём тему:","type":"unstyled","key":"e20ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".sidebar {","type":"unstyled","key":"a58cr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"--theme: dark;","type":"unstyled","key":"d5msi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"m8cq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А внутри карточки проверяем её:","type":"unstyled","key":"5bk4d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@container style(--theme: dark) {","type":"unstyled","key":"4mah2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card {","type":"unstyled","key":"2b258"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: white;","type":"unstyled","key":"b46o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #222;","type":"unstyled","key":"b6gep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"s4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"bna29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карточке не нужно отдельно добавлять класс card-dark. Она подстраивается под значение свойства контейнера.","type":"unstyled","key":"frtno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container style queries вошли в Baseline 2026. Сейчас наиболее практичный сценарий — запросы к custom properties.","type":"unstyled","key":"6rjkt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"egk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В компонентах, которые используются в разных частях сайта.","type":"unstyled","key":"e1fp2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна и та же карточка может оказаться:","type":"unstyled","key":"bmccb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"на светлом фоне;","type":"unordered-list-item","key":"49fbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"в тёмной боковой панели;","type":"unordered-list-item","key":"cg8ca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"внутри блока с другой цветовой темой;","type":"unordered-list-item","key":"dl0ft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"в нескольких вариантах одного интерфейса.","type":"unordered-list-item","key":"5658h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вместо набора дополнительных классов часть логики можно оставить внутри самого компонента.","type":"unstyled","key":"4q589"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Нужно ли новичку учить это сразу?","type":"unstyled","key":"fsvo8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала стоит разобраться с обычными CSS-переменными и media queries. Только после этого смысл style queries станет понятным.","type":"unstyled","key":"hbtp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. :open: стилизуем открытые элементы без лишнего класса","type":"header-two","key":"fc7h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Допустим, на странице есть блок FAQ:","type":"unstyled","key":"8iah4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<details>","type":"unstyled","key":"e56g6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<summary>Сколько длится обучение?</summary>","type":"unstyled","key":"7en6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<p>Ответ на вопрос.</p>","type":"unstyled","key":"qp2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</details>","type":"unstyled","key":"anq1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотим изменить цвет заголовка, когда пользователь открыл ответ.","type":"unstyled","key":"ctvaj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше для <details> часто использовали селектор по атрибуту:","type":"unstyled","key":"f0vtj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details[open] summary {","type":"unstyled","key":"2f9u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: blue;","type":"unstyled","key":"5jsgh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"dptto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь можно написать:","type":"unstyled","key":"15lou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details:open summary {","type":"unstyled","key":"fvhpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: blue;","type":"unstyled","key":"82t2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"aq138"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Псевдокласс :open выбирает элементы, которые могут находиться в открытом и закрытом состоянии и сейчас открыты. В Baseline он вошёл в мае 2026 года.","type":"unstyled","key":"3sqva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает он не только с <details>. Например, :open можно использовать для открытого <select>.","type":"unstyled","key":"d33eq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"7fpl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В FAQ, выпадающих элементах и других интерфейсах, где браузер уже умеет управлять состоянием открытия.","type":"unstyled","key":"44ae0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"4nsmq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details:open {","type":"unstyled","key":"82heh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #f4f4f4;","type":"unstyled","key":"104mt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"17o58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details:open summary {","type":"unstyled","key":"9f93a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-weight: 600;","type":"unstyled","key":"6uo4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"9k5pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователь раскрывает вопрос, и весь блок получает другое оформление. JavaScript для этого не нужен.","type":"unstyled","key":"9q85h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. contrast-color(): браузер сам выбирает чёрный или белый текст","type":"header-two","key":"emqld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте интерфейс, где пользователь выбирает цвет карточки.","type":"unstyled","key":"3n4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если фон светлый, нужен тёмный текст. Если фон тёмный — белый.","type":"unstyled","key":"2q0m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше приходилось заранее хранить две связанные настройки или рассчитывать контраст отдельно. Теперь часть этой задачи можно передать CSS:","type":"unstyled","key":"bhnko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".badge {","type":"unstyled","key":"1u4ek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: var(--badge-color);","type":"unstyled","key":"6eduk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"color: contrast-color(var(--badge-color));","type":"unstyled","key":"1g8k5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"5k42e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"contrast-color() получает исходный цвет и возвращает чёрный или белый в зависимости от того, какой вариант контрастнее. Функция вошла в Baseline 2026 в апреле.","type":"unstyled","key":"aahrq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"cj88d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"6i0q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"цветные теги;","type":"unordered-list-item","key":"5bbos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"пользовательские темы;","type":"unordered-list-item","key":"4o5no"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"кнопки с динамическим фоном;","type":"unordered-list-item","key":"2ak6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"бейджи категорий;","type":"unordered-list-item","key":"6srhs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"элементы, цвет которых приходит из данных.","type":"unordered-list-item","key":"dqkrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть ограничение. Для некоторых цветов средней яркости ни чёрный, ни белый не дадут идеальный результат. MDN отдельно предупреждает, что contrast-color() не отменяет проверку доступности интерфейса.","type":"unstyled","key":"5qi0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому функцию удобно использовать как инструмент, но важные сочетания цветов всё равно стоит проверять.","type":"unstyled","key":"fnssq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"5. @scope: стили можно ограничить частью страницы","type":"header-two","key":"f8okn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем больше проект, тем чаще появляется знакомая проблема: написали правило для .title, а оно неожиданно задело заголовок в другом блоке.","type":"unstyled","key":"b4cah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Один способ решить это — придумывать всё более длинные имена классов.","type":"unstyled","key":"8530d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь есть ещё один вариант:","type":"unstyled","key":"2rvfq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@scope (.profile-card) {","type":"unstyled","key":"cngi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".title {","type":"unstyled","key":"928f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-size: 24px;","type":"unstyled","key":"4hctd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"aaa4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".button {","type":"unstyled","key":"3chot"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-radius: 8px;","type":"unstyled","key":"92lrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"a1b54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4td4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти правила работают внутри .profile-card.","type":"unstyled","key":"1ehai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@scope вошёл в Baseline 2026 в марте. Он позволяет ограничивать CSS определённой частью DOM и писать более локальные селекторы без лишнего роста специфичности.","type":"unstyled","key":"a0smr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"7idqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Представьте страницу, где есть:","type":"unstyled","key":"egv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<article class=\"profile-card\">","type":"unstyled","key":"70qbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h2 class=\"title\">Анна</h2>","type":"unstyled","key":"efhb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</article>","type":"unstyled","key":"d7jbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<section class=\"news\">","type":"unstyled","key":"6kqbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<h2 class=\"title\">Новости</h2>","type":"unstyled","key":"1urf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</section>","type":"unstyled","key":"4if0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри @scope (.profile-card) можно спокойно работать с .title, не затрагивая заголовок новостей.","type":"unstyled","key":"41ed4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для небольшого учебного лендинга без @scope легко обойтись. А в проекте с повторяющимися компонентами функция может быть очень даже полезной.","type":"unstyled","key":"b16oh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современный CSS проще понять на цельном проекте","type":"unstyled","key":"d7k3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По отдельности эти возможности выглядят как пять новых строчек синтаксиса. Польза становится ясна, когда появляется реальная задача: форма должна расти вместе с текстом, компонент меняет тему, FAQ реагирует на открытие, а стили разных блоков не конфликтуют.","type":"unstyled","key":"t8dp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если хотите попробовать frontend на практике и собрать интерфейс целиком, у Айтилогии есть бесплатный интенсив по frontend-разработке:","type":"unstyled","key":"9l2kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"https://itlogia.ru/link/gaf6c","type":"unstyled","key":"aplhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где проверять поддержку новых возможностей","type":"header-two","key":"5bah1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пометка Baseline Newly available означает, что функция уже поддерживается актуальными версиями основных браузеров. Но это не значит, что она заработает в любом старом браузере или на любом старом устройстве.","type":"unstyled","key":"c6v0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перед использованием новой возможности стоит проверить два источника.","type":"unstyled","key":"5teiv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый — Baseline на web.dev. Там удобно смотреть, перешла ли функция в статус Newly available или Widely available.","type":"unstyled","key":"bs04l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второй — таблица Browser compatibility на MDN. Она показывает поддержку по конкретным версиям браузеров.","type":"unstyled","key":"4b8f0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если проект должен работать в старом корпоративном браузере или на давно не обновлявшихся устройствах, одного статуса Baseline недостаточно. Смотрите требования именно вашего проекта.","type":"unstyled","key":"c7qhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что попробовать сегодня","type":"header-two","key":"26ssr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не нужно сразу переписывать старые проекты. Возьмите небольшой HTML-файл и протестируйте функции по одной:","type":"unstyled","key":"2993l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте field-sizing: content к <textarea>.","type":"ordered-list-item","key":"1s243"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделайте карточку, которая меняет оформление через container style query.","type":"ordered-list-item","key":"f6hqo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оформите открытый <details> через :open.","type":"ordered-list-item","key":"6lrs3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте несколько цветных кнопок с contrast-color().","type":"ordered-list-item","key":"e7cve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограничьте стили одного блока с помощью @scope.","type":"ordered-list-item","key":"55md6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На таких маленьких примерах новый синтаксис запоминается быстрее, чем по списку свойств.","type":"unstyled","key":"8c621"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"fb5lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS в 2026 году умеет решать часть задач, для которых раньше приходилось писать дополнительные классы или подключать JavaScript.","type":"unstyled","key":"erm02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новичку не нужно заучивать весь список Baseline. Важно знать, что такие возможности существуют, и возвращаться к ним, когда в проекте возникает подходящая задача.","type":"unstyled","key":"pe26"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начните с field-sizing, :open и @scope: у них понятные сценарии, а результат легко увидеть прямо в браузере.","type":"unstyled","key":"c93vr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3aqmf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Rvlpm5dS3ldou3axWPjy"}],"entityMap":{}},"mentions":[]}</article></body></html>