Gap не работает safari

Понимание gap в CSS

Дата публикации: 2021-10-11

От автора: возможно, вы уже знаете о свойстве CSS gap. Оно не совсем ново, но в прошлом году это свойство получило новую важную возможность: теперь оно работает во Flexbox в дополнение к CSS Grid. Это, а также тот факт, что я считаю свойство более сложным, чем кажется, заставили меня объяснить, как именно оно работает.

Давайте внимательно рассмотрим gap и связанные с ним свойства и поймем, как и где они применяются.

Все свойства gap

Для начала давайте рассмотрим все свойства CSS, связанные с gap. Их всего шесть:

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

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

Из этого списка мы можем игнорировать первые три свойства. Свойства grid-* были добавлены в самом начале, когда составлялась спецификация CSS Grid, но потом они были отключены, когда свойство gap стало более обобщенным. Браузеры по-прежнему поддерживают эти устаревшие свойства (на момент написания этой статьи) и просто обрабатывают их так, как будто у них нету префикса grid-. Следовательно, grid-gap то же самое, что gap, grid-column-gap то же самое, что column-gap а grid-row-gap то же самое, что и row-gap.

Что касается трех других свойств, зная, что gap это сокращение, которое позволяет вам указать два других свойства, нам достаточно только знать, что делают row-gap и column-gap.

Наше понимание этих свойств зависит от типа используемого макета CSS. Давайте сначала рассмотрим эти варианты.

Где можно использовать gap?

Раньше я использовал gap в макетах сетки, но теперь их можно использовать во Flexbox, а также в макетах с несколькими столбцами. Давайте рассмотрим каждый случай.

Использование gap в сетке

Все браузеры поддерживают gap в макетах сетки, и в этом контексте их довольно просто понять.

row-gap указывает промежуток между рядами

column-gap указывает промежуток между столбцами

Создадим сетку из трех столбцов и двух строк:

Это даст нам следующую сетку:

Линии на картинке выше называются линиями сетки, и они разделяют дорожки (строки и столбцы) сетки. Этих линий на самом деле нет в сетке — они невидимы, не имеют толщины и обычно отображаются в DevTools, когда мы включаем инспектор сетки.

Однако если мы добавим в нашу сетку gap, это будет работать так, как если бы эти линии приобрели толщину. Добавим gap равно 20px:

Линии между нашими дорожками стали толщиной 20px и поэтому раздвигают элементы сетки дальше друг от друга.

Стоит отметить, что дорожки по-прежнему имеют одинаковый размер (он определяется свойствами grid-template-*); поэтому сетка шире и выше, чем была без промежутков.

В сетке свойство row-gap всегда применяется между строками. Итак, если мы заменим gap на row-gap в приведенном выше примере, мы получим следующее:

А column-gap всегда применяется между столбцами, поэтому замена gap на column-gap дает следующий результат:

Сетка проста, потому что по умолчанию столбцы вертикальные, а строки горизонтальные, как в таблице. Так что легко запомнить где column-gap а где row-gap.

Когда используется writing-mode, все становится немного сложнее . Режим письма по умолчанию в Интернете — горизонтальный, слева направо, но есть и режимы вертикального письма, и когда это происходит, столбцы становятся горизонтальными, а строки — вертикальными. Всегда обращайте внимание на то, что writing-mode может сделать код менее интуитивно понятным, чем обычно.

Это хороший переход к следующему разделу, поскольку столбцы и строки во Flexbox приобретают новое значение.

Gap в Flexbox

Давайте поговорим о gap в макетах Flexbox, где все становится немного сложнее. Мы будем использовать следующий пример:

По умолчанию это дает нам гибкий контейнер строки, что означает, что элементы внутри контейнера располагаются слева направо на одной горизонтальной линии.

В этом случае column-gap применяется между элементами а row-gap ничего не делает. Это потому, что есть только одна строка. Но теперь давайте добавим промежуток между элементами:

Теперь давайте переключим flex-direction нашего контейнера на column, который складывает элементы вертикально, сверху вниз, с помощью следующего кода:

Вот что произойдет:

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

Нам нужно использовать, row-gap чтобы вернуть пространство между элементами. В качестве альтернативы мы могли бы использовать gap с одним значением, которое применило бы один и тот же отступ в обоих направлениях и, следовательно, работало бы в обоих случаях.

Итак, резюмируя, colum-gap всегда работает вертикально (при условии, что используется значение по умолчанию для writing-mode) а row-gap всегда работает горизонтально. Это не зависит от направления гибкого контейнера. Но теперь посмотрим на пример, в котором задействован перенос строк:

Здесь мы позволяем элементам переноситься на несколько строк flex-wrap: wrap, если не хватает места для размещения всего в одной строке.

