新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。
まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。
ページ全体のマークアップの骨格を画像にしてみました。
mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。
必要があってだいぶ調べましたが…結論。
そんなものは、無い。
まぁ実際ないことはなかったんですが…一番よく見かけたのが下の方法。
html>/**/body #sample p {
color /*\**/: blue\9;
}
これはとても覚えられないし、感覚の問題になってしまいますが、かなり気持ち悪い。
ヴァリデーションも通らないらしい。
おとなしく、コンディショナルコメントでIEのみに読み込ませるCSSを指定するのが最も分かりやすそうだ。
<!–[if IE]> <link rel=”stylesheet” href=”ie.css” type=”text/css” /> <![endif]–>
IE7まではCSSハックでしのいでいましたが、<head>タグ内は一切変更できませんという奇特なCMSを使っているのでない限り、今後IE対策はこの方法で対応しようと思います。
参考：
IE8だけに適用させるCSSハック
Internet Explorerの条件分岐コメント (コンディショナルコメント)