IE6はフォローしたい

引き続き、妻の雑貨屋のPC向けWebサイトを開発中です。見栄えを気にしつつ、出来るだけシンプルに、軽快に動くWebサイトを目指しています。スマートフォン版との共存、自動での振り分けや手動での切り替えにも対応したいところです。これまでSSK Worldのデザインで培った知識をフル回転しています。
先日もちょっと触れた話ですが、PC向けのWebサイトをデザインするときには、ブラウザーのバージョンごとの振る舞いの違いを意識しなくてはなりません。特に厄介なのが、Internet Explorer(IE)の各バージョンによるHTMLやCSSの解釈の差。FirefoxやOpera、Google Chrome、あるいはSafariといった今どきのブラウザ(「モダンブラウザ」なんてひとくくりにされることもあります)は、かなり以前のバージョンから最新版のHTMLやCSSへの対応を進めていて、表示品質についてはブラウザーの差を意識する必要はほとんどありません。
しかし、IEだけはバージョンアップするごとに大幅に仕様を変えてきました。Windowsの開発に合わせてバージョンが上がっていく関係上、どうしても更新の周期が長くなってしまい、ステップアップの幅が大きくなってしまうのはやむを得なかったのかも知れません。しかし、現在でもまだ生き残っているIE6から最新版のIE10まで、それぞれに癖のある5種類のバージョンのことを考えるのは、正直なところ気が滅入ります。


厳密に対応していくなら、ブラウザーのバージョンを判別してから、それぞれに対応したHTMLやCSSを読み込ませることになりますが、これもまた大変な労力を要します。そこで出てくるのが、「CSSハック」と呼ばれるテクニック。バージョンごとのCSSの仕様やバグを突いて、巧妙にCSSを解釈させて、各バージョンで破綻しない表示を実現します。古いバージョンでは解釈できない新書式を徹底的に活用するのはおとなしい方法。逆に意図的にエラーを誘発する記述で、新しいバージョンでは解釈できないが古いバージョンだと読み込めてしまう…なんて手も使います。
どうしてもIE6には対応しておきたかったので、スタイルシートにはCSSハックの技法をいくつか取り入れています。明らかにエラーになる構文を書くのはどうも落ち着かなくて嫌だったので、極力行儀の良い技法を使っています。どうにも真面目な性分なので(笑)。


もうひとつの方法として、CSS3で採用された書式の一部を、IE6などの古いブラウザーでも表示できるようにするスクリプトを使うという手があります。巷ではいくつか類似のものが公開されていますが、今回はCSS3 PIEというスクリプトを使っています。ボックス要素の角を丸くしたり、影を落としたり、背景をグラデーションで塗ったり、複数の画像を背景に使ったり…というCSS3仕様のデザインを使えるようになります。
しかし、CSS3 PIEを組み込めばどの場所でもCSS3 Ready…というわけではないようです。今回はタブ風のメニューを作ってみたんですが、どうもCSS3 PIEは巧く動作しないので、古いIEでは、グラデーションをかけた角丸タブがタダの四角い平板タブに化けます(涙)。まあ、大きく表示が破綻するわけではないので、これで我慢しましょう。
「BOB」でこの記事をチェック!



投稿日

カテゴリー:

投稿者:


1回のみ
毎月

記事を気に入っていただけましたか?よろしければ、今後のSSK Worldの活動に向けてご支援をお願いいたします。

SSK Worldを「面白い!」と思っていただける方がありましたら、今後の当サイトの活動継続に向けて、ご支援をお願いいたします。

Choose an amount

¥100
¥500
¥1,000
¥500
¥1,000
¥2,000

Or enter a custom amount

¥

ご協力いただき、ありがとうございます。

ご協力いただき、ありがとうございます。

送金送金

コメント

コメントを残す

タグクラウド

2年縛り Amazon Android BESS Bluetooth CF-B5 CF-R2 CF-R4 CF-RZ4 CF-SV8 DIY iPhone LTE Movable Type Nintendo Switch NuAns NEO Reloaded SNS SSD Webサイト Webブラウザー Windows 10 Windows XP カメラ カーナビ クルマ ショップ ステップワゴンスパーダ スマートフォン バージョンアップ ブログ マラソン レッツノート ログハウス 中日ドラゴンズ 伊豆 倉庫 健康 写真 合唱 塗装 家族 携帯電話 旅行 日本プロ野球 映画 暮らし 東京 槇原敬之 浜松 無線LAN 省電力 自作PC 芝生 花壇 薪ストーブ 薪割り 記念日 野球 音楽 食べる