В этом случае column-gap по-прежнему применяется вертикально между элементами а row-gap применяется горизонтально между двумя строками.

Между этим и сеткой есть одно интересное отличие. Промежутки столбцов не обязательно совпадают по линиям гибкости. Это из-за значения justify-content:center, что центрирует элементы в пределах их линий гибкости. Таким образом, мы видим, что каждая линия гибкости представляет собой отдельный макет, в котором промежутки применяются независимо от других линий.

Многоколоночные gap

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

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

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

Gap в многоколоночных макетах работают не так, как сетка или Flexbox. Есть три заметных отличия:

row-gap не имеет никакого эффекта,

column-gap имеет значение по умолчанию, отличное от 0,

gap могут быть стилизованы.

Давайте разберем их. Во-первых, row-gap не действует. В макете с несколькими столбцами нет строк, которые нужно разделить. Это означает, что актуально только column-gap (как и gap).

Во-вторых, в отличие от сетки и Flexbox, в многоколоночных макетах column-gap имеет значение по умолчанию 1em (в отличие от 0). Таким образом, даже если промежуток не указан вообще, столбцы содержимого по-прежнему визуально разделены. Разрыв по умолчанию, конечно, может быть отменен, но 1em — хорошее значение по умолчанию. Вот код, на котором основан пример:

Наконец, мы можем стилизовать пустой промежуток между столбцами в многоколоночном макете. Мы используем свойство column-rule, которое работает как border:

Cвойство column-rule дает нам возможность стилизовать многоколоночный макет.

Поддержка браузера

Gap действительно хорошо поддерживается браузерами. На сайте сaniuse есть дополнительная информация, но вкратце:

Flexbox: gap поддерживается повсюду, за исключением Internet Explorer (который уже практически не используется ), Opera Mini и UC Browser для Android. caniuse указывает на глобальную поддержку на уровне 87,31%.

Grid: То же самое, но мы видим глобальную поддержку 93,79%.

Многоколоночный: тоже самое, но он не поддерживается в Safari и имеет 75,59% глобальной поддержки.

Итак, в целом свойство gap хорошо поддерживается, и в большинстве случаев обходные пути не нужны.

Стилизация gap в flex и grid

Стилизация gap в Flexbox и CSS Grid могла бы быть действительно полезной. Печально то, что сегодня она нигде не поддерживается. Но хорошая новость в том, что это может изменится в ближайшем будущем. Это обсуждалось в рабочих группах CSS и Firefox. Как только у нас будет рабочая реализация в Firefox вместе с предложением спецификации, возможно, это поспособствовует реализации в других браузерах.

А пока есть способы обойти это. Один из них — присвоить контейнеру сетки цвет фона, затем другой цвет для элементов и, наконец, для gap присвоить цвет контейнера.

CodePen Embed Fallback

Хотя это работает, но означает, что мы не можем использовать gap для создания пространства между элементами. Здесь gap выступает в качестве ширины границы. Итак, чтобы визуально разделить элементы немного больше, нам нужно использовать padding или margin для элементов, что не так хорошо… как мы увидим в следующем разделе.

Почему я не могу просто использовать margin или padding?

Да, в большинстве случаев мы также можем использовать margin (и / или padding), чтобы добавить визуальное пространство между элементами макета. Но gap имеет множество преимуществ.

Во-первых, gap определяются на уровне контейнера. Это означает, что мы определяем их один раз для всего макета, и они последовательно применяются в нем. Использование margin потребует объявления для каждого элемента. Это может усложняться, если элементы различаются по своей природе или происходят из разных повторно используемых компонентов.

Вдобавок к этому gap по умолчанию работают правильно с помощью всего одной строчки кода. Например, если мы пытаемся ввести некоторое пространство между flex элементами, а не вокруг них, с margin потребуются особые указания для удаления дополнительных полей перед первым элементом и после последнего. С gap этого делать не нужно.

Имея margin: 0 20px на каждом flex элементе, мы получим:

Однако с помощью gap: 40px на контейнере мы получим следующее:

Точно так же в макете сетки определение gap на уровне контейнера намного проще и дает лучшие результаты, чем необходимость определения margin для каждого элемента и учета margin, которое применяется на краю сетки. С margin: 20px для каждого элемента сетки:

И вместо этого в контейнере сетки gap: 40px:

Пустое пространство сумируется

Margin и gap не обязательно должны быть указаны отдельно. Фактически, есть много способов отодвинуть элементы макета дальше друг от друга, и все они могут очень хорошо работать вместе.

Свойство gap только одна часть пустого пространства, созданного между элементами в контейнере макета. Margin и padding могут увеличить свободное место, которое уже определено с gap.

