サイトを作ったらMacBookのSafariだけスタイルが崩れた話 - CSSの入れ子が原因だった

## 先にまとめ
フレームワークなどもほとんど使わず、いわゆるバニラのHTML/CSSを使って作成したサイトについて、ブラウザでの表示を確認をしていたところ、**MacBookのSafariにおいてだけスタイルが崩れる**ということが起こりました。ホントにMacBookのSafariからだけ崩れてしまい、MacBookのChromeなら正常に表示されますし、iPhone上のSafariでも正常に表示されます。

原因は以下の要因が組み合わさっていました。

- CSSの記述に**入れ子の記法**を利用していたが、これが最近になってブラウザがサポートするようになった機能だった
  - https://developer.mozilla.org/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
- MacBookのSafariは、**macOS自体をアップデートすることでSafariもアップデートされる形だった**
- MacBookの容量がかつかつで、**長期間OSアップデートをしていない状態だった**

すなわち、私の使っていたMacBookのOSバージョンが古く、それに対応してSafariのブラウザのバージョンも古い状態でした。更新していなかったのは1年も無い程度ですが、ネストされたCSSの記法がちょうどその期間でSafariやChromeで対応されるようになったようです。

https://caniuse.com/css-nesting

## MacBookのSafariでだけスタイルが崩れる
みなさんは普段ブラウザは何を使っているでしょうか。あまり深掘りすると戦になってしまうのでやめておきますが、自分はChromeを使うことが多いです。ただ、他のブラウザを使う人も多くいるため、Webサイト制作時には、各ブラウザで期待通りにページが表示されているかをある程度確認することも多いかと思います。

とある開発でLPサイトを作成しており、概ね出来上がったので表示を確認することになりました。MacBookのChrome、WindowsのChrome、Firefox、スマホのChrome、スマホのSafari、と確認していきどれも問題はありませんでした。

だいたい、Safariで開くとChromeと仕様が違くてスタイルが崩れがちな印象がありましたが、スマホで確認したところ特に問題はなく安心しました。

スマホは大丈夫だったけど、一応最後にMacBookのSafariでも確認しておくかと、半ば安心した気持ちでサイトを開くと、、、めちゃくちゃスタイルが崩れていました！え！

最初は何が原因かも分かりませんでした。開発者ツールで見ても、CSSは読み込めています。スタイルが崩れていない箇所（CSSが正常に適用されている箇所）も所々あります。

## 原因
どのように原因が分かったかは、今となってはあまり覚えていませんが、とにかく色々と調べたものの、現象をうまく表現する言葉が見つからず検索できなくて大変だったと記憶しています。

### CSSの入れ子

結果的に、まず悪さをしていたのは**CSSを入れ子にして書く記法**でした。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_nesting/Using_CSS_nesting

例えば従来のCSSで以下のように書くことがあると思います。

```css
.contianer {
  width: 100px;
  height: 20px;
}

.contianer .item {
  color: red;
}
```

これを、セレクタを入れ子にして以下のように書くことができるというものです。

```css
.container {
  width: 100px;
  height: 20px;

  .item {
    color: red;
  }
}
```

何かの機会でこの記法を知り、めっちゃ便利じゃん！と思った記憶があります。もう`body section#top .containerA itemA-1 containerB itemB-1 span.text:nth-of-type(1)`みたいな長ーーいセレクタを書かなくて済みます。なので、今回の開発ではCSSの記述にこの記法を多用していました。

ただ、便利だからとこの記法を使っていましたが、これが**各ブラウザでサポートされ出したのが結構最近だった**ようです。それを知らずに使っていました。

https://caniuse.com/css-nesting

こういう新しい機能の対応が早い印象のあるChromeですら、正式にサポートしたのは2023年の12月となっています。自分はもっともっと前からある書き方だとばかり思っていました。

この開発をしていたのが2024年の夏頃ですので、既にネスト記法をサポートしているブラウザを使っている人も多少は居たでしょう。現に、私が表示の確認をしたMacBookのSafari以外のブラウザでは正常に表示できました。

### MacBookのSafariのバージョンが古かった
ではなぜMacBookのSafariでは表示ができなかったのか。それは単純に**Safariのバージョンが低かった**からでした。とは言っても、Chromeなどはブラウザアプリとして随時アップデートされるものなので、Safariも勝手にアップデートされているものだと思っていました。Chromeだと右上に「再起動して更新する」みたいな表示が度々出てきます。

ですが実際には、**SafariはMacBookのOSに付属しており、OSをアップデートしないとSafariもアップデートされない**そうなのです。これもまた、私は知りませんでした。

https://support.apple.com/ja-jp/102665

![Safariのアップデート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351104/31f6c61b-7c5a-45a6-a9a0-828b645f0cbc.png)


普段からしっかりとOSの更新をしていれば良いのですが、自分はコスパを思ってストレージ容量の少ないMacBookを買ったがために、OSの更新をするだけのストレージの空きが無いという状況が続いていました。それでも、このMacBook買ったのが2023年の夏なので、まだ1年だしそこまで問題も無いだろうとも思っていました。

こうした状況から、**MacBookのOSが古いままであり、同時にSafariのバージョンも古く、CSS入れ子にまだ対応していなかった**ため、MacBookのSafariでだけスタイルが崩れるという現象になっていました。

## 終わりに
今回は、たまたま自分のMacBookのSafariのバージョンが低かったのでこの不具合に気づけましたし、それ以降は、まだ対応していないブラウザも多そうなのでCSS入れ子についてはあまり使わないようにもしています。

便利な機能にすぐに飛び付かず、その機能の背景にあるものをしっかりと見られていれば、もっと良かったのかなという自分の中での反省です。ただ、CSS入れ子が便利なのは本当にそうだと思うので、将来的にはたくさん使っていきたいなとも思っています。が、対応しているバージョンのブラウザがどれくらい普及すれば、そうしても問題無いのかなといったことは、難しい判断だなとも思っています。

---

**追記**

この記事の初稿を書き終えた後に「Baseline」という概念を知ったので追記として書きます。MDNの日本語訳ではBaselineは「サイトの訪問者に互換性の問題を引き起こす可能性が低くなった時期を示す」と書かれています。

https://developer.mozilla.org/ja/docs/Glossary/Baseline/Compatibility

特に以下の資料が分かりやすかったです。Baselineはその普及度合いに応じて `Limited availability` > `Newly available` > `Widely available`と言った具合で遷移して行くようです。では今回のCSSのネストはどうなのか。[Can I Useのサイト](https://caniuse.com/css-nesting)で確認してみると、ちゃんとまだ `Newly available across major browsers`となっていました。**`Widely available`ではないので、安心しては使えないという状況**だと判断ができそうです。

https://speakerdeck.com/mugi_uno/baseline-ha-iizo

逆に言えばここが`Widely available`となってくれれば、CSSのネストも安心して使えるという太鼓判を押してもらえそうです。