🎨
Normalize.css と modern-normalize の差分比較まとめ
はじめに
人気のノーマライズCSSである Normalize.css
とそれを参考に作られた modern-normalize
の差分が気になったのでまとめました。
早く差分を見たい方はこちら
ノーマライズCSSとは
ChromeやFirefoxなど異なるブラウザ間でのデフォルトスタイルの差異を解消し、一貫した表示を実現するためのCSSです。これを使用することで、HTML要素がどのブラウザでも同じように表示されるようになり、ブラウザごとのスタイルの違いに悩まされることがなくなります。
Normalize.css
とは
Normalize.css
は、現在様々なWebサイトで使用されている人気のノーマライズCSSです。
他のものと比べても人気があるのがわかります。
参考:https://npmtrends.com/modern-normalize-vs-normalize.css-vs-ress
modern-normalize
とは
modern-normalize
は、normalize.css
をモダンブラウザ用に最適化したスタイルシートです。
Normalize.css
と modern-normalize
差分比較
Normalize.css
にあるが、modern-normalize
にないセレクター
normalize.css
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
button, input {
overflow: visible;
}
button, select {
text-transform: none;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
textarea {
overflow: auto;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
details {
display: block;
}
template {
display: none;
}
[hidden] {
display: none;
}
modern-normalize
にあるが、Normalize.css
にないセレクター・プロパティ
modern-normalize.css
*, ::before, ::after {
box-sizing: border-box;
}
table {
border-color: currentcolor;
}
セレクター・またはプロパティに相違があるもの
html
セレクターのプロパティ比較
normalize.css
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
modern-normalize
html {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.15;
-webkit-text-size-adjust: 100%;
tab-size: 4;
}
code, kbd, samp, pre
セレクターのプロパティ比較
normalize.css
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
modern-normalize
code, kbd, samp, pre {
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1em;
}
legend
セレクターのプロパティ比較
normalize.css
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
modern-normalize
legend {
padding: 0;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button
セレクター比較
normalize.css
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
modern-normalize
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
::-webkit-search-decoration
セレクター比較
normalize.css
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
modern-normalize
::-webkit-search-decoration {
-webkit-appearance: none;
}
完全に一致しているセレクター・プロパティ
normalize.css / modern-normalize
body {
margin: 0;
}
b, strong {
font-weight: bolder;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
progress {
vertical-align: baseline;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
Discussion