ブラウザのシェアとreset.css

2009 0314

ブラウザのシェアとreset.css

WEBサイトを作るうえで、誰もが悩むコーディング作業の恐怖。
ブラウザ毎の解釈の違いが生み出す、意図しない表示の数々。

増えすぎたブラウザの種類。今現在、私が知っているブラウザだけでも多数あります。

Firefox
Internet Explorer Series
Netscape Series
Opera
Google Chrome
Safari
Flock
Sleipnir

その差異を補うべく、今現在も更新されているreset.cssのお話。

まず、reset.cssをご存知でない方のために、簡単に説明すると・・・。
コーディングの際、必ず行うであろう「ブラウザチェック」ですが、この作業で起こる「フォントの表示が違う」だとか「1pxずれた」だったり、「隙間が空いた」などなど・・・。これはブラウザによって、コアが違うために起こってしまう問題なのですが、この現象を回避するために、reset.cssというCSSを最初に適用し、ブラウザ毎の差異を可能な限りなくすというものです。

私が関わっている某ブログサイトのアクセスログでは、少し面白い結果も出ています。
IE7のシェアが、IE6を大分上回っていました。（600万PV/month）

みなさんもreset.cssを使われていると思いますが、ブラウザの種類と同様にreset.cssにも多数の種類があります。

一番有名なのが「YUI reset.css」でしょうか？
その他にも、「Ateneu Popular CSS Reset」や「Eric Meyer Reset CSS」なども存在します。

ブラウザ毎の差異を無くす意味で使われるreset.cssが、何故このように多数存在するのか。

「それほど多くの差異があり、回避策も多数存在するから」です。

みなさんは、どのreset.cssを使ってるのでしょうか？
またはどのようなreset.cssを自作したのでしょうか？

ちなみに今回は、私が日々の作業でトライ＆エラーを繰り返しているreset.cssを紹介します。
ベースにはYUIを使用し、どんなサイトでも利用するであろうライブラリを拡張として記載。ここまでは、まあ普通だと思います。

最も検証に時間を費やしたフォント部分ですが、あえてアンチエイリアス無しのフォントファミリーを指定しています。
何故かというと、「文字間隔の違い」だったり、ちょっとした環境の違いで「文字潰れ」が起こるのを防ぐためです。
ブラウザによって改行位置が違ったりするのが、どうも納得いかなかったため、こういった形にしました。

※長いため閉じてあります。ツールバーの「+source」をクリックすると展開表示されます。


@charset "utf-8";


/* ====================================================
	
	
	
	Poisona Version 2.00
	welinadesign.com
	
	
	
====================================================*/


/* ====================================================
	
	
	
	スタイルの初期化
	
	
	
====================================================*/

html {
	overflow-y: scroll;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

q:before,q:after {
	content:'';
}

fieldset,img {
	border:none;
}

abbr,acronym {
	border:0;
}

p {
	text-align:justify;
}

/* ----------------------------------------------------
	letter-spacingを使用した際、
	<br>を2個書かないと改行しないのを解消
---------------------------------------------------- */

br { /*  */
	letter-spacing:normal;
}





/* ====================================================
	
	
	
	よく使用するクラスライブラリ
	
	
	
====================================================*/

/* ----------------------------------------------------
	text-align
---------------------------------------------------- */
.ac {
	text-align: center;
}

.ar {
	text-align: right;
}

.al {
	text-align: left;
}

/* ----------------------------------------------------
	float
---------------------------------------------------- */

.fr {
	float: right;
}

.fl {
	float: left;
}

/* ----------------------------------------------------
	margin
---------------------------------------------------- */

.mt00 { margin-top:  0px !important; }
.mt05 { margin-top:  5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }

.mr00 { margin-right:  0px !important; }
.mr05 { margin-right:  5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }

.mb00 { margin-bottom:  0px !important; }
.mb05 { margin-bottom:  5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }

.ml00 { margin-left:  0px !important; }
.ml05 { margin-left:  5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }

/* ----------------------------------------------------
	padding
---------------------------------------------------- */

.pt00 { padding-top:  0px !important; }
.pt05 { padding-top:  5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }
.pt35 { padding-top: 35px !important; }
.pt40 { padding-top: 40px !important; }

.pr00 { padding-right:  0px !important; }
.pr05 { padding-right:  5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }
.pr35 { padding-right: 35px !important; }
.pr40 { padding-right: 40px !important; }

.pb00 { padding-bottom:  0px !important; }
.pb05 { padding-bottom:  5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb35 { padding-bottom: 35px !important; }
.pb40 { padding-bottom: 40px !important; }

.pl00 { padding-left:  0px !important; }
.pl05 { padding-left:  5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }
.pl35 { padding-left: 35px !important; }
.pl40 { padding-left: 40px !important; }






/* ====================================================
	
	
	
	creafixなどフロート解除関連
	
	
	
====================================================*/

.clear {
	clear: both;
}

/* ----------------------------------------------------
	clearfix の代用
	<div class="hr"><hr /></div>
---------------------------------------------------- */

div.hr { clear:both; }
div.hr hr { display:none; }

/* ----------------------------------------------------
	clearfix
---------------------------------------------------- */

.clearfix {
	zoom:1;
}

.clearfix:after {
	content: ".";
	display: block;
	height: 1px;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	margin: -1px 0 0 0;
}

/* for MacIE5 \*//*/
.clearfix {
	height: auto;
	overflow: hidden;
}





/* ====================================================
	
	
	
	フォントサイズの初期化
	文字潰れやIEでのシャギー化を防ぐ意味で、アンチエイリアス系フォントは指定しません。
	
	
	
====================================================*/
body {
	font-size: 12px;
	*font-size: 75%;
	font-family: sans-serif;
	*font-family: "ＭＳ Ｐゴシック";
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

a , a:visited {
	overflow: hidden;
}

以前は、フォーム部分も徹底的に書いていたのですが、逆に自由度を潰してしまったためボツりました。
※何故「poisona」なのかは、ここでは省きます・・・。

いつかはブラウザが統一されるといいですね。