記事本文
CSS を書く前にブラウザ毎のクセをリセット
CSS を書くことに慣れている人はよくご存知でしょうけど、 IE や Firefox や Opera や Safari などの UA はデフォルトスタイルシートと呼ばれるスタイルシートを持っており、それを適用せねば、あるいはそうであるかのように動作せねばならないと仕様で定められています。
User agent: Conforming user agents must apply a default style sheet (or behave as if they did) prior to all other style sheets for a document. A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See "A sample style sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents.
Note that the default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a user agent's internal implementation, it may be impossible to change the values in the default style sheet.
このデフォルトスタイルシートは当然ながらブラウザ毎に差異があり、結果それがブラウザのクセとして表れます。 たとえばリストを入れ子にすれば、ほとんどのブラウザのデフォルトスタイルシートでは入れ子になった部分は左側にインデントが施され、入れ子であることが視覚的にも分かるようになります。 しかし、そのインデントがどれくらいの幅でなされるかはブラウザ次第です。
製作者が作ったスタイルシートに定義されていないプロパティがあればデフォルトスタイルシートが適用されるため、製作者がデザインしたスタイルシートを適用した HTML を異なるブラウザで見ると、細かなところで期待した結果と異なるものになるのはそういう理由です。
じゃあ製作者スタイルシートで全てのプロパティを定義すれば、ブラウザがスタイルシートの解釈自体にバグを持っていない限りは同じ結果が得られるんじゃないの、ということでよく使われている手法が Bazooka - 全称セレクタや Lucky bag::blog: CSS を作成する際のお約束で解説されている「全称セレクタを使ってデフォルトスタイルシートをリセットする」というもの。 これはコロンブスの卵という記事でも取り上げた内容ですが改めて書かせていただきました。
CSS を書く前によく使う指定もパッケージしておく
全称セレクタでのリセットは手軽にできて便利なのですが、その分全てのプロパティや各種のセレクタを考慮してスタイルシートを書く必要があります。 特に子孫セレクタを使ったときなどに、全称セレクタのリセット指定がそのまま出てしまうことが後から発覚したりしますし。
そんな時に、よく使う指定をあらかじめパッケージしておき、全称セレクタでデフォルトスタイルシートをリセットするついでに読み込ませてしまおうというのが Bazooka - デフォルトスタイルの差異をなるべく無くすCSS という方法。 default.cssを適用したXHTMLのエレメンツを見ても分かる通り、リセットした後に必要最低限の指定だけを適用しています。
もしかしたら CSS のエキスパートな方たちにとっては手法としてはありふれているのかもしれませんが、 Bazooka - デフォルトスタイルの差異をなるべく無くすCSS ではスタイルの適用方法も書いてありますし、それぞれのプロパティにどういった理由でそのスタイル指定を行っているかの説明も書いてあるので、仮にありふれた手法であっても一度読んでいただきたいと思いました。 もちろん、エキスパートな方たち以外にも、むしろこれから CSS というものに触れるという人に特にオススメ。 CSS を書き始める前に読んでおけば、 CSS に慣れてきたころに陥りやすい落とし穴や回り道を回避できると思いますよ。
料理で言うと ( って、私は料理が苦手なのでうまく喩えになりませんが ) 材料の下ごしらえを正しく行う感じ。 まずはこれを見よう見まねでも良いから導入して、それから自分の味を付けていけば良いのです。
蛇足 : もんじゃを食べていただけではない
Bazooka - デフォルトスタイルの差異をなるべく無くすCSS を書いたうーたんも、その中で紹介されている プロパティの書き順@脳内ルール - LIPPiN を書いた lego さんも、 20060318 - Monjable Type でもんじゃを食べた仲ですが、その時にこれらのリセット話やプロパティの書き方の話をしていたのです。 聞くだけ、喋るだけでも充分身になる話だったのですが、こうして形にされるとすごく役立つなあとしきりに思いました。
私がうーたんや lego さんに教えられることも多いのですが、逆に私が教えることも時々あります。 その教えたことが 10 にも 100 にもなって返ってくるからこの 2 人は凄いなあと思います。 そんな 2 人ともんじゃを食べたんだぜ、いいだろー ( 威張る点はそこか )
トラックバック送信先
- Bazooka - デフォルトスタイルの差異をなるべく無くすCSS
-
何故各ブラウザはそれぞれ微妙に違ったデフォルトスタイルシートを持っているのか、という理由を補足しました。
