Свойства css display и visibility: как скрыть элемент css или элемент html?

Есть ключевое различие

Как и те, кто учился по «CSS Zen Garden», я испытываю отвращение к табличной вёрстке в HTML. Сам того не понимая, я позволял обманчивым предубеждениям ввести себя в заблуждение, преувеличивая взаимосвязь между HTML- и CSS-таблицами.

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

Ниже вы найдёте несколько примеров использования :

Динамическое вертикальное выравнивание по центру

Нажимайте на кнопку, чтобы добавить строчки.

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

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

Динамическое горизонтальное выравнивание по центру

Чтобы горизонтально расположить по центру динамический элемент, можно сделать его блочно-строчным (). Затем внешнему контейнеру этого элемента нужно задать свойство . Недостаток этого способа состоит в «побочном эффекте» выравнивания текста по центру. Все дочерние элементы внутри контейнера унаследуют свойство , которое может переопределить существующие свойства.

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

Адаптивная вёрстка

Уменьшите окно до , чтобы увидеть адаптивность в действии.

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

Порядок следования меняется с 1-2-3 на 2-3-1

Можно даже изменить порядок следования блочных элементов. Подробнее об этом приёме можно почитать здесь.

Динамический прилипающий подвал

Динамический прилипающий подвал

Прилипающий подвал должен соответствовать двум требованиям:

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

Если вы когда-нибудь искали решение этой задачи, то вам, возможно, попадались эти полезные варианты от Chris Coyier и Ryan Fait.

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

Разметка «Holy Grail»

Разметка «Holy Grail» (от A List Apart) — это вариант разметки страницы с шапкой, тремя равными по высоте колонками (две фиксированных боковых колонки и тянущийся центр) и прилипающим подвалом.

Разметка «Holy Grail»

Такая разметка должна по мере возможности удовлетворять следующим требованиям:

1. Центральная колонка должна тянуться, а боковые — иметь фиксированную ширину.
2. Центральная колонка может идти первой в разметке.
3. Любая колонка может быть больше остальных по высоте.

Разметка «Holy Grail» с помощью

В примере выше показана разметка «Holy Grail». Можете менять размеры окна, чтобы средняя колонка тянулась по ширине; также можно добавить контент, чтобы посмотреть, как работает прилипающий подвал. Единственное требование, которому эта разметка не соответствует, — это пункт 2: «Центральная колонка может идти первой в разметке».

Наверно, это нужно для поисковой оптимизации. То есть если соображения SEO для вас не стоят на первом месте, с помощью вы сравнительно легко сделаете разметку «Holy Grail».

More Examples

Difference between the display property and the visibility property:

function demoDisplay() {  document.getElementById(«myP1»).style.display = «none»;
}function demoVisibility() {  document.getElementById(«myP2»).style.visibility = «hidden»;
}

Toggle between hiding and showing an element:

function myFunction() {  var x = document.getElementById(‘myDIV’);  if (x.style.display === ‘none’) {
    x.style.display = ‘block’;  } else {    x.style.display = ‘none’;
  }}

Difference between «inline», «block» and «none»:

function myFunction(x)  {  var whichSelected = x.selectedIndex;  var sel = x.options.text;
  var elem = document.getElementById(«mySpan»);
  elem.style.display = sel;}

Использование свойства при верстке

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

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

В прошлом этот метод использовался, чтобы попытаться повлиять на рейтинги в поисковых системах. Но теперь элементы, которые не отображаются, могут быть помечены красным флагом Google, чтобы понять, почему используется этот подход. Один из способов, как с пользой использовать display: none — создание сайтов с адаптивным дизайном. При написании кода для таких веб-страниц часто необходимо создавать элементы, которые доступны для отображения только в определенном разрешении, но скрыты для других вариантов. Вы можете использовать display: none в CSS, чтобы скрыть этот элемент, и затем включите его снова позже. Это приемлемое использование этого свойства, потому что нельзя заподозрить верстальщика в попытке скрыть что-либо ради влияния на рейтинг в поисковых системах.

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

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.

Какие дисплеи существуют?

Из сотен подвидов матриц и их маркетинговых названий всего существует два основных типа дисплеев — LCD и OLED. Чем они отличаются?

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

На нём также находятся разные неорганические вещества. К примеру, кремний, пропуская через себя свет, выдаёт синий оттенок, нитрид индия-галлия выдаёт зелёный, а арсенид алюминия-галлия — красный.

