「リセット用CSSを使わない」ことが流行ってる(らしい)理由

ちょっと前の話になるんですが、先月参加してきたCSS Niteで、大藤幹さんが「Web Designing」の連載で海外のサイトをチェックしていて分かった傾向として、こんなことを挙げられてました。

CSSのリセット

リセットしているサイトは、 昨年12月号より0
英語圏を除けば、約1年間から0

これって、個人的にはすごいショッキングなデータだったんです。てっきり、ブラウザのスタイルをリセットするのが主流だと思ってましたから。しかも「0」。

ただ、なぜ「ブラウザスタイルのリセット」が流行らなくなっているのか(少なくとも海外では)、その根拠が良く分からないでいたのですが、先日"No CSS Reset"という、そのものズバリな記事を発見。
それによると…。

"The problem I've had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns out, I'm perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to have bolded text."

え、えーっと、超英検準2級レベルの読解力で解説しますと、「せっかくブラウザ側でデフォルトのスタイルを持ってるのに、そのスタイルをばっさり切ってしまうのはもったいなくないか?」って具合でしょうか。「そのブラウザ側のスタイルが邪魔」という理由ででてきたのが、リセット用のCSSだった訳ですが、いつの間にかこういう流れになってた訳ですねぇ。…で、さらに。

"One of the principles I took away from the Web Standards community was the concept that pixel perfect precision across the various rendering engines was impractical and a remnant of the table-based layouts of yesteryear. With CSS and progressive enhancement, it was okay that things might look a little different from one browser to the next because of variations in what they supported."

「どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産」「若干ブラウザ間で見た目に違いがあってもいいじゃない」…ってことでしょうか。

個人的には、既存のテーブルレイアウトとCSSレイアウトが混在するようなレイアウトの場合(リニューアル時に、一時的にヘッダーとフッターだけCSSレイアウトに移行する場合とか)に、リセットCSSが何かと表示の不具合の原因になることが多かったので、それが理由かなと思ってたんですが、もっと根本的な話っぽいです。

ブラウザ間の見た目の違いよりも、ブラウザが既にもっているスタイルを有効利用しよう、という考え方なんでしょう。たぶん。

CSS Niteで大藤さんもおっしゃってましたけど、単に「流行ってるから」という理由でその手法に飛びつくのではなくて、自分の案件・サイトにどのようなメリットがあるか考えて、最適な手法を選択すれば良いのかなと思います。

だから、画像置換にしろ、リセットCSSにしろ、CSSハックにしろ、なぜそれを使うか・使わないか、っていう根拠というか思想がマークアップエンジニアには必要なんだなと思った次第です。それについて、1つブログのエントリが書けるくらい。最近、lightboxやスムーススクロールが邪魔、みたいなエントリーが話題になってますけど、要は何のためにそういう手法を選択したか、って話なのかなと。

英文の解釈が間違ってたらすいません…。

取り急ぎ、追記

思いのほかコメントやブックマークを頂いていて、若干テンパっているネコゼです。

取り急ぎ追記なのですが、別に「リセットCSSを使わない事を薦めてる」訳ではないので、その点ご了承を。…って説明が足りないよって、話ですよね。失礼しました。

当日の大藤さんのプレゼンでの説明で、具体的にどういう話があったかというと…

リセットCSS
最近は見かけない(!)。 連載で取り上げたサイトでは、英語圏以外では1年前くらいからゼロ件。 ただしこれは、一括してリセットしていないという意味で、marginとpaddingだけはリセットしたり、必要な箇所だけでリセットしているサイトはあるとの事。 でも、本当に全くリセットしていないサイトもあって、そのサイトはブラウザによって若干の表示差異はあるとの事。

CSS Nite in Ginza, Vol.23のまとめ | Blog hamashun.com

…ということで、「リセットCSS」の定義がごっそり抜けてました。スライドだけの引用だと、だいぶ誤解される内容でした。これも失礼しました…。(あと、ブックマークのコメントでも指摘を頂いてますけど、リセットCSSを使わない理由として、「ブラウザに負荷を掛けない」って意図もあったかなと)

コメント

ナウい海外のマークアップエンジニアはリセットしないんですか。。

しないでコーディングをしたことがないので良くわかりませんが、した方が楽じゃないのかなぁと思います。まどっちも慣れですかね。

>「若干ブラウザ間で見た目に違いがあってもいいじゃない」
これをどうやってクライアントに説明できるかですかね。。

| なかにしゆうすけ | 2008/04/30 10:11 AM |

