`overflow` и `contain` свойства

Articles

Эта статья объясняет свойства overflow и contain.

Вы можете узнать, как использовать свойство overflow для отображения полос прокрутки и обрезки содержимого.

YouTube Video

HTML для предварительного просмотра

css-overflow-contain.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

`overflow` и `contain` свойства

`overflow`

Свойство CSS overflow — это важное свойство, которое управляет отображением содержимого элемента, если оно превышает размер его блока. Оно часто используется для формирования макета и пользовательского интерфейса веб-страниц, помогая управлять отображением полос прокрутки, обрезкой и переполнением элементов.

Основы свойства `overflow`

Свойство overflow имеет четыре основных значения: visible, hidden, scroll и auto.

`visible`

1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible — это значение по умолчанию, при котором содержимое элемента выходит за пределы блока, но остаётся видимым. Переполненные части могут перекрывать другие элементы, но полосы прокрутки не отображаются.

Характеристики:

Содержимое отображается без ограничений.
Полосы прокрутки не отображаются.

`hidden`

1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden — это значение, при котором переполненные части элемента не отображаются, если содержимое превышает размер блока. Полосы прокрутки не отображаются, а переполненное содержимое не будет видно.

Характеристики:

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

`scroll`

1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

При использовании значения scroll полосы прокрутки принудительно отображаются, если содержимое элемента превышает размер блока. Даже если содержимое не переполняет элемент, полосы прокрутки всегда отображаются.

Характеристики:

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

`auto`

1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto отображает полосы прокрутки только тогда, когда содержимое переполняет элемент; если содержимое помещается в границы блока, полосы прокрутки не отображаются.

Характеристики:

Полосы прокрутки появляются только тогда, когда содержимое переполняет элемент.
Автоматически создает область с возможностью прокрутки.

`overflow-x` и `overflow-y`

1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

Свойство overflow может быть настроено отдельно для горизонтального (ось x) и вертикального (ось y) направлений.

Таким образом, можно использовать overflow-x и overflow-y для индивидуальной настройки отображения вертикальных и горизонтальных полос прокрутки.

Особенности использования свойства Overflow

При использовании свойства overflow существуют некоторые важные моменты, на которые стоит обратить внимание.

Влияние полос прокрутки на дизайн

Использование значений scroll или auto для отображения полос прокрутки может нарушить общий дизайн страницы. В частности, если элементы размещены у правого или нижнего края, полосы прокрутки могут сделать их менее заметными.

Стандартное поведение браузеров

Отображение и функционирование полос прокрутки может отличаться в разных браузерах. Особенно на Windows и macOS существуют различия в стилях отображения полос прокрутки, что может приводить к некорректному отображению дизайна. Важно проводить тестирование в разных браузерах.

Переполнение вложенных элементов

Установка overflow: hidden на родительском элементе скрывает дочерние элементы, выходящие за пределы его области. Это может привести к некорректному отображению всплывающих окон или модальных окон.

`overflow: clip` (CSS Level 3)

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

В новой спецификации CSS было также введено значение overflow: clip. Это похоже на hidden, но не позволяет прокручивать содержимое и только обрезает его. На данный момент оно поддерживается только некоторыми браузерами.

Характеристики:

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

Заключение

Свойство CSS overflow является важным инструментом для управления отображением содержимого в веб-дизайне. Управляя ситуациями, когда содержимое выходит за границы элемента, и применяя корректные полосы прокрутки или обрезку, это свойство обеспечивает более удобный интерфейс для пользователя. Кроме того, использование overflow-x и overflow-y позволяет более точно настраивать управление. При этом значении полосы прокрутки обязательно отображаются, если содержимое элемента превышает его границы. Даже если содержимое не переполняет элемент, полосы прокрутки всегда отображаются.

`contain`

Обзор свойства `contain`

Свойство CSS contain ограничивает влияние элемента на другие элементы и всю страницу, оптимизируя процесс рендеринга браузера. В частности, оно ограничивает перерисовку и перерасчёт макета, предотвращая влияние изменений стиля или макета элемента на содержимое за его пределами.

Это важно для производительности веб-страницы и особенно эффективно для сайтов со сложными макетами или большим количеством содержимого.

Значения свойства `contain`

Свойство contain имеет следующие значения:.

`layout`

1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout накладывает ограничения, связанные с макетом. При использовании этого значения размер и положение элемента не влияют на другие элементы. Например, даже если внутренний размер элемента изменится, это не повлияет на внешний макет.

`paint`

1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint ограничивает влияние процесса отрисовки. При указании этого значения отрисовка внутри элемента больше не влияет на внешние элементы, что ограничивает диапазон пересчёта перерисовки.

`size`

1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size обеспечивает независимость размера элемента от внешних элементов. В частности, оно предотвращает изменение размера дочерних элементов, влияющее на размер родительского элемента, что повышает стабильность макета.

`style`

1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style гарантирует, что стиль элемента не влияет на внешние элементы. Например, указание contain: style; обеспечивает, что изменения стиля внутри элемента не повлияют на другие элементы, сокращая область перерасчёта.

`content`

1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content — это составное значение, которое применяет свойства layout, paint, size и style. Используя это, можно гарантировать, что макет, отрисовка, размер и стиль элемента совсем не влияют на внешние элементы.

Преимущества для производительности

Основная причина использования свойства contain — улучшение производительности веб-страницы. В частности, оно эффективно в следующих ситуациях:.

Оптимизация перерасчёта макета: Когда размер или макет элемента изменяется, его влияние может быть ограничено минимально возможной областью. Это сокращает область ненужных перерасчётов макета и снижает нагрузку на браузер.
Сокращение перерисовок: Ограничивая область отрисовки, можно минимизировать часть, которая требует перерисовки при изменении стиля или содержимого элемента.
Разработка на основе компонентов: Поскольку каждый компонент или модуль работает независимо от других элементов, это улучшает производительность каждого компонента даже в масштабных веб-приложениях.

Примечания

При использовании свойства contain следует учитывать следующие моменты.

Понимание области применения: Свойство contain полезно для оптимизации производительности, но не должно применяться к каждому элементу. Важно использовать его в подходящих местах. Например, использование его на элементах, которые часто меняются, или на частях крупной структуры DOM, может наоборот ухудшить производительность.
Совместимость с браузерами: Свойство contain — это относительно новая функция CSS, которая полностью не поддерживается всеми браузерами. Оно поддерживается основными браузерами (Chrome, Firefox, Edge, Safari), но может быть недоступно в старых версиях.

Заключение

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

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Сравнение Flexbox, Grid и Column макетов

`overflow` и `contain` свойства

YouTube Video

HTML для предварительного просмотра

overflow и contain свойства

overflow

Основы свойства overflow

visible

hidden

scroll

auto

overflow-x и overflow-y

Особенности использования свойства Overflow

Влияние полос прокрутки на дизайн

Стандартное поведение браузеров

Переполнение вложенных элементов

overflow: clip (CSS Level 3)

Заключение

contain

Обзор свойства contain

Значения свойства contain

layout

paint

size

style

content

Преимущества для производительности

Примечания

Заключение

YouTube Video

`overflow` и `contain` свойства

`overflow`

Основы свойства `overflow`

`visible`

`hidden`

`scroll`

`auto`

`overflow-x` и `overflow-y`

`overflow: clip` (CSS Level 3)

`contain`

Обзор свойства `contain`

Значения свойства `contain`

`layout`

`paint`

`size`

`style`

`content`