GWは満喫できましたか？
北海道はちょうどGW頃に桜の見頃となることが多いため公園などでは、お花見で賑わいます。
あえてお花見をしなくても、通勤途中などで桜が満開になっているのを見ると気持ちがウキウキしますよね。
GW初日に首を寝違えて３日間ロクに首が動かなかった菅原です。
第４回目の今回はWEBサイトを作ったあとの重要なタスクである「クロスブラウザチェック」についてです。
目次
・クロスブラウザチェックとは
・チェックするブラウザ
・気をつけること
・まとめ
クロスブラウザチェックとは
WEBサイトを作成した後に色々なブラウザで表示を確認する「クロスブラウザチェック」は非常に大切なことです。
Chrome、IE、edge、Firefox、Safariなどで表示を確認した際に、「あれ？このブラウザでは表示が崩れている…。」ということが多々あります。
そのようなことが無いように色々なブラウザでチェックをすることを「クロスブラウザチェック」または「クロスブラウザテスト」と言われています。
チェックするブラウザ
WEBブラウザはメジャーなものからマイナーものまであるので、どこまでチェックすればいいのかということになりますよね。
PC
PCのWEBブラウザのシェアを確認してみます。
下記のサイトを参照させていただきます。
https://syncer.jp/Web/Browser/
シェアから推察すると、Chrome、IE、edge、Firefox、Safari の５つのブラウザをチェックすれば良いようです。
モバイル
スマートフォンはどうでしょう？
https://syncer.jp/Web/Browser/#section-2
Chrome、Safari、Androidブラウザをチェックすれば、ほぼカバーできそうですﾟ(≧▽≦)。
気をつけること
- 同じブラウザでもVer.が違うと表示が崩れる場合がある。（PC、モバイル共通）
cssでの認識の違いが原因と思われるので、下記サイトなどを利用することで、対処できることもあります。
Can I use… Support tables for HTML5, CSS3, etc - それぞれのブラウザの仕様をある程度把握しておく。（Firefoxのpaddingの認識について等）
- PC上でモバイル表示をさせてチェックできるサービスもありますが、最後には必ず実機確認をしましょう！
- PCがWindowsなのでSafariが確認できない、逆にmacなのでIEとedgeが…という方に下記の様なサービスがあります。
本来は実機で確認したいところですが、そうも行かない場合もあると思いますので。
(ﾉ∀`)ｱﾁｬｰ
Browser Sandbox
Browsershots
まとめ
作ることも大切ですが、作った後の確認も特に重要ですね。
どのブラウザで閲覧しても同じように表示されることを目標にしましょう。
