MacSafariでCSSが効かずデザイン崩れ

こんにちは、RooKルークです。

アートから少し離れ、今回はWebサイト開発時の技術的なメモを。
わたしのWeb開発環境は以下です。

OS：Windows11
エディタ：VisuauStudioCode
検証ブラウザ：Chrome
デザインツール：Figma

はい、Windowsで、Chrome。
この環境でHTML+CSS+Javascript+ほんのちょっぴりPHPを使って
Webサイトを作っていたのですが
いざ、公開。
という段階になり、依頼主から

デザインが崩れてます！！

との報告が来ました。
スクリーンショットも送られてきていたため
パッとみてCSSが効いていないな…と感じ、
キャッシュクリアしてからの再表示をお願いしたのですが
状況は変わらず。
ブラウザのVerをたずねたところ、
Safari 15
ということでした。

結論からいうと、

CSSのネスト構造

での記述が原因でした。
全ブラウザ対応、と聞いて意気揚々とネストで記述していたのですが
こちら、Mac SafariだとVer 16.5対応とのことで。
Ver15はまだ未対応でした。

さて、どうしたものか…
CSS界隈でいつもお世話になっている鹿野さんの記事を拝見したところ、
古いブラウザ対応にはPostCSSのプラグインを使いましょうとありました。

Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応

が、今回は静的なHTMLでフロントエンド開発の環境でもなく
node.jsも使っていなかったので
うーん、、、、となり
結局は、VSCodeにSassのコンパイラを入れて
style.css →　style.scss
と拡張子のみ変えてコンパイルしました。

Live Sass Compiler

フロントエンド開発ではSass(scss)でCSSを書いているので
ネストで記述するのがごく自然となっていて
CSSでのネストが全ブラウザ対応と聞いて喜んで
がっつりネストさせたのが今回の敗因…。
ようやくSass使わずにデフォルトのCSSのみで書きやすくなったなぁ～
と、喜びすぎたのがよくなかったようです。

使用環境が限定される、特定環境下でのシステムでの開発ならば
保障するブラウザを限定して
バージョンアップしてください。と言えば済むのですが
通常の企業のHPだと古いブラウザで見る方も
まだまだいるはずなのでそこも考慮しないとですよね。。。
ちなみに手元にMacがないため、
確認はオンラインで各ブラウザの実機テストができる
TestingBotを使用しました。
個人のWeb開発で、いくつもテスト端末を用意できる資金はないのと
テスト端末のブラウザVerをあげてしまうと
古いブラウザでの確認ができなくなってしまうので…
各ブラウザ、複数のVerに対応しているこういうサービスは
とても助かります。。。

TestingBot: Cross Browser Testing and Mobile App Testing

今回は早々に原因を特定できたので無料の範囲（5分）での使用でしたが
Webサイトの開発件数が増えたら課金したいと思います。

どなたかのお役に立てれば幸いです。
Web開発アーティストの技術メモでした。