ウェブ制作

サイト制作のちょっとしたティップスまとめ

ウェブ制作

公開日:2024/07/23

当サイトのリンクには広告が含まれています。

CSSのネストは当面の間、&記号(入れセレクター)を付けた方が安心か

CSSのネスト(入れ子)は、当面の間は「&記号」を付けた方が安心か

CSSのネスト(入れ子)で記述したスタイルが、iPhoneだと全く効かない事態に遭遇。結論から言うと、iOSのバージョンによっては「& 入れ子セレクター」の記述が未だに必要であり、それが無視出来ないシェア率で残っていました。詳しく解説します。

CSSのネスト(入れ子)で記述した子要素のスタイルが、iPhoneのSafariだと全く効かないという事態に遭遇

結論から言うとSafari(iOS)のバージョンによっては未だに「& 入れ子セレクター」の記述が必要でした。

最新版のブラウザでは既に不要になった記述ですが、2024年7月現在でも、該当するSafari(iOS)のシェア率が一定数あるため、セレクタの記述は未だに有益です。

.box{
    h2{
        /* 最新ブラウザは&記号無しで有効 */
    }
}

.box{
    & h2{
        /* (まだ)結構シェアのあるSafari(iOS)17.1以前はこちら */
    }
}

CSSのネスト自体は全モダンブラウザ対応済み

CSSのネスト(入れ子)自体は2023年末には全モダンブラウザが対応しており、大手を振って現場に投入出来る状況です。

既に自分も実戦投入済みで、今まで問題はありませんでした。

iPhoneのSafariだけ全く効かない!?でも以前は問題無かったはず?

ところが、この度iPhoneのSafariで全くCSSのネストが効かない事態に遭遇😨

しかし以前に納品したサイトを再度確認してもちゃんとネストしたCSSが効いています。一体何が違うのか?コードの検証に入りました。

最新バージョン以外のブラウザは「& 入れ子セレクター」の記述が未だに必要な場合がある

検証の結果、iOS版Safari17.1以前のバージョンでは、Class属性やID属性では無い、プレーンなタグには、「 入れ子セレクター」の記述が必要という事がわかりました。

尚、これはSafariに限らず、他のモダンブラウザでも同様です。

.box {
    #title {
        /* ID属性は、多少古いSafari(16.5-17.1)でも&記号無しで「有効」 */
    }
}

.box {
    .title {
        /* Class属性は、多少古いSafari(16.5-17.1)でも&記号無しで「有効」 */
    }
}

.box {
    h2 {
        /* HTMLエレメントは、Safari17.2以降じゃないと&記号無しは「無効」 */
    }
}

今までは、ネスト内に記述していたCSSが偶然、ClassやID属性のものしか無かったので、たまたまこの事象に遭遇していなかったようです。

対策としては、まずブラウザのアップデート。今回のiPhoneでいうなら、ユーザー側がiOSをアップデートして最新版のSafariで閲覧すれば問題は発生しません。

もしくはサイトの制作側が、CSSのネスト部分に「 入れ子セレクター」の記述を追加する事で対応出来ます。

対応策

  • iOS(Safari)を17.2以降の最新版にアップデート(他のモダンブラウザも同様に最新版を使用)
  • もしくはCSSに「 入れ子セレクター」を記述
.box {
    h2 {
        /* 最新ブラウザは&記号無しで有効 */
    }
}

.box {
    & h2 {
        /* 多少古いSafari(16.5-17.1)から、最新のSafari(17.5)まで全て有効 */
    }
}

今回発生した事象は、先方担当のiOSのバージョンが16系(16.7.8)だったために発生したトラブルだったのです。

そのためCSSに「 入れ子セレクター(※要半角スペース)」を追記し、解決しました。

iPhoneのSafariは、iOSのバージョンに依存する

PCやAndroid端末はブラウザのバージョン管理は基本的にはアプリベースとなるため、アップデートは比較的容易です。

そもそもデフォルトの設定で自動更新が入り、ユーザーが特に意識していなくても、既に最新版を使用している事も多い。

しかしiPhoneのSafariは、アプリ単独でのバージョンアップは出来ず、端末のiOSのバージョンに依存します

2024年7月現在でも、iOS17.1以前のシェア率は、なかなか無視出来ないレベル

ではiOS17.1以前のユーザーはどれくらい日本に残っているのかというと……。

調べたところ、2024年7月現在でも10%以上という数値が出ており、なかなか無視出来ないレベルのシェア率でした。

OSレベルでアップデートが必要なため、いくらウェブサイトの推奨環境に最新版の使用を明記しても、使い勝手の変更を嫌って放置気味のユーザーも多いと思われます。

その他、古いiPhoneを使っている場合、機種自体の変更が必要であり、なかなか最新版以外のユーザーをバッサリ切り捨てる事も難しい状況です。

そもそも今回の発端もそれが原因だった理由で。。尚更実感します。

まとめ。当面は「& 入れ子セレクター」の記述を続けた方が無難

本来は、セキュリティの面を考えても、ユーザーに最新版のiOS端末に乗り換えてもらう事を推奨したいところですが、現実的に考えると当面はまだ「 入れ子セレクター」の記述を続けた方が無難だと思います。

今後iPhoneユーザーの機種変更が進んでいけば、自然と淘汰されていくので、それまでの辛抱です。


(※12/18 追記) 補足ですが、この記事は「子要素」の装飾に関する内容です。擬似クラス(:hoverなど)や擬似要素(::before / ::afterなど)の指定には&記号が必要となるため、混同しないよう注意してください。

「CSSのネスト」についてさらに解説した記事はこちら。

上に戻る