Pull to refresh

Сказ о стилизации gap в multi-column или как теперь можно стилизовать пробелы

Многие из нас уже давно используют колонки с своей верстке, и также многие сталкивались с трудностями стилизации отступов между ними (каждый раз это напоминало танец с бубнами).

Ну что ж, Хром предлагает забыть об этой проблеме и ввел 2 новых свойства для этого решения: column-rule и row-rule. Давайте рассмотрим, что это за звери такие.

У нас есть многоколоночный макет, где используется column‑width свойство, и чтобы стилизовать отступы в таком макете, нам достаточно column-ruleсвойство:

очень лаконично
очень лаконично

И теперь мы видим такой результат:

Также в проекте спецификации указано, что column-ruleсвойство также работает в макетах Flexbox и Grid.

Главное преимущество здесь в том, что декорирование происходит только в CSS (где ему и положено) без влияния на нашу семантическую разметку.

Но это еще не все. Также есть и свойство, благодаря которому можно стилизовать линии между строками, и это свойство row-rule

Как мы видим, новое свойство предлагает нам обширное поле для взаимодействия и не надо использовать старые костыли для стилизации.

Но в этой сладкой бочке меда есть заметная ложка дегтя. И это поддержка этих свойств.
Если еще column-rule и поддерживается всеми распространенными браузерами последней версии

То вот со свойством row-rule все намного печальнее

Нам остается ждать, когда можно будет воспользоваться эти свойством.

Функция декорирования пробелов CSS все еще реализуется в Chromium и нам только остается ждать когда она будет полностью внедрена в разработку.

Что вы об этом думаете? Будут ли вам полезны эти свойства в будущем?

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.