![Blog [Home]](http://higash.net/higash/wp-content/themes/higash/img/gnavi_blog.jpg)
jQueryでブラウザ分岐してリセットCSSを作ってみた
いよいよIE8への自動アップデート（キャンセルもできるので完璧に自動ではないけど）がはじまるらしい（もうはじまってる？）ので、IE8に対応したリセットCSSを作ってみることにしました。
いつまでもIE7互換モードでページ作るのも嫌だし。
しかし、先月 IE8の新機能とか互換モードとかCSSハックとか でもご紹介した通り、IE8用のCSSハックっていいものがないんですよね。文法的に確実にエラーになってしまう。
そこで今回はjQueryのプラグイン jQuery Browser Plugin を使ってブラウザを分岐することに。そうすれば複雑なCSSハックを使う必要がなく、 CSS2.1としてvalidな書式 でリセットCSSをまとめることができます。
欠点はもちろんJavaScriptがOFFのときに機能しないってことだけど、そもそも微妙なズレを解消するためのCSSなんだし、機能しなくともそれほど致命的ではないかな、と思っています。
ブラウザ判別をしてくれるjQuery Browser Plugin
jQuery Browser Plugin を使えば、Webページ閲覧者のOSとブラウザ情報を簡単に取得することができます。
今回は、このプラグインのソースの末尾に以下のような記述を追加してやることにします。
$(document).ready(function() {
$('html').css('overflow-y', 'scroll');
$('body').addClass($.browser.className);
$('input[type=text]').addClass('text');
$('input[type=radio]').addClass('radio');
$('input[type=checkbox]').addClass('checkbox');
$('input[type=submit]').addClass('submit');
});
これで何をしているかというと、まずFirefoxで常時縦スクロールバーを表示するために、htmlに対してCSS3のプロパティoverflow-y:scroll; を指定しています。
また、bodyに “ブラウザ名+バージョン” （例：firefox3）でclassを追加。
そして属性セレクタの使えないIE6のために、フォームの入力欄、ラジオボタン、チェックボックス、submitボタンにそれぞれ “text” 、 “radio” 、 “checkbox” 、 “submit” というclassを追加しています。
あとはカスタマイズしたjQuery Browser PluginをjQueryとともに読み込むだけです。
Reset CSSとBasic CSSを含めて、HTMLの <head> には最低以下の4行が必要になります。
<link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/basic.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.browser.custom.min.js"></script>
Reset CSS
改訂版Reset CSSは以下の通り。
@charset "utf-8";
/*
---------------------------------------------------------
reset.css ver 1.4 with jQuery [2009/04/24]
*This document validates as CSS level 2.1
*GNU General Public License v3
*http://higash.net/labo/
Modify YUI Reset CSS, YUI Fonts CSS
*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
*http://developer.yahoo.com/yui/license.html
---------------------------------------------------------
*/
/* --HTML-- */
html {
background:#fff;
color:#333;
}
/* --BODY-- */
body {
font:75%/1.5 'Lucida Grande', Arial, Helvetica;
margin:0;
overflow:visible;
padding:0;
}
/* for Windows */
.win body {
font-family:'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック';
}
/* for Win IE6 */
* html.win body {
font-family:'ＭＳ Ｐゴシック';
}
/* for Mac firefox2 */
.mac body.firefox2 {
font-size:12px;
}
/* --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, *+html kbd, *+html pre, *+html samp, *+html 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;
}
/* for IE6 */
* html input, * html textarea {
font-family:'ＭＳ Ｐゴシック';
}
/* for IE7 */
*+html input, *+html textarea {
font-family:'メイリオ', 'ＭＳ Ｐゴシック';
}
/* for IE8 */
.msie8 select {
font-family:sans-serif;
}
/* for Chrome1 */
.chrome1 select {
font-family:'Lucida Grande', Arial, Helvetica;
}
/* tables still need 'cellspacing="0"' */
table {
border-collapse:collapse;
border-spacing:0;
font-size:100%;
}
前述のように、改訂版Reset CSSではCSS2.1としてはinvalidな html { overflow-y:scroll; } の記述を削除し、JavaScriptで書き加えるようにしています。
また、bodyのfont-sizeは75%（12px相当）で統一。ただし、Mac版Firefox2のみデフォルトのfont-sizeが14px（他のブラウザは16px）なので、bodyのfont-sizeを別に指定しています。
Basic CSS
続いて改訂版Basic CSSは以下の通り。
@charset "utf-8";
/*
---------------------------------------------------------------------
basic.css ver 1.2 with jQuery [2009/04/24]
*This document validates as CSS level 2.1
*GNU General Public License v3
*http://higash.net/laboratory/
Modify YUI Base CSS
*Copyright (c) 2008, Yahoo! Inc. All rights reserved.
*http://developer.yahoo.com/yui/license.html
---------------------------------------------------------------------
*/
/* --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 {
padding:0.1em;
vertical-align:middle;
}
input[type="text"] {
height:1.2em;
line-height:1.2;
}
/* for IE6 */
* html input.text {
height:1.2em;
line-height:1.2;
}
/* for Firefox2+ */
.firefox2 input[type="text"],
.firefox3 input[type="text"] {
padding-top:0;
}
/* for Chrome1 */
.chrome1 input[type="text"] {
vertical-align:baseline;
}
/* for Safari3 */
.safari3 input[type="text"] {
vertical-align:baseline;
}
input[type="checkbox"],
input[type="radio"] {
padding:0;
vertical-align:baseline;
}
/* for IE6 */
* html input.checkbox,
* html input.radio {
vertical-align:-0.3em;
}
/* for IE7 */
*+html input[type="checkbox"],
*+html input[type="radio"] {
vertical-align:0;
}
/* for IE8 */
.msie8 input[type="checkbox"],
.msie8 input[type="radio"] {
vertical-align:-0.2em;
}
/* for Firefox2+ */
.firefox2 input[type="checkbox"],
.firefox2 input[type="radio"],
.firefox3 input[type="checkbox"],
.firefox3 input[type="radio"] {
vertical-align:-0.2em;
}
/* for Opera9 */
.opera9 input[type="checkbox"],
.opera9 input[type="radio"] {
vertical-align:middle;
}
/* for Chrome1 */
.chrome1 input[type="checkbox"],
.chrome1 input[type="radio"] {
vertical-align:-0.2em;
}
input[type="submit"] {
line-height:1;
padding:0.3em;
}
/* for IE6 */
* html input.submit {
padding:0.3em 0.1em 0.1em;
}
/* for IE7 */
*+html input[type="submit"] {
padding:0.3em 0.1em 0.2em;
}
/* for IE8 */
.msie8 input[type="submit"] {
padding:0.4em 0.3em 0.2em;
}
/* for Firefox2+ */
.firefox2 input[type="submit"],
.firefox3 input[type="submit"] {
padding:0.1em;
}
/* for Mac Opera9 */
.mac .opera9 input[type="submit"] {
padding:0 0.3em;
}
legend {
background:#fff;
padding:0.3em;
}
select {
padding:0;
vertical-align:baseline;
}
/* for IE6 */
* html select {
vertical-align:middle;
}
/* for IE7 */
*+html select {
vertical-align:-0.2em;
}
textarea {
line-height:1.4;
padding:0.1em;
vertical-align:middle;
}
/* --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;
}
ちなみにこのリセットCSSの対象ブラウザは、IE6&7&8、Firefox2&3、Safari3+、GoogleChrome1、Opera9.5+です。
Mac・Winを問わず、対象ブラウザは一通り表示確認をしていますが、表示崩れを発見された方はフィードバックいただければ幸いです。
というわけで、ようやくIE8対策完了です。
jQueryを使えばこんなに簡単にブラウザ分岐ができるとは。まあ、そもそもjQueryはクロスプラットフォームで機能することが目的のフレームワークなんだから、当たり前なのだけれども。
例によって、Reset CSSとBasic CSSについてまとめたHTML（Reset CSS & Basic CSS — HiGash.Net）を http://higash.net/resetcss/ にアップしました。この Reset CSS & Basic CSS — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください。
［2009/4/24更新］（Zip圧縮・28KB）
- Share & Bookmark
ツイッターの者です。リンクさせて頂きました！
＞ daiさん
ありがとうございます！ 今後ともよろしくお願いします。
私もYahooYUIを使用していましたが不満がありつつ、そのままにしていたところ偶然にもこのページに辿りつきました。
素晴らしいCSSをありがとうございます。
早速利用させていただきますが質問をさせてください。
reset.cssのメイリオ、MSPゴシックですが、日本語表記のみで英語表記がないのはなぜでしょう？実際この件で問題を聞いたことないですが、従来から両方の表記をしているところがほとんどですので疑問に思いました。
また、ヒラギノ角ゴ Pro W3とOsakaの指定についても定番だったかと思いますが、入っていないことは何か意図があるのでしょうか。
＞ 田舎のWEB屋独立1年生さん
コメントありがとうございます。
ご質問のfont-family指定の件ですが、日本語フォントを英語でも併記するのは日本語で表記したfont-familyを理解できないSafari（Mac）の仕様に対処するためであることが多いと思います。
Safariはフォント指定をしないと標準で明朝体が表示されてしまうので、ほとんどのサイトはfont-familyに日本語書体を指定していますが、このreset.cssはbodyに ‘Lucida Grande’, Arial, Helvetica という欧文フォントを指定することでSafariの日本語書体もゴシック体にしてしまっています。
ヒラギノ角ゴについては、上記のfont-family指定でMacであれば標準のヒラギノ角ゴが表示されるのであえて指定していません。Windowsでもヒラギノを優先表示させたい場合はもちろん、ヒラギノ角ゴについても指定を行う必要があります。
また、Windowsの場合は和欧混植（和文、欧文を両方指定）を行うと、文字サイズがうまく制御できなくなってしまうので、メイリオとＭＳ Ｐゴシックしか指定していません。
ちなみにこのCSSを作ったときはGoogle Chrome 2もSafari 4も出ていないので、最新ブラウザに完璧に対応するにはちょっと修正が必要かもしれません。
なるほど。わかりやすいご説明ありがとうございます。
背景を理解せず、他の方が作ったCSSを参考にするのも怖いものです・・
個人的にはVistaの場合はヒラギノ表示だと崩れるので実装はしたくないですね。
次回アップデート期待しております。
RSS購読させていただきます。ありがとうございました。
使わせていただきます！有り難うございます。
これからもチェックさせていただきます
こんにちは。質問がありまして、書き込みさせていただいています。
OS:Vista
チェックしたブラウザ：IE5/6/7/8 Opera9~10、Safari3~4、Fx3.5～6
いずれもWinです。
こちらのリセットCSSを使わせていただこうと思い、DL後、適用しました。
http://www.cssstickyfooter.com//
こちらのサイトのStickyFooterを使っていますが、セットで使用したところ、
なんだか挙動がおかしくなりました。
【症状】
・IE7～8
画面を小さくしたり、新しい画面で開こうとすると、フッターが上部にずれる。
リンクや画面をクリックすると、heigth:100%を認識して表示し直すようで、
フッターが下部にくっつき（戻り）ます。
・Opera
幅は600pxなので、横スクロールは出ないはずなのですが、
動かない横スクロールが出てしまい、スクロールバーの高さの分だけ
縦スクロールがスクロールしてしまいます。
これらを改善する方法はありませんでしょうか？
こんにちははじめまして。非常にためになる内容ありがとうございます。最近ちょくちょく拝見させてもらってました。まだWebは発展途上ですががんばります。