«display: contents» грядет

display: contents грядет

От автора: да, 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, которые обычно генерируются перед/после дочернего элемента родителя).»

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Простой пример поможет понять:

<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>

display: contents грядет

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>

display: contents грядет

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
<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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree