Safari 14.1 で Flexbox の gap プロパティが Safari でも使えるようになりました。
ただ、Safari のバージョンアップは OS のアップデートが絡むので、他のブラウザに比べてすぐにサポートを切りにくいです。Flexbox gap はとても便利で Safari 以外の 主要なブラウザでは対応されている ので使いたいけど Safari のせいでまだ使えないと嘆いている方も多いのではないでしょうか？僕も同じくでした。
自分を含めそんな方々を救うために、それを解決する CSS ハックを作ってみましたので紹介します。（この CSS ハックにどれくらいのニーズがあるかわかりませんが 😅）
問題点
この問題の一番ややこしいところは CSS Grid 用の gap プロパティは Safari でサポートされている点です。本当は @supports を使って以下のようにしたいけど、gap プロパティ自体は Safari でサポートされているので期待した動きはしてくれません。
@supports (gap: 10px) {
.flex {
display: flex;
gap: 10px;
}
}このように単純に @supports を使うだけでは解決でないので他の方法を考える必要があります。以下の記事では JS を使って Flexbox gap が対応していないブラウザの場合に .no-flexbox-gap のような CSS class を追加する方法も書かれています。
僕もこの JS を使って解決しようとしましたが、CSS Lover の僕にとってはちょっと負けた感がありましたので、CSS だけでどうにかハックできないかともう少し考えました。そして最終的にたどり着いた解決方法はこちらです！
解決方法
@media not all and (min-resolution:.001dpcm) {
@supports (not (translate: none)) {
// Safari 14.0.x だけに適用される CSS
}
}CSS に詳しい方はこのコードを見ただけでピンと来たかもしれませんが、念の為に少し解説しておきます。
@media not all and (min-resolution:.001dpcm) {}これは Safari の CSS ハックでよく見かけるやつです。メディアクエリで解像度を扱う resolution や dpcm といった単位は Safari ではサポートされていないので、まずはここで Safari かどうかをチェックすることができます。
@supports (not (translate: none)) {}先ほどの CSS ハックで Safari かどうかは取れたので、あとは Safari 14.1 かそれ未満が取れれば解決します。そこでこの @supports を使います。
Safari 14.1 で以前は transform プロパティで使われていた translate などがプロパティとして扱えるようになりましたので、それを利用しました。
not (translate: none) な Safari のバージョンは 14.1 未満ということになります。
もし他にこの問題を解決するいい CSS ハックがありましたらぜひ教えてください。
Demo
こちらにデモを作ってみました。もし Safari 14.1 未満のブラウザをお持ちであれば確認してみてください。