ウェブネタ

ページ4

The Internet Explorer 6 Countdown

GoogleやYahooなどの大手ポータルサイトは去年からIE6のサポート終了を宣言してます。そしてGoogleは今年、IE7もサポート終了を宣言しています。企業や個人でもIE6をサポートしないサイトが多くなってきました。

IEを作ったMicrosoft自身が「9年前の腐った牛乳」とまで言ったIE6の日本における現在のシェアは、The Internet Explorer 6 Countdownで確認したところ6.8%です。

正直まだいるかと言ったところですが、このサイトでもIE6のサポート終了を宣言します。みんなもサポート終了を宣言しちゃいませんか?しましょうよ!

The only script in your <HEAD>(head要素内の唯一のスクリプト)

このキャッチコピーが印象的なHead JSがすごく便利なんです。

クロスブラウザを実現したり、jQueryのプラグインを利用するためにhead要素内がscript要素だらけになっているサイトって結構多いですよね。

そんなJavaScriptバリバリなサイトのhead要素内をすっきりしてくれるのがHead JSです。すっきりさせてくれるだけでなく、ものすごく多機能です。

なかなかシェアが減らないIE6IE7。この2つに代表される古いブラウザ(レガシーブラウザ)があることで、多くの時間をバグ対策、透過png対策、HTML5対策、CSS3対策などに費やしてきました。

これは全ての(PC)ブラウザで同じようにウェブサイトが表示されるようする、いわゆるクロスブラウザっていう考え方です。

それに対するような考え方としてプログレッシブ・エンハンスメントというのがあります。

簡単に説明すると、最新のブラウザで最良のデザインを提供し、古いブラウザで見た場合でも情報が損なわれていない程度の状態にするっていうことです。最近よく見かけるテキストにドロップシャドウがかかっているやつなんか、プログレッシブ・エンハンスメントの代表例ですね。

始めてプログレッシブ・エンハンスメントという言葉を知った時、「それって古いブラウザは切り捨てるってことでしょ」って思ったけど、実はそれの反対で、古いブラウザで見る人のためのプログレッシブ・エンハンスメントなんだなって思ってます。

それは、クロスブラウザって実は制作者や運営者のエゴなのかもなぁと思い始めたからなんです。

IE6はCSSプロパティのmax-widthに対応していません。

min-widthならIE6の独自仕様である「ボックスの拡張(内包要素が親要素の横幅を拡張)」を利用すれば比較的簡単に実現できますが、max-widthは色々工夫しないとできません。

以下はコリスさんの記事。

ただ、応用しづらいというのが本音です。そこで、jQueryのお世話になります。

スマートフォンの利用者が多くなってきましたが、ウェブサイトのスマートフォンへの対応、みんなどうしているのかな?と思う今日この頃。

スマートフォンへの対応策の一つにCSS3のMedia Queriesを利用するというのがあります。簡単に説明すると、端末毎の表示可能領域の違いを利用してCSSを振り分けるって方法です。

正確には、ディスプレイやウィンドウのサイズに合わせたデザインを提供して、結果的にスマートフォンでも見やすい状態にするってことなんですけどね。

だから、スマートフォンに限らず全てのブラウザで利用できる技術なんですが、策定中のCSS3なので、当然、古いブラウザは対応していません。

そこで、Media QueriesをjQueryで代替する、言わばMedia jQueries的なものを紹介します。