【Safari】CSSのgapが効かない!? 対応ブラウザ状況

コーディングをやっている人の多くは、レイアウトを作成するときや要素を横並びにする時に「grid」「flex」「gap」を多く使用していると思います。

私自身も頻繁に使用していますが、制作したウェブサイトの
ブラウザ確認を行なっている時に余白が崩れていたので
今回はその「gap」に関するナレッジを共有していきます!

CSSのgapプロパティは、要素間のスペースを簡単に設定できる便利なプロパティです。
主にgridやflexboxレイアウトで使用されます。
しかし、一部のブラウザ、特にSafariでは、特定の状況でgapが期待通りに機能しないことがあります。

gapが効かない理由

gapが効かないのはこんな理由でした。

1. Safariの古いバージョンのサポート状況
   Safariは、gapプロパティのフルサポートが比較的新しいため、
   古いバージョンでは対応していません。
2. Flexboxでのサポート状況
   Flexboxにおけるgapの対応は、Safari 14.1以降で追加されました。
   それ以前のバージョンでは、gapはgridレイアウトでのみ使用可能でした。
3. ブラウザ固有のバグ
   一部のバージョンでは、意図した動作が実現されないケースがあります。

Safari 14.1以前のバージョンを使用しているとgapでのスペースの確保が機能せず、
結果レイアウトの崩れとなってしまいました。

以下は、主要ブラウザのgapプロパティ対応状況を示します（2025年1月現在）。

ブラウザ	gridでのgap	flexboxでのgap	必要なバージョン
Chrome	対応	対応	84以降
Firefox	対応	対応	63以降
Safari	対応	対応	14.1以降（Flexbox対応）
Edge	対応	対応	84以降
Opera	対応	対応	70以降

Safari 14.1 以前を使用している人はどの程度?

2021年の4月26日にはSafari 14.1がリリースしていますね。
https://developer.apple.com/documentation/safari-release-notes

MacOSはSafari14.1以降、iPhoneはiOS Safari14.5以降で対応しており、
以下のiOSの割合を見ると全iOS端末でも9%もないことが分かります。
(2024年6月9日時点のAppStoreでの情報)

2025年現在では、Safari14.1の使用率は微々たる数だと思いますが、
バージョンが古いからと切り捨てるかは難しいところです…

対応策

方法１ : CSSの代替プロパティを使用する

シンプルに「gap」の使用を中止し、
①marginで余白を作る
②padding用の親divを用意し余白調整する
などの方でgapを使わないようにしましょう。
すでに記述してしまっている場合は少し手間かもしれません。

方法２ : ブラウザ固有のCSSを使用する

以下の方法で特定のスタイルが当たらない場合に、
代替案として別のスタイルを指定することができます。
これであれば、既存のCSSはそのままにSafari用に追記するだけで済みそうです。

// gap: 1rem が使用できない場合にあたる
@supports not (gap: 1rem) {
  .container {
    margin: -8px;
  }

  .child {
    margin: 8px;
  }
}

方法３ : 最新ブラウザへのアップデートを促す

gapを正しく動作させるために、ユーザーにブラウザの最新バージョンへの更新を促すのも効果的です。
特にSafariはOSバージョンに依存するため、OSのアップデートを推奨します。

この方法に関しては、こちらから直接アップデートさせることは難しいので
制作してるサイトに注釈やモーダルを追加するなどの対応を取ることが望ましいでしょう。

まとめ

gapプロパティは、モダンなレイアウトを構築する際に非常に便利ですが、
ブラウザの対応状況に注意する必要があります。
特にSafariの古いバージョンではFlexboxでのサポートがないため、
代替策を組み合わせて対応するのが賢明です。

最新のブラウザやOSを使用することで、
開発者とユーザーの両方が恩恵を受けることができるでしょう。