Bootstrap 4 Контейнеры
Контейнеры
Из предыдущей главы вы узнали, что Bootstrap требует содержащего элемента для переноса содержимого сайта.
Контейнеры используются для заполнения содержимого внутри них, и доступны два класса контейнеров:
Фиксированный контейнер
Обратите внимание, что его ширина ( max-width ) будет меняться на разных размерах экрана:
Жидкий контейнер (fluid)
Пример
Моя первая Bootstrap страница
Здесь какой-то текст.
Отступы контейнера (padding)
Пример
Вы узнаете намного больше об интервальных утилитах в разделе BS4 Утилиты.
Контейнер границы и цвета
Другие утилиты, такие как границы и цвета, также часто используются вместе с контейнерами:
Пример
Моя первая Bootstrap страница
Этот контейнер имеет границу и некоторые дополнительные отступы и поля.
Моя первая Bootstrap страница
Этот контейнер имеет темный цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
Моя первая Bootstrap страница
Этот контейнер имеет синий цвет фона и белый текст, а также некоторые дополнительные отступы и поля.
Вы узнаете намного больше о цветах и утилитах границ, в разделах BS4 Цвета и BS4 Утилиты на нашем сайте.
Адаптивные (отзывчивые) контейнеры
Ширина контейнера будет меняться на разных размерах экрана / областях просмотра:
| Класс | Extra small .container-sm | 100% | 540px | 720px | 960px | 1140px |
|---|---|---|---|---|---|---|
| .container-md | 100% | 100% | 720px | 960px | 1140px | |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | |
| .container-xl | 100% | 100% | 100% | 100% | 1140px |
Пример
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Стилизация контейнеров для содержимого веб-страниц
Содержимое веб-страниц должно быть размещено в некоем элементе, ширина которого, ограничивающая ширину содержимого, позволяет пользователям удобно работать с материалами сайта. Такие элементы называют «обёртками» (wrapper) или «контейнерами» (container). Стилизовать контейнеры средствами CSS можно по-разному. Некоторые способы работы с контейнерами ставят дизайнера перед необходимостью решать достаточно сложные задачи.
В этом материале я расскажу о контейнерах для содержимого веб-страниц: о том, как они работают, о том, как ими пользоваться, и о тех случаях, когда лучше обойтись без них. Обратите внимание на то, что я буду использовать здесь термины «обёртка» и «контейнер» как равнозначные.
Общие сведения
Но в современных условиях использование в качестве контейнера элемента может оказаться непрактичным. Контейнер позволяет не допустить выхода дочерних элементов за его границы.
Контейнер не даёт дочерним элементам выходить за его границы
Без использования элемента-обёртки дочерние элементы будут размещаться, ориентируясь на края экрана. Это может быть неудобным для пользователей. Особенно — для тех, которые работают на больших экранах.
Страница без элемента-контейнера, включающего в себя её содержимое
Здесь показано, как элементы, растягиваясь, занимают весь экран. Происходит это в том случае, если в макете страницы нет элемента-контейнера. Полагаю, не следует предлагать пользователям работать с подобными страницами. Позвольте мне объяснить эту мысль.
О необходимости использования контейнеров для содержимого веб-страниц
Использование контейнера для содержимого веб-страниц имеет множество сильных сторон, о которых стоит знать дизайнерам и разработчикам. Вот некоторые из этих сильных сторон:
Настройка элемента-контейнера средствами CSS
Теперь, когда мы поговорили об основах применения контейнеров, и о том, какие преимущества даёт их использование, давайте остановимся на том, как настраивать их средствами CSS.
▍Настройка ширины контейнера
Элемент-контейнер с настроенной шириной
Хотя это — вполне рабочий приём, можно полностью избавиться от свойства width и, как в следующем примере, пользоваться лишь свойством max-width :
Теперь, когда мы нашли подходящий механизм настройки ширины контейнера, давайте поговорим о том, как выровнять контейнер по центру страницы.
▍Выравнивание контейнера по центру страницы
Контейнер, выровненный по центру страницы
Для того чтобы выровнять контейнер по центру страницы, нужно, при настройке его внешних отступов, воспользоваться значением auto для левого и правого отступов:
Вот как, в соответствии со спецификацией CSS, ведут себя отступы, которым назначено значение auto :
Если margin-left и margin-right установлены в значение auto, то значения, которые будут использованы для этих отступов, будут одними и теми же. Это позволяет центрировать элемент по горизонтали относительно краёв содержащего его блока.
Если вас интересуют подробности об использовании ключевого слова auto в CSS — взгляните на эту мою статью.
▍Настройка левого и правого внутренних отступов
Горизонтальные (левый и правый) внутренние отступы
При проектировании контейнера важно уделить внимание настройке его левого и правого внутренних отступов. Когда размер области просмотра меньше максимальной ширины контейнера, это приведёт к тому, что края контейнера будут прижаты к границам области просмотра. Вот пример стилизации контейнера, в котором предусмотрены внутренние отступы:
Настроив внутренние отступы контейнера, мы можем быть уверены в том, что края контейнера, в любом случае, будут находиться как минимум в 16px от краёв области просмотра, даже в том случае, если ширина области просмотра окажется меньше максимальной ширины контейнера. Внутренние отступы — это нечто вроде защитного механизма, который не даёт границам контейнера прижиматься к границам области просмотра даже в том случае, когда область просмотра уже, чем максимальная ширина контейнера.
▍Использование процентных значений при настройке контейнеров
Использование процентных значений при настройке контейнеров и ситуации, когда значение max-width: 90% приводит к приемлемым и неприемлемым результатам
Хотя этот подход оказался вполне рабочим, выяснилось, что на больших экранах 90% ширины области просмотра — это слишком много. Но данную проблему можно решить, воспользовавшись медиа-запросом:
В результате оказывается, что, используя процентное значение, мы усложняем CSS-код. Для того чтобы избавить себя от необходимости применения медиа-запроса, мы можем использовать фиксированное значение для ширины. Ещё одно решение, предложенное в этом твите, заключается в применении комбинации свойств width: 90% и max-width: 1170px :
Это — интересный подход, но я предпочёл бы настраивать внутренние отступы самостоятельно, не полагаясь на процентные значения.
▍Свойство display элемента-контейнера
Я не рекомендую этого делать, так как это идёт вразрез с идеей разделения ответственностей. Элемент-контейнер, «обёртка», это сущность, предназначение которой заключается в том, чтобы «оборачивать» другие элементы. Если нужно разместить дочерние элементы контейнера в сетке, тогда стоит добавить в контейнер ещё один
Пусть имеется такой контейнер:
Задавать свойство display: grid подобного элемента не рекомендуется из-за того, что такой элемент может использоваться на разных страницах. Его особые настройки могут случайно привести к нарушению размещения элементов. Вот неудачный вариант настройки контейнера, о котором идёт речь:
Лучше будет использовать такой HTML-код:
Элемент с классом featured-news можно стилизовать так:
Обратите внимание на то, что в этом примере мы использовали отдельный элемент
в качестве ещё одной обёртки для содержимого страницы. На имена классов, использованных здесь, можете внимания не обращать. Для решения подобной задачи можно подобрать более удачные имена классов, которые подойдут для многократного использования на различных страницах сайта. Однако именование CSS-сущностей выходит за рамки данного материала.
▍Настройка внешних отступов, разделяющих элементы-контейнеры
Помните, как выше я не рекомендовал использование сокращённого способа настройки внешних отступов для центрирования элемента-контейнера? Речь шла о такой конструкции:
Хотя это — вполне рабочий стиль, в том случае, если на странице имеется несколько элементов-обёрток, и между ними должно быть некоторое расстояние, применение подобного стиля может привести к путанице. Если вы, по какой-то причине, решите уточнить стилизацию элемента-обёртки, применив дополнительный класс, то настройка внешних отступов с помощью этого класса не даст нужных результатов из-за особенностей расчёта значений специфичности CSS-правил.
Я имею в виду такую схему стилизации:
Теперь поговорим о настройке внешних отступов элементов. При работе над каждым своим проектом я готовлю набор вспомогательных классов для настройки внутренних и внешних отступов. Я использую их там, где они нужны. Взгляните на следующий рисунок.
Автономный контейнер и контейнер внутри элемента
Контейнер внутри полноэкранного элемента
В некоторых случаях бывает так, что есть элемент с фоном, занимающий 100% ширины области просмотра, а внутри этого элемента имеется элемент-контейнер. Эта схема похожа на ту, которую мы рассматривали в предыдущем разделе.
HTML-структура страницы в такой ситуации может выглядеть так:
Элемент занимает 100% ширины области просмотра. Этому элементу можно назначить фоновое изображение или фоновый цвет. Контейнер, находящийся внутри этого элемента, не даёт содержимому занимать всю ширину области просмотра.
Элемент занимает всю ширину области просмотра, контейнер ограничивает пространство, в котором выводится содержимое страницы
На этом рисунке у элемента задано фоновое изображение. Он занимает всю ширину области просмотра, а содержимое страницы, выводимое в контейнере, ограничено шириной контейнера.
Нужно ли заключать в контейнер содержимое верхнего блока страницы?
Нужен ли контейнер для оформления верхнего блока страницы, который часто называют «Hero Section»? Это зависит от каждой конкретной ситуации. Исследуем два самых распространённых подхода к оформлению верхних блоков страниц.
Первый подход предусматривает центровку содержимого блока и ограничение ширины содержимого.
Ширина содержимого верхнего блока страницы ограничена
Второй вариант предусматривает распределение содержимого в пределах верхнего блока.
Содержимое распределено в пределах верхнего блока страницы
Для того чтобы лучше разобраться в этих паттернах, предлагаю исследовать особенности их внутреннего устройства.
Верхний блок страницы, содержимое которого выровнено по центру
Возможно, разрабатывая верхний блок страницы, вам захочется разместить в соответствующем элементе некое содержимое и выровнять его по центру без использования элемента-контейнера.
При стилизации вышеприведённого HTML-кода выровнять его содержимое по центру можно, воспользовавшись свойством text-align :
При таком подходе всё будет выглядеть достойно до тех пор, пока не изменится ширина окна браузера. Вот разбор проблем, которые это может вызвать.
▍Проблема №1: содержимое раздела прижимается к краям области просмотра
Так как в данном примере не настроены правый и левый внутренние отступы, содержимое раздела будет размещено вплотную к границам этого раздела. Это создаёт неудобства для пользователей, так как им сложнее будет читать содержимое верхнего блока страницы.
Содержимое раздела прижато к его краям
▍Проблема №2: слишком большая длина строк текста на экранах большого размера
, может быть очень тяжело читать из-за того, что длина абзаца окажется слишком большой. В соответствии с этим документом, рекомендованное число символов в строке составляет 45-75. Выход длины строки за пределы этого диапазона усложняет чтение.
Длина строки слишком велика
▍Решение проблем
Для решения вышеозначенных проблем можно использовать контейнер. Он позволит и удержать длину строки в разумных пределах, и предотвратить плотное прилегание содержимого к границам раздела.
Как выравнивать контейнер: по центру, или по левому краю страницы?
Я не могу дать однозначного ответа на этот вопрос, однако я видел сайты, контейнеры, используемые на которых, выравниваются на экранах ноутбуков по центру, а на экранах настольных компьютеров — по левому краю страницы.
Примером такого сайта является Techcrunch. Обратите внимание на то, что на экране настольного компьютера содержимое сайта выровнено по левому краю страницы.
Выравнивание содержимого на экране ноутбука и на экране настольного компьютера
Мне нравится работать с сайтами, содержимое которых выровнено по центру. На страницах таких сайтов имеются симметричные отступы слева и справа. Но у того, что содержимое некоторых сайтов выравнивают по левому краю страницы, может быть какая-то причина, о которой я не знаю. Если вы знаете о том, почему это так, дайте мне знать.
Использование CSS-переменных для создания различных вариантов стилизации контейнеров
Редко бывает так, что все элементы-контейнеры, используемые в некоем проекте, имеют одну и ту же ширину. Ширина контейнера может меняться в зависимости от содержимого контейнера и от того, как именно он используется. Большую гибкость в работе с контейнерами даёт использование CSS-переменных. Это, кроме того, весьма современный подход к настройке контейнеров. Рассмотрим пример.
Вот HTML-код контейнера:
Благодаря этому подходу я смог создать особый контейнер, не прибегая при этом к следующим действиям:
Если вам не нравится этот подход из-за использования в нём встроенного стиля для переопределения значения CSS-переменной, вы вполне можете решить эту задачу и с помощью добавления к элементу нового класса. Например — так, как показано ниже.
Так выглядит стиль:
Здесь можно найти рабочий пример.
Использование display: contents
При реализации чего-то, напоминающего этот пример, может понадобиться сделать так, чтобы заголовочный раздел сайта мог бы растягиваться до полной ширины страницы, чтобы его ширина не ограничивалась бы свойствами контейнера.
Заголовочная часть сайта занимает, в ширину, всё доступное пространство
Отзывчивый фон и фиксированное содержимое
В книге CSS Secrets представлена интересная техника, которая может быть использована для стилизации разделов, имеющих отзывчивый фон (фон, способный занимать всю доступную ширину области просмотра) и элемент-контейнер для содержимого. Рассмотрим обычный способ создания макетов подобных разделов.
Здесь значения свойств margin-left: auto и margin-right: auto вычисляются путём взятия половины ширины области просмотра и вычитания из неё ширины содержимого. Того же самого можно добиться с использованием внутренних отступов.
Но дело пока ещё не сделано. На мобильных устройствах содержимое будет прижато к краям области просмотра. Решить эту проблему можно, например, так:
Как вы стилизуете элементы-контейнеры?
Давайте глубже погрузимся в свойство CSS Container
По сравнению с прошлыми, современные браузеры стали действительно эффективными для рендеринга запутанной сети HTML, CSS и JavaScript-кода, который предоставляет типичная веб-страница. Требуется всего миллисекунды, чтобы преобразовать код который мы создаем в то, что люди могут использовать.
Что мы, как разработчики внешнего интерфейса, могли бы сделать, чтобы на самом деле помочь браузеру быть еще быстрее при рендеринге? Существуют обычные практики, которые легко забыть с помощью нашего современного инструментария, особенно в тех случаях, когда мы можем не иметь такого большого контроля над сгенерированным кодом. Мы могли бы контролировать наш CSS, например, с меньшим количеством более простых селекторов. Мы могли бы держать наш HTML под контролем; держать дерево более плоским с меньшим количеством узлов, и особенно с меньшим количеством потомков. Мы могли бы держать наш JavaScript под контролем, будучи осторожными с нашими манипуляциями HTML и CSS
На самом деле современные фреймворки, такие как Vue и React, очень помогают в этой последней части.
Я хотел бы изучить свойство CSS, которое мы могли бы использовать чтобы помочь браузеру выяснить, какие вычисления он может уменьшить в приоритете или, возможно, даже пропустить совсем.
«Свойство CSS contain позволяет автору указывать на то, что элемент и его содержимое, насколько это возможно, не зависят от остальной части дерева документа. Это позволяет браузеру пересчитывать макет, стиль, цвет, размер или любую их комбинацию для ограниченной области DOM, а не всей страницы, что приводит к очевидным преимуществам производительности.»
Браузер не может предсказать будущие изменения макета веб-страницы, которые могут произойти из-за вставки и удаления контента JavaScript на странице. Даже простые вещи, такие как вставка имени класса в элемент, анимация элемента DOM или просто получение измерений элемента, могут вызвать переформатирование и перерисовку страницы. Такие вещи могут быть затратными и их следует избегать или по крайней мере уменьшить их настолько насколько это возможно.
Разработчики браузеров потратили много времени на его оптимизацию, чтобы справиться с такими ситуациями. Существуют различные способы помочь браузеру быть более эффективным в таких моментах, но полезны более прямые подсказки. Свойство содержимого дает нам возможность предоставить эти подсказки.
Различные способы содержания
Пожалуйста, имейте в виду, что для каждого из них есть ряд правил и крайних случаев, которые описаны в спецификации. Я полагаю, что в большинстве ситуаций это не будет иметь большого значения. Тем не менее, если вы получите нежелательный результат, то быстрый взгляд на нее может оказаться полезным.
Существует также тип сдерживания style в спецификации, который эта статья не будет охватывать. Причина заключается в том, что тип сдерживания style считается малоценным и в настоящее время рискует быть удаленным из спецификации.
Размер содержания
Сдерживание size на самом деле просто объяснить. Когда контейнер с этим содержимым участвует в вычислениях макета, браузер может пропустить немного, потому что он игнорирует дочерние элементы этого контейнера. Ожидается, что контейнер будет иметь заданную высоту и ширину; в противном случае он разрушается и это единственное, что учитывается при разметке страницы. Считается, что в нем нет никакого содержания.
Учтите, что потомки могут влиять на свой контейнер с точки зрения размера в зависимости от стилей контейнера. Это необходимо учитывать при расчете макета с сдерживанием size это скорее всего не будет рассматриваться. Как только размер контейнера будет определен по отношению к странице, будет рассчитан макет его потомков.
Сдерживание size на самом деле не дает много возможностей для оптимизации. Обычно он сочетается с одним из других значений.
Вот совершенно надуманный пример этой концепции цикла изменения размера:
В этом примере, нажатие кнопки start приведет к тому, что красное поле начнет расти в зависимости от размера фиолетового родительского поля, плюс пять пикселей. По мере того как фиолетовое поле настраивается по размеру, наблюдатель изменения размера говорит красному квадрату снова изменить его в зависимости от размера родителя. Это приводит к тому, что родитель снова изменяет размер и так далее. Код останавливает этот процесс, как только родитель получает более 300 пикселей, чтобы предотвратить бесконечный цикл.
Кнопка сброса, ставит все обратно на место.
Щелчок флажка set size containment устанавливает размер сдерживания на фиолетовом поле. Теперь, когда вы нажмете на кнопку start, красное поле будет изменяться в зависимости от ширины фиолетового поля. Правда, оно переполняет родительский элемент, но суть в том, что оно изменяет размер только один раз и останавливается, цикла больше нет.
Если вы нажмете на кнопку resize container, фиолетовое поле станет шире. После задержки красный прямоугольник изменит свой размер соответствующим образом. При повторном нажатии кнопки, фиолетовое поле возвращается к своему первоначальному размеру, а затем красное поле снова изменяется.
В то время как это можно сделать без использования сдерживания, вы будете упускать преимущества. Если эта ситуация, которая может часто происходить на странице, то сдерживание помогает с вычислениями ее макета. Когда потомки изменяют внутреннюю часть содержимого, остальная часть страницы ведет себя так, как будто изменений никогда не было.
План размещения
Сдерживание layout сообщает браузеру, что внешние элементы не влияют на внутреннюю компоновку элемента контейнера. Поэтому, когда браузер выполняет расчеты макета, он может предположить, что различные элементы, содержащиеся в макете, не будут влиять на другие элементы. Это может снизить количество вычислений, которые необходимо сделать.
Еще одним преимуществом является то, что связанные вычисления могут быть отложены или уменьшены в приоритете, если контейнер находится за кадром или скрыт. Пример, который предоставляет спецификация:
«Например, если содержащее поле находится рядом с концом блочного контейнера, а вы просматриваете начало блочного контейнера»
Вот простой пример этого:
Paint containment
Еще одним интересным преимуществом сдерживания paint является то, что браузер может пропускать потомков этого элемента в вычислениях рисования, если он может обнаружить, что сам контейнер не виден в области просмотра. Если контейнер не находится в окне просмотра или каким-либо образом скрыт, это является гарантией того, что его потомки также не видны. В качестве примера, представьте навигационное меню, которое обычно находится за пределами экрана слева от страницы, и оно скользит при нажатии кнопки. Когда это меню находится в обычном состоянии вне экрана, браузер просто пропускает попытки нарисовать его содержимое.
Контейнеры работают вместе
Эти три условия обеспечивают различные способы влияния на части вычислений рендеринга, выполняемых браузером. Сдерживание size говорит браузеру, что этот контейнер не должен вызывать позиционное смещение на странице при изменении его содержимого. Сдерживание layout сообщает браузеру, что потомки этого контейнера не должны вызывать изменения макета в элементах вне его контейнера и наоборот. Сдерживание paint сообщает браузеру, что содержимое этого контейнера никогда не будет закрашено за пределами его размеров и если он скрыт, то вообще не стоит рисовать содержимое.
Поскольку каждый из них обеспечивает различные оптимизации, имеет смысл объединить некоторые из них. Спецификация фактически это учитывает. Например, мы могли бы использовать layout и paint вместе в качестве значений свойства содержащегося следующим образом:
Поскольку это очевидная вещь, спецификация предоставляет два сокращенных значения:
| Shorthand | Longhand |
| content | layout paint |
| strict | layout paint size |
Значение content будет наиболее распространенным для использования в веб-проекте с несколькими динамическими элементами, это несколько контейнеров, содержимое которых изменяется со временем или в результате действий пользователя.
Значение strict будет полезно для контейнеров с определенным размером, который никогда не изменится, даже если меняется содержимое. Как только он окажется на месте, он останется прежнего размера. Простым примером этого является div, который содержит сторонний, внешний, рекламный контент в отраслевых измерениях, который не имеет отношения к чему-либо еще на странице с точки зрения DOM.
Преимущества производительности
Но есть несколько вещей, которые нужно отметить, кроме простых чисел.
Просматривая записи, я бы нашел соответствующую область на временной шкале и сфокусировался там, чтобы выбрать задачу, которая охватывает изменение. Тогда я бы посмотрел журнал событий задачи, чтобы увидеть детали. Зарегистрированные события были такими: пересчитать стиль, макет, обновить дерево слоев, рисовать и составные слои. Сложение всех этих времен, дает нам общее время выполнения задачи.
Одна вещь, которую нужно отметить для двух типов локализации, это то, что событие рисования было зарегистрировано дважды.
Выполнение поставленной задачи
Вот общее время для трех типов защитной оболочки, по три запуска в каждом:
| Containment | Run 1 | Run 2 | Run 3 | Average |
| none | 24 ms | 33.8 ms | 23.3 ms | 27.03 ms |
| content | 13.2 ms | 9 ms | 9.2 ms | 10.47 ms |
| strict | 5.6 ms | 18.9 ms | 8.5 ms | 11 ms |
Большая часть времени была проведена в макете. Повсюду в цифрах были всплески, но помните, что это ненаучные результаты. Фактически, второй прогон сдерживания strict имел намного более высокий результат, чем два других прогона. Я просто сохранил это, потому что такие вещи случаются в реальном мире. Возможно музыка которую я слушал в то время, меняла песни во время этого пробега, кто знает. Но вы можете видеть, что два других пробега были намного быстрее.
Итак, по этим числам вы можете начать видеть, что свойство contain помогает браузеру рендериться более эффективно. Теперь представьте, что мое небольшое изменение умножается на множество изменений, внесенных в DOM и стилизацию типичной динамической веб-страницы.
Разложи один раз, нарисуй дважды
Я собираюсь использовать вышеприведенную демонстрацию в качестве основы для следующих описаний. Если вы хотите следовать дальше, то перейдите к полной версии в демо и откройте DevTools. Обратите внимание, что вы должны открыть детали “фрейма”, а не “основной” временной шкалы, как только вы запустите инструмент производительности, чтобы увидеть то, что я собираюсь описать.
На самом деле я делаю скриншоты из версии “fullpage”, так как DevTools лучше работает с этой версией. Тем не менее, обычная “full” версия должна давать примерно такую же идею.
Событие paint срабатывало только один раз в журнале событий для задачи, которая вообще не имела сдерживания. Как правило, событие не занимало слишком много времени, начиная от 0,2 мс до 3,6 МС. Чем глубже детали, тем интереснее оно становится. В этих деталях он отмечает, что область краски была целой страницей. В журнале событий, если вы наведете курсор на событие paint, DevTools даже выделит область окрашенной страницы. Размеры в этом случае будут соответствовать размеру видового экрана вашего браузера.
Имейте в виду, что браузеры имеют концепцию слоев для определенных элементов, чтобы помочь с рисованием. Слои обычно предназначены для элементов, которые могут перекрывать друг друга из-за нового контекста укладки. Примером этого, является способ применения position: relative; и z-index: 1; к элементу, заставит браузер создать этот элемент в качестве нового слоя. Свойство содержимого имеет тот же эффект.
В DevTools есть раздел, который называется «рендеринг», и он предоставляет различные инструменты, чтобы увидеть, как браузер отображает страницу. При выборе флажка «Границы слоя» мы можем видеть разные вещи в зависимости от содержания. Если содержимое отсутствует, вы не должны видеть никаких слоев, кроме типичных статических слоев веб-страниц. Выберите content или strict и вы увидите, что фиолетовое поле преобразуется в свой собственный слой, а остальные слои соответственно меняются.
Обычно первое событие окрашивает фиолетовую рамку и сообщает размеры этой рамки как его часть. Коробка теперь является своим собственным слоем и пользуется теми преимуществами, которые применяются.
Преимущество этого заключается в том, что обычно при появлении элементов прокрутки они должны быть окрашены. Элементы прокрутки в защитной оболочке уже были окрашены и не требуют повторения при появлении в поле зрения. Таким образом, мы также получаем некоторые оптимизации прокрутки.
Опять же, это можно увидеть в демоверсии.
Вернемся к той вкладке рендеринга. На этот раз вместо этого проверьте “Scrolling performance issue”. Когда для сдерживания установлено значение none, Chrome закрывает фиолетовую коробку накладкой с надписью «repaints on scroll.»
Если вы хотите, чтобы это произошло вживую, установите флажок «Paint flashing».
Обратите внимание: если мигание цветов на экране может представлять для вас проблему, пожалуйста, не устанавливайте опцию «Paint flashing». В примере, который я только что описал, не так много изменений на странице, но если оставить этот сайт проверенным и посетить другие сайты, то реакции могут быть другими.
Также обратите внимание, что наложение ”repaints on scroll» исчезло на обеих формах сдерживания. В этом случае сдерживание дало нам не только некоторый прирост производительности в живописи, но и в прокрутке.
Интересное случайное открытие
Когда я экспериментировал с демонстрацией выше и выяснил, как работают аспекты рисования и прокрутки, я наткнулся на интересную проблему. В одном тесте у меня была простая коробка в центре страницы, но с минимальным стилем. По сути, это был элемент, который прокручивает много текстового содержимого. Я применял сдерживание content к элементу контейнера, но не видел преимуществ прокрутки, описанных выше.
Контейнер был помечен наложением «repaints on scroll», а вспыхивающая краска была такой же, как и защитная оболочка, хотя я точно знал, что на контейнер content накладывается защитная оболочка. Поэтому я начал сравнивать свой простой тест с более стилизованной версией, которую я обсуждал выше.
В конце концов я увидел, что если контейнер background-color прозрачен, то преимущества производительности прокрутки содержимого не произойдет.
Первый тестовый запуск имел только одно событие paint в журнале событий. Второй тестовый запуск имел два события paint, как я и ожидал. Без этого фона похоже, браузер решает пропустить аспект слоя сдерживания. Я также обнаружил, что подделка прозрачности с помощью того же цвета, что и цвет позади элемента, тоже работает. Я предполагаю, что если фон контейнера прозрачен, то он должен полагаться на то, что находится под ним, что делает невозможным разделение контейнера на его собственные слои краски.
Я сделал еще одну версию тестовой демонстрации, которая меняет элемент контейнера background-color с прозрачного на тот же цвет, который используется для цвета фона тела. Вот два скриншота, показывающие различия при использовании различных параметров на панели рендеринга в DevTools.
Вы можете увидеть флажки, которые были выбраны, и результат. Даже при наложении сдерживания содержимого в коробке есть “repaints on scroll», а также зеленый наложенный слой, показывающий рисование во время прокрутки.
На втором изображении вы видите, что установлены те же флажки, и результат отличается от контейнера. Наложение «repaints on scroll» исчезло, зеленое наложение для рисования также исчезло. Вы можете видеть наложение paint на полосе прокрутки, чтобы показать, что оно было активным.
Вывод: не забудьте применить некоторую форму цвета фона к вашему контейнеру при нанесении защитной оболочки, чтобы получить все преимущества.
Заключение
В этой статье были рассмотрены основы свойства contain CSS с его значениями, преимуществами и потенциальным приростом производительности. Есть несколько превосходных преимуществ применения этого свойства к определенным элементам в HTML. Какие элементы нужно применить, решать только вам. Общая идея заключается в том, чтобы применять его к элементам, которые являются контейнерами других элементов, особенно с элементами динамического аспекта.
Некоторые возможные сценарии: области CSS-сетки, элементы, стороннее содержимое и контейнеры с динамическим содержимым основанным на взаимодействии с пользователем. В этих случаях не должно быть никакого вреда при использовании свойства, если вы не пытаетесь содержать элемент, который на самом деле каким-то образом полагается на другой элемент за пределами этого содержимого.
