LoginSignup
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@nju33(純)

postcss-normalizeを使って対象ブラウザに関係あるルールだけのnormalize.cssを使う

Last updated at Posted at 2017-07-30

注意点

opinionatedなルールは入らないっぽいです。v7では次の２つのルールが対象です。（個人的にbody{margin:0}は欲しいと思ったんですが、色々読んだ感じそう思わない人も多い…？、v6じゃそもそも削除されてたし）

body {
  margin: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0; /* これだけopinionatedじゃない */
}

こんな人へ

CSSの無駄を減らすという、やりこみ要素を見出してる人。

使う

postcss-normalizeのシンタックスとして、CSSの頭に次の一文を入れます。cssに書くことは終わりです。

@import-normalize;

依存パッケージをインストールして、

npm i -D postcss postcss-normalize

さっそく変換してみます。（ダイレクトにcssの内容を書いちゃってます）

index.js
const postcss = require('postcss');
const normalize = require('postcss-normalize');

postcss([normalize])
  .process('@import-normalize;')
  .then(({css}) => {
    console.log(css);
  })

node index.js

@import-normalizeとした箇所が、ままのnormalize.cssの内容に置き換わってます。

html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
h1 {
    font-size: 2em;
    margin: 0.67em 0
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}
main {
    display: block
}
pre {
    font-family: monospace, monospace;
    font-size: 1em
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted
}
b,
strong {
    font-weight: bolder
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
small {
    font-size: 80%
}
img {
    border-style: none
}
svg:not(:root) {
    overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
    margin: 0
}
button {
    overflow: visible;
    text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}
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
}
input {
    overflow: visible
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}
progress {
    display: inline-block;
    vertical-align: baseline
}
select {
    text-transform: none
}
textarea {
    overflow: auto
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
details {
    display: block
}
summary {
    display: list-item
}
template {
    display: none
}
[hidden] {
    display: none
}

対象ブラウザに関係あるものだけでフィルター

browsers:というオプションを設定します。autoprefixerを使ってるなら、そのbrowsersで指定するものと同じものを指定しとけばいいと思います。

以下いろいろ例です。

Chromeの最新から２つ目まで対象

normalize({
  // chrome 60 chrome 59
  browsers: ['last 2 chrome versions']
})
last-2-chrome-versions.css
html {
    line-height: 1.15
}
h1 {
    font-size: 2em;
    margin: 0.67em 0
}
pre {
    font-family: monospace, monospace;
    font-size: 1em
}
b,
strong {
    font-weight: bolder
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
small {
    font-size: 80%
}
legend {
    padding: 0
}
progress {
    vertical-align: baseline
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}
[type="search"] {
    -webkit-appearance: textfield
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
summary {
    display: list-item
}

ChromeとFirefoxの最新から２つ目まで対象

normalize({
  // chrome 60 chrome 59 firefox 54 firefox 53
  browsers: ['last 2 chrome versions', 'last 2 firefox versions']
})
last-2-chrome-versions_last-2-firefox-versions.css
html {
    line-height: 1.15
}
h1 {
    font-size: 2em;
    margin: 0.67em 0
}
hr {
    box-sizing: content-box;
    height: 0
}
pre {
    font-family: monospace, monospace;
    font-size: 1em
}
b,
strong {
    font-weight: bolder
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
small {
    font-size: 80%
}
button,
input,
optgroup,
select,
textarea {
    margin: 0
}
button {
    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
}
legend {
    padding: 0
}
progress {
    vertical-align: baseline
}
select {
    text-transform: none
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}
[type="search"] {
    -webkit-appearance: textfield
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
summary {
    display: list-item
}

メジャーなブラウザすべての最新から２つ目まで対象

normalize({
  // and_chr 59 and_ff 54 and_qq 1.2 and_uc 11.4 android 56 android 4.4.3-4.4.4
  // baidu 7.12 bb 10 bb 7 chrome 60 chrome 59 edge 15 edge 14
  // firefox 54 firefox 53 ie 11 ie 10 ie_mob 11 ie_mob 10 ios_saf 10.3 ios_saf 10.0-10.2
  // op_mini all op_mob 37 op_mob 12.1 opera 46 opera 45 safari 10.1 safari 10
  // samsung 5 samsung 4
  browsers: ['last 2 versions']
})
last-2-versions.css
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
h1 {
    font-size: 2em;
    margin: 0.67em 0
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}
main {
    display: block
}
pre {
    font-family: monospace, monospace;
    font-size: 1em
}
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}
abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted
}
b,
strong {
    font-weight: bolder
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
small {
    font-size: 80%
}
img {
    border-style: none
}
svg:not(:root) {
    overflow: hidden
}
button,
input,
optgroup,
select,
textarea {
    margin: 0
}
button {
    overflow: visible;
    text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}
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
}
input {
    overflow: visible
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}
progress {
    display: inline-block;
    vertical-align: baseline
}
select {
    text-transform: none
}
textarea {
    overflow: auto
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}
details {
    display: block
}
summary {
    display: list-item
}
template {
    display: none
}
[hidden] {
    display: none
}

分からない部分はbrowserslistを参照してください。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?