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

Posted 2023-03-15

【中文标题】用于样式化组件和 Gatsby / Safari 支持的 Gap Polyfill

【英文标题】：Gap Polyfill for Styled Components and Gatsby / Safari suport

【发布时间】：2021-07-01 10:55:38

【问题描述】：

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

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

我想要达到的目标

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

我的问题

我找不到任何适用于 Gatsby 和样式化组件的 polyfill

【参考方案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);

【讨论】：

感谢您的回答。我知道 Safari 上没有原生支持，我实际上可以通过边距实现相同的效果，我只是认为可能有更好的解决方案来解决这个问题。关于您友好链接的 polyfill - 恐怕它与样式组件不兼容（或者我不知道如何正确使用它）我会看看这篇文章，谢谢！

如果你想使用那个 polyfill，你可以使用import FlexGapPolyfill from 'flex-gap-polyfill' 并把它当作你的样式。如果问题最终得到解决，请考虑接受/投票以关闭问题