Zenn
😸

CSSのネスト記法が端末によって適用されない問題

に公開
CSS
HTML
tech

問題

CSSのネスト記法が各ブラウザでサポートされるようになったため、サイト制作時に試してみたところ一部の端末でレイアウトが適用されていない問題が発生しました。
参考：Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

特定の端末のみの問題となっており、他の端末では再現できないことから原因を調べてみました。

解決法

調査したところ、下記の記事で紹介されていた内容と今回の問題が類似しており、CSSネスト記法が原因だということがわかりました。
参考：CSSのネスト(入れ子)は、当面の間は「＆記号」を付けた方が安心か | メモルカ

CSSネスト記法で「& 入れ子セレクター」を使用して修正したところ、問題が解決されました。
iPhoneとAndroidで同様の事象が発生していたため、OSのバージョンによってはCSSのネスト記法で入れ子セレクターが必要になるようです。

.container {
  a {
    /* iOSバージョン17.2以降であれば問題なし  */
    /* Androidバージョン9.0以降であれば問題なし  */
    color: blue;
    text-decoration: none;
  }
  & a {
    /* iOSバージョン17.1以前は入れ子のセレクターを付ける  */
    /* Androidバージョン8.0以前は入れ子のセレクターを付ける  */
    color: blue;
    text-decoration: none;
  }
}

該当のユーザーはどのくらいいるのか

上記のバージョンのシェア率についても最新のデータを調べてみました。

  • iOSバージョン17以前：6.44%(2025年1月時点)
  • Android 8.0以前のシェア率の合計：3.59%(2025年4月時点)

参照元

まだ一定数の対象ユーザーがいるため、当分の間は入れ子セレクターをつけておくことが安全です。

まとめ

CSSのネスト記法は全ブラウザでサポートされているが、全ユーザーが最新のバージョンにアップデートしているわけではないため、導入する際には互換性のある書き方をする必要があるとわかりました。

参考サイトまとめ

Discussion