2011-12-20 15 views
5

私が構築しなければならないいくつかのレガシーコードは、本当に私にthe cons of global CSS resetを感じさせます。グローバルCSSリセットを適用した後にデフォルトのプロパティを取得する

私は

* {margin:0; padding:0;} 

で始まる古いfoo.css持っていると私はあまりにも私のニーズにそれを微調整、別のファイルbar.cssにそれをコピーするために使用(CSSで出をリセット)、およびそれを使用します私が書いているコードでのみfoo.cssを置き換えてください。私はこれを、サイトの古いセクションとの下位互換性について心配しないようにします。

これは非常に面倒です。グローバルな変更については、両方のファイルを変更する必要があります。だから今、私のbar.cssで始まる、foo.cssを拡張されています

@import url("style.css"); 

問題は、今、私はまた、CSSのリセットを継承するということです。リセットが適用される前のもの -

はバックデフォルト値にいくつかの要素(ヘッダ、リストなど)のmargin & padding性質を持って来るためにどのような方法(†)はありますか?

(†)CSSの仕様で定義されているように、すべてのプロパティを手動で初期値に戻す以外は、

答えて

6

明示的な値を見つけることなくプロパティを初期値に設定するための提案値initialがあります。しかし、それはまだドラフト段階であり、どんなブラウザでもほとんど実装されていません。

さらに、これはおそらく達成したいことではないでしょう。あなたを正しく理解していれば、 h2要素の上と下のマージンは、ブラウザのデフォルトの値になります。私は、CSSでこれを行う方法も提案されていないと思います。仕様はブラウザのデフォルトを定義していません。マージンプロパティの初期値は0です。ヘッダーにデフォルトで上下のマージンがあるのは、ブラウザが少なくとも概念的にはブラウザスタイルシートを適用するということです。 CSSの仕様は、デフォルトのブラウザスタイルシートであるを推奨していますが、ブラウザはそれを強制しないので、ブラウザは提案から逸脱する可能性があります。

実際には、CSS 2.1仕様のAppendix Dをチェックし、そこに記載されている値を使用することをお勧めします。マージンのようなものについては、これはブラウザのデフォルトを使用する効果がほとんどあります。

0

私は* {margin: auto}がマージンをリセットすると思っていましたが(その要素だけがリセットされている場合はh1 {margin: auto})、これは埋め込みには使用できません。技術的には、仕様はすでにパディングが0になっていますが、ブラウザがそれ以外の方法で実装すると、リセットする方法はないと思います。

1

あなたはブラウザのデフォルトに戻すことを望むのではなく、自分で設定するのはなぜですか?

あなたがする必要がありますすべてはあなたのグローバルCSSリセットの下であなたの宣言を追加します:

* { margin: 0; } 
h1 { margin: 10px 0; } 

h1は、グローバルセレクタ*よりも優先されます。

これはnormalize your CSSに役立ちます。

関連する問題