ホームページ制作や、WEBサービスを構築する時にどうしても避けられないのが「マルチブラウザ対応」です。
一般的な利用シェアがトップのGoogleChromeで開発、確認を行うのは通常ですが、他のブラウザで表示崩れが発生してしまう場合に細かな対応をしなければいけません。
これはWEBエンジニアの逃れられない作業なので、経験値による対応で効率は上がるのですが、今回久しぶりに大きな崩れが発生して対応したので、その内容と愚痴をブログで書いておきます。
何故ブラウザ毎に表示差が発生するのか？
言わずもがな、これはレンダリングエンジンの違いによる表示違いが原因です。
2019年2月時点では以下のようなレンダリングエンジンになっているようです。
Chrome : Blink
Firefox : Gecko
Opera : Blink
Safari : Webkit
InternetExplorer : Trident
Edge : EdgeHTML
wikipedia
先日、MicrosoftのEdgeブラウザがChromeと同じBlinkエンジンに変更するという発表がされましたが、
https://forest.watch.impress.co.jp/docs/news/1157163.html
もともとChromeはSafariと同じwebkitを採用していたのですが、途中でBlinkに切り替えました。
Firefoxは当初からブレることなくGeckoですが、スマートフォンが登場する以前は、開発ファーストとして、Firefoxブラウザで開発作業やチェック・確認作業を行うエンジニアが大半でした。
そんな中、InternetEcplorerはTridentという独自レンダリングエンジンをブレることなく使用していますが、このTridentエンジンが曲者で、IEのバージョンごとに大きく仕様が変更されているのです。
InternetExplorerは何故エンジニアから敵視されてしまうのか？
スマートフォンが登場してから、HTML5が標準仕様になってきたブラウザ業界ですが、ほとんどのブラウザは、自動アップロードとして、マイナーバージョンもメジャーバージョンも利用者が気が付かないタイミングで自動更新されています。
しかし、IEはOS依存型ブラウザなので、メジャーバージョンアップはほぼOSのバージョンアップになってしまいます。
中にはサービスパックという手段で、IEのバージョンがメジャーアップデートされる事もあり、OSバージョン、ブラウザバージョンなどの判定が非常に複雑になっている現状があります。
そして、エンジニがIEを最も嫌う理由としては、Microsoft製品のブラウザは、他のブラウザと癖が全く違うという点につきます。
さらに、メジャーバージョンによりこれも全く仕様が異なり、IEのチェックはほぼ全てのバージョンを確認してそれに対応しなければいけないため、特殊なcssの書き方やDOM構造をしてしまうとそれだけで手直し工数が半端なくかかってしまう為にｎ、エンジニアは常にマルチブラウザ対応を頭においてWEBサイト構築を行わなければいけません。
さらにIEは、PCが主流の時代までは、ブラウザシェアをずっと独占してきていたため、利用ユーザーが多く、特にITリテラシの低い人は「インターネットブラウザ」という言葉もわからないユーザーや自分がIEのどのバージョンを使っているかわからないというケースが多く、
リテラシが高い人はIEを使わないという図式まで出来上がってしまいました。
さらに、大手企業で「会社内ではIEの特定のバージョンしか使ってはいけない」というルールが出来上がっていて、未だに新しいブラウザや便利な機能を使うことができないと嘆いている担当者の話を聞くことがあります。
これも低リテラシの人対応で、不正サイトアクセスや情報漏えいなどの防止策なのですが、特にアップデートが頻繁に行われOSサポートで数年後にはサポート対象外になってしまうIEを使う方が、セキュリティリスクが高いと考えられるのに、このルールが未だに変更できずにいる企業は山のようにあります。
特に金融関係や、セキュリティを重要視している企業がIE縛りルールになっているようですが、今聞くと、このルール自体がかなりのリテラシの低さを物語っていますよね？
IE11でもハックが必要
MicrosoftもこうしたIE事情を脱したくEdgeブラウザというのを投入したのですが、これがまた失敗でどうしてもIE呪縛から逃れられない現状があります。
苦肉の策としてのEdgeがBlink対応なのですが、IEもそうせえよというエンジニアの皆さんの言葉はどうやら届かないようです。
そして今回IE１１だけが表示がおかしいという事象が発生したので、その対応策をまとめておきます。
まずどういう事象だったかというと、CSSのposition:absolute;が重複すると、上位階層の値が想定外になるというもので、解決するためには、重複している上位のposition:absoluteをposition:staticに変更する必要がありました。
IE11ブラウザだけにその設定をするには、CSSのメディアクエリを使ってハックすることができます。
書き方は以下の通り。
@media all and (-ms-high-contrast:none) {
.element{
position:static;
}
}
@mediaの"-ms-high-contrast:none"がIE11判定をする箇所なんですが、これは現時点のIEで有効なんですが、IE12が出た時に同じハック方法になる可能性もあり、確実な対応ではなく、現時点での苦肉の策という事のようです。
また、IE9以下という対応は以下のように書くようです。
position: static\9; /* IE10以下 */
IE以外のブラウザも含めてJSでUAを判定するハックや、HTMLタグでのハックなど他にもいろいろなハック方法がありますが、下記のサイトを参考にしてみるといいでしょう。
OS、ブラウザごとのCSSハックなどまとめ
IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ
ブラウザ別に適用させるCSSハック2018
本当はハックしなくてもどのブラウザもw3cに準拠して同じ見え方になることがいいんですが、どちらかというとブラウザ開発会社が本来行うべきところを、世の中の多くの開発会社が尻を拭いているような状況がどうかしているのかもしれませんね。
とはいえ、各ブラウザメーカーも、独自色を出さなければいけないので、標準化されてしまうことのデメリットもありますが、こうしたブラウザ差があることにより、開発会社の工数が増え、世の中の経済効果が上がっているのかもしれません。
こんなポジティブな思考でいいのか？
0 件のコメント:
コメントを投稿