От автора: в начале года я работал над свойствами для разделителей CSS Grid Layout без префиксов. Свойства были названы grid-column-gap, grid-row-gap и сокращенная версия grid-gap. CSS Working Group (CSSWG) решила удалить grid-префикс CSS из этих свойств тем летом, чтобы их можно было расширить и использовать в других моделях макетирования типа Flexbox.
Я не планировал писать пост об этом, но в итоге задача свелась не к просто переименованию свойств. В общем, в этом посте я расскажу, что я сделал для реализации поставленной задачи. Людей заинтересовала возможность анимировать разделители сетки, когда я анонсировал в Twitter, что это готово.
Задача
Теория довольно простая. У нас есть 3 свойства с префиксом grid-, нам нужно удалить эти префиксы:
grid-column-gap становится column-gap,
grid-row-gap становится row-gap and
grid-gap становится gap.
Но свойство column-gap уже существует, оно определено в спецификации Multicolumn, которой уже много лет. Поэтому мы не можем просто создать новое свойство, но нам нужно заставить его работать для Grid Layout и быть уверенными, что синтаксис эквивалентен.
Анимируемые свойства
Когда я начал тестировать Multicol column-gap, я понял, что свойство поддается анимации, а наши реализации (Blink и WebKit) свойств разделителей Grid Layout нет. Если мы хотим удалить префиксы, нам нужно было сделать свойства анимируемыми.
Кроме того, я нашел баг в анимации Multicol column-gap . Его вычисленное значение по умолчанию равно normal, оно не должно анимироваться. Morten Stenshorne из Google быстро пофиксил проблему.
Сделать эти свойства анимируемыми не составляло труда. Blink и WebKit легко могут это сделать для свойств типа разделителей, представляющих единицы длины. Я решил сделать это вместе с патчем удаления префиксов, а не отдельно.
Проценты
Но было и еще кое-что. Свойства разделителей Grid принимают процентные значения, о column-gap тогда еще не поддерживал их. Поэтому я добавил поддержку процентов в многоколоночное свойство column-gap в виде предварительного патча к патчу удаления префиксов.
По поводу процентов в свойствах разделителей велась долгая дискуссия в CSSWG. Спецификация недавно изменилась, и эти свойства должны разрешаться в ноль для content-based контейнеров. Но мой патч не реализует это. Мы не верим в легкую поддержку чего-то подобного в множестве веб движков, и Blink с WebKit не исключение. Наш патч следует тому же, что и Microsoft Edge делает в этих случаях, и разрешает проценты разделителей, как для процентов ширины и высоты. И реализация для Firefox, которая вышла на этой неделе, делает то же самое.
Думаю, мы еще будем обсуждать эту тему в CSSWG, но сами проценты заслуживают отдельного поста.
Реализация
Все предыдущие проблемы были решены, поэтому я выкатил патчи для свойств разделителей без префиксов в Blink и WebKit. Версии свойств без префиксов можно использовать, начиная с Chrome 66.0.3341.0 и Safari Technology Preview 50.
<div style="display: grid; grid: 100px 50px / 300px 200px; column-gap: 25px; row-gap: 10px;"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> </div>
Как сказано в спецификации, предыдущие свойства с префиксами до сих пор считаются валидными и будут поддерживаться как алиасы, чтобы не ломать существующий контент.
Важно отметить, что теперь сокращение gap применяется и к Multicol контейнерам и задает значение column-gap (вместе с row-gap, которое игнорирует Multicol).
<div style="column-count: 2; gap: 100px;"> <div>First column</div> <div>Second column</div> </div>
Тесты веб платформ
Как обычно в наших последних разработках, мы использовали репозиторий web-platform-tests для всех тестов для этой работы. Теперь у нас есть 16 новых тестов, которые подтверждают поддержку этих свойств, в том числе тесты для анимации.
Прогнав эти тесты в разных браузерах, я выявил неоднородность между спецификациями between css-align и css-multicol. Обе спецификации определяют свойство column-gap, но вычисленное значение отличается. Я завел баг CSSWG, который недавно решили. Теперь вычисленное значение для column-gap: normal должно быть normal, и свойство не поддается анимации из normal в другие значения, как я говорил выше.
Обобщенное состояние тестов в главных движках браузеров:
Blink и WebKit: проходят все тесты и следуют разрешению CSSWG.
Edge: свойства без префиксов доступны с версии 41. Проценты совместимы с Blink и WebKit. Вычисленное значение column-gap: normal не normal, здесь нужно обновление.
Firefox: пока что поддержки свойств без префиксов нет, но вычисленное значение по умолчанию normal, как в Blink и WebKit. Но была добавлена поддержка процентов в Multicol column-gap. Уже сейчас по этой проблеме патчи находятся на ревью. Надеюсь, скоро их вольют в основную ветку.
Заключение
Задача выполнена. Вы можете использовать эти свойства без префиксов, а Firefox, скорее всего, очень скоро присоединится к остальным браузерам, добавив поддержку.
Последнее, но не менее важное – работа выполнена в рамках постоянного сотрудничества между Igalia и Bloomberg. Мне не сложно повторить еще раз, но действительно стоит подчеркнуть поддержку Bloomberg в разработке CSS Grid Layout. Они показали миру, что сторонняя компания может напрямую влиять на новые спецификации из стандартных тел и реализаций разработчиками браузеров. Огромное спасибо!
Автор: Manuel Rego Casasnovas
Источник: https://blogs.igalia.com/
Редакция: Команда webformyself.