Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Container queries/ Container-relative units

  1. Базовый уровень

    • Unit `cqw`

      Вычисляет `1cqw` как один процент width соответствующего query container.

    • Unit `cqh`

      Вычисляет `1cqh` как один процент height соответствующего query container.

    • Unit `cqi`

      Вычисляет `1cqi` как один процент inline size соответствующего query container.

    • Unit `cqb`

      Вычисляет `1cqb` как один процент block size соответствующего query container.

    • Units `cqmin` и `cqmax`

      Выбирает меньшую или большую величину между `cqi` и `cqb` для `cqmin` и `cqmax`.

  2. Продвинутый уровень

    • Selection по оси unit

      Выбирает ближайший eligible ancestor отдельно для axis, которую использует container-relative unit.

    • Container-type eligibility units

      Требует подходящий `container-type` для reference axis container-relative unit.

    • Physical и logical units

      Различает physical `cqw`/`cqh` и logical `cqi`/`cqb` при разных writing modes.

    • Small viewport fallback

      Использует small viewport unit соответствующей axis при отсутствии eligible query container.

  3. Экспертный уровень

    • Разные containers по осям

      Разрешает physical и logical container units одного declaration относительно разных eligible ancestors.

    • Container units внутри condition

      Вычисляет container-relative units внутри query value по собственным unit-selection rules.

    • Invalidation reference geometry

      Обновляет computed или used values при изменении reference container либо его relevant size.

    • Units в style/layout feedback

      Анализирует feedback, когда container-relative units влияют на geometry, от которой сами зависят.