Копание в свойствах отображения: генерация блоков


Копание в свойствах отображения: генерация блоков

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

Это вторая из короткой серии статей о display свойство в CSS. Вы можете прочитать начальную статью в серии на «Два значения отображения». То display Спецификация очень полезна для понимания, поскольку она лежит в основе всех имеющихся у нас методов компоновки.

Хотя многие значения display имеют свою спецификацию, многие термины и идеи подробно изложены в display. Это означает, что понимание этой спецификации поможет вам понять спецификации, которые в основном детализируют значения display. В этой статье я рассмотрю значения генерации блоков для displaynone и contents.

Все в коробке

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

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

я выделил ul элемент с помощью Firefox DevTools, чтобы я мог проверить различные части коробки. (Большой превью)

Генерация блоков управления

То none и contents ценности display иметь дело с тем, должны ли ящики появляться вообще. Если у вас есть элементы в вашей разметке и вы не хотите, чтобы они генерировали блок в CSS, вам нужно каким-то образом подавить создание блока. Есть две возможные вещи, которые вы, возможно, захотите сделать. Которые:

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

Мы можем рассмотреть каждый из этих сценариев по очереди.

Еще после прыжка! Продолжить чтение ниже ↓

дисплей: нет

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

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

См. перо Пример генерации коробки от Рэйчел Эндрю.

См. перо Пример генерации коробки от Рэйчел Эндрю.

Если я добавлю display: none к ul он исчезает с визуального дисплея, унося с собой детей ul плюс фон и граница.

См. перо Пример отображения Box Generation: нет от Рэйчел Эндрю.

См. перо Пример отображения Box Generation: нет от Рэйчел Эндрю.

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

Бывают ситуации, когда вам может понадобиться добавить дополнительную информацию для пользователей вспомогательных технологий, таких как программы чтения с экрана, но скрыть ее для других пользователей; в таких случаях нужно использовать другую технику. Несколько замечательных предложений сделал Скотт О’Хара в своей статье «Включительно Скрытый».

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

дисплей: содержимое

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

Я использую тот же пример, что и раньше, но на этот раз я использовал display: contents на ul. Элементы списка теперь видны, однако они не имеют фона и границ и ведут себя так, как будто вы добавили li элементы на страницу без каких-либо вложений ul.

См. перо Пример отображения Box Generation: содержимое от Рэйчел Эндрю.

См. перо Пример отображения Box Generation: содержимое от Рэйчел Эндрю.

Причина, по которой удаление блока и сохранение дочерних элементов полезно, заключается в том, что другие значения display вести себя. Когда мы меняем значение display мы делаем это на блоке и прямых дочерних элементах этого блока, как я описал в прошлой статье. Если я добавлю display: flex к правилам CSS для элемента этот элемент становится блоком уровня блока, а прямые дочерние элементы становятся гибкими элементами. Дочерние элементы этих гибких элементов возвращаются к нормальному потоку (они не являются частью гибкого макета).

Вы можете увидеть это поведение в следующем примере. Здесь у меня есть содержащий элемент, настроенный для отображения flex, у него есть четыре прямых дочерних элемента, три элемента div и ul. То ul имеет два элемента списка. Все прямые дочерние элементы участвуют в гибком макете и размещаются как гибкие элементы. Элементы списка не являются прямыми дочерними элементами и поэтому отображаются как элементы списка внутри поля ul.

См. перо Flexbox и дисплей Box Generation: содержание 1 от Рэйчел Эндрю.

См. перо Flexbox и дисплей Box Generation: содержание 1 от Рэйчел Эндрю.

Если мы возьмем этот пример и добавим display: contents к ul, блок удаляется из визуального отображения, и теперь дочерние элементы участвуют в гибком макете. Вы можете видеть, что они не становятся прямыми детьми. Они не выбираются прямым дочерним универсальным селектором (.wrapper > *) таким образом, что div и ul элементы есть, и они сохраняют данный им фон. Все, что произошло, это то, что коробка, содержащая ul удалено, все остальное работает как обычно.

См. перо Flexbox и дисплей Box Generation: содержание 2 от Рэйчел Эндрю.

См. перо Flexbox и дисплей Box Generation: содержание 2 от Рэйчел Эндрю.

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

