Skip to content

normalize.css -CSSリセットに代わるモダンな方法

License

Notifications You must be signed in to change notification settings

coliss/normalize.css

 
 

Repository files navigation

normalize.css

Normalize Logo

CSSリセットに代わるモダンな方法

npm license changelog gitter

翻訳

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の難しい部分の詳細と解説を追加しました。

pre, code, kbd, samp

font-family: monospace, monospaceは、フォーマット済みテキストのフォントサイズの継承とスケーリングを修正します。 monospaceの重複は意図的なものです。 出典.

sub, sup

通常、subsupを使用すると、すべてのブラウザでテキストの行ボックスの高さに影響を与えます。 出典.

select

デフォルトで、OS XのChromeとOS XのSafariでborderプロパティが定義されていない限り、selectのスタイル定義が非常に制限されます。 OS XのChromeとOS XのSafariで、optgroup要素のデフォルトのフォントのウェイトは安全に変更できません。

[type="checkbox"]

Firefoxの実装では、box-sizing, padding, widthを考慮していないため、チェックボックスとラジオボタンのスタイルを定義しないことをお勧めします。

[type="number"]

数値入力に適用されるフォントサイズの値によっては、カーソルのスタイルがdefaultからtextに変更されることがあります。

[type="search"]

デフォルトで、検索の入力欄は完全にスタイル可能ではありません。OS X/iOSのChromeとSafariでは、font, padding, border, backgroundをコントロールできません。また、WindowsのChromeでは、borderをコントロールできません。border-widthは適用されますが、ボーダーの外側1px分のボーダーカラー(コントロールできません)しか表示されません。 -webkit-appearance: textfieldを適用することで、検索の入力欄の利点(過去の検索結果を表示するなど)を損なうことなく、これらの問題を解決できます。

その他のCSSリセット・ノーマライズ

モダンブラウザに適したCSSリセットのまとめ

貢献

投稿に関わるすべての人が簡単かつ効果的に投稿できるよう、contribution guidelinesをご覧ください。

About

normalize.css -CSSリセットに代わるモダンな方法

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 100.0%