*{ margin : 0 }はもう古い！？
2007年2月18日
以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。
今月号(2007年3月)のWebDesigningにも大藤幹さんが同様のことを書いていらっしゃいますね。ユニバーサルセレクタを用いた手法というのは今後すたれていくのかな・・・
何故*セレクタを使った手法が時代遅れなのか？それが気になるところですが、主な理由として挙げられているのは下記のようなもの。
- レンダリングが遅くなる(重くなる)。大きなページは特に。
- 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)
確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの
html, body, {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
Yahoo UI LibraryのYUI Reset CSSを参考にするのも良いかもしれません。YUI Reset CSSでは*セレクタを使ってリセットする代わりに、最初に下記のように書いています。
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;
}
このスタイルリセットのやりかたは、色々とバージョンもあるようですしまだまだ研究の余地がありますね。私も自分なりのものを検討してみようかな。
- このエントリーのトラックバックURL
- http://www.lllcolor.com/web/css/51.html/trackback
- isao - 2007.02.21 -PM 8:15
> 何故*セレクタを使った手法が時代遅れなのか？
WebDesigningはまだ読んでないですが、ボク個人の経験上、
「時代遅れ」なんじゃなくて「すべてを」ってところが「問題だな～」ってみんなが気づき始めたんじゃないでしょうか？
ボクも最初のころはユニバーサルセレクタを使って、なんとなく「ぜ～んぶ、リセット！」とかしていたけど、リスト要素なんかで入れ子にしていると全部並列に見えちゃってた（視覚的に）のをきっかけに、
「この要素はデフォルトでこのスタイル」
という自分スタイル（CSS）を作るようになったので。「時代遅れ」という表現よりもみんなが「それぞれの要素を“意識して”コントロール」するようになったことで、みんなが「“なんとなく”リセット」をやらなくなっていったような気がします。
ボクは、そういう意図で特別な理由がない限りユニバーサルセレクタとか、「とりあえず margin: 0; padding: 0; 」は使わなくなって、自分がコントロールしたい要素にはおのおの適切（と、思ってる）なマージンやパディングを設定したCSSファイルを使いまわして成長させていってます。
- A.Kawashima - 2007.02.21 -PM 10:16
>isaoさん
コメントありがとうございます。
確かに「時代遅れ」という表現は語弊があるかもしれませんね。私もつい最近まではユニバーサルセレクタを用いて「ぜ～んぶ、リセット！」を行っていたクチです（汗
このブログでも使ってますし、それが「良い方法」だと信じて疑いませんでした。isaoさんが仰るように「それぞれの要素を“意識して”コントロール」が重要なのでしょうね。今後はそういった個々の要素を意識したCSSの指定方法を模索していこうと思います。
貴重なご意見ありがとうございました。
- N - 2007.02.22 -AM 4:50
これだと擬似要素や擬似クラスも指定しないとだめなんですよね。
html, html:before, html:after, html:hover, ….
このくらいはまだ良いのですが、:langになると大変です。
html:lang(ja), html:lang(en), html:lang(en-US), …
更に属性セレクタも考えると、完全に破綻してしまいます。もっとも今のところはFxやOperaやIEやその他メジャーなブラウザのデフォルトスタイルが単純なものばかりなので大丈夫ではありますが……。
- にゃむ - 2007.02.22 -PM 2:43
自分なんかは下記の感じでまとめてます。
http://tinyurl.com/yxx9qs- A.Kawashima - 2007.02.22 -PM 7:38
>Nさん
すいません、ちょっとおっしゃっている意味が分かりかねるのですが・・・
擬似クラスや擬似要素はスタイルを適用する「対象を決めるためのもの」で、それ自体がはじめからブラウザ固有のマージンやパディングの値を持っているわけではないと理解しています。それゆえ破綻はしていないと思うのですが、いかがでしょうか？
(もし間違い等あればご指摘下さい)>にゃむさん
なるほど、参考になります。
コメントありがとうございます。- N - 2007.02.22 -PM 11:32
>擬似クラスや擬似要素はスタイルを適用する「対象を決めるためのもの」で、それ自体がはじめからブラウザ固有のマージンやパディングの値を持っているわけではないと理解しています。
いえ、デフォルトスタイルでも、特に制限はありません。オーサのスタイルと同じくスタイルシートなので、どんなセレクタでも使うことができます。
ととでは違うように表示されますよね。属性によって表示が変わるということは、デフォルトスタイルは属性セレクタで書かれているということです。
次のようなデフォルトスタイルも考えられます：
h2+p:first-letter { float:left; font-size:200%; …… }こういうデフォルトスタイルの前には
p { font-size:100%; }
という打ち消し方では無力なので、厳密にいえば * { (全部のプロパティに初期値を指定) } とするしかないということになります。みんながそうするようになれば、もしかするとOperaあたりのデフォルトスタイルがもっと華やかになる日が来るかもしれません。- N - 2007.02.22 -PM 11:35
すいません。タグが消えるとは知りませんでした。
「ととでは違う…」ではなくて「<input type=”text”/>と<input type=”checkbox”/>では違う…」です。- A.Kawashima - 2007.02.23 -AM 6:16
>Nさん
ご説明ありがとうございます。
ようやく合点がいきました(^^;なるほどー、確かにそうですね。
仮に
h2+p:first-letter { float:left; font-size:200%; …… }
というデフォルトスタイルがあったとすれば個別に指定してやるか、ユニバーサルセレクタでリセットするしかないですね。個人的な考えで言えば、標準準拠が進められている各種ブラウザ間で、抜け駆け的に擬似要素などのスタイルを特殊なものに変えるのは考えにくいかなとは思いますが・・・。一番可能性がありそうなのはOperaですかね(笑)<input>タグに関してはおっしゃる通りですね。ただ、海外の記事などでは、ユニバーサルセレクタを使ったスタイルリセットの弊害として挙げられているのはこのフォーム関連の部分です。例えば下記のようなスタイルを指定したとすると
*{margin:0; padding:0; border:0;}
これだとサブミットボタンなどのデフォルトのスタイルが無駄になってしまうわけです。そのためブラウザのデフォルトスタイルの良い部分は有効利用し、無駄を省きましょうというのが主旨のようです。
- K.Kojima - 2007.02.25 -AM 12:18
Web Designingは見てましたが。。。
いつものようにWebをサーフィンしていると、
del.icio.usからここのユニバーサルセレクタの記事へ、
偶然にも飛んできました。Webってつながってますね～ 笑
- A.Kawashima - 2007.02.25 -PM 6:54
>K.Kojimaさん
あはは、意外とWebの世界って狭いかもしれないですね。
いつもチェックしてたブログの人が、
実は自分のブログも見ていたりということもありますしね。- シマダ - 2008.04.18 -PM 6:19
>>Nさん
完全にリセットするならあらゆる擬似要素をもリセットする必要はありますが､ 擬似クラスに属する要素をさらにリセットする必要はありません｡
擬似要素は全称セレクタや型セレクタでマッチしませんが､ 擬似クラスに属する要素は全称セレクタや型セレクタでもマッチするからです｡例えば言語がjaであるE要素は ｢E:lang(ja)｣ でも ｢E｣ でもマッチします｡ なら単純に ｢E｣ でマッチさせてリセットすればそれで十分なのです｡
(｢でもセレクタの詳細度が…｣ と考えるかもしれません｡ しかし､ 制作者の宣言はセレクタの詳細度に関係なくブラウザの宣言を上書きします｡
もしそうじゃなかったら､ 詳細度が0の全称セレクタによるリセットは無力になってしまいますね｡)- デフォルトスタイルのリセット | css | understandard.net - 2008.07.18 -PM 9:23
[…] この指定は単純でとても便利だったのですが、Emotinal Webさんの*{ margin : 0 }はもう古い！？ - Emotional Webという記事にあるように最近はあまり使われない方向になっているようです。 […]
- Links
