{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a536719dc87c335f3e29523"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2svo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Последние годы CSS взорвался новинками! \uD83D\uDCA5 Среди них - фичи, которые \nменяют подход к вёрстке и уже поддерживаются всеми современными \nбраузерами.","type":"unstyled","key":"fisfa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта шпаргалка - наш топ CSS-инструментов, которые стоит внедрить в продакшн-код в 2025-2026.","type":"unstyled","key":"ap622"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте, тестируйте, делитесь лайфхаками! \uD83D\uDD25","type":"unstyled","key":"31alm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Container Queries","type":"header-two","key":"f4g8i"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":26,"offset":205}],"inlineStyleRanges":[],"text":"Контейнерные запросы включают две отдельные функции: запросы размера \n(size queries) и запросы стилей (style queries). Мы планируем \nиспользовать только запросы размера, которые имеют широкую поддержку, в отличие от запросов стилей.","type":"unstyled","key":"4jigf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Проблема: Мы используем media query, чтобы показать отличную версию компонента на мобильном устройстве по сравнению с десктопом.","type":"unstyled","key":"r26a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но современный веб-дизайн мало имеет отношения к области просмотра \nили размеру экрана. Речь идет о размере родительского контейнера.","type":"unstyled","key":"7ve9t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нам хочется делать fluid-компоненты, которые меняют свои размеры в зависимости от родительского контейнера, а не ширины экрана.","type":"unstyled","key":"2buv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С помощью CSS Container Queries мы можем решить вышеописанную \nпроблему и сделать компонент fluid. Это значит, что мы можем поместить \nкомпонент в узкий родительский контейнер, и он превратится в сложенную \nверсию, или поместить его в широкий контейнер, и он превратится в \nгоризонтальную версию.","type":"unstyled","key":"f60vp"},{"data":{"image":{"id":"6a53674b25308355153f14fd"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"983u4"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":52,"offset":0}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих Container Queries","type":"unstyled","key":"1os8d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":has","type":"header-two","key":"53l8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Проблема: Для понимания :has важно помнить, что CSS применяет стили каскадом, который идет слева направо. Последний элемент в объявлении стилизуется.","type":"unstyled","key":"b9atd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, по локатору main article strong { ... } будут стилизованы только элементы strong.","type":"unstyled","key":"3kid9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А что, если мы хотим стилизовать main при условии, что strong существует в HTML?","type":"unstyled","key":"8p098"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Some text

\n My strong text\n

Some text

","type":"blockquote","key":"6snqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для этого используется :has, который проверит наличие элемента:","type":"unstyled","key":"f0sdq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main:has(strong) {\n /* change main style */\n}","type":"blockquote","key":"b0on4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Также можно имитировать логические операторы, такие как && и ||, для проверки нескольких условий.","type":"unstyled","key":"decu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":29,"style":"BOLD"}],"text":"Например, если в main есть p и есть strong (&&):","type":"unstyled","key":"37m6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main:has(p):has(strong) {\n color: red;\n}","type":"blockquote","key":"d0k68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":18,"style":"BOLD"}],"text":"Если main имеет p или имеет strong (||):","type":"unstyled","key":"4jupr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main:has(p, strong) {\n color: red;\n}","type":"blockquote","key":"6nqnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Но это ещё не всё: :has в сочетании с селекторами CSS, такими как +, ~, >, или другими псевдоселекторами, такими как :nth-child() или :not(), открывает новые возможности.","type":"unstyled","key":"dibpl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример отрицательной проверки:","type":"unstyled","key":"6nqhi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"main:not(:has(strong)) {\n /* change main style */\n}","type":"blockquote","key":"7m91m"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":49,"offset":0}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих функцию :has()","type":"unstyled","key":"c5fol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":is() и :where()","type":"header-two","key":"e172c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Проблема: Когда нам требуется объединить несколько селекторов в одно правило, приходится писать длинные локаторы.","type":"unstyled","key":"ft6sv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для упрощения кода есть два псевдокласса: :is() и :where(). Рассмотрим примеры:","type":"unstyled","key":"7ku5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Без :is() */\nheader h1,\nmain h1,\nfooter h1 {\n color: red;\n}\n\n/* С :is() */\n:is(header, main, footer) h1 {\n color: red;\n}","type":"blockquote","key":"96vjq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* Без :where() */\nnav a:hover,\n.sidebar a:hover {\n color: blue;\n}\n\n/* С :where() */\n:where(nav, .sidebar) a:hover {\n color: blue;\n}","type":"blockquote","key":"9r405"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":29,"style":"BOLD"}],"text":":is() — группирует селекторы без потери специфичности.","type":"unordered-list-item","key":"4ber0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":43,"style":"BOLD"}],"text":":where() — так же группирует селекторы, но позволяет легко их переписать.","type":"unordered-list-item","key":"677vn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Специфичность:","type":"unstyled","key":"6r2k5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":":is() — равна специфичности самого конкретного селектора в списке. Например, :is(.class, #id) будет иметь специфичность как #id.","type":"unordered-list-item","key":"65geo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":24,"style":"BOLD"}],"text":":where() — всегда имеет нулевую специфичность.","type":"unordered-list-item","key":"97dit"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":40,"offset":0},{"key":4,"length":43,"offset":41}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих :is()\n\uD83D\uDD17 Версии браузеров, поддерживающих :where()","type":"unstyled","key":"g4m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS Comparison Functions","type":"header-two","key":"88o55"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Проблема: Нам нужен размер шрифта 16px на мобильных и 24px на десктопе. А между ними — 10 медиа-запросов, чтобы плавно \nувеличивать. И так для каждого свойства: отступы, гриды, паддинги во \nфлексах.","type":"unstyled","key":"55ms5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для решения этой проблемы появились CSS Comparison Functions: min(), max(), clamp().","type":"unstyled","key":"boat0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Они автоматически рассчитывают промежуточные значения без кучи медиа-запросов:","type":"unstyled","key":"5jdr2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".title {\n /* От 16px (на экранах ≤ 320px) до 24px (на экранах ≥ 1200px) */\n font-size: clamp(16px, 4vw + 0.5rem, 24px);\n}","type":"blockquote","key":"c7h6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Как это работает:","type":"unstyled","key":"572uf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"clamp(min, ideal, max) — подбирает значение между min и max, пропорционально изменяя ideal (например, 4vw + 0.5rem).","type":"unordered-list-item","key":"bne3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"min() и max() — выбирают минимальное/максимальное значение из списка.","type":"unordered-list-item","key":"em9b0"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":6,"offset":73}],"inlineStyleRanges":[],"text":"Если вам интересно подробнее посмотреть, как это работает, посетите сайт Utopia, на котором есть простые в использовании инструменты для создания функций сравнения. Вы можете напрямую ввести значения, заданные \nдизайнером, и получить clamp()-код в виде CSS-переменных.","type":"unstyled","key":"8sn67"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":59,"offset":0}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих CSS Comparison Functions","type":"unstyled","key":"12k0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Logical Properties","type":"header-two","key":"5q0bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Проблема: Многие CSS-свойства используют физические направления для установки значений: margin-top, padding-right, border-left.","type":"unstyled","key":"b1gk7"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":9,"offset":76},{"key":8,"length":16,"offset":87},{"key":9,"length":12,"offset":105}],"inlineStyleRanges":[],"text":"Эти свойства не учитывают переключение направления чтения с помощью свойств direction, text-orientation, writing-mode, что используется в некоторых языках, например, арабском, иврите и т.д.","type":"unstyled","key":"9e0rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, отступ, расположенный слева от текста, останется слева, \nдаже если направление чтения текста будет изменено. Логические свойства \nустанавливают значения по осям X (inline) и Y (block), что позволяет избежать этой проблемы.","type":"unstyled","key":"8beam"},{"data":{"image":{"id":"6a5367f88e35e707dfbaad4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6506v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Наиболее распространенные замены:","type":"unstyled","key":"ac875"},{"data":{"image":{"id":"6a53682a949d6777d914efde"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3tme0"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":53,"offset":0}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих Logical Properties","type":"unstyled","key":"e3jns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Subgrid","type":"header-two","key":"1iou0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":10,"offset":141,"style":"BOLD"}],"text":"Проблема: Subgrid в CSS решает проблему выравнивания вложенных сеток. Допустим, у нас есть карточка товара, которая должна растягиваться на 3 колонки основной сетки. Внутри неё есть изображение, заголовок, описание и цена. Без Subgrid их пришлось бы выравнивать вручную, и при изменении основной сетки всё «поехало» бы.","type":"unstyled","key":"cf8vj"},{"data":{"image":{"id":"6a53685990a22a4fbb18e7b9"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"f8uii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"body {\n display: grid;\n place-items: center;\n min-height: 100vh;\n}\n\n.grid-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.card {\n display: grid;\n grid-template-rows: subgrid;\n grid-row: span 4;\n}","type":"blockquote","key":"csoif"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Subgrid избавляет от ручного пересчёта размеров и гарантирует, что \nвложенные элементы всегда синхронны с основной сеткой. Больше никаких \nкривых отступов!","type":"unstyled","key":"8ikbe"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":42,"offset":0}],"inlineStyleRanges":[],"text":"\uD83D\uDD17 Версии браузеров, поддерживающих Subgrid","type":"unstyled","key":"9ver5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Маленькие фичи, но заметные","type":"header-two","key":"dcce4"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":11,"offset":0}],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Flexbox gap\ngap упрощает создание промежутков между элементами. Работает так же, как в Grid, и теперь поддерживается во Flexbox.","type":"unordered-list-item","key":"5ifsu"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":42,"offset":0}],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Динамическая единица viewport height — dvh\nУчитывает адресную строку и пользовательский интерфейс браузера, в отличие от vh, который этого не делал.","type":"unordered-list-item","key":"dogm9"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":26,"offset":0}],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Media Queries Range Syntax\nПозволяет использовать операторы математического сравнения: >, <, >=, <= в медиа-запросах.\nПример: @media (width <= 1140px) { ... }","type":"unordered-list-item","key":"bcu52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a6qpp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"HQ8PSmSkzjwMnvHBAsna"}],"entityMap":{"11":{"data":{"href":"https://caniuse.com/css-subgrid","url":"https://caniuse.com/css-subgrid"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://caniuse.com/flexbox-gap","url":"https://caniuse.com/flexbox-gap"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://caniuse.com/viewport-unit-variants","url":"https://caniuse.com/viewport-unit-variants"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://caniuse.com/css-media-range-syntax","url":"https://caniuse.com/css-media-range-syntax"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"href":"https://caniuse.com/css-container-queries-style","url":"https://caniuse.com/css-container-queries-style"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://caniuse.com/css-container-queries","url":"https://caniuse.com/css-container-queries"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://caniuse.com/css-has","url":"https://caniuse.com/css-has"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://caniuse.com/css-matches-pseudo","url":"https://caniuse.com/css-matches-pseudo"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://caniuse.com/mdn-css_selectors_where","url":"https://caniuse.com/mdn-css_selectors_where"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://utopia.fyi/","url":"https://utopia.fyi/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://caniuse.com/css-math-functions","url":"https://caniuse.com/css-math-functions"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/direction","url":"https://developer.mozilla.org/ru/docs/Web/CSS/direction"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode","url":"https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://caniuse.com/css-logical-props"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}