Как избавиться от префикса «grid-» в свойствах для разделителей CSS Grid Layout

Как избавиться от префикса «grid-» в свойствах для разделителей CSS Grid Layout

От автора: в начале года я работал над свойствами для разделителей 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

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

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.

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Как сказано в спецификации, предыдущие свойства с префиксами до сих пор считаются валидными и будут поддерживаться как алиасы, чтобы не ломать существующий контент.

Важно отметить, что теперь сокращение gap применяется и к Multicol контейнерам и задает значение column-gap (вместе с row-gap, которое игнорирует Multicol).

Тесты веб платформ

Как обычно в наших последних разработках, мы использовали репозиторий 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.

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

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

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

Курс по Flexbox

Изучите работу с Flexbox

Смотреть курс

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree