IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。

CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。

詳しくは以下

■Reset CSS
Webブラウザが標準で備えているデフォルトCSSをリセットするCSSリセットの手法。これは色々と方法はありますが、参考までに。

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,
blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,
th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

　
　
　
　
　
■Internet Explorer conditionnal comments
IEのだけ違うCSSを読ませる。もしくは、IE6に絞って動作させる方法

<!–[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]–>

<!–[if IE6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
< ![endif]–>

　
　
　
　
　
■Internet Explorer hacks
インターネットエクスプローラ毎に値を設定する方法。

.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}

　
上記の他にも沢山のCSSのテクニックが記載されています。コーディングをされている方にはありがたい資料になるかと思います。クロスブラウザの問題は暫く続きそうですが、しっかりと学んでスムーズに作業を終えたいものです。

15+ techniques and tools for cross browser CSS coding