allWebクリエイター塾　ブログ: Conditional Classname（コンディショナル・クラスネーム）でhttpリクエストを減らせ

Andy Clarkeの新しい書籍のプロモーショナルウェブサイト、「Hardboiled Web Design」のHTMLソースを見ていたときに、body要素へのマークアップで初めて見るものがあった。

<!--[if lt IE 7 ]> <body class="index ie6"> <![endif]--> 
<!--[if IE 7 ]>    <body class="index ie7"> <![endif]-->  
<!--[if IE 8 ]>    <body class="index ie8"> <![endif]-->  
<!--[if IE 9 ]>    <body class="index ie9"> <![endif]-->  
<!--[if (gt IE 9)|!(IE)]><!--> <body class="index"> <!--<![endif]-->

今まで、IE専用のスタイルシートを link要素を利用してコンディショナルコメントを記述していた。しかし、このやり方ではlinkを別々に読むことになるのでHTTPリクエストが多く発生してしまう。

通常使われているコンディショナルコメントの記述方法

<!--[if lt IE 6 ]>
<link rel="stylesheet" href="http://hardboiledwebdesign.com/assets/css/ie7.css" media="screen, projection"><![endif]-->
<![endif]--> 
<!--[if lt IE 7 ]>
<link rel="stylesheet" href="http://hardboiledwebdesign.com/assets/css/ie8.css" media="screen, projection"><![endif]-->
<![endif]--> 
<!--[if lt IE 8 ]>
<link rel="stylesheet" href="http://hardboiledwebdesign.com/assets/css/ie9.css" media="screen, projection"><![endif]-->
<![endif]-->

今回の記述方法は、クラスを用いてIE用のスタイルを読み込んでいるので、httpリクエストを少なくすることができる。これらは、コンディショナルクラスネームと呼ぶ。

IE用のスタイルに記述する内容の例

利用した場合のCSSの記述方法は下記のとおりだ。

.ie7 div {
zoom:1; }

今回のようにbody要素に対して、コンディショナルクラスネームを利用しているが、html要素に直接利用することもできる。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->  
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->  
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->  
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

html5バージョン

<!Doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="ja" class="ie7"> <![endif]-->  
<!--[if IE 8 ]>    <html lang="ja" class="ie8"> <![endif]-->  
<!--[if IE 9 ]>    <html lang="ja" class="ie9"> <![endif]--> 
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]--> 
<head>
<title></title>
</head>
<body>
</body>
</html>

興味のある人は是非とも利用して、IEのhttpリクエストを減らしてみよう。