container-name¶

Свойство container-name указывает список имен контейнеров запроса, используемых правилом @container в запросе контейнера.

Запрос контейнера будет применять стили к элементам на основе размера ближайшего предка с контекстом включения. Когда вмещающему контексту дается имя, он может быть специально нацелен с помощью правила @container вместо ближайшего предка с вмещающим элементом.

Синтаксис¶

1

container-name: <container-name>;

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

• CSS Containment Module Level 3

Примеры¶

Пример 1¶

Учитывая следующий пример HTML, который представляет собой компонент карты с заголовком и некоторым текстом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my
      <a href="https://example.com">blog post</a> about
      cats.
    </p>
  </div>
</div>

Чтобы создать контекст включения, добавьте свойство container-type к элементу в CSS. В следующем примере создаются два контекста включения: один для метаинформации карты и один для выдержки из поста:

1
2
3
4
5
6
7
8

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

При написании запроса контейнера с помощью at-правила @container стили будут применяться к элементам контейнера, когда запрос будет оценен как true. В следующем примере есть два контейнерных запроса, один из которых будет применяться только к содержимому элемента .post-excerpt, а другой — к содержимому как .post-meta, так и .post-excerpt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

Пример 2¶

Вы также можете указать несколько имен для контекста контейнера, разделенных пробелом:

1
2
3
4

.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

Это позволит вам нацеливаться на контейнер, используя любое имя в правиле @container. Это полезно, если вы хотите настроить таргетинг на один и тот же контейнер с несколькими запросами контейнера, где любое условие может быть истинным:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container nav (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

Комментарии