Давайте рассмотрим пример, в котором мы создаем простой flex макет с заданной шириной, некоторым значением gap, некоторым распределением контента (с использованием justify-content) и некоторыми значениями margin и padding:

Источник

gap doesn’t work with flex on Safari #12452

Comments

ludwiczakpawel commented Jan 27, 2021

Describe the bug

I’ve been living thinking that gap (as well as grid-gap ) works perfectly fine with flex elements. Today I learned it’s not supported in Safari which means there’s a missing whitespace in Safari which I have already confirmed testing few views.

That means we have to fix all instances of a combination of two utility classes flex with gap-* in our views ( .html.erb , .js , .jsx ) AND also all instances of similar situation but in our SCSS files.

Yes, gap does work with grid but we should not simply replace every flex instance with grid because grid is for layout and flex is for components.

So in most cases we will have to remove gap property and replace it with additional margin on child elements.

To Reproduce

Test our site in Safari.

Desktop (please complete the following information):

Smartphone (please complete the following information):

• Browser: Safari

The text was updated successfully, but these errors were encountered:

github-actions bot commented Jan 27, 2021

Thanks for the issue, we will take it into consideration! Our team of engineers is busy working on many types of features, please give us time to get back to you.

Feature requests that require more discussion may be closed. Read more about our feature request process on forem.dev.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you’ve claimed the issue and need help, please ping @forem/oss. The OSS Community Manager or the engineers on OSS rotation will follow up.

For full info on how to contribute, please check out our contributors guide.

danieltott commented Feb 2, 2021

Definitely down to tackle this one!

@ludwiczakpawel I was wondering how important the «grid is for layout and flex is for components» guideline is for forem. There are a number of instances of gap + flex in the codebase that would be a very simple swap to using grid instead of flex while not exposing it to any gotchas — especially leaning in to some auto -ish behaviors.

For a small example:

This is a fieldset displaying crayons-field rows:

If we changed this to it behaves exactly the same and doesn’t need any messing around with children and margins and :last-child shenanigans.

I haven’t looked at all of the spots where this occurs yet (streaming with @nickytonline tomorrow and want to save some for the stream (is that a thing?)) — but I just wanted to see how strongly the component/layout guideline was being held. I personally think the use cases can be different for grid and flex — but I haven’t found the breakdown to be easily split up like that. However this will be my first time contributing to forem so I figured I’d check in.

This issue will really be a case-by-case thing, but man will it save a lot of hassle and headache if we can avoid applying margins to children when possible.

Basically — is it cool if we use grid when appropriate even in 1D scenarios if we can make sure it won’t cause any problems down the road?

ludwiczakpawel commented Feb 2, 2021 •

This issue will really be a case-by-case thing, but man will it save a lot of hassle and headache if we can avoid applying margins to children when possible.

The component/layout guideline is more of a personal preference. I THINK grid may affect rendering performance when overused (but I don’t have hard data to prove it though).

Anyway, I guess for some bigger components that you think could be considered as lightweight layouts (yes, that’s very blurry explanation :D) we could just go ahead with classic grid, especially for cases when it would save tons of CSS related to :last-child and margins shenanigans. Since, as you mentioned, it’s a case-by-case thing, I’d love to use flex whenever possible and whenever you think it won’t require overengineering things. One example could be scenario where we have two buttons next to each other like

We could just replace flex with grid and call it a day, but in this case I think better approach would be:

On the other hand, the fieldset example on your screenshot is probably good candidate to just go with grid .

Does that make some sense?

(also, I’m assigning this issue to you in addition to @nickytonline. have a great streaming session!)

danieltott commented Feb 2, 2021

@ludwiczakpawel Yep — that makes perfect sense! Just wanted to double check since this is my first time in this codebase. Thanks for the clarification!

As a possibly related question, how do we feel about js feature-checking for style stuff? Another approach could be to suss out when we’re in the situation where flex+gap isn’t supported and only apply fixes there, but unfortunately there’s no way to get there with CSS-only solutions ( @supports won’t work here for example). I have in the past done this for very specific and small bits like this — kind of like getting very small pieces of modernizr. The thought would be that a small function runs and adds a no-flex-gap class to the body or html , and then in the scss files we could do something like

This code probably doesn’t actually work as-is, but you can probably see where I’m going.

• People writing markup / components could continue to author without worrying about browser support for this situation
• The gap property is one of the best things to come out of the last 5 years of CSS and it’d be a shame to not use it

• Adds a small amount of overhead
• If there isn’t already this sort of action happening, will take time to figure out where the best place to put it
• May be confusing to try to track down where that class is being added in the future
• It may be gross

To be absolutely clear, I am not even proposing this as an actual solution at this point — it may be total overkill for this. It just occurred to me at one point so I figured I’d see what the thinking is on this sort of approach in general.

Источник