CSSを未設定にしてリセットする

ここ数年、私は CSS プロパティをリセットするために unset キーワードを頻繁に利用してきました。プロパティをリセットするために直感的に使用していることに気づきました。しかし、私にとって直感的なものは、あなたにとって直感的ではないかもしれません。はっきりさせておきます。

設定を解除する

たとえば、要素から境界線を削除するために、age に対して border: none を使用しました。最近、border: unset を使用しているので、境界線が消えてしまいました。

境界線は非継承プロパティであるため簡単です。つまり、子要素は親要素から値を継承しません。

マージンとパディングについても同様で、定期的にリセットする必要があります。

しかし、継承されたプロパティについてはどうでしょうか?以下の例では、最後のボタンの色が青色になります。これは、プロパティの設定解除は本質的に、継承されたプロパティの色を継承することを意味しており、ボタンはこれを実行し、色を青に設定しているためです。

継承とカスケード

これらのことは、継承について知識のある経験豊富な CSS 開発者である私にとっては理にかなっています。しかし、初心者にとって、これらの概念は簡単ではありません。あえて言えば、ほとんどの初心者は継承プロパティと非継承プロパティについて聞いたことさえないか、忘れている可能性があります。彼らは、同じではないカスケードについて学ぶかもしれません。

最終的なスタイルは、カスケード、特異性、継承などに基づいています。 MDN には、カスケード、特異性、継承についての非常に充実した記事があります。

ここで継承の概念も重要です。これは、デフォルトで、現在の要素の親要素に設定された値を継承する CSS プロパティと継承しない CSS プロパティがあることを意味します。これにより、予期しない動作が発生する可能性もあります。

— MDN

最後の文は、継承で何が起こるか分からず、怖く思えます。どのプロパティがその親から値を継承するかを覚えていれば役立つかもしれませんが、それは時間の経過とともに起こります。その情報を見つけるのは面倒です。ドキュメントにアクセスしたり、メモ内で検索したりする必要があります。重要なことは、継承が存在することと、特に unset キーワードを使用する場合に問題が発生する可能性があることを認識することです。

これらのプロパティの設定を安全に解除します

継承されていないため、設定を解除しても安全な、私が頻繁に設定解除するプロパティをリストすると便利かもしれないと考えました。

• 背景 (および背景色、背景画像などのすべてのプロパティ)
• border (および border-width、border-style などのすべてのプロパティ)
• border-radius (および border-top-left-radius、border-start-start-radius などのすべてのプロパティ)
• margin (および margin-top、margin-block-start などのすべてのプロパティ)
• パディング (およびそのすべてのプロパティ (padding-top、padding-block-start など)
• 最小身長
• 最小ブロックサイズ
• 最小幅
• 最小インラインサイズ
• 最大高さ
• 最大ブロックサイズ
• 最大幅
• 最大インラインサイズ
• 位置
• トップ
• 下
• 左
• そうです
• inset (および inset-block、inset-inline などのすべてのプロパティ)
• グリッド (およびそのすべてのプロパティ (grid-template-columns、grid-columns、align-items、row-gap など))
• flex (および flex-basis、flex-direction、align-items、row-gap などのすべてのプロパティ)

結論

CSS プロパティをリセットする場合は、unset キーワードが便利です。ただし、作業しているプロパティの継承を考慮することが重要です。

最大限の安全性を確保したい場合は、継承されていないプロパティの設定を解除することが最善の選択肢となる可能性があります。これにより、潜在的なリスクを排除し、スタイルシートが安全であるという安心感を得ることができます。

以上がCSSを未設定にしてリセットするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。