現在の制作環境に合うよう開発された、使い勝手がよさそうな新しいCSSリセット -Destyle.css

使い勝手がよさそうな新しいCSSリセットがリリースされたので、紹介します。

Destyle.cssは現在の制作環境に合うよう開発されたCSSリセットで、Eric MeyerのリセットとNormalize.cssの不満点を解消するようスタイルのリセットと正規化の両方が実現されています。

Destyle.css
Destyle.css -GitHub

• Destyle.cssの特徴
• Destyle.cssのサポートブラウザ
• Destyle.cssの使い方

Destyle.cssの特徴

Eric Meyerのリセットは必要としない要素・未使用の要素・非推奨の要素もリセットされています。これによりスタイルは肥大化され、開発およびデバッグの効率が低下してしまいます。また、Normalize.cssは要素がブラウザ間で一貫して見えるようにうまく機能しますが、UAごとのスタイルは削除されずに残ります。

Destyle.cssではこれらを解消するために、スタイルのリセットと正規化の両方が実現されています。

• ブラウザ間の一貫性を確保します（normalize.cssに感謝します）。
• スペース（marginとpadding）をリセット。
• font-sizeとline-heightをリセット。
• ユーザーエージェントスタイルを再設定する必要性を防ぎます。
• 必要なものだけを対象にすることで、スタイルの肥大化を防止。
• あらゆる種類のスタイルのアプローチ（TachyonsのようなAtomicライブラリやReactのcss-in-jsのようなコンポーネントベースのスタイル）、そして古き良きcssでもうまく機能します。

Destyle.cssのサポートブラウザ

Destyle.cssのサポートブラウザは、下記の通り。

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera

Destyle.cssの使い方

外部ファイル

通常のCSSリセットと同様に、HTMLに外部ファイルとして記述するだけです。

お勧めの使い方

あなたのCSSファイルでbodyにカラーとベースフォントを定義します。他のすべての要素はこのbodyの定義を継承します。

ページごとにスタイルを変更する場合

例えば、h1要素を記事ページでは大きく太字にし、プロフィールページでは小さくグレーにする場合、セマンティクスを維持しながらデフォルトのスタイルを上書きする必要なく、h1に2つの異なるスタイルを作成するのは簡単です。

スタイルの再設定は不要で、それぞれのスタイルを定義します。

HTMLはそれぞれ下記のようになります。

注意事項

• ボックスモデルは*セレクタを使ってborder-boxにリセットされています。
• buttonとinputもリセットされています。
• code, pre, kbd, sampは等幅フォントです。
• hrは、親のテキストのカラーから継承された1pxの実線に設定されています。
• スタイルを持つインライン要素（b, i, strongなど）はリセットされません。
• textareaはデフォルトの高さを維持します。
• canvasとiframeはデフォルトの幅と高さを維持します。
• selectはappearance: none;でリセットされています。
• range, color, meter, progressなどのHTML5の要素はリセットされません。