先にまとめ
フレームワークなどもほとんど使わず、いわゆるバニラのHTML/CSSを使って作成したサイトについて、ブラウザでの表示を確認をしていたところ、MacBookのSafariにおいてだけスタイルが崩れるということが起こりました。ホントにMacBookのSafariからだけ崩れてしまい、MacBookのChromeなら正常に表示されますし、iPhone上のSafariでも正常に表示されます。
原因は以下の要因が組み合わさっていました。
- CSSの記述に入れ子の記法を利用していたが、これが最近になってブラウザがサポートするようになった機能だった
- MacBookのSafariは、macOS自体をアップデートすることでSafariもアップデートされる形だった
- MacBookの容量がかつかつで、長期間OSアップデートをしていない状態だった
すなわち、私の使っていたMacBookのOSバージョンが古く、それに対応してSafariのブラウザのバージョンも古い状態でした。更新していなかったのは1年も無い程度ですが、ネストされたCSSの記法がちょうどその期間でSafariやChromeで対応されるようになったようです。
MacBookのSafariでだけスタイルが崩れる
みなさんは普段ブラウザは何を使っているでしょうか。あまり深掘りすると戦になってしまうのでやめておきますが、自分はChromeを使うことが多いです。ただ、他のブラウザを使う人も多くいるため、Webサイト制作時には、各ブラウザで期待通りにページが表示されているかをある程度確認することも多いかと思います。
とある開発でLPサイトを作成しており、概ね出来上がったので表示を確認することになりました。MacBookのChrome、WindowsのChrome、Firefox、スマホのChrome、スマホのSafari、と確認していきどれも問題はありませんでした。
だいたい、Safariで開くとChromeと仕様が違くてスタイルが崩れがちな印象がありましたが、スマホで確認したところ特に問題はなく安心しました。
スマホは大丈夫だったけど、一応最後にMacBookのSafariでも確認しておくかと、半ば安心した気持ちでサイトを開くと、、、めちゃくちゃスタイルが崩れていました！え！
最初は何が原因かも分かりませんでした。開発者ツールで見ても、CSSは読み込めています。スタイルが崩れていない箇所（CSSが正常に適用されている箇所）も所々あります。
原因
どのように原因が分かったかは、今となってはあまり覚えていませんが、とにかく色々と調べたものの、現象をうまく表現する言葉が見つからず検索できなくて大変だったと記憶しています。
CSSの入れ子
結果的に、まず悪さをしていたのはCSSを入れ子にして書く記法でした。
例えば従来のCSSで以下のように書くことがあると思います。
.contianer {
width: 100px;
height: 20px;
}
.contianer .item {
color: red;
}
これを、セレクタを入れ子にして以下のように書くことができるというものです。
.container {
width: 100px;
height: 20px;
.item {
color: red;
}
}
何かの機会でこの記法を知り、めっちゃ便利じゃん！と思った記憶があります。もうbody section#top .containerA itemA-1 containerB itemB-1 span.text:nth-of-type(1)みたいな長ーーいセレクタを書かなくて済みます。なので、今回の開発ではCSSの記述にこの記法を多用していました。
ただ、便利だからとこの記法を使っていましたが、これが各ブラウザでサポートされ出したのが結構最近だったようです。それを知らずに使っていました。
こういう新しい機能の対応が早い印象のあるChromeですら、正式にサポートしたのは2023年の12月となっています。自分はもっともっと前からある書き方だとばかり思っていました。
この開発をしていたのが2024年の夏頃ですので、既にネスト記法をサポートしているブラウザを使っている人も多少は居たでしょう。現に、私が表示の確認をしたMacBookのSafari以外のブラウザでは正常に表示できました。
MacBookのSafariのバージョンが古かった
ではなぜMacBookのSafariでは表示ができなかったのか。それは単純にSafariのバージョンが低かったからでした。とは言っても、Chromeなどはブラウザアプリとして随時アップデートされるものなので、Safariも勝手にアップデートされているものだと思っていました。Chromeだと右上に「再起動して更新する」みたいな表示が度々出てきます。
ですが実際には、SafariはMacBookのOSに付属しており、OSをアップデートしないとSafariもアップデートされないそうなのです。これもまた、私は知りませんでした。
普段からしっかりとOSの更新をしていれば良いのですが、自分はコスパを思ってストレージ容量の少ないMacBookを買ったがために、OSの更新をするだけのストレージの空きが無いという状況が続いていました。それでも、このMacBook買ったのが2023年の夏なので、まだ1年だしそこまで問題も無いだろうとも思っていました。
こうした状況から、MacBookのOSが古いままであり、同時にSafariのバージョンも古く、CSS入れ子にまだ対応していなかったため、MacBookのSafariでだけスタイルが崩れるという現象になっていました。
終わりに
今回は、たまたま自分のMacBookのSafariのバージョンが低かったのでこの不具合に気づけましたし、それ以降は、まだ対応していないブラウザも多そうなのでCSS入れ子についてはあまり使わないようにもしています。
便利な機能にすぐに飛び付かず、その機能の背景にあるものをしっかりと見られていれば、もっと良かったのかなという自分の中での反省です。ただ、CSS入れ子が便利なのは本当にそうだと思うので、将来的にはたくさん使っていきたいなとも思っています。が、対応しているバージョンのブラウザがどれくらい普及すれば、そうしても問題無いのかなといったことは、難しい判断だなとも思っています。
追記
この記事の初稿を書き終えた後に「Baseline」という概念を知ったので追記として書きます。MDNの日本語訳ではBaselineは「サイトの訪問者に互換性の問題を引き起こす可能性が低くなった時期を示す」と書かれています。
特に以下の資料が分かりやすかったです。Baselineはその普及度合いに応じて Limited availability > Newly available > Widely availableと言った具合で遷移して行くようです。では今回のCSSのネストはどうなのか。Can I Useのサイトで確認してみると、ちゃんとまだ Newly available across major browsersとなっていました。Widely availableではないので、安心しては使えないという状況だと判断ができそうです。
逆に言えばここがWidely availableとなってくれれば、CSSのネストも安心して使えるという太鼓判を押してもらえそうです。