Html - как скрыть элементы, чтобы они не занимали место на странице?

Значения¶

Значение по-умолчанию:

Наследуется: нет

Применяется ко всем элементам

Анимируется: нет

Элемент показывается как блочный. Применение этого значения для строчных элементов, например , заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.

Элемент отображается как строчный. Использование блочных элементов, таких, как и , автоматически создаёт перенос и показывает их содержимое с новой строки. Значение отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.

Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде ). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.

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

Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.

Элемент ведет себя как блочный и выкладывает содержимое согласно грид-модели

Элемент выводится как блочный и добавляется маркер списка.

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

Определяет, что элемент является блочной таблицей, подобно использованию .

Задаёт заголовок таблицы, подобно применению .

Указывает, что элемент представляет собой ячейку таблицы ( или ).

Назначает элемент колонкой таблицы, словно был добавлен .

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

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

Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой .

Элемент отображается как строка таблицы ().

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

“Липкое” позиционирование

Sticky можно перевести как “липкий”. Это некий компромисс между относительным и фиксированным значениями. На текущий момент это экспериментальное значение и не является частью официальной спецификации. Оно лишь частично поддерживается некоторыми браузерами. Поэтому, вероятно, пока не стоит использовать его на рабочих проектах.

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

Sticky элемент «прилипает» к своему ближайшему предку с прокруткой, созданной при равном , , или , даже если тот не является ближайшим фактически прокручивающим родителем.

Возьмем пример:

Здесь элемент будет располагаться относительно, пока при прокрутке области просмотра его положение не достигнет точки, в которой он будет находиться на расстоянии 30px от верха области просмотра. В этот момент он станет липким и остается в фиксированной позиции 30 пикселей вверху экрана.

Следующий пример демонстрирует иллюстрирует момент, где первое меню навигации имеет относительное позиционирование по умолчанию, а второе меню настроено на закрепление в самом верху области просмотра. Этот пример будет работать в Chrome, Safari и Opera, а в остальных браузерах только если они уже доработали его поддержку.

See the Pen
position sticky by Андрей (@adlibi)
on CodePen.

CSS значення

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sideclearclipcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumnscolumn-spancolumn-widthcontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfontfont-facefont-familyfont-feature-settingsfont-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretchfont-stylefont-synthesisfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphensime-modejustify-contentkeyframesleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmarksmax-heightmax-widthmin-heightmin-widthnav-downnav-indexnav-leftnav-rightnav-upopacityorderorphansoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpositionquotesresizerighttable-layouttab-sizetext-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-orientationtext-overflowtext-shadowtext-transformtext-underline-positiontoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidowswidthword-breakword-spacingword-wrapwriting-mode

Изменение стилей

Свойство style отражает вложенные стили элемента HTML. Часто стили будут применяться к элементам через таблицу стилей, как мы делали ранее в этой статье, но иногда нам будет нужно добавить или изменить вложенный стиль напрямую.

Мы создадим небольшой пример для демонстрации редактирования стилей с помощью JavaScript. Ниже представлен новый файл HTML с блоком , который имеет вложенные стили, применяемые для отображения квадрата.

styles.html

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

Один из вариантов редактирования стилей подразумевает использование .

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

Свойства CSS записаны в кебаб-регистре, т.е. в нижнем регистре, разделенные тире

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

Иными словами, вместо мы будем использовать для свойства стиля JavaScript.

После внесения описанных выше изменений стиля итоговый рендеринг будет представлять собой круг:

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

Каскадность и специфичность

Напомню, что CSS в переводе – это «Каскадные таблицы стилей», уже одно это показывает важность понятия «каскадность». В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил

И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность

В верстке самой распространенной является ситуация, когда на один элемент действуют множество CSS-правил. И то, как именно будет выглядеть элемент определяют именно каскадность и специфичность.

Каскадность

Посмотрите на пример:

<h3 class=»attention highlight»>Заголовок третьего уровня</h3>

1	<h3 class=»attention highlight»>Заголовок третьего уровня</h3>

h3 {
font-size: 24px;
}
.attention {
color: red;
}
.highlight {
background-color: yellow;
}

1
2
3
4
5
6
7
8
9

h3 {

font-size 24px;

}

.attention {

color red;

}

