От автора: CSS Working Group будет рада услышать ваше мнение. В спецификациях CSS Grid Layout и Flexbox есть давняя проблема. Речь идет о том, как правильно задать в CSS проценты margin и padding.
Из спецификации CSS Grid:
«Процентные margin и padding в grid элементах можно разрешать следующим образом:
По их собственным осям (проценты left/right резолвятся по ширине, top/bottom разрешает по высоте) или
По инлайн оси (проценты left/right/top/bottom резолвятся по ширине)
Браузер должен сам выбрать одно из двух поведений.
Обратите внимание: оба варианта плохи, но они полностью отражают состояние мира (нет общего подхода к реализациям, нет общего видения в CSSWG). CSSWG хочет, чтобы все браузеры приняли какое-то одно общее поведение, после чего спецификация будет подправлена.
Авторам вообще не следует использовать проценты в padding и margin в grid элементах, так как они по-разному ведут себя в браузерах.»
В спецификации flexbox написано то же самое.
В чем проблема?
Проценты должны опираться на что-то. Если grid элементу задать margin-right 10%, то вы ожидаете, что 10% будут вычислены от ширины grid области. Но как вычислить 50% для margin-bottom? Значение должно вычисляться от общей высоты сетки или от ширины? Спецификация позволяет оба варианта, реализации разделены.
Проблема наглядно видна в CodePen ниже. У нас есть три колонки шириной по 120 пикселей. Ко всем колонкам применено свойство margin-right со значением 12 пикселей, 10% от 120. В Chrome и Safari margin-bottom равен 60 пикселей. 50% от ширины в 120px = 60px.
В Firefox и Edge margin-bottom использует высоту сетки, и значение равно 150px, так как я задал высоту сетки, и элементы растягиваются. Если удалить высоту с grid контейнера в Firefox, то контейнер схлопнется, так как больше нет четкой высоты. Chrome сохранит контейнер в 60px – margin.
Такое же поведение наблюдается с Flexbox. Только в Flexbox вычисления ведутся относительно флекс контейнера. Однако в демо ниже видно, как Chrome использует 10% от 500px для margin-right и 50% от 500px для margin-bottom. Firefox использует 10% от 500px для margin-right и 50% от 300px для margin-bottom.
Вычисления относительно ширины отсылают нас к старым временам макетирования, когда у нас не было четкого контроля над высотой элементов. Мы могли оперировать шириной, почему она и стала преобладающей мерой.
Хак с соотношением сторон
Одна из причин следовать поведению Chrome – хак с соотношением сторон для процентного padding работает в flex и grid элементах. На Bram.us есть отличная статья по проблеме совместимости – вертикальные margin/padding и flexbox, необычная комбинация. Проблема также описана на Flexbugs и Gridbugs.
Тем не менее, лучше правильно решать проблему с соотношением сторон и выбрать одно решение для margin и padding.
Нам нужны ваши отзывы!
CSS Working Group с радостью выслушает ваши мысли по этой проблеме. Из написанного выше видно, что с процентными margin и padding по горизонтали проблем нет, они ведут себя, как всегда. Проблема возникает с вертикальными margin и padding. Какое поведение вам нравится больше, Firefox или Chrome? Используете ли вы вертикальные margin и padding для других вещей кроме хака с соотношением сторон.
Можете оставлять комментарии в баге на GitHub. Было бы круто решить эту проблему с совместимостью.
Автор: Rachel Andrew
Источник: //www.rachelandrew.co.uk/
Редакция: Команда webformyself.