CSSの最新仕様はこんなにすごい！ PostCSSプラグインで未来を先取り

どんどん進化しているCSS。コーディングが捗る新しいプロパティや値を使いたいけど、ブラウザー対応が…。でも、CSS変換ツール「PostCSS」の便利なプラグインを利用したら、CSSの最新仕様を心置きなく使えちゃうそうですよ。

前にSitePointで書いた記事『The PostCSS Guide to Improving Selectors and Media Queries』の説明から引き続き、CSSの利用範囲を広げるPostCSSプラグインを紹介します。以前の記事ではセレクターとメディアクエリを拡張することでスタイルシートの構造改善に主眼を置きました。今回は、最新仕様のプロパティや値の実装を中心に紹介します。記事で紹介するプラグインにはそれぞれ異なった機能が備わっており、ニーズに応じて単体でも、組み合わせても効果的に利用できます。

私が個人的に気に入っているものから紹介します。

リセットをもっと簡単に

CSS3には素晴らしい機能が2つあります。initial値とallプロパティです。initial値はinheritとunsetと一緒に使うと、プロパティをもとの値に再設定できます。allプロパティはショートハンドプロパティで、すべてのプロパティをここで紹介する3つの状態の1つに再設定できます。1つを単独で使ってもおもしろいのですが、組み合わせて使うと特定の要素のスタイルすべてをすばやく再設定でき、ページの親要素からスタイルを継承しないように設定できます。新しいモジュラーCSSの記述方法です！

残念ながらどちらの機能もまだIEではサポートされていません。しかし、もう予測していたかもしれませんが、IEのためのプラグインがあります。

Postcss-initialはinitial値とall: initialの組み合わせをサポートする機能を追加します。以下のような仕組みになっています。

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

以下のようにコンパイルされます。

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

デフォルト設定では、initial値を持つプロパティには、先ほどの機能をはじめから備えているブラウザーを使って対応します。

同様に、allプロパティもリセットプロパティを長く羅列したものに変換されます。

.container {
  all: initial;
}

上記のコードは以下のように変換されます。

.container {
  animation: none 0s ease 0s 1 normal none running;
  backface-visibility: visible;
  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
  border: medium none currentColor;
  border-collapse: separate;
  border-image: none;
  border-radius: 0;
  border-spacing: 0;
  bottom: auto;
  box-shadow: none;
  box-sizing: content-box;
  caption-side: top;
  clear: none;
  clip: auto;
  color: #000;
  columns: auto;
  column-count: auto;
  column-fill: balance;
  column-gap: normal;
  column-rule: medium none currentColor;
  column-span: 1;
  column-width: auto;
  content: normal;
  counter-increment: none;
  counter-reset: none;
  cursor: auto;
  direction: ltr;
  display: inline;
  empty-cells: show;
  float: none;
  font-family: serif;
  font-size: medium;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-stretch: normal;
  line-height: normal;
  height: auto;
  hyphens: none;
  left: auto;
  letter-spacing: normal;
  list-style: disc outside none;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  orphans: 2;
  outline: medium none invert;
  overflow: visible;
  overflow-x: visible;
  overflow-y: visible;
  padding: 0;
  page-break-after: auto;
  page-break-before: auto;
  page-break-inside: auto;
  perspective: none;
  perspective-origin: 50% 50%;
  position: static;
  right: auto;
  tab-size: 8;
  table-layout: auto;
  text-align: left;
  text-align-last: auto;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  transform: none;
  transform-origin: 50% 50% 0;
  transform-style: flat;
  transition: none 0s ease 0s;
  unicode-bidi: normal;
  vertical-align: baseline;
  visibility: visible;
  white-space: normal;
  widows: 2;
  width: auto;
  word-spacing: normal;
  z-index: auto;
  all: initial;
}

BEMまたはSuitなどを利用している場合、このプラグインはブロックやコンポーネントレベルの要素のスタイルを自動的にリセットするpostcss-autoresetと相性が良いです。

プロパティのカスタマイズ

レイアウトを調整する場合、スタイルシート全体でいくつかの値をしばしば共有する必要があります。たとえば、ブランドカラーをボタンの背景、リンクの文字色、テキストブロックのボーダーなどいろいろなところで使うかもしれません。現在、このような調整は、ブランドカラーを適用する1つ1つの箇所で色の設定を繰り返す必要があります。繰り返しが必要になると、全体に適用されている色を変更するにあたってカラーパレットを統一するのが大変です。

LessやSassなどのCSSプリプロセッサーは、変数を使ってこの問題を解決します。幸い、W3Cはカスタムプロパティ（custom properties）と呼ばれる類似のコンセプトを開発中です。カスタムプロパティはスタイルシート全体で共有している値の調整ができますが、プリプロセッサーの変数とは違った仕組みで解決しています。LessやSassはコンパイル時に変数を求めます。LessまたはSassをCSSにコンパイルする場合、コンパイラーはその時点でのコンパイル範囲に対応する変数宣言を探し、各インスタンスを対応する値に置き換えます。つまり、もっぱらコードのどこで使われるかで求められる変数の値が変わります。カスタムプロパティも同様にDOMの要素のために定義され、子要素だけがこのプロパティを利用できます。つまり、変数の値はDOMの要素がどこにあるかによって変わり、ランタイムによってのみ求められます。

