[CSS]便利なのが登場!normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize

ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートを紹介します。

「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。

サイトのキャプチャ

modern-normalize -GitHub

modern-normalizeの特徴

modern-normalizeは、ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートです。

normalize.cssとの相違点

  • 軽量で、コンパクト。
  • 最新のモダンブラウザをサポート。
  • 「box-sizing: border-box;」を採用。
  • デフォルトのフォントの一貫性を向上。
  • タブのサイズをより読みやすく設定。

サポートブラウザ

  • 最新のChrome
  • 最新のFirefox
  • 最新のSafari

MITライセンスで、個人でも商用でもクライアントのプロジェクトでも利用できます。

modern-normalizeの使い方

リセット用CSSと同様に、外部スタイルシートとしてhead内に記述します。

modern-normalizeの中身

v.0.4.0を項目ごとに翻訳してみました。

html, :rootなどのドキュメントの定義

セクション系の定義

グルーピング コンテンツ系の定義

テキスト系の定義

フォーム系の定義

インタラクティブ系の定義

modern-normalize.min.css

コメントや改行が削除された軽量版もリリースされています。

sponsors

top of page

©2018 coliss