引き続き、妻の雑貨屋の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」でこの記事をチェック！
コメントを残す