昨日今日と商品ページのコーディングをして「やっと終わった〜」と思って会社の人に連絡して会社の人が見て「画像が変ですよ」って言われました。
私はchromeで見たのですが画像が変になってなく「おかしいな〜」と思ったら会社の人はsafariで見ていました。
明らかに違いますよね、「恐らくCSSが効いてない」と思いsafariの開発ツールを見ました。
safariの開発ツールの使い方
ブラウザをsafariにして画面左上のメニューのsafari > 環境設定に入ります。
そして↓の画面になるので赤枠をクリックします。
すると画面左上のメニューバーに「開発」が表示されるのでクリックします。
クリックすると↓の画面になるので「Webインスペクタを接続」をクリックします。
クリックすると検証ツールになります、↓の赤枠をクリックすると調べたい物を選べます。
safariでのcssの当て方は特殊
そして問題のある画像を見たらcssが当たってませんでした。
「どうせググれば見つかるでしょ」と思ったらやっぱりありましたがどうもsafariのバグです。
解決方法は↓でcssを当てたいクラスの前に「_:lang(x)+_:-webkit-full-screen-document,」を付けるだけです。
これでcssが当たって画像がちゃんと表示されました。
ググった時にsafariだとcssでのバグが色々と見つかりました、だからsafariで見た時に変になったらググれば大体解決できると思います。
そして完成したコーディングは↓です。
https://kyohayata.github.io/ebm-es/
classの命名規則はBEMを使っているのですがcssがスッキリするからお勧めです。