つかって書いてみよう」というお話。わからない方は検索してください。いうプラグインを使うと以下のような疑似セレクタが使えます。現状ではほぼ全てのブラウザで使うことができません。以下のように変換してくれます。プラグインを入れることでこのように今は使えないけれどもしかしたら先の未来に使えるかもしれない書き方を、今現在でも使える形に直してくれます。「未来の先取り」ってことです。別物なので当然ブラウザは読み込めません。そのものに改編を加えるので元のファイルも読み込むこと自体はできます。使えないに等しいのですが、近い未来使える可能性のある疑似セレクタです。使えばその心配はありません。廃れるということがおそらくないです。「cssnext」が有名ですがその中身はプラグインの寄せ集めです。使わず、個別にプラグインをつかって変換をしていきます。各自変更してください。.pipe(gulp.dest('dist/css/'))});自動でベンダープレフィクスを付けてくれるプラグインです。現状ベンダープレフィクスが必要なプロパティはかなり減ってきましたが、昔のブラウザをフォローする場合やまだいくつかの実験的機能では必要です。それをブラウザのバージョンなども考慮して自動でつけてくれるプラグイン。使うために作られたそうです。情報をもとにプレフィクスを付けるので、付与の更新自体もほぼ自動で行われる優れもの。デフォルトのままでも十分ですがどのぐらい前のバージョンまでフォローするか、どのブラウザをフォローするかなども細かく決めることもできるので色々な状況に対応できます。使えば自動で付けてくれます。将来的にはベンダープレフィクスは全て無くなるはずでが現状はまだ必要。公式でもネスト(入れ子)のルールがすでに決まっていたみたいです。近い未来使えるようになるかもしれないってことですね。構造が見やすくなってわかりやすいです。後に子孫セレクタ同様半角スペースが必要です。場合はくっつけて書きますのでいりません。使わずにネスト出来るものなども存在します。わかりませんがネスト関与したセレクタのプロパティの最後のセミコロンを省略してしまうという仕様(バグ?)があります。プラグインなどを使って整形しましょう。疑似セレクタを使えるようになるプラグインです。詳しい使い方は以下を参考にしてください。変数、カスタムプロパティを使えるようにするプラグインです。将来的には使えるようになります。現状それなりのブラウザですでにカスタムプロパティを使うことができます。以外でも宣言ができ、変更も可能です。プラグインもあります。ネイティブの書き方のほうが少しだけ丈長です。.pipe(gulp.dest('dist/css/'))});先ほどはプロパティ値の変数でしたが今度はセレクタの変数です。デモ画像が分かりやすいのでそれを見てもらえればわかると思います。カスタムプロパティとの違いは2個のハイフンの前にコロン(:--)が付くことです。ひとまとめにするプラグインです。将来的に使えるようになるかもしれない疑似セレクタ。ベンダープレフィクス付きですがそのまま利用できるようです。内に複数のセレクタを入れることができませんでした。このプラグインで将来的に可能になる記述を使えます。本家の変換の例が間違っています。実際に入れて使っていますが上記のように正しく変換されます。まとめまだ将来的に使える書き方のものがいくつかあります。関係がたくさんあるのですが個人的に使いどころがわからないのでここでは紹介しません。調べてもらうと出てきます。通すことなく使える可能性のある「ほぼネイティブ」な記述を使えます。「予習」という意味でも楽しいです。ルールにならった書き方だけでなく「オレオレ記述」が可能なプラグインがたくさんあります。あまりにも「オレオレ」しすぎるとほかの人が見たとき「?」になってしまいますが、このような使い方なら「未来的」でいいのではないかなと思っています。