goo

K-7 Ltd.S + smc PENTAX FA 31mm F1.8 Limited

たまにはお仕事の話でも。
しばらく問題に突っかかってて、それが解決できてスッキリした記念とういことで。w

只今、HTML5+CSS3を使って新しいサイトを構築作業中。
「プログレッシブ・エンハンスメント」という思想というか方針の下、鋭意製作中。

プログレッシブ・エンハンスメントとは簡単に言うとこんな感じ。

「古いブラウザ(IE6とかIE7とか)に足を引っ張られるのは、もうゴメンだ!
これからはHTML5とCSS3の時代だし、それに対応したブラウザで表示できればいいよね?
でも、内容だけは古いブラウザでも見られるように最低限の配慮はしておこう。」

ちょっと違うかもしれないけど、今回の作業に当たってはこんな感じで進めている。

(参考)クロスブラウザはもう古い!HTML5+CSS3時代のプログレッシブ・エンハンスメント

ちなみに今回は、同じHTMLとCSSでスマートフォンでも問題なく閲覧できるように設計している。
これには、MediaQueriesというCSSテクニックを使っている。
使い方次第だけど、これはかなり便利。

HTML5+CSS3でページを構築しつつ、その都度いろんなブラウザで確認、といういつもの作業中のこと。
(今回はスマホも対応なので、iPod touchとAndroidケータイでも同時に確認している)
職場の作業環境は未だにWinXPなわけで、IEは8までしか確認ができない。
IE8はCSS3に対応していないので、「古いブラウザ」に分類される。
なので、FirefoxやChromeで思った通りに表示されているものが、IE8で表示されなくても問題ない。

が、家でWin7+IE9の環境で確認してみると、きちんと表示されるべきものがされていないではないか。
具体的には、border-radiusといういわゆる「角丸」を表現するCSSが反映されていない。
見た目的には他の下位バージョンのIEと同じになってしまっている。
同じどころか、IE7とかIE8では問題なかったところに表示崩れまで発生している。
最初は記述ミスかと思った。
でも違う。間違ってない。
いろんなサイトを見ても、「IE9はCSS3のborder-radiusに対応」と書いてある。
実際にIE9で見て、きちんと表示されているサイトもある。
なぜ同じ記述で自分が書いたものは表示されないのか?

答えは、ここにあった。
FC2ブログでIE9の機能(HTML5やCSS3)を使う方法

IE7かIE8がリリースされたときだったと思う。
「互換表示」という意味不明な機能が付いたのは。
IE7か8で表示が崩れるときにこの機能をONすると、場合によっては崩れが直ったりする機能だ。(要するに後方互換モード)
ユーザーが任意でON/OFFするだけのブラウザの一機能だけであれば、まだ良かった。
が、マイクロソフトのデータベースに「互換表示で表示させるサイト」として登録されたドメイン配下だと、
強制的にこの後方互換モードになってしまうのだ。
あるいはもしかしたらサーバーにそういう設定をしてあるのかもしれない。

つまり、どっちにしてもIE9なのに強制的にIE7相当の機能で表示させられてたってこと。
これではもちろんCSS3は使えない。
そこで、この魔法の1行を外部JSやCSSを読み込むよりも先に<head>内に記述。

<meta http-equiv="X-UA-Compatible" content="IE=9" />

すると、めでたしめでたし。
無事にIE9がモダンブラウザの仲間入りしましたとさ。

いや、それにしてもこの互換機能。
こんな機能付けるなら、せめて完成度をもっと高くしてほしい。
「互換」にすらなってないとはどういうことだ。
IEは、、、というかマイクロソフトはもっとブラウザ開発に真摯に向き合ってもらいたい。
でもって、変な独自機能を付けるのはやめて最低でもW3Cのルールを守ってくれ。
IE6という悪しき歴史を繰り返さないためにも。
コメント:(3) | トラックバック:(0)
 
コメント
 
 
 
Unknown (しゅう)
2011-08-04 10:00:20
それでもIE6が出た頃は
5.5やネスケ4に比べて格段にお利口だ!ってチヤホヤされてたよね(懐

今はスマホでライバルなAppleもGoogleも
共にブラウザはWebkitベースなんだから、
Microsoftだってこれにしちゃえばいいのにな、なんて。


ポータルサイトも含めた大手サイトが先陣を切って、
古いブラウザを見離して捨ててくれるのは
制作会社にとっては大歓迎です。

IE6サポート終了と公表したのに
「やっぱやめた」と言い放つヤホーみたいにならないでね(笑
 
 
 
Unknown (しゅう)
2011-08-04 10:06:12
あと、ぷいの写真。
パッと見だけど

焼肉屋の、七輪の網の上で
焼かれるのを待っているように見えるwww
 
 
 
Unknown (あっ休)
2011-08-11 23:19:07
>しゅう
うちのサービスではとうとうIE6はサポート外になったよ!
でもIE7はサポート対象。
こいつもなかなか個性的な挙動するんだよねw
Webkitは後発だけあって、よく考えられてるよね。
Firefoxはこれからメジャーバージョンアップの頻度が早くなるみたいで、アドオンが付いていかなくなって破綻するかもね。
IEは互換機能の問題がなくなればまた息を吹き返す、かも。

ぷいの七輪焼き・・・
フォトショで合成してみるかw
 
コメントを投稿する
 
現在、コメントを受け取らないよう設定されております。
※ブログ管理者のみ、編集画面で設定の変更が可能です。