自分も同じ回の「CSSNite」に出席しました。
内容的にはショッキングというより「????」な感じで。。。
今になって「なんで?そんなことを言うの的な気分でした。

既に「リセットする」作業が出来上がってしまってるので、すぐに変えるつもりも無ければ、踊らされるつもりもありません。

でも、「ブラウザのデフォルト指定がもったいない」というのは自分も感じてはいました。

なので、nukamiso(ぬかみそ).cssにてその時々に最適なリセットスタイルを更新して使っています。

流行とか言われても、困りますよね。

代替方法があるならともかく、サイトごとに全ての要素をこと細かく指定しなければならないのは、ちとキツイですし。。。

| waiem | 2008/04/30 10:58 AM |

リセットCSSの必要性ってのは難しいですね。
デザイナーは、間違いなく自分がデザインしたような見栄えを求める傾向にあるし、それを「ブラウザの特長」として納得させるのは至難の業かもしれません。

ただ、(本当はどうか知りませんが・・)何かしらの意味があってのデフォルト指定ならば、それは活かしてこそ!なのかもしれませんね。

ここでも書かれているように、「サイトの意味」から最適な手法を選択するのが、必要なんでしょうね。

・・・と考えても、ブラウザの特長を活かすという意味でのサイトの意味というのがなかなか思いつきません・・・。

| sevenina | 2008/04/30 2:36 PM |

> リセットしているサイトは、 昨年12月号より0
> 英語圏を除けば、約1年間から0

信じられない。
この人が定義する「リセット」ってなに?
* { margin:0px; padding:0px; }のことだったりしてw
信じられないと思い、
http://cssnite.jp/ginza/vol23/css-analysis.html
このサイトの下から調べていったら、一番最初っから
body, h1, h2, h3, h4, h5, h6, form, ul, ol, p, dl {
  margin:0pt;
  padding:0pt;
}
こういうリセットを発見したんだけど。
大体、この書き方だと「Web上にある全てのサイト調べました」みたいに取れます。

0なわけねぇだろw

| wtf | 2008/04/30 5:18 PM |

ま〜デフォルトのスタイルを利用したほうが「楽だ」てなら使うべきですよね。仕事の進め方や納期の関係でそのほうが都合が良い場面もままあります。柔軟に組めそうなデザインだったらここぞとばかりに使ってみるのも、仕事を楽しむコツかもしれません。

| Sig. | 2008/05/01 2:13 PM |

いやいや、リセットしないってのは、body全体を指定した一括リセットはしないで、必要な要素だけリセットするってことですよね。大藤氏の書籍でもそう書かれていますよ。
全体でリセットすると、意図しない動作をする恐れがある、リセットを読み込んだ後、再度個別要素の指定を読むので表示が遅くなるからなどが理由のはずです。

| e | 2008/05/02 9:47 AM |

海外だとIE7とか、IE6に比べるとちょっとマトモブラウザが普及しているからではなかろうか〜とか邪推。

| jdash2000 | 2008/05/03 3:31 PM |

はじめましてで遅レスですが、私もマークアップエンジニアの端くれなのでコメント。

デザインされたものをそれこそ、忠実に再現するのがマークアップエンジニアの力量だと思うんですよね。リセットしなくても全ブラウザの表示が同じならいいんですが、絶対そんな風にはならないので、リセットCSSは必要かと。

デザイナーは1pxまで精密にデザインするわけで、それを再現できなけりゃマークアップエンジニアの意味がないす。

ブラウザ間のデフォルトCSSに差がなけりゃあ使う必要なんてないんですけどね。。。。

| をのへ | 2008/05/15 4:12 PM |

RESETするべきタグとしなくても良い(してはならない)タグの区別が必要という事でしょうね。

| fuku | 2008/05/19 8:04 PM |

デザイナーがブラウザの持つクセを考慮に入れてデザインする「方法もある」というだけの話ですよね。
1pxのこだわりの中に、ブラウザが最初から持っている特性を取り入れてみるのもいいんじゃないかなという。そうするかしないかはそれこそ自由です。

| fatalpain | 2008/05/29 1:54 AM |

トラックバック

このエントリーのトラックバックURL

http://necoze.cc/trackback/514

中の人、ご紹介

制作会社でマークアップ芸人、改め、うっかりIA(自称)をやってます。CSSとかHTMLとかでもご飯食べてます。気が弱くて省スペース設計。でも小言が多い、環境に優しくない32歳です。

過去のイベント出演暦