cssnextを使って最新のcss syntaxで開発するのが良さそう

ここ最近CSSを扱うことが多かったので、その際にPostprocessorを検討時にcssnextについてまとめた備忘録。

JavaScriptの最近の事情

javascriptではES6でコードを書き、BabelでTransplieするという流れが定着しつつある。
これは、これまで必要だったライブラリが不要になり、コードが依存するライブラリを減らすことができ、altJSに頼らないで開発できるという利点からである。

同じことがCSSでも起きている。まずこれまでCSSを牽引してきたSassについて。

Sassの問題点

最近のCSSの開発にはaltCSSとしてSass,Less,StylusなどのPreprocessorが使用されている。
特にSassはJavaScriptで言う所のjQueryに近い存在になり、APIもやや複雑になっている感じがある。

Sassを使っていても実際はそのほんの一部の機能だけで開発していることが多い。
実際、Sassを使うにあたり必要な機能はほんの一握りなのでその機能だけ切り取り使えると、もっと軽く使える気もする。

また、仮に他のaltCSSへの乗り換えの際にはSassの資産をそのまま使えるとは限らない。
などという懸念点を回避する手法として、CSSの先行実装を取り入れるという考え方でcssnextが選択肢に上がる。

cssnextとは

cssnextはcssの先行実装をサポートしていないブラウザも使えるようにするPostprocessorである。
あくまでcssのsyntaxのみで構成されているので、利用している機能を将来的にブラウザがサポートさえしてくれれば
cssnextでTransplileする必要すらなくなる。

cssnext自体はpostcssを使っているので、必要なpluginを選択的に使える。これにより変換に時間がかかるという問題も解消できそう。

メジャーなcss frameworkのBootstrapはver5からpostcssに、Foundationもcssnextを検討している。

ということで、実際にどのようなことができるのか機能を一通り触ってみた。

cssnext features

設定(config)

configオプションまたは設定ファイルで、使う機能を選択できる。

基本的にbrowsersオプションを指定しておけば、autoprefixerがcaniuseのdatabaseを参照して、個別にfeaturesをenabled、disabledを判断します。(@MoOxのアドバイスをもとに追記)

もし、個別に機能を制御するならば、各種の変換はpostcssのpluginなので、そのオプションも設定できる。
ちなみに、設定ファイルを使う場合は.cssnextrcという名前でjsonかyaml形式になりそう。

Custom Properties

カスタムプロパティ。cssnextでは現状はrootで定義しないといけない

Calc Function

calc function。様々な単位で複雑な計算ができて便利。

Custom Media Queries

media queryにタイプにユーザー定義のプロパティを使えるようになる。
これまでは同じ設定を必要に応じていくつも書くことがあったが、とりあえず、プロパティで一元管理できるようになる。

Custom Selectors

@custome-selectorルールが使えるようになり、冗長な記述をしなくて済むようになる。

Color Function

SassなどのColor Functionのように色を関数で扱うことができるようになる。

hwd(Hue-Whiteness-Blackness) Function

色相の関数で扱う。色合いと白色度、黒色度から色相を変換できる。

Gray Function

グレースケールな色をのみを生成する関数。

Hex Color

アルファチャンネンルを追加した、RRGGBBAA形式でのhex colorが使える。

Rebeccapurple

6歳にして亡くなった、Eric Meyer氏の娘の名前らしい。

font-variant プロパティ

フォントをsmall capsにする際に使う。

filter プロパティ

svgのフィルタエフェクトを適用する。これは結構嬉しい。

Rem unit

rem(root em)をサポートする。

Pseudo Elements

擬似要素のサポート。

Matches

matches 擬似クラス。冗長になりがちなセレクターを簡潔に表現できるようになる。

Not

否定擬似クラス。Matchesと同じく、セレクターを簡潔にできるようになる。

@import

Sassなどと同じように特定のstylesheetをimportする。
相対パス、node_modules, web_modulesから読み込みをこなう。

with Gulp

gulpではgulp-cssnextやgulp-postcssを使う感じになる。

まとめ

ということで、今回挙げたようなcssの新しいモジュールはaltCSSで提供されているAPIに影響を受けた感じであるので、記法はともかく機能は大体予想がつく。そのため、学習コストはあまり高くない気がする。

postcssということでautoprefixerなどがdefaultで機能するので、fallbackなどもあまり意識しないで済みそう。

CSS標準のマークアップで開発をすることでいいということが大きな利点と思う。