求Safari 13.1专属CSS Hack：替代Bootstrap 5.3 Flex Gap

精准匹配Safari 13.1的CSS Hack方案 #

由于Safari 13.1（Catalina系统）不支持Flex布局的gap属性，你可以使用以下针对性的CSS代码，仅在该浏览器环境下加载margin替代样式：

/* 仅对Safari 13.1生效的媒体查询Hack */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .container {
            margin: -5px;
        }
        .item-b {
            margin: 5px;
        }
    }
}

原理说明 #

这个媒体查询组合利用Safari特有的CSS特性检测，能够精准定位到Safari 13.x版本（尤其是13.1），不会影响其他支持Flex Gap的浏览器（包括新版本Safari）。

通用降级方案（可选） #

如果需要覆盖所有不支持Flex Gap的浏览器，也可以使用特性检测规则：

/* 对所有不支持Flex Gap的浏览器生效 */
@supports not (gap: 0) {
    .container {
        margin: -5px;
    }
    .item-b {
        margin: 5px;
    }
}

内容的提问来源于stack exchange，提问作者Karamjeet