CSSリセットはこれで決まり!モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。

normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。

ress -モダンブラウザのためのCSS Reset

ress -GitHub

参考:
normalize.cssの特徴とコード
2015年、Web制作者が押さえておきたいCSSの各種リセット

ressの特徴

ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースなるよう設計されたものです。

  1. すべての要素に、「box-sizing: border-box;」を適用。
  2. すべての要素に、「padding」と「margin」をリセット。
  3. すべての要素に、「background-repeat: no-repeat;」を指定。
  4. 「::before」と「::after」に、「text-decoration」と「vertical-align」を継承。
  5. すべてのブラウザにおいて、ホバー時の「outline」を削除。
  6. コード要素に、「font-family: monospace;」を適用。
  7. input要素に、「border-radius」をリセット。
  8. フォーム要素に、フォントの継承を指定。
  9. すべてのブラウザにおいて、デフォルトのボタンのスタイルを削除。
  10. textarea要素に、垂直方向のリサイズを指定。

対応ブラウザ

対応ブラウザは下記の通り、対応バージョンは最新版と一つ前版です。

  • Chrome (last two)
  • Edge (last two)
  • Firefox (last two)
  • Firefox ESR
  • Internet Explorer 8+
  • Opera (last two)
  • Safari 6+

ライセンス

MITライセンス

ress: html, グローバルセレクタの定義

カスタマイズといっても中身はほんの少しでなく、けっこう異なります。

各スタイルの説明を翻訳しました。
※原文も残しています。

ress: 一般的な要素の定義

ress: フォーム要素の定義

ress: メディア要素の定義

ress: アクセシビリティ用の定義

ress: ::selectionの定義

top of page

©2017 coliss