ここまで読んで眉をひそめられた方も多いのではないでしょうか。変数の値がランタイムによってのみ求められる場合、どうやってPostCSSプラグインでこの値を求めるのでしょうか。求めることができないというのが正しいです。しかし、この機能の一部を使う方法はあります。すべてのカスタムプロパティを:root要素で定義すれば、カスタムプロパティはページのすぺての要素を利用できます。つまり、コンパイル時に上記のプロパティを求められるのです。

以下に表示される例を書いておきます。

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

コンパイル後は以下のようになります。

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

--font-size変数が定義されていないことに注意してください。そのため、20pxのフォールバック値と置き換えます。大切なことは、すべてのカスタムプロパティを:rootに入れておくことです。:root以外で定義されたカスタムプロパティには対応するプラグインがないため無視します。最初は:rootから始めて、サポートを開始するブラウザーが増えたら用途を広げられます。Chromeは、バージョン49からすでにこの機能をサポートしています。

ロジカルプロパティ

もしさまざまな書き方の指示が規定される文化の海外向けWebサイトの開発をしたことがあるなら、左から右、右から左へ動くようなさまざまなインターフェイスの保守が大変なことは知っているでしょう。このニーズに応えるため 、W3Cはロジカルプロパティ（logical properties）という新しいコンセプトを紹介しています。この手法は右から左へというような物理的な指示よりむしろ、始めから終わりというような論理的な指示の観点から思考するものです。この仕様はまだ完成していませんが、postcss-logical-propsプラグインを使ってこの手法を試せます。

この手法はborder-block-start、border-block-end、offset-block-start、offset-block-endなどある種のロジカルプロパティを利用して左から右へ、右から左へ動くWebサイトの作成をサポートしています。これらのプロパティは左または右の選択肢にコンパイルされます。プラグインを使ってLTRやRTL版両方のスタイルシートをコンパイルしてから、ユーザーが言語を変更した場合にアプリでLTRとRTLを切り替えられます。

たとえば、以下のようなCSSで利用できます。

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

オプションの{dir:'LTR'}を使ってプラグインを呼び出すと、以下のように表示されます。

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

一方、{dir:'RTL'}を利用してもまったく同じ表示になります。

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

新しい色に関する機能

PostCSSには、色の設定をするための新しい機能を提供するプラグインがあります。

色の調整

postcss-color-functionプラグインは新しいcolor()関数を実装します。この関数を使えば1つまたは複数の「色調整」関数を使用してベースの色を修正できます。色調整関数の1つ1つが特定の方法で色を操作します。

利用例を紹介します。

body {
  color: color(red green(50));
  color: color(red blue(50) a(50%));
  color: color(red tint(50%));
  color: color(red shade(50%));
}

以下の色にコンパイルされます。

body {
  color: rgb(255, 50, 0);
  color: rgba(255, 0, 50, 0.5);
  color: rgb(255, 128, 128);
  color: rgb(128, 0, 0);
}

仕様に色調整関数の一覧があります。このプラグインはカスタムプロパティと一緒に使うと非常に効果的です。ベースとなる色をまとめて定義し、ベースカラーに基づいてほかの色を考えられます。ベースカラーを変更する場合はパレットの残りの色は適宜更新されます。

HWB色表記

HWB色（Hue-Whiteness-Blackness）は、色を定義する代替的な方法です。0から360までの色値を利用して色を表し、0%から100%の範囲で白黒度合いを調整します。この表記はHSLに似ており、RGBよりもいくらか理解しやすいものです。このpostcss-color-hwbプラグインはHWB色を定義するために使われる新しいhwb()関数を実装します。以下に例を挙げます。

body {
  color: hwb(0, 0%, 0%);
  color: hwb(120, 40%, 20%);
  color: hwb(240, 0%, 100%, 0.5);
}

上の設定で、次の色を作成します。

body {
  color: rgb(255, 0, 0);
  color: rgb(102, 204, 102);
  color: rgba(0, 0, 0, 0.5);
}

Gray()関数

CSSカラーモジュールは便利なgray()関数を利用します。この関数はグレー色を適用するために利用されており、RGB色の3つのチャンネルのような冗長な情報を指定する必要はありません。postcss-color-grayプラグインはこの関数のポリフィルを実装しており、非常に使いやすいです。

body {
  color: gray(0);
  color: gray(25);
  color: gray(50%);
  color: gray(128, 20%);
}

上のコードは異なった色調のグレーを適用します。

body {
  color: rgb(0, 0, 0);
  color: rgb(25, 25, 25);
  color: rgb(127, 127, 127);
  color: rgba(128, 128, 128, 0.2);
}

最後に

今回の記事は、CSSプラグインのリストというより、使っておもしろそうなものをいくつかピックアップして紹介しました。もっと知りたい人はpostcss.partsを参照してください。

CSSはトレンドになっていますが、PostCSSも人気です。この記事で紹介した新しい機能をサポートできるネイティブブラウザーが早く現れると良いのですが、PostCSSのおかげでこれらの機能を早期に利用、評価できる末頼もしい機会をもたらしてくれます。みなさんへのアドバイスは、試しに使い慣れたプリプロセッサーの利用をやめ、新しい観点からスタイルシートを記述することです。作業効率を上げるために利用できる機能を考え、ワークフローに取り入れてください。ずっと前から欲しかったものだと気づくかもしれませよ。

（原文：Enabling Upcoming CSS Features with PostCSS）

［翻訳：中村文也］
［編集：Livit］