MILK編集部モノづくりのヒントになるような記事をお届けします。現在、HTMLやCSSの標準仕様を策定するW3Cでは、いくつかの新しいモジュール(Level1)と既存モジュールのCSS4(Level4)が策定中となっています。今回はこれらの新しい仕様の中から、特に便利そうなものを紹介します。正確には、CSS4は存在しないとされていますが、便宜上わかりやすくするためにLevel4のモジュールをCSS4とここでは呼称しています。Drafts」を参考にしています。草案段階なので仕様が変更・削除される可能性があります。1)カスタムプロパティは、CSSにおけるユーザー定義変数です。SassなどのCSSプリプロセッサを使えば変数が使えますが、これによってCSSネイティブで変数を扱えるようになります。変数は、大文字と小文字が区別されます。var(--変数名)という書式です。var(--main-color);}現在、W3Cの勧告候補となっていますが、IEとEdgeでサポートされていないので、実務で使う場合はしばらくSassなどを使うことになりそうです。Level4で追加される新しいセレクタの中から、特に便利そうなものをピックアップして紹介します。:dropなどのセレクタも検討されています。草案段階ですが、一部のセレクタは先行してブラウザでのサポートがされてきています。s2の両方もしくは、どちらか一方に合致する要素を指定します。s1,s2には、HTML要素や擬似要素を指定できます。これによって、セレクタをより簡潔に記述できるようになります。複数の要素を指定する場合は、CSS3では以下のようにカンマで区切って記述します。{font-weight:600;}これが、:matchesを使うと以下のように簡潔に指定することができます。s2):notはCSS3からありますが、CSS4からはカンマ(,)区切りで複数の要素を指定できるようになります。以下の例の場合、section要素以下のh2,h3以外の全ての要素にプロパティが適用されます。s2)はまだサポートしていないブラウザがほとんどです。いずれかの要素を含むもの、またはセレクタに合致する要素を指定します。要素のみに合致します。h2を含むsection要素に合致します。要素のみに合致します。h2を含むsection要素に合致します。h2)2016年8月3日付の編集者草案として新しく追加されたセレクタなので、現在サポートしているブラウザはありません。×カラー(Level4)カラーモジュールでは、色の指定方法についての拡張が検討されています。下記以外にも、color()関数やcolor-mod()関数などの仕様が検討されています。草案段階なので、実際に使えるようになるのはまだまだ先になりそうです。16進数カラーコードでの透過CSS4からは、16進色でも透過度を表すことができるようになります。従来は、6桁の16進数だったものが8桁になり、末尾の2桁が透過度を表します。同じ少し透過された青を表現します。透過に関しては、rgba()などで透過度を表すアルファ値を数値だけでなくパーセントでも指定可になる変更が検討されています。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。