display: contents

Display: contents — не CSS-сброс

Перевод статьи Display: Contents Is Not a CSS Reset с сайта adrianroselli.com для css-live.ru, с разрешения автора — Адриана Розелли

CSS-сбросы — подборки CSS-стилей, которые отменяют дефолтные стили браузеров у многих или большинства HTML-элементов.

Недавно я видел, как разработчики применяли display: contents для списков и заголовков ради удаления внешних и внутренних отступов, и внешне получить то, для чего нужны CSS-сбросы. По сути, они используют display: contents в качестве CSS-сброса «на скорую руку».

Это опасно для доступности

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

Более доступная разметка с display:contents

Перевод статьи More accessible markup with display: contents с сайта hiddedevries.nl для css-live.ru, автор — Хидде де Врис

CSS-гриды (CSS Grid Layout) позволяют превратить элемент в грид (сетку) и располагать по нему непосредственных потомков («детей») этого элемента. С учетом этого бывает соблазн использовать более «плоскую», однородную разметку, но чем менее разметка осмысленна, тем хуже обычно ее доступность. C display:contents можно размещать в гриде «внуков», благодаря чему у нас могут быть и доступная разметка, и красивая верстка. Давайте разберемся в этом подробнее!

Парадоксы display:contents и будущее текста в CSS

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

Заинтригованы? Если да — добро пожаловать в статью и узнайте, как вроде бы пустяк, о котором сразу не подумали, едва не перевернул вверх дном одно из базовых понятий CSS. Впрочем, в любом случае заходите, если что, похвастаетесь «тайным знанием» перед коллегами, которые статью не читали:)

Display: contents и его новые друзья спешат на помощь

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

Годами для многих, казалось бы, элементарных задач приходилось выбирать решение по принципу меньшего из зол. Сейчас стало полегче благодаря флексбоксам, вот-вот станет еще легче благодаря гридам. Но все системы раскладки, даже самые передовые, упираются в фундаментальное ограничение: CSS привязывается к DOM-элементам. А значит, нельзя собрать вместе и красиво вывести в одном контейнере дочерние элементы разных DOM-предков — как бы удобно, красиво, логично и адаптивно это ни было.

Так вот: теперь можно освободить элементы из-под этого «DOMашнего ареста» и работать с элементами разных уровней вложенности как с непосредственными соседями. Правда, пока в Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags, добавлено 06.12.2017: а теперь еще и в Safari TP 45, добавлено 07.03.2018: и наконец в стабильном Chrome 65+ без флага!). Так что желательно открыть один из этих браузеров, чтобы увидеть примеры в действии.