.highlight {

background-color yellow;

}

Видим, что для данного элемента имеются 3 правила. Итоговыми стилями, примененными к элементу, будут:

{
font-size: 24px;
color: red;
background-color: yellow;
}

1
2
3
4
5

{

font-size24px;

colorred;

background-coloryellow;

}

С каскадностью теснейшим образом связана специфичность.

Дело в том, что одни и те же свойства, для одного и того же элемента, могут быть определены в разных css-правилах, и даже, в разных файлах.

Какое же значение у свойства будет в итоге? Это определяется через механизм, называемый специфичность.

Специфичность

Посмотрим пример:

<div class=»sidebar»>
<h3>Заголовок новости</h3>
</div>

1
2
3

<h3>Заголовок новости</h3>

</div>

.sidebar h3 {
color: red;
}
h3 {
color: blue;
}

1
2
3
4
5
6

.sidebar h3 {

color red;

}

h3 {

color blue;

}

В примере цвет текста для тега
<h3> , находящегося в контейнере с классом
.sidebar , прописан 2 раза.

Вопрос: «Какой цвет будет у этого элемента?»

Ответ: «Красный, поскольку селектор
.sidebar h3 более специфичен, еще говорят: селектор имеет больший вес».

Специфичность (вес) селектора определяется при помощи 4-х различных значений. Эти значения можно, условно, представить как цифры: тысячи, сотни, десятки, единицы.

Тысяча – это встроенные стили, добавляемые непосредственно в сам элемент в HTML-разметке.
Сотня – это идентификатор.
Десятки – это классы.
Единицы – это сам элемент или псевдоэлемент.

Если не очень понятно, то посмотрите таблицу ниже и все станет ясно:

Селектор	Тысячи	Сотни	Десятки	Единицы	Специфичность
div	1	0001
.some-class	1	0010
#myid	1	0100
<p style=»color: red»>текст</p>	1	1000
.some-class div	1	1	0011
#myid .some-class div	1	1	1	0111
.some-class ul li	1	2	0012
.some-class .my-class p span	2	2	0022

В ситуации, если специфичность у селекторов одинакова, действовать будет правило, которое находится ниже в css-файле.

Если правила находятся в разных css-файлах, то действовать будет правило, которое расположено в файле, подключенном позднее (ниже).

Накладываем на изображение CSS фильтры для получения эффектов Instagram

Для получения различных эффектов фильтров на изображениях используется css свойство filter. Для кросбраузерной поддержки используются префиксы -webkit- и -moz-. CSS свойство filter может принимать следующие значения:

