WEB業界での実務経験

実務経験41日目、画像サイズのcssがsafariで反映されない

cssをつけているのにsafariで見ると画像がおかしい

昨日今日と商品ページのコーディングをして「やっと終わった〜」と思って会社の人に連絡して会社の人が見て「画像が変ですよ」って言われました。

私はchromeで見たのですが画像が変になってなく「おかしいな〜」と思ったら会社の人はsafariで見ていました。

chromeで見た画像、問題ないです

 

safariで見た画像、変な表示で画像が縦伸びしています

 

明らかに違いますよね、「恐らくCSSが効いてない」と思いsafariの開発ツールを見ました。

 

safariの開発ツールの使い方

実務経験41日目、画像サイズのcssが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がスッキリするからお勧めです。

実務経験42日目、命名規則BEMでコーディングすると早い
実務経験42日目、命名規則BEMでコーディングすると早い 命名規則BEMでコーディングすると早くなる コーディングをしていると同じ内容が何度も出てくる事がよくあります。 特に商品ペー...