В случае с OLED ситуация с компоновкой иная. Здесь на подложку с тонкоплёночными структурами с помощью распыления наносятся слои с органическими веществами, которые также выдают красный, синий и зелёный цвет. А их свечение достигается путём помещения плёнки, на которой они находятся, между двумя проводниками. Когда ток проходит через вещества, они начинают светиться. 

Да, в OLED не нужна подсветка, в отличие от LED, потому что каждый пиксель светится самостоятельно и для управления яркостью применяются два способа: изменение напряжения и широтно-импульсная модуляция или попросту ШИМ, про который вы наверняка слышали. Но что это такое?

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

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

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

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

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

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

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

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

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
inlineblock	1.0	1.0	1.0	1.0	4.0	12.0
list-item	1.0	1.0	7.0	1.0	6.0	12.0
inline-block inline-table	1.0	1.0	7.0	1.0	8.0	12.0
table table-caption table-column-group table-header-group table-footer-group table-row-group table-cell table-column table-row	1.0	1.0	7.0	1.0	8.0	12.0
flex inline-flex	29.021.0 -webkit-	28.018.0 -moz-	17.0	9.06.1 -webkit-	11.010.0 -ms-	12.0
gridinline-grid	54.0*	52.0	44.0	10.3	10.0* -ms-	16.012.0 -ms-

Браузер Internet Explorer 8 требует наличия декларации !DOCTYPE в документе

CSS синтаксис:

display:"inline | block | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit";

JavaScript синтаксис:

object.style.display = "block"

Значение inline

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

Например, инлайновые элементы по умолчанию: , .

Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.

Если расположить элементы вплотную – его не будет:

Содержимое инлайн-элемента может переноситься на другую строку.

При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.

Это проявляется, например, при назначении фона.

Например, три прямоугольника подряд:

Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:

Override The Default Display Value

As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline elements for horizontal menus:

li {  display: inline;}

Note: Setting the display property of an element only changes how the element is displayed,
NOT what kind of element it is. So, an inline element with is not allowed
to have other block elements inside it.

The following example displays <span> elements as block elements:

span {  display: block;}

The following example displays <a> elements as block elements:

display : none

The CSS display property value will result in the HTML element not being displayed in the
page in the browser. Also, it will not take up any visible space in the HTML page. Here is an example of an HTML
element with its CSS display property set to :

<style>
#myElement { display: none; }
</style>

<div id="myElement">
This DIV element is not displayed
</div>

You might wonder why you would include an HTML element in an HTML page and then apply the CSS display property value
to it, so it is not visible. There are at least 2 situations where this makes sense — which I
will explain in the following sections.

The first situation is when you want to show or hide an HTML element depending on CSS Media Queries.
For instance, you might want to only show a certain HTML element when the browser window is above a certain size.
In smaller size browser windows you might want to hide that HTML element to use the available space more efficiently —
to avoid cluttering the user experience. Here is an example set of CSS media queries combined with the CSS display property
to show and hide HTML elements depending on the width of the browser window:

<style>
@media only screen and (max-width: 600px) {
    #myElement { display: none; }
}
@media only screen and (min-width: 601px) {
    #myElement { display: inline; }
}
</style>

<div id="myElement">
This DIV is only displayed on larger screens
</div>

This example will hide the HTML element with ID when the browser window is 600 pixels
or less wide.

The second situation is where you are using JavaScript to show and hide an HTML element by settings its
display property to and something else. Here is an example of switching the CSS display
property value with JavaScript:

var element = document.getElementById("myElement");
element.style.display = "none";

Виды компьютерных мониторов

По виду выводимой информации

• алфавитно-цифровые (система текстового (символьного) дисплея (character display system) — начиная с MDA):
  • дисплеи, отображающие только алфавитно-цифровую информацию;
  • дисплеи, отображающие псевдографические символы;
  • интеллектуальные дисплеи, обладающие редакторскими возможностями и осуществляющие предварительную обработку данных;
• Графический интерфейс пользователя, для вывода текстовой и графической (в том числе видео-) информации:
  • векторные (vector-scan display);
  • растровые (raster-scan display) — используются практически в каждой графической подсистеме PC; IBM назвала этот тип отображения информации (начиная с CGA) отображением с адресацией всех точек (All-Points-Addressable, APA), — в настоящее время дисплеи такого типа обычно называют растровыми (графическими), поскольку каждому элементу изображения на экране соответствует один или несколько бит в видеопамяти.

По типу экрана