blur(5px) — размывает изображения подобно фильтру «размытие по гаусу». Чем больше значение, тем сильнее размытие. Начиная с определенного значения возможно выпирание эффекта размытия за границы блока, что можно исправить с помощью overflow:hidden на родительском элементе
brightness(50%) — регулирует яркость изображения. По умолчанию 100%. Возможно указание значение в десятичных дробях brightness(.4)
contrast(50%) — настройки контрастности изображения — разницы между самыми темными и самыми светлыми участками картинки
drop-shadow(1px 1px 2px #000) — свойство аналогичное по синтаксису box-shadow и text-shadow. Если на изображении есть текст, к нему так же будет применен эффект тени
grayscale(50%) — постепенно превращает изображение в черно-белое от 0% к 100%
hue-rotate(50%) — изменяет цвета изображения по принципу теплее, холоднее, следуя по цветовому кругу
invert(50%) — превращает изображение в негатив
opacity(50%) — аналогично свойству opacity, но значительно повышает производительность браузера при обработке эффекта
saturate(50%) — изменяет насыщенность цветов от 100% к 0%
sepia(50%) — Имитирует эффект старины или ретро стиля. По умолчанию 0%. Чем выше значение, тем больше эффект.
url() — передается расположение xml файла с фильтром svg

display : inline

The value displays an HTML element as part of the normal text flow.
Look at this HTML example:

<div>This text is written </div>
<div>Inside two div elements.</div>

HTML elements are normally rendered as by default. Thus,
each of the two elements will be rendered as separate blocks. Here is how
that looks:

This text is written
Inside two div elements.

Now, notice what happens when we set the CSS property to
for the two elements. Here is the HTML code:

<div style="display:inline">This text is written </div>
<div style="display:inline">Inside two div elements.</div>

And here is how the two elements are now rendered in the browser:

This text is written
Inside two div elements.

Notice how the two elements are now rendered as if they were both part of a normal
text flow. No line breaks or anything.

Синтаксис свойства CSS display

display: none;

Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.

Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:

display: inline;

Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline, мы задаем для него поведение строчного элемента:

display: block;

Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block, он будет вести себя как блочный элемент.

Некорректная реализация в IE и FireFox

В некоторых случаях, в IE6, IE7 и FireFox 2, встречается неверная реализация свойства z-index.

Элемент select в IE6

В Internet Explorer 6, элемент select является windows-контролом, по этой причине он всегда отображается поверх всех элементов, игнорируя обычный порядок размещения, а также свойства position и z-index. Проблема показана на картинке ниже:

Элемент select находится в документе первым, его свойство z-index равно 1, а position установлен в relative. Div выводится после select, а его z-index равен «9999». Исходя из всего этого, div должен находится над select, как это происходит в других браузерах:

– Choose Year –200920102011

Gold Box

Если вы просматриваете эту статью не в IE6, вы увидите что div расположен выше select.

Эта ошибка IE6, является большой проблемой для выпадающих меню, когда они должны перекрывать элемент select. Решением может быть использование javaScript для того чтобы временно скрыть select-ы, а потом, после исчезновения меню, показать опять. Другим решением может быть использование .

Позиционированные родители в IE6/IE7

Internet Explorer версий 6 и 7 некорректно сбрасывают контекст стека в отношении ближайшего позиционированного родителя. Чтобы продемонстрировать эту ошибку, мы опять отобразим два div-а. Но в этот раз мы обернём первый из них в позиционированный элемент.

Grey Box

Blue Box

У серого элемента z-index равен 9999, у синего — 1, оба элемента позиционированы. Поэтому, при корректной реализации, серый элемент отобразится поверх синего.

Если же вы откроете эту страницу в IE6 или IE7, вы увидите что синий элемент перекрывает серый. Это происходит по причине того, что серый элемент обёрнут в ещё один div, которому position установлен в relative.

Оба браузера «сбрасывают» контекст стека в относительно позиционированных элементах, хотя и не должны этого делать. У серого элемента z-index больше, чем у синего, поэтому он должен отображаться выше. С остальными браузерами такой проблемы нет.

Отрицательные значения в FireFox 2

В FireFox 2, элементы с отрицательным z-index находятся под контекстом стека, вместо того, чтобы быть над фоном и границами элемента, который формирует контекст стека. Пример вы можете увидеть на картинке:

Ниже представлена html-версия

Grey Box

Blue Box

Gold Box

Как видите, фон серого элемента (который формирует контекст стека) находится под синим, а текст (который является inline-элементом в сером элементе) находится над ним, что соответствует правилам естественного расположения, описанным выше.

Чуть-чуть истории

Для молодых верстальщиков и фронтендеров инлайн-блоки — что-то очень древнее. Но ни в CSS1, ни в CSS2 никакого не было. Появился он только в CSS2.1, а стандартом CSS2.1 стал лишь в 2011-м, в эпоху «CSS3». В Firefox до 3-й версии (а версии тогда «жили» не по полтора месяца, а годами) приходилось эмулировать через , который был не чем иным, как… мозилловской реализацией старой версии флексбоксов (да-да, инлайн-блоки эмулировали флексбоксами, вот так ирония!). Как ни странно, IE это значение поддерживал (в нем оно впервые и появилось!), но… только для элементов с дефолтным (впрочем, это ограничение обходилось простым хаком). В общем, веселое было время:)

В начале 2010-х инлайн-блоки пережили всплеск популярности как основа для сеток. Они давали намного больше простора для разных вариантов выравнивания, чем надоевшие флоаты, и при этом не нуждались ни в каких «клиарфиксах». И по сей день они — один из самых популярных фолбэков для нормальных систем раскладки (флексбоксов и гридов).

Но как и флоаты, инлайн-блоки не были предназначены для раскладки блоков, так что своих хитрых хаков и тут хватало. Не случайно две статьи про такие хаки до сих пор у нас в числе самых популярных.

