{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"crov7"},{"data":{"image":{"id":"6ac79064a48bc30beb99c387"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4nel5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новичок видит раскрывающееся меню, анимацию при прокрутке или поле, которое растёт вместе с текстом, и часто сразу думает: здесь нужен JavaScript.","type":"unstyled","key":"d8lmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но часть таких задач браузер уже умеет решать сам. Современный CSS и HTML закрывают сценарии, для которых раньше приходилось писать обработчики событий, добавлять классы и следить за состоянием вручную.","type":"unstyled","key":"74ep7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже — семь примеров, где JavaScript можно убрать совсем или оставить только для более сложной логики.","type":"unstyled","key":"apa84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поле ввода, которое растёт вместе с текстом\n","type":"header-two","key":"106dq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше для автоматического изменения высоты

часто писали JavaScript: отслеживали ввод, измеряли scrollHeight и пересчитывали размер.","type":"unstyled","key":"qho1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь есть field-sizing: content.","type":"unstyled","key":"as8pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"textarea {","type":"unstyled","key":"862g9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"field-sizing: content;","type":"unstyled","key":"drjec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"min-height: 80px;","type":"unstyled","key":"uaas"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"max-height: 300px;","type":"unstyled","key":"cm8j6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"1nq6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователь печатает, и поле растёт вместе с содержимым до заданного ограничения.","type":"unstyled","key":"d68sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"field-sizing вошёл в Baseline 2026 и работает в актуальных версиях основных браузеров.","type":"unstyled","key":"3l5n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"cvmtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В комментариях, чатах, формах обратной связи и небольших текстовых редакторах.","type":"unstyled","key":"9bvkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":"Когда всё же нужен JavaScript","type":"unstyled","key":"3ivj0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если высота поля влияет на другую бизнес-логику или вы хотите выполнять дополнительные действия при вводе, одним CSS уже не обойтись.","type":"unstyled","key":"2rs9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Родитель меняет стиль в зависимости от содержимого\n","type":"header-two","key":"271ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Долгое время CSS умел выбирать дочерний элемент через родителя, но не наоборот.","type":"unstyled","key":"5boqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь есть :has().","type":"unstyled","key":"7bhf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, хотим выделить карточку, если внутри неё отмечен checkbox:","type":"unstyled","key":"ebeh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card:has(input:checked) {","type":"unstyled","key":"ff40k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"border-color: royalblue;","type":"unstyled","key":"b8g95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #f3f6ff;","type":"unstyled","key":"2b401"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"a7c11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользователь ставит галочку, и карточка меняет оформление без отдельного JavaScript-класса.","type":"unstyled","key":"eu60a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":has() уже относится к Baseline Widely available, то есть поддержка успела закрепиться во всех основных браузерах.","type":"unstyled","key":"9iupg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"13v8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"ea0em"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"выделить выбранный тариф;","type":"unordered-list-item","key":"5ga4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"изменить родительский блок при ошибке внутри формы;","type":"unordered-list-item","key":"861jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"показать дополнительный элемент, если внутри есть определённый контент;","type":"unordered-list-item","key":"6gmou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"оформить карточку после выбора checkbox или radio.","type":"unordered-list-item","key":"3j1jn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript","type":"unstyled","key":"fbct6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если выбор должен отправить запрос, сохранить данные или изменить состояние приложения, JavaScript всё равно понадобится. CSS отвечает только за визуальную реакцию.","type":"unstyled","key":"dd9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"FAQ и аккордеон без обработчиков клика\n","type":"header-two","key":"bu1nv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Простейший FAQ вообще не требует JavaScript.","type":"unstyled","key":"2nfmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML уже содержит элементы <details> и <summary>:","type":"unstyled","key":"eu2cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<details>","type":"unstyled","key":"73iia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<summary>Сколько длится обучение?</summary>","type":"unstyled","key":"b27op"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<p>Ответ на вопрос.</p>","type":"unstyled","key":"6nj40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</details>","type":"unstyled","key":"b8idc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер сам умеет открывать и закрывать блок.","type":"unstyled","key":"5tsmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А через :open можно оформить раскрытое состояние:","type":"unstyled","key":"bv6ks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details:open {","type":"unstyled","key":"dqf80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"background: #f5f5f5;","type":"unstyled","key":"9uukl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"3p5ho"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"details:open summary {","type":"unstyled","key":"8b5rh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"font-weight: 600;","type":"unstyled","key":"f7354"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"12s2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Псевдокласс :open вошёл в Baseline 2026.","type":"unstyled","key":"fjli6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"fq9sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"FAQ, дополнительные пояснения, простые фильтры, блоки «Подробнее».","type":"unstyled","key":"tt5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript","type":"unstyled","key":"ag5fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы хотите загружать данные после открытия, синхронизировать состояние с приложением или строить сложную аналитику взаимодействий.","type":"unstyled","key":"79jfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Popover и небольшие всплывающие панели без JavaScript\n","type":"header-two","key":"jgvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше даже простой popover часто начинался с обработчика клика, переключения класса и ручного управления видимостью.","type":"unstyled","key":"dlch9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь браузер умеет это сам через Popover API:","type":"unstyled","key":"6gd28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<button popovertarget=\"menu\">","type":"unstyled","key":"16bl6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открыть","type":"unstyled","key":"b2e29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</button>","type":"unstyled","key":"60jun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<div id=\"menu\" popover>","type":"unstyled","key":"ce953"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Содержимое","type":"unstyled","key":"7tf02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"</div>","type":"unstyled","key":"etc6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка открывает и закрывает popover без JavaScript.","type":"unstyled","key":"8mqbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS может оформить открытое состояние через :popover-open:","type":"unstyled","key":"4d2eh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"#menu:popover-open {","type":"unstyled","key":"dnj48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"opacity: 1;","type":"unstyled","key":"qqh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"e9qg4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Popover API работает через HTML и CSS, а JavaScript нужен только для программного управления или более сложного поведения.","type":"unstyled","key":"etdh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно даже позиционировать popover относительно кнопки через CSS Anchor Positioning.","type":"unstyled","key":"8tlgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"6ajb2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для:","type":"unstyled","key":"9tsj4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"небольшого меню;","type":"unordered-list-item","key":"9ik0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"подсказки;","type":"unordered-list-item","key":"5e5g3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"панели действий;","type":"unordered-list-item","key":"b3jpd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"выбора параметра;","type":"unordered-list-item","key":"ck6aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"немодального окна поверх страницы.","type":"unordered-list-item","key":"755ib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужен JavaScript","type":"unstyled","key":"3gvkr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если popover должен получать данные с сервера, участвовать в сложном состоянии приложения или открываться по нестандартной логике.","type":"unstyled","key":"6ardf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент меняется в зависимости от своей ширины\n","type":"header-two","key":"7t4gc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычно адаптивность связывают с media queries:","type":"unstyled","key":"6to5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media (max-width: 600px) {","type":"unstyled","key":"2u7d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"alpno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7vt2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но media query смотрит на ширину окна браузера.","type":"unstyled","key":"5bj99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container queries позволяют компоненту смотреть на размер собственного контейнера.","type":"unstyled","key":"dgvkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card-wrapper {","type":"unstyled","key":"cn7ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"container-type: inline-size;","type":"unstyled","key":"cupi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"b63ca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@container (max-width: 400px) {","type":"unstyled","key":"fmleg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card {","type":"unstyled","key":"fb4ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"flex-direction: column;","type":"unstyled","key":"b4l8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"7ep7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6otnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна и та же карточка может выглядеть горизонтально в широком блоке и вертикально в узком независимо от ширины всего экрана.","type":"unstyled","key":"2llqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container queries уже относятся к Baseline Widely available.","type":"unstyled","key":"8168d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"c8j2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В переиспользуемых компонентах:","type":"unstyled","key":"ba1rn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"карточках товара;","type":"unordered-list-item","key":"9rrac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"виджетах;","type":"unordered-list-item","key":"8f47a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сайдбарах;","type":"unordered-list-item","key":"5d7j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dashboard-интерфейсах;","type":"unordered-list-item","key":"37o6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"блоках, которые могут стоять в разных частях страницы.","type":"unordered-list-item","key":"dticr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript","type":"unstyled","key":"2cu1d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для самой адаптивной раскладки он обычно не нужен. Но если изменение размера должно запускать бизнес-логику, CSS недостаточно.","type":"unstyled","key":"50abc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация, которая зависит от прокрутки\n","type":"header-two","key":"1r62t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше эффект «элемент появляется по мере скролла» часто строили через JavaScript: слушали scroll, вычисляли положение элемента и меняли классы.","type":"unstyled","key":"7upor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь CSS умеет связывать анимацию с прокруткой.","type":"unstyled","key":"d4p1b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например:","type":"unstyled","key":"55j36"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card {","type":"unstyled","key":"3ef7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"animation: fade-in linear;","type":"unstyled","key":"4km7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"animation-timeline: view();","type":"unstyled","key":"32epc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"49moo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@keyframes fade-in {","type":"unstyled","key":"9927a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"from {","type":"unstyled","key":"2knkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"opacity: 0;","type":"unstyled","key":"1ga7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transform: translateY(30px);","type":"unstyled","key":"c5jbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"hv0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"to {","type":"unstyled","key":"aurh1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"opacity: 1;","type":"unstyled","key":"bl88i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"transform: translateY(0);","type":"unstyled","key":"hmu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"de4n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"amoio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Анимация запускается в зависимости от положения элемента в области просмотра. CSS Scroll-driven Animations позволяют использовать scroll- и view-timeline вместо обычной временной шкалы.","type":"unstyled","key":"8gvj1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Где пригодится","type":"unstyled","key":"cif2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В промостраницах, портфолио, длинных лендингах и небольших визуальных эффектах при прокрутке.","type":"unstyled","key":"8jum"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript","type":"unstyled","key":"ag7ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если скролл должен менять данные, запускать запросы или участвовать в сложной логике приложения.","type":"unstyled","key":"3bbp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И ещё стоит проверять поддержку конкретного сценария в браузерах проекта: scroll-driven animations развиваются быстрее, чем старые базовые CSS-возможности.","type":"unstyled","key":"81ct9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":88,"offset":45}],"inlineStyleRanges":[],"text":"Если хочется перейти от отдельных CSS-приёмов к задаче, похожей на реальную работу, можно попробовать 3-дневный интенсив от Айтилогии.","type":"unstyled","key":"9ab3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Закреплённый элемент при прокрутке\n","type":"header-two","key":"f0e4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь функция не новая, но новичок всё ещё часто пытается решать такую задачу через JavaScript.","type":"unstyled","key":"5o3jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, нужно оставить заголовок таблицы или боковую панель на экране при прокрутке.","type":"unstyled","key":"5l8vp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS:","type":"unstyled","key":"ev24r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".sidebar {","type":"unstyled","key":"egvvt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: sticky;","type":"unstyled","key":"2unm7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: 20px;","type":"unstyled","key":"mdi9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"uv90"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Элемент ведёт себя обычно, пока не достигает заданной позиции, после чего браузер удерживает его на месте.","type":"unstyled","key":"3s1nv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript с scroll-обработчиком для базового sticky-поведения не нужен.","type":"unstyled","key":"86gv0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современный CSS умеет идти ещё дальше. Scroll-state container queries позволяют определять, когда sticky-элемент уже «прилип» к границе контейнера, и менять стили его содержимого.","type":"unstyled","key":"4ug04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, после закрепления заголовку можно добавить фон или тень.","type":"unstyled","key":"14tt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Когда нужен JavaScript","type":"unstyled","key":"3f6b2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если после достижения определённой позиции нужно выполнить действие, которое выходит за рамки оформления.","type":"unstyled","key":"dclmm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Что здесь общего","type":"unstyled","key":"bh3tp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Во всех примерах браузер уже знает состояние элемента.","type":"unstyled","key":"c6n9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он знает:","type":"unstyled","key":"7kjlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"открыт ли <details>;","type":"unordered-list-item","key":"5q11j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"показан ли popover;","type":"unordered-list-item","key":"bfd9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"отмечен ли checkbox;","type":"unordered-list-item","key":"m0sf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"какого размера контейнер;","type":"unordered-list-item","key":"3f7p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"где находится элемент относительно прокрутки.","type":"unordered-list-item","key":"e2v56"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому JavaScript не всегда должен вручную дублировать эту информацию.","type":"unstyled","key":"6noh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для новичка здесь полезно выработать привычку: перед тем как писать обработчик события, проверить, нет ли у HTML и CSS готового механизма.","type":"unstyled","key":"4m8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Что проверить перед использованием","type":"header-two","key":"eppln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новые возможности CSS появляются быстрее, чем пользователи обновляют браузеры.","type":"unstyled","key":"cdcr5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому перед внедрением:","type":"unstyled","key":"7jbiu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте Baseline.","type":"ordered-list-item","key":"b1gal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Посмотрите конкретные версии в Can I Use или MDN.","type":"ordered-list-item","key":"aq46f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравните их с браузерами вашей аудитории.","type":"ordered-list-item","key":"fpi7j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подумайте, что произойдёт без функции.","type":"ordered-list-item","key":"a0bia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте fallback, если без неё ломается основной сценарий.","type":"ordered-list-item","key":"8tvch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, если field-sizing не поддерживается, textarea всё равно останется обычным рабочим полем. Это хороший пример progressive enhancement.","type":"unstyled","key":"am0vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если без новой функции пользователь вообще не сможет выполнить задачу, требования к поддержке должны быть строже.","type":"unstyled","key":"e2hir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"as3fv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS давно отвечает не только за цвет текста и отступы. Он умеет реагировать на состояние формы, содержимое элемента, размер контейнера и прокрутку страницы.","type":"unstyled","key":"89kt5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript при этом никуда не исчезает. Он по-прежнему нужен для данных, сложного состояния и бизнес-логики.","type":"unstyled","key":"bg9qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но перед новым addEventListener() полезно проверить, не умеет ли браузер решить эту задачу сам.","type":"unstyled","key":"f95sf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6o8eu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"s9X4JsAPcqOUjDNyNlU1"}],"entityMap":{"0":{"data":{"href":"https://itlogia.ru/link/8FHLA","url":"https://itlogia.ru/link/8FHLA"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>