От автора: да, display contents включен по умолчанию в Blink и WebKit, и, скорее всего, появится в Chrome 65 и Safari 11.1. Эти браузеры догонят Firefox, в котором это свойство включено с версии 37. Таким образом, Edge остается один без этого свойства .
По этому поводу хочу отметить, что работу по поддержке в Chromium начал Emilio Cobos в рамках Igalia Coding Experience с осени 2016 до лета 2017.
В начале 2016 был пост, в котором я обсуждал программу Igalia Coding Experience и некоторые идеи задач, которые необходимо было выполнить в рамках команды Web Platform. Одна из задач была display: contents, что наконец и случилось.
Что такое display: contents?
Новое значение для свойства display позволяет каким-то образом удалять элемент из блокового дерева, сохраняя его контент. Точное определение из спецификации:
«Сам элемент не генерирует блоков, но это делают его дочерние элементы и псевдоклассы, и текст отображается, как обычно. Для создания и макетирования блока элемент должен обрабатываться так, как если бы он был заменен в дереве элементов на свой контент (в том числе его дочерние элементы и псевдоэлементы, такие как ::before и ::after, которые обычно генерируются перед/после дочернего элемента родителя).»
Простой пример поможет понять:
<div style="display: contents; background: magenta; border: solid thick black; padding: 20px; color: cyan; font: 30px/1 Monospace;"> <span style="background: black;">foobar</span> </div>
display: contents делает так, что div не генерирует блок, т.е. его фон, рамка и padding не рендерятся. Однако наследуемые свойства типа color и font влияют на дочерние элементы (span) как обычно.
Конечный результат в этом примере:
<span style="background: black; color: cyan; font: 30px/1 Monospace;">foobar</span>
CSS Grid Layout и display: contents
Так как это мой пост, то стоило ожидать, что все как-то связано с CSS Grid Layout. В некоторых случаях display: contents можно использовать вместо subgrids (на данный момент поддержки нет ни в одном браузере). Тем не менее, в остальных сценариях subgrids нужны.
Канонический пример для авторазмещения Grid Layout:
<style> form { display: grid; } label { grid-column: 1; } input { grid-column: 2; } button { grid-column: span 2; }
</style>
<form> <label>Name</label><input /> <label>Mail</label><input /> <button>Send</button>
</form>
Однако это не типичный HTML формы, поскольку обычно вам нужно использовать внутри список, чтобы люди со скрин ридерами знали, сколько полей им необходимо заполнить. Поэтому HTML больше похож на:
<form> <ul> <li><label>Name</label><input /></li> <li><label>Mail</label><input /></li> <li><button>Send</button></li> </ul> </form>
С помощью display: contents вы сможете получить макет, как в первом случае, с помощью следующего CSS:
ul { display: grid; }
li { display: contents; }
label { grid-column: 1; }
input { grid-column: 2; }
button { grid-column: span 2; }
Круто, теперь если перевести свой сайт на CSS Grid Layout, вам нужно будет вносить меньше правок в HTML, не придется удалять полезный HTML (например, список из предыдущего примера).
Реализация в Chromium
Как я сказал во вступлении, Firefox заявил display: contents 3 года назад, однако в Chromium реализации не было. Igalia, как разработчик CSS Grid Layout, захотел реализовать эту функцию, так как она полезна в некоторых случаях в Grid Layout.
На Igalia Coding Experience была предложена основная задача — реализация display: contents на Blink. Emilio проделал огромную работу, и ему удалось воплотить большую часть, попутно создавая баги в CSS Working Group и другие браузеры и создавая тесты для репозитория web-platform-tests для проверки совместимости между реализациями.
После завершения Coding Experience осталось пара моментов, которые не давали включить display: contents по умолчанию. Rune Lillesveen (google и ранее opera) помогал на протяжении всего процесса с ревью и выпустил свойство на прошлой неделе.
Реализация на WebKit
В WebKit уже была начальная поддержка display: contents, свойство использовалось только внутри теневым DOM и не было доступно конечным пользователям и не поддерживалось остальным кодом.
Мы возобновили работу, но разработчик не успел закончить. Однако позже Antti Koivisto (Apple) завершил реализацию и включил свойство по умолчанию в ноябре 2017.
Заключение
Igalia – один из основных сторонних соучастников в проектах открытых веб-платформ. Это дает нам возможность воплощать новые функции в разных open source проектах, благодаря вовлеченности нашего сообщества и полученным за годы работы знаниям. Касательно реализации display: contents: возможно, без поддержки Igalia в рамках Coding Experience не было бы сейчас этой функции в Chromium и WebKit.
Мы очень довольны результатов Coding Experience и с нетерпением ждем повторения успеха в будущем.
Конечно, вся заслуга Emilio, это выдающийся инженер, он проделал замечательную работу в рамках Coding Experience. В процессе он получил привелегию комитить свои изменения в проекты Chromium и WebKit. Наши поздравления!
Последнее, но не менее важное: выражаем благодарность Antti и Rune за окончание работы над display: contents. Теперь это свойство доступно WebKit и Chromium пользователям.
Автор: Manuel Rego Casasnovas
Источник: https://blogs.igalia.com/
Редакция: Команда webformyself.