Google Chrome向けにリセットCSSを微妙にアップデート

かなりマイナーチェンジだけど、主にGoogle Chrome向けにほんの少しだけReset CSSとBasic CSSをアップデートしました。リセット用CSSに関する情報の需要は高くて、このブログを参考にしてくれてる人もいるみたいなので一応変更を加えたことを新規エントリーとして告知することにします。

対象ブラウザは、Internet Explorer 6.0 & 7.0、Firefox 2.0 & 3.0、Safari 3.1+、Google Chrome 0.3、Opera 9.27 & 9.5+です。Google Chromeを対象ブラウザに加えたほか、前回のエントリーからOperaが9.6に、Safariが3.2にそれぞれアップデートされていますので、それらも対象ブラウザに加えました。
使い方はもちろん変更無く、Reset CSS でブラウザのデフォルトCSSをリセットした後に Basic CSS を上書きして汎用的な基本スタイルを定義してあげます。

Reset CSS

YUI Reset CSS と YUI Fonts CSS 、 Formy – CSS Form Framework を改良して作成。

@charset "utf-8";

/*
===========================================================
	reset.css ver 1.2 [2008/11/25]
	*This document validates as CSS level 3
	*GNU General Public License v3
	*http://higash.net/20081125/reset_css3.html

	Modify YUI Reset CSS, YUI Fonts CSS
	*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
	*http://developer.yahoo.com/yui/license.html

	Modify Formy CSS Form Framework 0.8(beta)
	*GNU General Public License v2
	*http://code.google.com/p/formy-css-framework/
===========================================================
*/

/* --HTML-- */
html {
background:#fff;
color:#333;
overflow-y:scroll;
}

/* --BODY-- */
body {
font:12px/1.5 'Lucida Grande', Helvetica;
margin:0;
overflow:visible;
padding:0;
}

	/* for IE7 */
	*+html body {
	font-family:'メイリオ', 'ＭＳ Ｐゴシック';
	font-size:75%;
	}

	/* for IE6 */
	* html body {
	font-family:'ＭＳ Ｐゴシック';
	font-size:75%;
	}

/* --OTHER TAGS-- */
a {
overflow:hidden;
}

a img, img {
border:0;
}

abbr, acronym {
border:0;
}

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

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

caption, th {
text-align:left;
}

code, kbd, pre, samp, tt {
font-family:monospace;
line-height:100%;
}

	/* for IE7 */
	*+html code, kbd, pre, samp, tt {
	font-size:108%;
	}

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

ol, ul {
list-style:none;
}

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

/* form */
button, fieldset, form, input, label, legend, select, textarea {
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
vertical-align:baseline;
}

/* tables still need 'cellspacing="0"' */
table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}

Reset CSSの変更点は1点のみ。すべてのA要素について a { overflow:hidden } としました。
これは画像置換でAタグ内のテキストにtext-indent:-9999px;という指定を行った場合に、Firefoxでアンカーにフォーカスまたはクリックした際のoutlineの点線が、ブラウザの外側まではみ出してしまうのを防ぐための記述です（下のキャプチャ参照）。ちなみにFirefoxでAタグ要素にフォーカス&クリック時に表示されるoutlineの点線自体を消したい場合は a:focus { outline:none } でOKです。

Aタグにoverflow:hidden;が指定されていない場合

Aタグにoverflow:hidden;が指定されていないと、
text-indent:-9999px;を使って画像置換した際に、
このようにoutlineの点線が画面外まで伸びていく感じになる

Aタグにoverflow:hidden;が指定されている場合

Aタグにoverflow:hidden;が指定されていれば、
outlineの点線はA要素の外に飛び出して表示されることはない

Basic CSS

YUI Base CSS と YUI Fonts CSS 、 Formy – CSS Form Framework を参考に作成。

@charset "utf-8";

/*
===========================================================
	basic.css ver 1.1 [2008/11/25]
	*This document validates as CSS level 3
	*GNU General Public License v3

	*http://higash.net/20081125/reset_css3.html

	Modify YUI Base CSS
	*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
	*http://developer.yahoo.com/yui/license.html

	Modify Formy CSS Form Framework 0.8(beta)
	*GNU General Public License v2
	*http://code.google.com/p/formy-css-framework/
===========================================================
*/

