今から準備するCSS4！CSS4に関する最新情報まとめフラップイズム

こんにちは、くーへいです。

この記事では、CSS4について最新情報をまとめていきたいと思います。

CSS3も覚えきっていないのに、もうCSS4・・・と思うかもしれませんが、CSS4も引き続きモジュール単位での策定が進んでいて、場合によってはセレクタだけLevel4のものが浸透していったり・・・ということは十分に考えられます。
仕様が固まり、ブラウザへの実装が進んでから覚えても問題ありませんが、最新動向はチェックしておいた方が良いでしょう。
この記事でも随時、最新情報を更新していく予定です。

CSS4として策定が進んでいるモジュール一覧

※2014年9月12日現在。
※策定における用語等はCSS3まとめの記事を参照してください。

セレクタ（Selectors Level 4）・・・2013年5月2日　作業草案（2014年8月12日に編集者草案が公開）、改訂中
背景・境界線（CSS Backgrounds and Borders Level 4）・・・2014年5月14日　編集者草案（作業草案公開前）、調査中
メディアクエリ（Media Queries level 4）・・・2014年6月3日　編集者草案（作業草案公開前）、調査中

ステータスを見て頂くとわかると思いますが、現状はどのモジュールもまだまだ策定途中といった感じです。

現時点で実装予定の機能

この項では、現時点での仕様をざっくりとご紹介します。

セレクタ（Selectors Level 4）

2014年8月12日　編集者草案を参照

CSS4のセレクタ（Selectors Level 4）で追加および変更されたのは以下の通り。

・・・その前に記号の説明

EおよびFは要素。「p」とか「div」とか
s1やs2などは「」「>」「+」「~」などが用いられていないセレクタ。「div p」とかで1つのセレクタ
rs1やrs2などは「」「>」「+」「~」などが用いられているものも含む、すべてのセレクタ。「div > p」とか
fooは属性。「<input type=”text”>」とかでいえば、「type」
“bar”は属性の値。「<input type=”text”>」とかでいえば、「text」
nは数値

上記を踏まえたうえで、ご覧ください。

E:not(s1, s2)・・・CSS3からnotは存在しましたが、複数指定できるようになった。この例でいえば、s1およびs2双方に合致しない要素
E:matches(s1, s2)・・・s1もしくはs2のどちらかに合致する要素
E:has(rs1, rs2)・・・「:scope」で指定された要素下（:scopeが指定されていなければ、文書全体が含まれる）にrs1およびrs2のいずれかのセレクタが含まれている要素。要は、rs1もしくはrs2を持った要素全て
E[foo=”bar” i]・・・大文字小文字の違いを無視する
E:dir(ltr)・・・文字の方向が左から右の場合。rtlであれば、右から左の場合
E:lang(zh, *-hant)・・・この例でいうと、言語タグが中国語の場合、となるが、CSS4からはワイルドカードが使用できるようになった
E:any-link・・・「:link」「:visited」の双方を表す
E:scope・・・「:scope」に指定された要素
E:current・・・現在の再生位置に合致する要素。ここでいう再生とは、例えば音声ブラウザなどが該当する
E:current(s)・・・sに合致し、かつ再生位置に合致する要素
E:past・・・過去に再生された要素
E:future・・・将来、再生される要素
E:drop・・・現在ドラッグしている（持ち運んでいる）アイテムを、ドロップ（離）される対象となりうる要素
E:drop(active)・・・現在ドラッグしている（持ち運んでいる）アイテムを、その場でドロップ（離）された場合、それを受け取る要素
E:drop(valid)・・・現在ドラッグしている（持ち運んでいる）アイテムを、受け取ることができる要素
E:drop(invalid)・・・現在ドラッグしている（持ち運んでいる）アイテムを、受け取ることができない要素
E:read-only、E:read-write・・・それぞれ、内容が読み取り専用・読み書き可能である要素
E:placeholder-shown・・・プレースホルダ―（入力例等を薄いグレーなどで表示しているアレ）を表示している要素
E:default・・・既定の選択肢にされている要素
E:indeterminate・・・チェック等がされていない状態にある要素
E:valid、E:invalid・・・それぞれ、入力値が妥当である・妥当でない要素
E:in-range、E:out-of-range・・・それぞれ、入力値が範囲内・範囲外の要素
E:required、E:optional・・・それぞれ、入力が必須である・必須でない要素
E:blank・・・空白以外の内容を持たない要素
F || E・・・格子もしくはテーブル内の、F要素のカラム（列）に属するセルとしてのE要素
E:nth-column(n)・・・格子もしくはテーブル内のn番目のカラム（列）に属するセルとしてのE要素
E:nth-last-column(n)・・・格子もしくはテーブル内の最後からn番目のカラム（列）に属するセルとしてのE要素

今まで実現できなかったような、かゆいところに手が届くセレクタが多数用意されています。
追加されたセレクタの数は多いですが、直感的に使用できるものが多いですので、覚えるのに苦労はしないでしょう。

ちなみに、状況が流動的すぎるので詳しくは書きませんが、一部のブラウザでは一部セレクタがすでに使用できるようになっています。

背景・境界線（CSS Backgrounds and Borders Level 4）

2014年3月14日　編集者草案を参照

background-positionプロパティにstart、endの各値を追加
background-repeatプロパティにextendキーワードを追加
corner-shapeプロパティを追加・・・角の形状を指定できます
要素毎に複数のborderが指定できるように拡張
border-clip、border-limitプロパティが追加・・・かなり細かく境界線を設定できます。例としては下の図を参照してください
border-imageプロパティにおける5通りのスライス方法？

border-clip、border-limitプロパティの例
図は「CSS Backgrounds and Borders Level 4」より

メディアクエリ（Media Queries level 4）

2014年6月3日　編集者草案を参照

boolean値のキーワードに「none」を追加
数値のキーワードを範囲で指定できるように拡張
「scripting」「pointer」「hover」「light-level」「update-frequency」「overflow-block」「overflow-inline」のメディア特性が追加
「or」「and」「only」「not」の使用を禁止に（ちょっと翻訳に自信なし）
「not」や「only」の後ろと同じように、「and」の後ろにもスペースが必要に
「screen」「print」「speech」「all」以外のメディアタイプは非推奨に
「device-width」「device-height」「device-aspect-ratio」のメディア特性を非推奨に

メディア特性が多く追加される一方で、記述方法が厳密になるように改訂されています。
また、いくつかのメディアタイプやメディア特性が非推奨になっています。

「Media Queries level 4」が実装された場合、シンタックスエラーを出してしまうようなサイトも出てくるかと思われますので、注意が必要です。