CSSリセットに代わるモダンな方法
翻訳
README.md(本ページ)とnormalize.cssを日本語に翻訳しました。
NPM
npm install --save normalize.css
CDN
See https://yarnpkg.com/en/package/normalize.css
Download
See https://necolas.github.io/normalize.css/latest/normalize.css
- 多くのCSSリセットとは異なり、有用なデフォルトを保持します。
- さまざまな要素のスタイルを正規化(normalize)します。
- バグや一般的なブラウザの不整合を修正します。
- 精緻な修正で使い勝手を向上させます。
- コメントで、コードが何をするのかを説明しています。
- Chrome
- Edge
- Firefox ESR+
- Internet Explorer 10+
- Safari 8+
- Opera
normalize.cssの難しい部分の詳細と解説を追加しました。
font-family: monospace, monospace
は、フォーマット済みテキストのフォントサイズの継承とスケーリングを修正します。
monospace
の重複は意図的なものです。
出典.
通常、sub
やsup
を使用すると、すべてのブラウザでテキストの行ボックスの高さに影響を与えます。
出典.
デフォルトで、OS XのChromeとOS XのSafariでborderプロパティが定義されていない限り、select
のスタイル定義が非常に制限されます。
OS XのChromeとOS XのSafariで、optgroup
要素のデフォルトのフォントのウェイトは安全に変更できません。
Firefoxの実装では、box-sizing, padding, widthを考慮していないため、チェックボックスとラジオボタンのスタイルを定義しないことをお勧めします。
数値入力に適用されるフォントサイズの値によっては、カーソルのスタイルがdefault
からtext
に変更されることがあります。
デフォルトで、検索の入力欄は完全にスタイル可能ではありません。OS X/iOSのChromeとSafariでは、font
, padding
, border
, background
をコントロールできません。また、WindowsのChromeでは、border
をコントロールできません。border-width
は適用されますが、ボーダーの外側1px分のボーダーカラー(コントロールできません)しか表示されません。
-webkit-appearance: textfield
を適用することで、検索の入力欄の利点(過去の検索結果を表示するなど)を損なうことなく、これらの問題を解決できます。
投稿に関わるすべての人が簡単かつ効果的に投稿できるよう、contribution guidelinesをご覧ください。