Что такое wrapper в html
Перейти к содержимому

Что такое wrapper в html

  • автор:

Обёртка

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

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 12 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Что такое wrapper в html

Обертки бывают двух типов:

  1. Про расположение блока относительно других блоков
  2. Про лейаут внутри блока

Когда сталкиваетесь с первым случаем, чаще всего подойдет микс (либо с элементом родителя, либо с элементом сетки). Например:

Еще можно не экономить на лишних DOM-узлах и делать так:

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

Как делать не стоит: создавать модификаторы для кнопки, задающие margin и т.п. свойства. Такое позиционирование по смыслу не является частью универсального блока, а лишь его конкретного места использования. Да и модификаторов на всех не напасешься.

Если же обертка относится именно к данному блоку (скажем, позиционирование иконки внутри той самой универсальной кнопки или ограничитель по max-width для контента страницы), то это будет внутренний элемент inner :

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

Комментарии: 23
8 years ago
8 years ago

Но чем по сути блок button__inner отличается от блока-враппера, обертки? Это же и есть обертка. Просто ей придумали «красивое» название. Нет?

8 years ago

Т.е. разница в том что мы договариваемся считать их элементами блока, а не отдельными блоками (связанными названием или не связанными, тк получилось придумать логичное имя)?

VS .block > .h-block , VS .l-block > b-block и т.д.

8 years ago

Давай еще раз: h- и l- блоки — это как раз случай, когда есть некая внешняя сущность, отвечающая за лейаут. В моем примере — это блок grid . Это работает, когда позиционирование является абстрактным в вакууме. Например, у нас есть шаг сетки и он всегда такой во всех случаях использования.

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

При этом важно понимать, что это не блок logo (и даже не logo_type_header ) имеет отступ 20 пикселей от границ шапки, а элемент шапки header__logo . Тогда logo можно будет использовать повторно где-то еще на странице и не перебивать каждый раз отступы, т.е. получится тот самый независимый универсальный блок.

8 years ago

Для внутреннего позиционирования — понятно, используем элементы-врапперы, придумывая им красивые названия. Но проблема с придумыванием имен для позиционирования внешнего — там бывает просто не знаешь что выдумать, а .l-block , .b-block — здорово выручают с неймингом. И бонусом получаем понимание смысла блока видимое из названия (то о чем пишет Гарри Робертс: http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)

8 years ago

Я в посте написал буквально следующее: «на самом деле примерно никогда не нужно заворачивать конкретный блок в абстрактную обертку».

Можешь привести примеры макетов из реальной жизни, когда появляется необходимость в абстрактной внешней обертке не являющейся каким-либо аналогом сетки?

8 years ago

@tadatuta я тоже не понимаю о чем вещает @delka и какие кейсы он решает. По опыту примеры Вовы должны решать большенство кейсов

8 years ago

Вопрос про внутреннее позиционирование: что делать если надо разместить обертку внутри элемента, а не блока? И как правильно именовать эту обертку?

8 years ago

@alex-milovanov Ничего не меняется:

What Is a Wrapper in HTML?

A wrapper is an HTML element that contains other elements. It is used to group together related elements for the purpose of styling or semantic purposes.

The and elements are actually wrappers as well, because they wrap other HTML elements that you might use within an HTML document.

The most common wrapper element is the . Other wrapper elements include the span and section. Let’s take a closer look at each of these three wrapper elements.

 class="wrapper"> Welcome to our website! Here you can find information about our products and services.  

Лучший способ реализовать «обёртки» в CSS

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

В языках программирования слово «контейнер» обычно используется для структуры, содержащей более одного элемента. «Обёртка» же — это нечто, что оборачивается вокруг одного объекта, чтобы предоставить интерфейс к нему и расширить его функциональность.

Так что, мне кажется, есть смысл оставить два названия, поскольку они предполагают разные функции.

Обёртка ассоциируется с , который содержит весь остальной HTML в документе. Уверен, что многие помнят то время, когда мы устанавливали для ширину 960px и центрировали основной контент. Обёртки так же были полезны, чтобы прижать футер.

Контейнер, напротив, обычно предполагает другой вид содержимого. То, которое иногда необходимо для реализации поведения или оформления множественных компонентов. Он служит задаче группировки семантических и визуальных элементов. Например, у бутстрапа есть «классы контейнера», которые содержат их систему сеток или другие различные компоненты.