• ЭЛТ — монитор на основе электронно-лучевой трубки (англ. cathode ray tube, CRT).
• ЖК — жидкокристаллические мониторы (англ. liquid crystal display, LCD).
• Плазменный — на основе плазменной панели (англ. plasma display panel, PDP, gas-plazma display panel).
• Проектор — видеопроектор и экран, размещённые отдельно или объединённые в одном корпусе (как вариант — через зеркало или систему зеркал); и проекционный телевизор.
• LED-монитор — на технологии LED (англ. light-emitting diode — светоизлучающий диод).
• OLED-монитор — на технологии OLED (англ. organic light-emitting diode — органический светоизлучающий диод).
• Виртуальный ретинальный монитор — технология устройств вывода, формирующая изображение непосредственно на сетчатке глаза.
• Лазерный монитор— на основе лазерной панели (пока только внедряется в производство).

По размерности отображения

• двумерный (2D) — одно изображение для обоих глаз;
• трехмерный (3D) — для каждого глаза формируется отдельное изображение для получения эффекта объёма.

• HGC
• CGA
• EGA
• VGA/SVGA

]

По типу интерфейсного кабеля

• Композитный
• Компонентный (YPbPr)
• D-Sub
• Digital Visual Interface
• USB (Universal Serial Bus)
• HDMI
• DisplayPort
• S-Video
• Thunderbolt

Основные параметры

• Соотношение сторон экрана — стандартный (4:3), широкоформатный (16:9, 16:10) или другое соотношение (например, 5:4).
• Размер экрана — определяется длиной диагонали, чаще всего в дюймах.

Параметры видимой области дисплея

Диагональ,»	Разрешение	Обозначение	Формат	Пикселей на дюйм, (PPI)	Размер пикселя, мм
15,0	1024×768	XGA	4:3	85,5	0,297
17,0	1280×1024	SXGA	5:4	96,2	0,264
17,0	1440×900	WXGA+	16:10	99,6	0,255
19,0	1280×1024	SXGA	5:4	86,3	0,294
19,0	1440×900	WXGA+	16:10	89,4	0,284
20,1	1400×1050	SXGA+	4:3	87,1	0,291
20,1	1680×1050	WSXGA+	16:10	98,4	0,258
20,1	1600×1200	UXGA	4:3	99,6	0,255
20,8	2048×1536	QXGA	4:3	122,7	0,207
21,0	1680×1050	WSXGA+	16:10	94,3	0,270
21,3	1600×1200	UXGA	4:3	94,0	0,270
22,0	1680×1050	WSXGA+	16:10	90,1	0,282
22,2	3840×2400	WQUXGA	16:10	204,0	0,1245
23,0	1920×1200	WUXGA	16:10	98,4	0,258
24,0	1920×1200	WUXGA	16:10	94,3	0,269
25,5	1920×1200	WUXGA	16:10	87,1	0,2865
27,0	1920×1200	WUXGA	16:10	83,9	0,303
30,0	2560×1600	WQXGA	16:10	101,0	0,251

• Разрешение — число пикселей по горизонтали и вертикали.
• Глубина цвета — количество бит на кодирование одного пикселя (от монохромного до 32-битного).
• Размер зерна или пикселя.
• Частота обновления экрана (Гц).
• Время отклика пикселей (не для всех типов мониторов).
• Угол обзора.

Краткая информация

CSS (ЦСС)	CSS (ЦСС)2
Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Аналог ШТМЛ	Нет
Ссылка на спецификацию

Синтаксис

display: block | inline | inline-table | list-item | none
| run-in | table | table-caption | table-cell | table-column-group | table-footer-group
| table-header-group | table-row | table-row-group

Аргументы

Список возможных значений этого атрибута, понимаемый разными браузерами очень
короткий — block, inline,
list-item и none.
Все остальные допустимые аргументы поддерживаются браузерами выборочно. В табл. 1
приведены некоторые популярные браузеры и их поддержка различных свойств.

Табл. 1. Поддержка браузерами значений свойства display

