古いとは？/ アイフル
[ 523] *{ margin : 0 }はもう古い！？ - Emotional Web
[引用サイト] http://www.lllcolor.com/web/css/51.html
|
以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。 何故*セレクタを使った手法が時代遅れなのか？それが気になるところですが、主な理由として挙げられているのは下記のようなもの。 確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの このスタイルリセットのやりかたは、色々とバージョンもあるようですしまだまだ研究の余地がありますね。私も自分なりのものを検討してみようかな。 「時代遅れ」なんじゃなくて「すべてを」ってところが「問題だな〜」ってみんなが気づき始めたんじゃないでしょうか？ ボクも最初のころはユニバーサルセレクタを使って、なんとなく「ぜ〜んぶ、リセット！」とかしていたけど、リスト要素なんかで入れ子にしていると全部並列に見えちゃってた（視覚的に）のをきっかけに、 「時代遅れ」という表現よりもみんなが「それぞれの要素を“意識して”コントロール」するようになったことで、みんなが「“なんとなく”リセット」をやらなくなっていったような気がします。 確かに「時代遅れ」という表現は語弊があるかもしれませんね。私もつい最近まではユニバーサルセレクタを用いて「ぜ〜んぶ、リセット！」を行っていたクチです（汗 isaoさんが仰るように「それぞれの要素を“意識して”コントロール」が重要なのでしょうね。今後はそういった個々の要素を意識したCSSの指定方法を模索していこうと思います。 もっとも今のところはFxやOperaやIEやその他メジャーなブラウザのデフォルトスタイルが単純なものばかりなので大丈夫ではありますが……。 擬似クラスや擬似要素はスタイルを適用する「対象を決めるためのもの」で、それ自体がはじめからブラウザ固有のマージンやパディングの値を持っているわけではないと理解しています。それゆえ破綻はしていないと思うのですが、いかがでしょうか？ >擬似クラスや擬似要素はスタイルを適用する「対象を決めるためのもの」で、それ自体がはじめからブラウザ固有のマージンやパディングの値を持っているわけではないと理解しています。 いえ、デフォルトスタイルでも、特に制限はありません。オーサのスタイルと同じくスタイルシートなので、どんなセレクタでも使うことができます。 ととでは違うように表示されますよね。属性によって表示が変わるということは、デフォルトスタイルは属性セレクタで書かれているということです。 という打ち消し方では無力なので、厳密にいえば * { (全部のプロパティに初期値を指定) } とするしかないということになります。みんながそうするようになれば、もしかするとOperaあたりのデフォルトスタイルがもっと華やかになる日が来るかもしれません。 というデフォルトスタイルがあったとすれば個別に指定してやるか、ユニバーサルセレクタでリセットするしかないですね。個人的な考えで言えば、標準準拠が進められている各種ブラウザ間で、抜け駆け的に擬似要素などのスタイルを特殊なものに変えるのは考えにくいかなとは思いますが・・・。一番可能性がありそうなのはOperaですかね(笑) <input>タグに関してはおっしゃる通りですね。ただ、海外の記事などでは、ユニバーサルセレクタを使ったスタイルリセットの弊害として挙げられているのはこのフォーム関連の部分です。例えば下記のようなスタイルを指定したとすると これだとサブミットボタンなどのデフォルトのスタイルが無駄になってしまうわけです。そのためブラウザのデフォルトスタイルの良い部分は有効利用し、無駄を省きましょうというのが主旨のようです。 完全にリセットするならあらゆる擬似要素をもリセットする必要はありますが､ 擬似クラスに属する要素をさらにリセットする必要はありません｡ 擬似要素は全称セレクタや型セレクタでマッチしませんが､ 擬似クラスに属する要素は全称セレクタや型セレクタでもマッチするからです｡ (｢でもセレクタの詳細度が…｣ と考えるかもしれません｡ しかし､ 制作者の宣言はセレクタの詳細度に関係なくブラウザの宣言を上書きします｡ |
アイフルのサイトです。
