Spec-Zone.ru › CSS

CSS ограничение

Модуль CSS ограничение определяет ограничение и запросы к контейнерам.

Ограничение позволяет изолировать поддеревья страницы от остальной части DOM. Затем браузер может повысить производительность, оптимизируя отрисовку этих независимых частей.

Запросы к контейнерам аналогичны запросам к размеру сред, за исключением того, что запросы основаны на размерах конкретного элемента контейнера, определенного как контекст ограничения, а не на размерах области просмотра. Запросы к контейнерам позволяют запрашивать размер, свойства и значения свойств контейнера для условного применения стилей CSS. При применении этих условных стилей можно использовать единицы длины запроса к контейнеру, которые указывают длины относительно размеров контейнера запроса. Определены дополнительные свойства для установления конкретного элемента в качестве контейнера запроса и присвоения ему определенного имени.

Справочник

Свойства

  • contain
  • container сокращенная запись
    • container-name
    • container-type
  • content-visibility

Правила и дескрипторы

  • @container
  • @container дескрипторы:
    • aspect-ratio
    • block-size
    • height
    • inline-size
    • orientation
    • width

Функции

  • style()

Типы данных

  • <container-name>
  • <style-feature>
  • Относительные единицы длины контейнера <length>

События

  • contentvisibilityautostatechange

Интерфейсы

  • ContentVisibilityAutoStateChangeEvent
    • skipped свойство
  • CSSContainerRule
    • CSSContainerRule.containerName
    • CSSContainerRule.containerQuery

Руководства

Запросы к размеру контейнера CSS

Руководство по использованию запросов к контейнерам с @container, включая именование контекстов ограничения.

Использование CSS ограничения

Описание основных целей CSS ограничения и как использовать contain и content-visibility для повышения пользовательского опыта.

Использование запросов к размеру и стилям контейнера

Руководство по написанию запросов к размеру и стилям контейнера с @container, включая запросы к стилям для пользовательских свойств, синтаксис запроса и имена, а также вложенные запросы к контейнерам.

Связанные понятия

  • Макет и содержащий блок

  • Блок-форматирование контекста

  • Модуль запросов к среде CSS

    • @media правило
    • Логические операторы CSS (not, or, и and)
  • Модуль переходов CSS

    • @starting-style правило
    • transition-behavior свойство
  • Модуль CSS размеров области

    • aspect-ratio свойство
    • contain-intrinsic-size сокращенное свойство
    • contain-intrinsic-inline-size свойство
    • contain-intrinsic-size свойство
    • contain-intrinsic-width свойство
    • contain-intrinsic-height свойство
  • Модуль стилей счётчиков CSS

    • Использование счётчиков CSS руководство
  • Модуль вложенности CSS

    • Вложенные правила CSS руководство

Спецификации

Спецификация
Модуль CSS Ограничения Уровень 2
Модуль CSS Ограничения Уровень 3

См. также

  • Использование запросов к функциям
  • Использование запросов к среде CSS
  • Понимание соотношений сторон
  • @supports правило

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API