Естественное расположение элементов

На странице, обычное размещение элементов (я имею в виду расположение вдоль оси Z) определяется несколькими факторами. Ниже представлен список этих факторов, начиная с самых нижних элементов. В этом списке подразумевается, что ни одному из элементов явно не присваивается свойство z-index.

Фон и границы элемента, определяющего контекст стека.
Элементы с отрицательным контекстом стека, в порядке отображения.
Непозиционированные (position: static), а также без установленного свойства float (float: none) блочные элементы (display: block), в порядке отображения.
Непозиционированные, с установленным свойством float, блочные элементы, в порядке отображения.
Строчные (inline) элементы, в порядке отображения.
Элементы с установленным свойством position, в порядке отображения.

Корректное применение свойства z-index, может изменить естественное расположение в стеке.

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

Grey Box

Blue Box

Gold Box

У этих элементов разные цвета фона и границ, а последние два смещены за счёт установленного отрицательного свойства margin. Таким образом видно естественное размещение элементов, каждый следующий находится «выше» предыдущего. У этих элементов не установлено свойство z-index, их порядок размещения в стеке является естественным.

Комбинации селекторов.

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

В задачу, описанную выше, мы можем решить, написав два правила.

Для заголовков статей:

.articles h3 {
text-align: center;
}

1
2
3

.articles h3 {

text-align center;

}

Для заголовков новостей:

.sidebar h3 {
color: darkred;
}

1
2
3

.sidebar h3 {

color darkred;

}

Здесь мы использовали комбинатор
пробел . Т.е. селектор
.articles h3 выберет для изменений теги
<h3> , которые находятся внутри элемента с классом
articles (вне зависимости от уровня вложенности).

Этот комбинатор называется «комбинатор потомков» и используется очень часто.

Дочерний селектор

Давайте немного изменим верстку блока со статьями.

<div class=»articles»>
<h3>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1
2
3
4
5
6
7
8
9

<h3>Заголовок статьи 1</h3>

<h3>Заголовок статьи 2</h3>

<h3>Рекламная акция</h3>

</div>

<h3>Заголовок статьи 3</h3>

<h3>Заголовок статьи 4</h3>

</div>

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

Использованный нами ранее селектор
.articles h3 подействует и на заголовок рекламной акции, поскольку он не учитывает уровень вложенности.

Если мы хотим изменить только заголовки статей, не трогая рекламный заголовок, то лучше использовать «дочерний селектор» — символ
> .

.articles > h3 {
text-align: center;
}

1
2
3

.articles > h3 {

text-align center;

}

Селектор
.articles>h3 выберет для изменения теги h3, которые находятся непосредственно в элементе с классом
articles , а теги рекламных заголовков затронуты не будут.

Комбинатор всех соседних элементов

Комбинатор
~ выберет все соседние элементы, т.е. элементы у которых такой же контейнер, как и у указанного элемента. Слово «соседний» в данном случае обозначает, что будут выбраны все элементы находящиеся после указанного.

<div class=»articles»>
<h3 class=»first-article»>Заголовок статьи 1</h3>
<h3>Заголовок статьи 2</h3>
<div class=»promo»>
<h3>Рекламная акция</h3>
</div>
<h3>Заголовок статьи 3</h3>
<h3>Заголовок статьи 4</h3>
</div>

1
2
3
4
5
6
7
8
9

<h3 class=»first-article»>Заголовок статьи 1</h3>

<h3>Заголовок статьи 2</h3>

<h3>Рекламная акция</h3>

</div>

<h3>Заголовок статьи 3</h3>

<h3>Заголовок статьи 4</h3>

</div>

.first-article ~ h3 {
color: blue;
}

1
2
3

.first-article~h3{

colorblue;

}

В примере выше все заголовки <h3>, которые находятся после заголовка с классом
.first-article , станут синего цвета. Заголовок, находящийся внутри <div> с классом
.promo затронут не будет, поскольку у него другой контейнер.

Комбинатор следующего соседнего элемента

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

.first-article + * {
margin-top: 3rem;
}

1
2
3

.first-article + * {

margin-top 3rem;

}

В примере выше, написано правило, которое обеспечивает, что любой (один) элемент, который находятся сразу после заголовка с классом
.first-article , будет иметь отступ сверху размером
3rem .