Аргумент	Описание	ИЕ6	IE7	IE8	Op 8	Op 9.2	Ff 1.5	Ff 2	Ff 3
block	Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <SPAN>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.	Да	Да	Да	Да	Да	Да	Да	Да
inline	Элемент отображается как встроенный. Использование блочных тегов, таких как <DIV> и <P>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Аргумент inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.	Да	Да	Да	Да	Да	Да	Да	Да
inline-block	Это значение генерирует блочный элемент, который обтекается другими элементами web-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <IMG>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.	Да	Да	Да	Да	Да	Нет	Нет	Да
inline-table	Определяет, что элемент является таблицей как при использовании тега <TABLE>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, контентом.	Нет	Нет	?	Да	Да	Нет	Нет	Да
list-item	Элемент выводится как блочный и добавляется маркер списка.	Да	Да	Да	Да	Да	Да	Да	Да
none	Временно удаляет элемент из объекта. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было. Изменить значение параметра и сделать его вновь видимым можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происхоит переформатирование данных на странице с учетом вновь добавленного элемента.	Да	Да	Да	Да	Да	Да	Да	Да
run-in	Устанавливает элемент как блочный или встроенный в зависимости от конконтента.	Нет	Нет	Да	Да	Да	Нет	Нет	Нет
table	Определяет, что элемент является блочной таблицей подобно использованию тега <TABLE>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-caption	Задает заголовок таблицы подобно применению тега <CAPTION>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-cell	Указывает, что элемент представляет собой ячейку таблицы (тег <TD> или <TH>).	Нет	Нет	?	Да	Да	Да	Да	Да
table-column	Назначает элемент колонкой таблицы, словно был добавлен тег <COL>.	Нет	Нет	?	Нет	Да	Да	Да	Да
table-column-group	Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <COLGROUP>.	Нет	Нет	?	Нет	Да	Да	Да	Да
table-footer-group	Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <TFOOT>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-header-group	Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <THEAD>.	Нет	Нет	?	Да	Да	Да	Да	Да
table-row	Элемент отображается как строка таблицы (тег <TR>).	Нет	Нет	?	Да	Да	Да	Да	Да
table-row-group	Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <TBODY>.	Нет	Нет	?	Да	Да	Да	Да	Да

Пример

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

Результат данного примера показан ни рис. 1.

Рис. 1. Применение параметра display

Браузеры

Internet Эксплорер до версии 7 включительно:

• поддержка значений table-footer-group и table-header-group происходит только для тегов <THEAD> и <TFOOT>;
• для элементов <LI> понимает значение block как list-item;
• значение inline-block применяется только для встроенных элементов.

Опера 9.2 и старше, а также Файер фох версии 2.0 и младше:

• значение table-column применяется только для тега <COL>;
• значение table-column-group поддерживается только для тега <COLGROUP>.

Малоизвестные и экспериментальные значения

display: ruby;

Для начала стоит представить элемент <ruby>. В двух словах, это элемент для отображения аннотаций на одной базовой линии с основным текстом. Используется, чтобы указать правильное произношение слов. Он довольно часто используется в восточно-азиатских языках, таких как китайский или японский.

Существуют определенные общие черты между свойствами display: ruby и inline table CSS, но спецификация настоятельно предостерегает от применения значения ruby при отображении не-ruby элементов, таких как span, для вывода ruby-текста. Вместо этого лучше разметить контент с использованием HTML-элементов ruby, чтобы экранные дикторы и визуализаторы могли интерпретировать структуры ruby.

ruby	Соответствует HTML-элементу <ruby>. Генерирует блок ruby-контейнера, который устанавливает контекст ruby-форматирования для дочерних элементов, размеченных, как внутренние блоки.
ruby-base	Соответствует HTML-элементу <rb>. Внутренний ruby-блок в ruby-контексте.
ruby-text	Соответствует HTML-элементу <rt>. Внутренний ruby-блок в ruby-контексте.
ruby-base-container	Соответствует HTML-элементу <rbc>. Внутренний ruby-блок в ruby-контексте.
ruby-text-container	Соответствует HTML-элементу <rtc>. Внутренний ruby-блок в ruby-контексте.

display: contents;

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

— CSS Display Level Модуль 3

Авторы спецификации пытаются сказать, что, когда вы устанавливаете для элемента свойство display: contents, он исчезнет из DOM. Но все его дочерние элементы остаются и занимают пространство, которое занимает он. На данный момент эта спецификация поддерживается только в Firefox. Измените в Firefox размер полной версии приведенного ниже примера, чтобы увидеть, как это работает.

Поддержка (и можно ли ее улучшить)

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

Остается лишь «теребить» разработчиков браузеров, чтобы они поскорее внедрили поддержку такого полезного значения (к тому же вряд ли сверхсложного в реализации). Проще всего, наверное, будет добиться этого от MS Edge. Пожалуйста, проголосуйте за поддержку этого свойства там!