Это не «сброс» CSS

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

Это использование, которое Адриан Роселли заметил в дикой природе; он был достаточно обеспокоен, чтобы написать подробный пост, объясняющий проблемы, связанные с этим…display: contents это не сброс CSS». Некоторые из вопросов, которые он поднимает, связаны с досадной проблемой доступности в браузерах, в настоящее время поддерживающих display:content, которые мы обсудим ниже. Однако даже после того, как эти проблемы будут решены, удаление элемента из дерева блоков просто для того, чтобы избавиться от полей и отступов, несколько экстремально.

По крайней мере, это было бы проблематично для будущего обслуживания сайта, будущий разработчик мог бы задаться вопросом, почему они, кажется, не могут ничего применить к этой загадочной коробке – упуская из виду тот факт, что она была удалена! Если вам нужно, чтобы поля и отступы были 0, сделайте одолжение себе в будущем и установите их на 0 проверенным временем способом. Резервное использование display: contents для тех особых случаев, когда вы действительно хотите удалить коробку.

Также стоит отметить разницу между display: contents и подсетка CSS Grid Layout. Где display: contents полностью удаляет поле, фон и рамку с экрана, превращая элемент сетки в подсетку, чтобы сохранить любой стиль поля для этого элемента и просто пройти через размер дорожки, чтобы вложенные элементы могли использовать одну и ту же сетку. Подробнее читайте в моей статье «CSS Grid Level 2: А вот и подсетка».

Проблемы доступности и отображения: содержание

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

То ul элемент нашего списка в первом display: contents CodePen — прекрасный пример. Ты мог получить тот же визуальный результат, сгладив разметку и вообще не используя список. Однако, если содержимое семантически представляет собой список, который лучше всего понимается и считывается программой чтения с экрана как список, его следует разметить как один.

Если вы хотите, чтобы дочерние элементы были частью гибкого макета или макета сетки, как если бы поле ul не было, вы должны быть в состоянии использовать display: contents волшебно убрать коробку и сделать так, но оставить семантику на месте. Спецификация говорит, что так и должно быть,

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

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

По этой причине многие из нас с удивлением осознали, что display: contents на самом деле было удаление элемента из дерева специальных возможностей в двух браузерах (Chrome и Firefox), которые его реализовали. Поэтому изменив семантику документа, сделав его таким, чтобы программа чтения с экрана не знала, что список был списком, как только ul был удален с помощью display: contents. Это ошибка браузера, причем серьезная.

В прошлом году Хидде де Врис написал об этом в своем посте «Более доступная разметка с display:contents” и услужливо поднял проблемы с различными браузерами, чтобы повысить осведомленность и заставить их работать над исправлением. Firefox частично устранил проблему, хотя проблемы все еще есть с некоторыми элементами, такими как кнопка. Над этим вопросом активно работают Хром. Также существует проблема для Вебкит. Я бы посоветовал вам отметить эти ошибки звездочкой, если у вас есть варианты использования display: content, на которые могут повлиять проблемы.

До тех пор, пока эти проблемы не будут устранены, а версии браузеров, в которых обнаружена проблема, не перестанут использоваться, вам нужно быть очень осторожным при использовании display:contents во всем, что передает семантическую информацию и требует доступа к вспомогательным технологиям. В виде Адриан Роселли заявляет,

«Пожалуйста, используйте Display: Content только в том случае, если вы собираетесь тестировать вспомогательные технологии и можете подтвердить, что результаты работают для пользователей».

Есть места, где можно смело использовать display: contents без этой заботы. Один из них — если вам нужно добавить дополнительную разметку для создания запасных вариантов для вашей сетки гибких макетов в старых браузерах. Браузеры, которые поддерживают display: contents также поддерживает сетку и флексбокс, поэтому вы можете display: contents прочь лишнее div добавлены элементы. В приведенном ниже примере я создал сетку с плавающей запятой, дополненную обертками строк.

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

См. перо Удаление оберток строк с отображением: содержимое от Рэйчел Эндрю.

См. перо Удаление оберток строк с отображением: содержимое от Рэйчел Эндрю.

Подведение итогов

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

Сокрушительная редакция(иль)



Источник

Статьи по Теме

Ответы

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