/* --A-- */
a {
cursor:pointer;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

/* --FORM-- */
fieldset {
border:1px solid #ccc;
margin-bottom:1em;
padding:0 1em 1em 1em;
}

input, textarea {
line-height:1.4;
padding:0;
vertical-align:middle;
}

input[type="checkbox"],
input[type="radio"] {
vertical-align:text-bottom;
}

input[type="submit"] {
padding:0.1em;
}

legend {
background:#fff;
padding:0.3em;
}

select {
padding:0;
}

	/* for IE6 */
	* html input {
	padding:0.1em;
	}

	* html input.checkbox,
	* html input.radio {
	vertical-align:-0.3em;
	}

	* html input.submit {
	line-height:1.2;
	padding-top:0.2em;
	}

	* html select {
	vertical-align:-0.2em;
	}

	/* for IE7 */
	*+html input {
	padding:0.1em;
	}

	*+html input.submit {
	line-height:1.2;
	padding-top:0.2em;
	}

	*+html select {
	vertical-align:-0.2em;
	}

	/* for Opera9.27 */
	html:first-child input {
	padding:0.1em;
	}

	html:first-child input[type="checkbox"],
	html:first-child input[type="radio"] {
	vertical-align:middle;
	}

	html:first-child input[type="submit"] {
	padding:0.3em;
	}

	html:first-child select {
	padding:0.2em 0.5em;
	}

	/* for Opera9.5+ [Safari3 & Chrome] */
	body:first-of-type input {
	padding:0.1em;
	}

	body:first-of-type input[type="checkbox"],
	body:first-of-type input[type="radio"] {
	vertical-align:text-top;
	}

	body:first-of-type input[type="submit"] {
	padding:0.3em 0.3em 0.2em 0.3em;
	}

	/* for Safari3 & Chrome */
	html:not(:only-child:only-child) input {
	padding:0;
	vertical-align:baseline;
	}

	html:not(:only-child:only-child) select {
	vertical-align:0;
	}

/* --HEADLINE-- */
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
margin:1em 0;
}

/* --LIST-- */
ol, ul {
margin:1em 1em 1em 3em;
text-align:left;
}

dl {
margin:1em;
}

ol li {
list-style:decimal outside;
}

ul li {
list-style:disc outside;
}

dl dd, ol li, ul li {
margin-bottom:0.5em;
}

/* --TABLE-- */
table {
margin-bottom:1em;
}

td, th {
border:1px solid;
padding:0.5em;
}

th {
font-weight:bold;
text-align:center;
}

/* --OTHER TAGS-- */
abbr, acronym {
border-bottom:1px dotted;
cursor:help;
}

blockquote {
margin:1em;
}

caption {
margin-bottom:0.5em;
text-align:center;
}

em, strong {
font-weight:bold;
}

p {
margin-bottom:1em;
text-align:left;
width:auto;
}

/* clearfix */
.clearfix:after {
content:"";
display:block;
clear:both;
}

	/* for IE6 */
	* html .clearfix {
	display:inline-block;
	}

	/* for IE7 */
	*+html .clearfix {
	display:inline-block;
	}

Basic CSSはPタグとOL・ULタグに指定していた text-align:justify; を text-align:left に変更しました。text-align:justify;はまだあんまり上手く機能してくれないみたいなのでやめました。

あと、Google Chromeでのチェックボックスやラジオボタンのズレについて調整を加えました。こうやって（↓）見比べてみてもかなり微妙な調整であることがわかるかと思います。 微妙過ぎてもはや気分の問題、自己満足レベルの調整ですけど。
Google ChromeはSafariとCSSハックが同一なので、Google Chrome向けのCSSを調整するとSafariにも手を加えることになり、なかなかGoogle Chromeだけに最適な調整を加えるのが難しいです・・・。

以前のBasic CSSでのGoogle Chromeのフォーム表示

赤枠で囲んだラジオボタンとチェックボックス部分のズレがちょっと気になります

新Basic CSSでのGoogle Chromeのフォーム表示

赤枠で囲んだラジオボタンとチェックボックス部分のズレ。
ほんのちょっとだけ調整されてます。もっときっちり調整したいけど、
Google Chromeへの調整はSafariにも影響するのでこのへんが限界かも

新しいBasic CSSは上記以外にもOpera 9.27のフォーム部分をはじめ、いくつか微調整が加えられています。

Reset CSSとBasic CSSについてまとめたHTML（Reset CSS & Basic CSS — HiGash.Net）を http://higash.net/resetcss/ にアップしました。この Reset CSS & Basic CSS — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください。
（2009/03/01追記：リニューアル時にダウンロードファイルがリンク切れしていたみたいなので修正しました。）

［2008/11/25更新］（Zip圧縮・8KB）