用于样式化组件和 Gatsby / Safari 支持的 Gap Polyfill

Question

我正在使用 Gatsby + Styled Components 构建网站，我很乐意使用 css gap 属性。不幸的是 Safari 不支持这个属性所以我的布局最终被破坏了。我可以用边距等重写我的 css，但它似乎不正确。

有没有什么方法可以使用 Gatsby 和 Styled Components 为间隙属性添加 polyfill？

我想要达到的目标

我想使用 css gap 属性支持 Safari

我的问题

我找不到任何适用于 Gatsby 和 Styled Components 的 polyfill

Answer 1

没有实现它的“本地”方式，因为它是属性在 Safari 中（尚未）标准化，如您在 Can I Use.

中所见

关于 polyfill，也许这个包对你有帮助：https://www.npmjs.com/package/flex-gap-polyfill

对于这样的输入：

.container {
    display: flex;
    gap: 40px;
}

它将输出：

.container > * {
    --fgp-gap-parent: 40px !important;
    --fgp-gap-item: 40px !important;
    --fgp-gap: var(--fgp-gap-item) !important;
    margin-top: var(--fgp-gap);
    margin-right: var(--fgp-gap);
}

.container {
    --fgp-gap-container: calc(var(--fgp-gap-parent, 0px) - 40px) !important;
    --fgp-gap: var(--fgp-gap-container);
    margin-top: var(--fgp-gap);
    margin-right: var(--fgp-gap);
}

我认为您可以获得完全相同的效果 Simulating the CSS Gap，即使有边距，使用：

.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

用于样式化组件和 Gatsby / Safari 支持的 Gap Polyfill

Gap Polyfill for Styled Components and Gatsby / Safari suport

css

safari

gatsby

styled-components