最近、大学以来久しぶりに社会人リーグで本格的にサッカーを再開した、Healerです。
炎天下の中を走り回っているためオフィス内屈指の黒さになってきました。
先日、Marketing Platform(以下MP)の開発部からR&D部Engineeringチームに異動しました。
EngineeringチームではMPと違い、統一したUIではなくお客様のご要望に従ったWebデザインを作ることが多いのですが、基本のデザインはデザイナーさんにお任せするにしても、アプリケーションとの整合性を図ったり、スタイルの各ブラウザへの対応などの部分はプログラマの裁量に任されています。
久しぶりにHTMLのコーディングを行ったこともあり、特にInternet Explorerへの対応に苦労した点が多かったので、いくつかピックアップしてご紹介したいと思います。
スタイルコーディング初心者向けのお話です。
参考:StatCounter Global Stats - Browser Market Share
Internet Explorerのシェアは減少してきたとはいえ全体のまだ6割近くを占めており、
弊社のアプリケーションへのアクセスもInternet Explorerがかなりの割合を占めております。
特に私の担当している案件では法人のユーザーがほとんどなので、Internet Explorerへの対応が不可欠となります。
法人のユーザーは最新バージョンのブラウザを使えない環境の場合も多々あるので、Internet Explorer6や7での確認も必須になります。
- INPUTタグのtype="text"とtype="password"でフォームの大きさが変わってしまう
というのも、textとpasswordでフォームの大きさが変わってしまうのです。
以下の画像のように、size="50"のように指定しても、同じ大きさになってくれません。
(Internet Explorer7)
(Firefox13)
なぜなら、textとpasswordのデフォルトフォントが違うからなんですね。
サンプルを用意しましたので、実際にお使いのブラウザで試してみてください。
Internet Explorerなら上の画像のように幅が違います。
textとpasswordのサンプル1(修正前)
参考: [IE] <input type="password"> タグにて指定したテキストボックスが大きく表示される
なぜデフォルトフォントが統一されていないのかわかりませんが、そういう仕様なら仕方ありません。
以下のように、フォントを統一してやると回避できるようです。
ちょっと面倒ですが、指定してやりましょう。
指定したのが以下のサンプルになります。
Internet Explorerで見ても幅は揃っています。
textとpasswordのサンプル2(修正後)
- paddingの解釈が違う
メインコンテンツとメニューなどを分ける場合、枠で幅をwidthで設定して、その内側にコンテンツを入れ、余白をpaddingで入れる、というのもよくある手法です。
widthに対して、paddingの分コンテンツが内側に配置されます。
しかし、Internet Explorer6の場合のみ widthで指定した幅の外に余白が取られてしまい、結果的に意図したよりも大きなサイズになってしまいます。
回避するには、marginを使用するか、divタグを入れ子にして内側のdivにpaddingを指定すると良いようです。
参考:CSSレイアウト崩れの原因 - ブラウザによる「padding」の解釈の違い
- borderの解釈も違う
枠に対して罫線をborderで 引くと、Internet Explorer6ではwidthで指定した幅いっぱいに罫線を引き、その内側にコンテンツが入ります。
他のブラウザでは、widthで指定した幅の外側に罫線が引かれますので、今度はInternet Explorer6の場合に意図したよりもコンテンツが小さくなってしまいます。
回避方法については、これも入れ子構造にして内側にborderを使うのがよろしいようです。
また、背景画像に枠線付きの画像を用意して、画像に合わせる、というのも有効なようです。
参考:CSSレイアウト崩れの原因 - ブラウザによる「border」の解釈の違い
- Internet Explorerのバージョンによって読み込むCSSファイルを変更する
上に挙げたもののように、Internet Explorerと他のブラウザ、またInternet Explorerのバージョン間で適用されるstyleに差が出てきます。
その際にブラウザによって読み込むCSSファイルを選択したり、Styleを上書き出来れば、無用な混乱を避けられます。
ファイル内で色々なバージョンへの記述が混在しないので分かりやすくなるのでおすすめです。
読み込むCSSファイルの選択には以下のようなInternet Explorer独自実装の「条件付きコメント」を使用します。
<!--[if 条件式 ]>
(中身)
<![endif]-->
条件式の箇所には、[if IE 6 ]でInternet Explorer6のみに適用するようにしたり、[if !IE ]でInternet Explorer以外に適用するようにしたり、[if lt IE 6 ]のようにInternet Explorer6未満に適用するようにしたり出来ます。
ちなみに、ltの箇所は比較演算子のようになっていて、
が使えます。
これはJavaScriptのファイルを切り替えたりするのにも有効ですね。
参考1:CSSハックを使わずIEのバグに対処する方法
参考2:IE条件付コメントまとめ
- リセットCSSを使う？
一旦リセット用のCSSを読み込んで、その上でスタイルコーディングを行うことによってブラウザ間の差異を吸収できるようにするものです。
ただし、このリセットCSSも万能ではなく、ブラウザによってはリセットしたことによってデザインが崩れてしまうこともあります。
突っ込んだ検証はしていないので多くは書きませんが、著名なリセットCSSであっても、必要な部分のみリセットするようにする等、使用するデザインに合わせたカスタマイズが必要ですね。
参考:HTML初心者が知っておくべきリセットCSS と3つのポイント
Internet Explorerへのスタイルの適用について調べてみると、普段Firefox(with Firebug)で開発しているので盲点なことがたくさんありました。
ブラウザ間のデフォルトスタイルはブラウザの個性でもあるので難しいところですが、明らかに仕様が違うというのは開発者目線で言えば勘弁してもらいたいところですね。
それでも、Internet Explorerもバージョンを重ねるごとに他のブラウザと歩調を合わせてきているので今後に期待したいところです。
Internet Explorer6だけはすぐにでもなくなってもらいたいですけどね！(笑)
メーカーのサポートが終わってるのに対応しなければいけないのはいかんともしがたいです。
Canvasの話題はまた後日ということで失礼致します。。
