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

Question

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

有什么方法可以为 Gatsby 和 Styled Components 的 gap 属性添加 polyfill？

我想要达到的目标

• 我想使用支持 Safari 的 css gap 属性

我的问题

• 我找不到任何适用于 Gatsby 和样式化组件的 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);
}