「The New CSSリセット」に関するElad Shechterとのインタビュー

このインタビューでは、Elad Shechterの革新的なCSSリセットプロジェクト「The-New-CSS-Reset」は、最先端のCSS機能を活用する最新のアプローチです。単にコードを提示する代わりに、その作成とその機能の複雑さの背後にある理由を掘り下げます。

完全なリセットコードは次のとおりです。

 /***新しいCSSリセット -バージョン1.2.0（最終更新23.7.2021）***/

/ *「ディスプレイ」を除くすべてのスタイルを削除 */
*：where（：not（iframe、canvas、img、svg、video）：not（svg *））{
  すべて：控えめな;
  表示：復帰;
}

/ *優先ボックスサイジング */
*、
*：：前に、
*：：後 {
  ボックスサイズ：ボーダーボックス;
}

/ *リストスタイルを削除 */
ol、ul {
  リストスタイル：なし;
}

/ *画像がコンテナを超えるのを防ぐ */
img {
  最大幅：100％;
}

/ *テーブルの境界線 */
テーブル {
  国境崩壊：崩壊;
}

/ * safari textareasの「ホワイトスペース」を元に戻す */
Textarea {
  ホワイトスペース：復帰;
}

Eladは、既存のリセットが古いCSS機能に依存していることを強調して、新しいリセットの必要性を説明しています。彼のアプローチは、より効率的で有効なリセットのために新しい機能を活用しています。彼は、アプローチをremormize.css（ブラウザの矛盾の修正に焦点を当てたより穏やかなアプローチ）とエリックマイヤーのCSSリセット（ほとんどのデフォルトスタイルを削除するより積極的なアプローチ）と対比しています。 Eladは、remormize.cssとハードリセットの両方を使用して、強みを組み合わせて支持します。

新しいリセットのコアはall: unset; 。この強力なプロパティは、すべての継承されたプロパティをリセットして、 inheritに継承されていないプロパティをinitialにリセットし、デフォルトのブラウザスタイルを効果的に削除します。ただし、 display例外です。 all: unset;望ましくないinlineにdisplayされます。したがって、 display: revert;各要素のブラウザのデフォルトdisplay値を復元し、適切なレイアウトを確保するために使用されます。 revertキーワードは、利用可能な場合はユーザーエージェントStylesheetのデフォルトdisplay値をunsetに取得します。

selector *:where(:not(iframe, canvas, img, svg, video):not(svg *)) 、それらを除くほぼすべての要素をターゲットにします（<iframe></iframe> 、<canvas></canvas>など）寸法は、CSSリセットではなく属性を介して最適に制御され、意図しない結果を防ぎます。 :where()擬似クラスは特異性を最小限に抑え、プロジェクト固有のスタイルとの競合を回避します。別の:not(svg *)除外は、SVG要素の完全性を保護します。

リセットにはbox-sizing: border-boxのような意見のあるスタイルも含まれています。これは、ブラウザの矛盾ではありませんが、ベストプラクティスとして広く採用されています。リストスタイルの削除（ list-style: none; ）は、セマンティックな意味にもかかわらず、マーカーが不要なナビゲーションのリストの一般的な使用によって正当化されます。

Eladは、彼のプロジェクトの繰り返しのニーズに駆られている将来の潜在的な追加について議論しています。 max-width: 100%;画像のルールは、可能性のある候補として提示されます。彼はまた、今後のカスケードレイヤーモジュールの影響について推測し、スタイルオーバーライドに層状のアプローチを提供することにより:where()のような特異性を低減する技術の必要性を排除できることを示唆しています。これにより、プロジェクト固有のスタイルからリセットスタイルをよりクリーンに分離できます。

以上が「The New CSSリセット」に関するElad Shechterとのインタビューの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。