Zenn
🎨

modern-normalize と tailwindcss Preflight の差分比較まとめ

2024/09/21に公開
CSS
Tailwind CSS
tech

はじめに

modern-normalize のルールを独自で拡張していたところ、既に拡張されている tailwindcss Preflight（以下、Preflight）を見つけ、差分が気になったのでまとめました。
早く差分を見たい方はこちら

ノーマライズCSSとは

ChromeやFirefoxなど異なるブラウザ間でのデフォルトスタイルの差異を解消し、一貫した表示を実現するためのCSSです。これを使用することで、HTML要素がどのブラウザでも同じように表示されるようになり、ブラウザごとのスタイルの違いに悩まされることがなくなります。

modern-normalize とは

modern-normalizeは、normalize.cssをモダンブラウザ用に最適化したスタイルシートです。
※normalize.cssは、様々なWebサイトで使用されている人気のノーマライズCSSです。
https://github.com/sindresorhus/modern-normalize

Preflight とは

Preflightとは、modern-normalizeを拡張したノーマライズCSSです。
https://tailwindcss.com/docs/preflight

modern-normalize と Preflight 差分比較

modern-normalize にあるが、Preflight にないセレクター

こちらはありませんでした。全てのセレクターを踏襲しています。

Preflight にあるが、modern-normalize にないセレクター・プロパティ

preflight.css
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-feature-settings: theme("fontFamily.sans[1].fontFeatureSettings", normal);
  font-variation-settings: theme("fontFamily.sans[1].fontVariationSettings", normal);
  -webkit-tap-highlight-color: transparent;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder, textarea::placeholder {
  opacity: 1;
  color: theme("colors.gray.400", #9ca3af);
}

button, [role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}

セレクター・またはプロパティに相違があるもの

*, ::before, ::after セレクターのプロパティ比較

modern-normalize.css
*, ::before, ::after {
  box-sizing: border-box;
}
preflight.css
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: theme("borderColor.DEFAULT", currentColor);
}

::before, ::after {
  --tw-content: "";
}

html セレクターのプロパティ比較

modern-normalize.css
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;
}
preflight.css
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: theme("fontFamily.sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
  font-feature-settings: theme("fontFamily.sans[1].fontFeatureSettings", normal);
  font-variation-settings: theme("fontFamily.sans[1].fontVariationSettings", normal);
  -webkit-tap-highlight-color: transparent;
}

body セレクターのプロパティ比較

modern-normalize.css
body {
  margin: 0;
}
preflight.css
body {
  margin: 0;
  line-height: inherit;
}

code, kbd, samp, pre セレクターのプロパティ比較

modern-normalize.css
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}
preflight.css
code, kbd, samp, pre {
  font-family: theme("fontFamily.mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  font-feature-settings: theme("fontFamily.mono[1].fontFeatureSettings", normal);
  font-variation-settings: theme("fontFamily.mono[1].fontVariationSettings", normal);
  font-size: 1em;
}

table セレクターのプロパティ比較

modern-normalize.css
table {
  border-color: currentcolor;
}
preflight.css
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea セレクターのプロパティ比較

modern-normalize.css
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
preflight.css
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"], [type="submit"] セレクター・プロパティ比較

modern-normalize.css
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
preflight.css
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

完全に一致しているセレクター・プロパティ

modern-normalize.css / preflight.css
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;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

summary {
  display: list-item;
}

Discussion