カスタム・プロパティと cssnext
CSS Talk vol.2
2017.01.28 matsuo @ TAM

自己紹介
• 松尾浩志
• TAM inc. CTO・エンジニア・テクニカルディレクタ
もともとサーバーサイドエンジニア、現在のメイン言語は PHP + JS
• PHPカンファレンス関西 スタッフ ほか
• TAM は 受託中心のWEB制作プロダクション
大阪・東京・シンガポール・ロンドン

今日の内容
• CSSのカスタム・プロパティと、cssnext が
個人的に気になったので調べてみました
• 現時点では「う∼ん」と思った点もあり、
まだこれからといった印象も…

(1) CSS の カスタム・プロパティ

ってなに
https://drafts.csswg.org/css-variables/

訳すと
CSS Custom Properties for Cascading Variables
継承できる変数
のための
カスタムするプロパティ
うん、よくわからん

実際のコードはシンプル
• ハイフン
:root {
2つから始まる
--main-color: #06c;
プロパティと値を、
--accent-color: #006;
自分で定義できる
}


.foo {
• それを var() で利用できる
color: var(--main-color);
}

モダンブラウザはすでに実装済み
IE → × Edge → 15 から?
http://caniuse.com/#search=custom%20properties

それって
Sass の変数とどう違うの？

CSSらしく、継承できる
:root { --col: black; }
<p>
.info { --col: blue; }
black
#warn { --col: red; }
</p>
<p class="info">
p {
blue
color: var(--col);
</p>
}
<p id="warn">
red
</p>

CSSらしく、詳細度がある
:root { --col: black; }
<p id="warn" class="info">
.info { --col: blue; }
red
#warn { --col: red; }
</p>
.safe {
--col: green !important;
<p id="warn" class="safe">
}
green
p {
</p>
color: var(--col);
}

JavaScript から値を参照・設定できる
• カスタムプロパティの値を、JSから参照・設定できる
value = getComputedStyle(elm).getPropertyValue('--foo');
elm.style.setProperty('--bar', value);
• カスタムプロパティを経由し、1行で一気に見た目を変えられる
• サンプル http://codepen.io/pen/KavvvJ

Custom Properties
for
Cascading Variables
継承できる変数のための
自前プロパティ

∼ 第1部 完 ∼

モダンブラウザなら、すぐにでも使える
IE系はどうする? → 第2部につづく

(2) PostCSS / cssnext

PostCSS
• CSSを変換するための node.js製ツール
http://postcss.org/
• 本体は機能をもたず、プラグインで拡張していく
• ちなみに Autoprefixer は PostCSS のプラグイン
• プラグインを自作できるなどカスタマイズ性が高い
オレオレ環境になりやすい懸念も…?

cssnext
Use tomorrow’s CSS syntax, today.
http://cssnext.io/
• PostCSS のプラグイン集
• W3C で策定が進められている CSS の新しい記法を、
先取りして使えるようにしたもの
• JS でいう babel (ES6 → ES5 変換) のイメージに近い?
• 勧告前の仕様を先行実装しているので、仕様変更の可能性は残る

イメージ
PostCSS + cssnextプラグインで
トランスパイル
PostCSS
foo.css
bar.css
cssnext
モダンな文法の CSS,
IEなどでも動くCSSを出力
拡張子は .css
(ブラウザ対応状況に
よってはそのまま動く)

PostCSS + cssnext で、IE系でも
カスタム・プロパティが使える?
↓
試してみた

環境構築 (わりと簡単)
• npm で postcss-cli と postcss-cssnext をインストール
• 設定ファイルを 1つ用意 (.json)
• `postcss -wc 設定ファイル名` で watch & 生成
• 環境サンプル
https://github.com/matsuoshi/cssnext-setup

てっとり早く試すなら
http://codepen.io/
• codepen では PostCSS も
cssnext も対応済み、
ブラウザ上で試せる
• WebStorm / PhpStorm も
対応してるぽい? (未検証)

PostCSS + cssnext で変換を試す
:root {
.foo {
--main-color: black;
color: black;
}
}
.foo {
→
color: var(--main-color);
}
cssnext
css

試す
……むむむ？
:root {
.bar {
--main-color: black;
--main-color: red;
}
}
.bar {
--main-color: red;
.foo, .bar {
→
}
color: black;
.foo, .bar {
}
color: var(--main-color);
}
cssnext
css

継承ができない……!!!
• cssnext の制限で、カスタム・プロパティは :root にしか書けない
• つまり継承するような使い方はできない
• 継承に対応したブラウザにとっては、
cssnext を通すことで、通す前と実行結果が変わってしまう
(キツい)

他のデメリット
• トランスパイルして IEでも動くようなCSSにしているため、
JavaScript からカスタム・プロパティの参照・設定も不可
• 仕組みを考えると、継承もJSからの操作も、
おそらく cssnext のみでは今後も対応されないのでは……
(JS ポリフィルでの実現可能性はある?)

∼ 第2部 完 ∼

気をとりなおして
cssnext のナイスな仕様たちを
紹介します!!!!!!!
http://cssnext.io/features/

Autoprefixer
みなさんおなじみfallbackの代表格
.foo {
image-rendering: pixelated;
}
.foo {
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: pixelate
}

nesting
ネスト、必ず & をつけて書く
a {
a {
color: red;
color: red
& span {
}
color: white;
a span {
}
color: white
→
@nest span & {
}
color: blue;
span a {
}
color: blue
}
}
cssnext
css

@apply
mixin的な、ただし引数はなさそげ
:root {
.danger {
--danger-theme: {
color: white;
color: white;
background-color: red;
background-color: red;
}
};
→
}
.danger {
@apply --danger-theme;
}

custom media queries メディアクエリを楽に書ける
@custom-media --screen-md (width >= 500px) and (width <= 1200px);
@media (--screen-md) {
color: red;
}
@media (min-width: 500px) and (max-width: 1200px) {
color: red;
}

custom selectors
複数セレクタをまとめる
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

color
Sassなどでもよくある色の関数
a {
color: color(red alpha(-10%));
&:hover {
color: color(red blackness(80%));
a {
}
color: rgba(255, 0, 0, 0.9)
}
}
a:hover {
color: rgb(51, 0, 0)
}

:matches, :not
カンマ区切りで複数セレクタを
.foo table :matches(td, th) {
.foo table td,
color: red;
.foo table th {
}
color: red;
}
p:not(:first-child, .bar) {
→
color: red;
p:not(:first-child):not(.bar)
}
{
color: red;
}

これらは現在、
W3C で策定中の仕様

メリットは、将来的に動くCSSであること
• cssnext 用に覚える記法は、独自仕様ではなく
これからの CSS の標準仕様になっていく (はず)
• Sass / Stylus などの独自構文 altCSS との違いはここ
• 覚えたことが将来無駄にならないことを期待…!?

現時点での実用性は、どんなもんか
• カスタム・プロパティは、継承や、JSからの操作ができない
• @apply は引数なし
• ファイルの @import ができない
• PostCSS の postcss-import プラグインで、別途対応可能
• 策定中の仕様が変わるリスク
• 現時点では、このあたりを許容できるかどうかが分かれ目

まとめ

まとめ
• カスタム・プロパティ便利そう、モダンブラウザは対応済み
• cssnext をいま踏み込んで使っていくかは各自ご判断を…
という感想と、将来性も大いに
• 新しい CSS はここから身近に広がっていきそう、
さわってみよう