Комбинатор запятая

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

h1, h2, h3, h4, h5, h6 {
margin-bottom: 0;
}

1
2
3

h1, h2, h3, h4, h5, h6 {

margin-bottom;

}

В примере выше, мы обнуляем отступы снизу сразу у всех заголовков.

Основные правила для решения проблемы доступности

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

Вот несколько правил, которые должны помочь определить, когда и как скрывать элементы визуально:

Если необходимо скрыть содержимое визуально, но оставить его доступным для программ-читалок, не используйте для text display: none.
Если скрываемый вами контент может быть полезен только для пользователей, использующих программы для чтения с экрана, подумайте, нужно ли его скрывать. Если все же решили скрыть его, убедитесь, что он становится видимым при фокусировке.
Если вы хотите скрыть что-то временно и отобразить его в результате взаимодействия с пользователем, display: none может оказаться как раз тем, что нужно. Важным фактором в этом случае является то, что, поскольку скорее вы будете использовать JavaScript, чтобы сделать содержимое видимым, изменив значение display-свойства, вы должны иметь в виду, что скрывать его нужно будет и для пользователей, у которых нет JS.

При работе с визуализацией содержимого все сводится к осознанию того, что display: none скрывает содержимое от всех, кто использует CSS для браузера.

Display None — это что такое? Свойства и использование на News4Auto.ru.

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

Контексты форматирования в CSS

Итак, какие они вообще бывают, по состоянию на середину-конец 2014 года?

Из старых:

Инлайновый

Самый простой на первый взгляд, бездонный, если копнуть чуть глубже. Самый важный, поскольку ведает представлением того, что составляет основу веба ― текста и всего того, что дает этому тексту гордую приставку «гипер-»: картинок, ссылок, элементов форм, видео и прочих медиаобъектов…

Блочный

На первый взгляд еще проще инлайнового. Тоже самый важный, т.к. ведает размещением и оформлением блоков контента. В нем же «плавают» float-ы.

Табличный

Определяет поведение табличных элементов в их иерархии ― ячейки в строках, строки в группах, заголовки таблиц где-то рядом, всё это вместе в некой обертке особого типа и т.д. Недостающие по иерархии элементы заменяются анонимными боксами-«призраками» (чуть подробнее о них здесь).

И из новых:

Флексбоксовый

О флексбоксах и их непростой судьбе мы говорили уже давно, с тех пор появилось много хороших руководств по ним (, , , ) и многие успели опробовать их прелести. Одни особенности роднят их с блоками, другие (пропорциональное растягивание) ― с таблицами, третьи (многострочность) ― с инлайн-боксами. У флексбоксового контекста есть еще одна особенность, но о ней чуть позже.

Гридовый (сеточный)

Гриды (сеточная раскладка) ― еще один CSS-модуль, предназначенный специально для создания макетов, тоже с запутанной родословной и противоречивой репутацией. На момент написания статьи был не так популярен, как флексбоксы, поскольку был готов к использованию лишь в одном браузере (на удивлен), но всё меняется. Одна особенность роднит его с предыдущим.

Контекст форматирования Ruby

Что такое «Ruby-аннотации», вы можете узнать из статьи о соотв. элементах HTML5. В CSS для них тоже есть свой модуль… и больше знать о нем пока нам, пожалуй, (шутка: знания лишними не бывают).

Еще?

Есть ли еще контексты форматирования? Беглый поиск по разделу со спецификациями их не находит. Но, судя по детективно-табличной истории, даже сами авторы спецификаций могут до поры этого не знать!:) Возможно, именно вы сможете найти в какой-нибудь из затерянных спецификаций диковинного «зверя», о котором не знали сами члены W3C, так что удачной вам «охоты»!

Всё сразу одной таблицей (для наглядности)