Термины «Обёртка» и «Контейнер» также могут означать одно и то же в зависимости от разработчика и его целей. Могут быть и другие соглашения, так что лучший совет, как правило — делать так, как вам самим логичнее. Но помните, что наименование — одна из наиглавнейших фундаментальных вещей в практике разработчика. Система наименования делает код читабельнее и предсказуемее. Выбирайте тщательнее!

Вот пример общей обёртки страницы:

/** * 1. Центрируем содержимое. Да, это немножко вкусовщина. * 2. См. раздел «width против max-width» * 3. См. раздел «Дополнительные внутренние отступы» */ .wrapper < margin-right: auto; /* 1 */ margin-left: auto; /* 1 */ max-width: 960px; /* 2 */ padding-right: 10px; /* 3 */ padding-left: 10px; /* 3 */ >

width против max-width

После установки ширины блочному элементу он больше не сможет растягиваться на всю ширину своего контейнера (полезно для комфортной длины строк). Следовательно, элемент-обёртка займёт указанную ширину. Но если окно браузера Уже указанной ширины обёртки, то появится нежелательный горизонтальный скролл.

Поэтому для окон поуже лучше использовать max-width . Это важно при оптимизации сайтов под мобильные устройства с маленьким экраном. Вот неплохой пример, который демонстрирует эту проблему.

С точки зрения отзывчивости max-width лучший выбор!

Дополнительные внутренние отступы

Я видел, как многие разработчики забывали один граничный случай. Допустим, есть обёртка с max-width: 980px. Этот граничный случай проявляется при экране устройства 980px. Поэтому, её содержимое прилипнет точно к краям экрана, не оставляя «воздуха».

photogallery

Эта проблема нехватки «воздуха»

Обычно нам нужны отступы по краям. Вот почему, когда мне нужна обёртка шириной 980px, я делаю так:

.wrapper < max-width: 960px; /* на 20px меньше, чтобы уместить отступы по краям. */ padding-right: 10px; padding-left: 10px; /* . */ >

Вот почему добавление padding-left и padding-right к обёртке будет хорошей идеей, особенно на мобильных устройствах.

Или подумайте о box-sizing, чтобы отступы вообще не влияли на общую ширину.

Какой HTML-элемент выбрать

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

Невольно возникает вопрос, а может ли для этой цели подойти элемент . Однако, спецификация W3C говорит вот что:

Элемент не замена общему элементу-контейнеру. Если элемент нужен чисто для оформительских целей или как вспомогательное средство для скриптов, то рекомендуется использовать . Общее правило таково: элемент раздела подходит в случае, когда содержимое элемента явно указано в схеме документа.

Элемент несёт в себе собственную семантику. Он подходит для тематической группировки контента. В каждом разделе должен быть заголовок (элемент h1-h6) в качестве дочернего элемента (прим. перев.: это не строгое правило, но крайне желательно соблюдать его).

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

Сходу это может показаться неочевидным. Но да, старый добрый лучше всего подходит для обёртки!

Тег против дополнительного

Следует отметить, что в качестве обёртки иногда может подойти . Вот такая реализация отлично работает:

body

И в результате у вас в разметке будет одним элементом меньше, поскольку удалён ненужный обёрточный .

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

  • Вам нужно «прибить» футер к концу документа (к низу окна, если документ короткий). И если даже воспользоваться flexbox в качестве современного способа, всё равно не обойтись без обёрточного (прим. перев.: на самом деле можно задать display: flex самому body , тем более в примере по ссылке так и сделано).
  • Вам требуется установить background-color целой странице. Поскольку у body есть max-width , то его нельзя использовать. Но тогда можно установить фон тегу . Но тут я сомневаюсь. После прочтения статьи HTML vs Body in CSS это звучит для меня немного необычно. Однако, я не слышал каких-то проблем или трудностей с применением цвета фона для элемента . Но это по-прежнему звучит немного странно, да? (Прим. перев.: проблема с фоновым цветом преувеличена, поскольку по стандарту CSS любой фон, указанный для , и так применяется ко всему , если тому явно не задан собственный фон. Но могут быть другие проблемы, например, со сторонними скриптами, позиционирующими всплывающие окна и т.п. именно относительно )

Лично я склоняюсь к тому, что для реализации обёртки всё же лучше использовать дополнительный . Таким образом, если требования спецификации позже изменятся, то потом не придётся добавлять обёртку и переписывать стили. В конце концов, речь же об одном-единственном добавочном DOM-элементе.

P.S. Это тоже может быть интересно:
  • Псевдокласс :has() — не только «родительский селектор»
  • CSS COLORS
  • Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

Если вам понравилась статья, поделитесь ей!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *