クロスブラウザコーディングで嵌った3個の落とし穴 ｜ SiTest (サイテスト) ブログ

クロスブラウザとは

WebページのHTML,CSS,JavaScriptを書いてページを作り始めた頃クロスブラウザについての知識も少なく実装後初めて知るブラウザ間での仕様の違いに苦労していました。
そんなコーディング初心者が嵌ってしまった落とし穴を紹介させていただきたいと思います。
ちなみにクロスブラウザとはブラウザ間の仕様の違いに対応する手法の一つで他に以下のような対応方法があります。
本記事で出てくるクロスブラウザは厳密には少し違ったものとなっています。

• クロスブラウザ
  どのようなブラウザでも何かしらコンテンツが表示されるされる対応方法
• マルチブラウザ
  特定のブラウザを指定しそのブラウザでは動作する対応方法
• プログレッシブ エンハンスメント
  シェアの多いブラウザを基準としより後からリリースされた新しい仕様も視野に入れた対応方法
• グレイスフルデグラデーション
  古いブラウザは切り捨て最新の仕様に対応する手法

ですので本記事の載っているサイト(https://sitest.jp)はIE8以下の対応はしておりません(コンテンツは見ることができます)のでマルチブラウザに近い対応となっております。

嵌った点

1) IE9で未実装
まずはIE9で未実装のプロパティでよく使うものです。
※ベンダープレフィックスはフレームワークで自動で付きますので割愛してます。
グラデーションを定義する
– linear-gradient
– radial-gradient
cssでアニメーションを実現する
– animation
– tansition
グラデーションは見た目に関する箇所のみですので無視することが多いですが、どうしてもIE9でもグラデーションを実装する場合SVGでグラデーション画像を作り表示させることができます。
ただしIE8ではSVGも非対応なのでこの方法は使えません。代替画像を用意するなどの対応が必要です。
またアニメーションも視覚的な箇所がほとんどですが、メニューの出し入れなどには使えませんのでその時はjQueryを使いました。

2) レンダリングの計算違い
次に嵌ったのはブラウザ間でピクセルの扱いの違いです。
Safariや今は減りましたがAndroidのデフォルトブラウザだと小数点以下を切り捨てて表示してしまっていました。
こちらは余白を余分に取るなど都度対応方法を考える必要があります。
切り捨ては余白が生じるだけなので気にならないことも多いのですが、IE8より古いブラウザですと四捨五入されることもあったそうです。
この場合段組自体変わってしまうので特別な対応が必要となりそうです。
他にも古いブラウザですと余白(padding)の扱いが違って確保した領域の中に余白を作ってしまう現象などもありました。

3) イベントの発火タイミングの違い
これはまだ完全に解決できていないのですが、
レスポンシブデザインでモバイルデバイスとPCとで同じページを使用する場合iOSの場合スクロールイベントがスクロールの最後に発火します。
アニメーションの実行や、メニューの追随など手を離したタイミングで実行されてしまいます。
そのため実行が遅れたように見えてしまいます。
こちらはちゃんと対応するならタッチイベント(主にタッチムーブイベント等)を利用するなど更に工夫が必要です。

他にもあるブラウザ間の仕様の違い

W3Cにより標準仕様が作られましたが、まだまだブラウザ間での仕様に違いはあり1つずつ潰していくしかない現状ですが、現状クロスブラウザの労力の多くはIE8(とIE9)の対応に費やされているのでこれらのシェアが落ちてくればその労力もかなり軽減するのではないでしょうか？
ちなみにブラウザ間での仕様の細かな違いなどは
http://caniuse.com/
でチェックすると面白いです。

これから秋にかけHTML5.1が勧告され、面白そうな仕様も多くありますが、まだまだ一つの仕様に落ち着いてページを作ることは難しそうです。