「css」タグアーカイブ

新しくなったYouTube再生ページのマークアップを解析する #html5

新しく、リッチでスマートになったYouTube。HTML5を本格的に採用し、CSS3によるエフェクトを多用しています。HTML5を牽引するGoogleがどのようなマークアップでYouTubeを作り替えたのか、動画再生ページを解析してみました。

マークアップの概要

まず、読み込んでいる画像が非常に少ないですね。動画のサムネール以外に読み込んでいる画像は3点だけ、合計20KB。軽量なのはpng8だからでしょうね。

ページ全体のマークアップの骨格を画像にしてみました。

youtube-watch

mastheadというID名は流行っとるのかなー。サイドバーの配置の仕方が面白いですね。少し詳しく、ソースで見ると以下のようになっています。

続きを読む 新しくなったYouTube再生ページのマークアップを解析する #html5

IE8だけに適用できるCSSハックとは?

必要があってだいぶ調べましたが…結論。

そんなものは、無い。

まぁ実際ないことはなかったんですが…一番よく見かけたのが下の方法。

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の条件分岐コメント (コンディショナルコメント)