КФ	Для чего нужен	«Участники»	Важные особенности	Ссылки на стандарт
Инлайновый	Форматирование текста и всего, что находится прямо в нем	Элементы строки (текст, картинки, кнопки, инлайн-блоки, инлайн-таблицы и т.д.)	Всё «воспринимается как текст», напр., пробелы в коде часто отображаются как символы. Сложные правила вертикального выравнивания.	CSS Text 3
Блочный	Оформление блоков текста (с отступами и врезками)	Блочные боксы (в т.ч. анонимные), float-ы	«Схлопывание» margin-ов, «проваливание» float-ов через верхние и нижние границы блоков, влияние float-ов в пределах контекста друг на друга. Не-блочные элементы неявно оборачиваются в анонимные блоки. Мало средств для выравнивания/центрирования по вертикали.
Табличный	Представление табличных и «таблицеподобных» данных, изредка полезен и для раскладки блоков	Ячейки, строки, группы строк (как thead/tbody/etc.) и всё такое, в т.ч. анонимные	Иерархия табличной структуры (в строке могут быть только ячейки и т.п.), для недостающих элементов иерархии создаются анонимные обертки соотв. типа. Сложные и плохо документированные алгоритмы расчета размеров	к CSS2.1CSS Tables 3 (работа идет, но еле-еле)
Флексовый	«Гибкая» раскладка и взаимное выравнивание блоков с контентом, в т.ч. для динамичных и адаптивных макетов и их частей	Флекс-элементы (во флекс-контейнере)	Меняет поведение непосредственных потомков элемента, задающего этот контекст. В частности, свойство float игнорируется. Создает анонимные флекс-обертки для текста, оказавшегося непосредственно в контейнере.	CSS Flexbox 1 Для истории:Flexbox 2011Flexbox 2009
Гридовый (сеточный)	Расположение блоков в соответствии с заданным «каркасом» страницы или интерфейса	Грид-элементы (в грид-контейнере)	Практически полная независимость порядка отображения элементов от порядка в коде. Элементы могут влиять друг на друга сразу по двум направлениям. Создает анонимные грид-обертки для текста, оказавшегося непосредственно в контейнере.	CSS Grid 1
Ruby	Подсказки для чтения текста иероглифами	Иероглифы основного текста и ruby-подсказки к нему	Вряд ли встретится вам, если вы не будете верстать учебники китайского или японского… но кто знает!	CSS Ruby 1

Расписывать контексты форматирования в деталях, как вы уже знаете, можно до бесконечности. Поэтому пока поставим в них точку, добавим в закладки ссылки с подробностями, и перейдем ко второй заявленной теме.

Миф об «инлайн-блочных элементах в HTML»

Напоследок — небольшой курьез. С развитием CSS старинное деление HTML-элементов по внешнему виду, на «блочные» и «строчные», стало порождать домыслы о том, что другим видам CSS-отображения тоже могут соответствовать какие-то свои категории контента в HTML. Так, видимо, родился миф об «инлайн-блочных элементах в HTML». Чаще всего в таковые «записывают» элемент , реже и др. Так вот, это ерунда.

В HTML не было и нет такой категории элементов, и выделять ее нет смысла, полезной информации она не даст. Классифицируйте элементы по их логической роли: структурные, заголовочные, текстовые, интерактивные и т.д., как это делают . Эта классификация сразу даст вам подсказку, для чего элемент может использоваться (например, структурный — для разметки крупных логических блоков страницы, чтобы пользователю скринридера было удобно легко переходить между ними, поэтому их не должно быть на странице слишком много) и что в него можно вкладывать (скажем, интерактивные элементы обычно нельзя вкладывать друг в друга, чтобы браузер не запутался, чьё действие выполнять). А внешний вид любому (ну, почти) элементу можно придать любой — с помощью CSS. В том числе и вид инлайн-блока.

В CSS — и в этой статье — термины «блок» и «строчный элемент»/«элемент строки» относятся исключительно к внешнему виду, и могут относиться вообще не к элементу DOM, а к псевдоэлементу. Общего с устаревшей классификацией элементов из HTML 4 у них не больше, чем у JavaScript и Java. Не дайте себя запутать, и да пребудет с вами CSSила!

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Способ #10. Уменьшение размеров

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

See the Pen
hide with width or height by SitePoint (@SitePoint)
on CodePen.

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

Метрика	Влияние
Браузерная поддержка	Отличная
Доступность скрытого элемента	Контент элемента остается доступным
Вызывает изменение макета	Да
Перерендеринг	Layout
Производительность	Плохая
Покадровая анимация	Возможна
Срабатывание событий на скрытом элементе	Нет