API компоновки CSS и область действия
Создавайте собственные алгоритмы компоновки с помощью API компоновки CSS и изучайте область действия и ограничения Houdini.
«API компоновки CSS и область действия» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Обзор CSS Houdini
CSS Houdini — это набор низкоуровневых API, которые открывают для JavaScript доступ к отдельным частям механизма отображения CSS. В него входят: типизированный OM, API свойств и значений, API рисования, API компоновки и рабочий модуль анимации. Вместе они позволяют создавать пользовательские расширения CSS.
Что такое API компоновки CSS
API компоновки CSS позволяет разработчикам определять пользовательские алгоритмы компоновки на JavaScript, которые можно использовать в качестве значений свойства CSS display. Вы можете создавать компоновки, сопоставимые по возможностям с Grid или Flexbox.
Структура рабочего модуля компоновки
Рабочий модуль компоновки реализует методы intrinsicSizes() и layout() и регистрируется с помощью registerLayout():
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Использование пользовательской компоновки
Укажите зарегистрированную компоновку в CSS:
<div class="masonry-container">
<div class="item" style="height: 60px;">1</div>
<div class="item" style="height: 100px;">2</div>
<div class="item" style="height: 40px;">3</div>
<div class="item" style="height: 80px;">4</div>
<div class="item" style="height: 120px;">5</div>
<div class="item" style="height: 50px;">6</div>
</div>
Состояние API компоновки
API компоновки имеет ограниченную поддержку браузерами и в основном носит экспериментальный характер (в Chrome работает за флагами). Сегодня это скорее исследовательский API будущего, чем инструмент для промышленного использования. В частности, компоновка в виде каменной кладки может быть реализована в браузерах нативно.
Правило @scope
@scope — это относительно новая возможность CSS (часть спецификации области видимости CSS), которая ограничивает действие правил CSS определённым поддеревом DOM без необходимости добавлять классы повсюду.
Синтаксис @scope
Определите корень области видимости и при необходимости её ограничитель:
<div class="card">
<p class="title">Scoped Title</p>
<p>Body text inside the card.</p>
</div>
@scope с ограничителем
Ограничитель области видимости не позволяет правилам находить совпадения внутри вложенных компонентов:
<div class="article">
<p>Article paragraph styled with 1.7 line-height by the scoped rule.</p>
<div class="advertisement">
<p>Ad paragraph is outside the scope limit, so it keeps the default line-height.</p>
</div>
</div>
Псевдокласс :scope
Внутри @scope :scope обозначает корневой элемент области видимости:
<div class="card is-hovered">
<p>Hover state applied statically for preview</p>
</div>
Поддержка @scope браузерами
@scope поддерживается в Chrome 118+ и Safari 17.4+. Поддержка Firefox появится позднее. Для безопасного развёртывания используйте @supports.
Более широкий замысел Houdini
Цель CSS Houdini — сделать веб-платформу расширяемой, чтобы разработчики могли добавлять возможности непосредственно в CSS, а не ждать их реализации производителями браузеров. Доступные сегодня API (типизированный OM, @property и API рисования) — наиболее готовые к промышленному использованию части этого замысла.
Быстрая проверка
Что делает @scope (.card) в CSS?
Итоги
CSS Houdini — это набор API, открывающих доступ к механизму отображения. API компоновки позволяет создавать пользовательские алгоритмы для свойства display, но в основном остаётся экспериментальным. @scope ограничивает действие правил CSS определёнными поддеревьями DOM, предотвращая утечку стилей без необходимости строго следовать именованию BEM. Наиболее готовыми к промышленному использованию возможностями Houdini являются типизированный OM, @property и API рисования.
Часто задаваемые вопросы
Урок «API компоновки CSS и область действия» бесплатный?
Да — полный текст урока «API компоновки CSS и область действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «API компоновки CSS и область действия»?
Создавайте собственные алгоритмы компоновки с помощью API компоновки CSS и изучайте область действия и ограничения Houdini. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «API компоновки CSS и область действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типизированная объектная модель CSS (OM)
- API свойств и значений CSS (@property)
- API рисования CSS: рабочие модули
- API компоновки CSS и область действия