次世代のCSS (CSS4) の現在の策定状況と気になった変更点・追加要素など

W3Cによって策定が進められている次世代のCSSについて気になったので、現在の策定状況や気になった変更点・追加要素について調べ、社内勉強会で発表させていただきました。ついでに記事にしました。
少しでも気になる機能があれば、W3Cを覗いてみることをおすすめします。

この記事は11/11時点の仕様について説明しております。仕様は変更される可能性があります。

CSS4とは一体なんなのか

CSS3の策定されるあたりから、機能ごとのバージョンアップになっているため、CSS4と明確に定義できるものはありません。

ですが、CSS3の次の世代に策定されてるモジュール群 ≒ CSS4という認識が広まっているように見受けられます。
(ちなみにCSS3の定義も同様に曖昧なので、どこからがCSS4と言っていいのか調べた限りでは推測できませんでした。)

したがって今回は、Module Levelが4のものと、新しく策定されてる機能からいくつか触れようと思います。

ちなみに、CSSの各機能の仕様策定手順は以下のようになっています。

FPWD(初期草案)WD(草案)LCWD(最終草案)CR(勧告候補)PR(勧告案)REC(勧告)

モジュールごとの策定状況

2016/11/11 時点の策定状況をざっと見てみましょう。

TR(Technical Report)より

いくつかはCR(勧告候補)となっていますが、ほとんどがWD(草案)となっています。

すべての策定状況を見る場合は、以下のURLで確認するのを勧めます。

CSS current work & how to participate

次項から、各Moduleの主な変更点や追加要素などについて簡単に説明します。

Level 4 Modules

まずは Level 4 として策定がすすめられているものです。

Media Queries Level 4

Media Queries Level 4

その名のとおりメディアクエリに関連するプロパティ・値・記述形式についての仕様案が書かれています。

主な変更

  • device-width | device-height | device-aspect-ratio非推奨に変更
  • width<length>のみに変更
  • screen | print | speech | all 以外のメディアタイプが非推奨に変更

device-width / device-heightが非推奨…?
固定値のみ対象とするようになるのですが、結構なサイトがdevice-widthを指定する昨今のWeb事情の中、これは通るのでしょうか…?

詳しく見たい方は原文をお読みください。
Changes Since the Media Queries Level 3

Selectors Level 4

疑似要素以外のセレクタについて書かれています。

Selector Module Level 4では、新しく27種類のセレクタが表示されています。
具体的には以下です。

E:not(s1, s2) / E:matches(s1 / s2) / E[foo="bar" i] / E:dir(ltr) / E:any-link / E:local-link / E:local-link(0) / E:scope / E:current / E:current(s) / E:past / E:future / E:indeterminate / E:default / E:in-range / E:out-of-range / E:required / E:optional / E:read-only / E:read-write / E:nth-match(n of selector) / E:nth-last-match(n of selector) / E:column(selector) / E:nth-column(n) / E:nth-last-column(n) / E /foo/ F / E! > F

あまりにも多すぎるので、便利だと思ったものを3つだけ紹介いたします。

E:not(s1, s2)

E:not()自体はCSS3の時点で記述されていたのですが、その時は除外対象は1セレクタしかありませんでした。しかしCSS4では、複数セレクタにも対応する予定だそうです。

// CSS3
ol:not(.no-order) {
  list-style: none;
}

// CSS4(idもclassも)
p:not([class], [id]) {

}

E:local-link

a[href]などのリンクと現在のページのURLを比較してスタイルを適用できます。
E:local-link(n)(n:0以上の整数)で、階層のレベルまで指定できるとの記述もあります。

jsでいままでカレントページのナビリンク表示をやっていたものが、:local-linkをすることで実装することが出来そうです。

nav :local-link {
  text-decoration: none;
}
nav :local-link(0) {
  text-decoration: none;
}

E! > F (エクスクラメーションマーク)

なんと、スタイルの対象となるセレクタを指定できます。

// 「ulの子要素のli」
ul > li { /* ... */}

// 「liを子要素にもつul」
ul! > li { /* ... */}

CSS Basic user Interface Module Level 4

CSS Basic User Interface Module Level 4

主にフォームやユーザー入力に関連する振る舞いやスタイルに関するものが書いてあります。

appearance

ユーザーエージェントに紐付いたUI関連の振る舞いを変更することができます。

現在でもinput要素のスタイルリセットで-webkit-apperance: none;などを指定してるものを見かけますが、Level 4の仕様だそうです。

CSS Appearance | Can I use…

text-overflow: fade

text-overflow | CSS Basic User Interface Module Level 4

要素からはみ出たテキストに関するプロパティの新しい値として、fadeが追加されました。
はみ出ている要素は、ボックスの内側でいい感じにフェードアウトするようなグラデーションがかかってます。

fade

caret

キャレットにスタイルが適用できるようになるそうです。

caret | CSS Basic User Interface Module Level 4

caret-color | caret-animation | caret-shape の3種類が指定できます。

caretプロパティが、上3つのショートハンドプロパティとなります。

以下のようなキャレットを CSSだけで指定出来るようになります。デフォルトのキャレットと比較すると少し太くなってるのがお分かりいただけるかと思います。
上記URLの下の方へいくと見ることができます。

caret

CSS/HTMLは次のとおりです。

#old-screen {
  caret: block 0s;
  animation: old-caret 2s infinite;
  /*styling of the screen omitted for brevity */
}
@keyframes old-caret {
  from, 50% { caret-color: green; }
  75%, to { caret-color: transparent; }
}
<div class="old-screen" contenteditable="true" style="height: 100px">> </div>

CSS Pseudo-Elements Module

疑似要素(::before::afterなど)に関する仕様について書かれています。

追加要素

::marker

display: list-item;の右側の黒点部分のスタイルを付けれるようになります。
::beforeで無理くりしていたリスト要素のスタイルをこれでスッキリすることが出来るかもしれません。

::inactive-selection

ユーザーに::selectionされてない部分へのスタイルを適用します。

CSS Cascading and Inheritance Level 4

CSS Cascading and Inheritance Level 4

CSSのプロパティの継承やカスケーディング、スタイルの詳細度/優先度などに関連する仕様について書かれてあります。

変更点

revert(元 default

一つ前のカスケードされた値を参照します。基準はCSSの優先度準拠です。

a { color: gray; }
a.current { color: red; }
a#important { color: revert; // = red }

その他、@import supports() の挙動などマイナーチェンジが主立っています。

CSS Color Module Level 4

CSS Color Module Level 4

こちらは色情報に関連する仕様について書かれてあります。

追加要素

color-mod([ <color> | <hue> ] <color-adjuster>* )

色の計算が素のCSSでも策定中です。

<color-adjuster>とは、元の色に対して色相や明るさを変更するための値です。transformの記述になんとなく似ています。詳しくはcolor-adjusterの項をご確認ください。

color: device-cmyk();

device-cmyk()

機種の色設定に準拠したCMYK値を設定できるようになります。

p { color: device-cmyk(0, 81%, 81%, 30%); }

変更点

rgb() | rgba() のR,G,Bの値が[0,1]指定に対応

カンマを付けることで、[0,1]指定(%指定というのでしょうか)が可能になります。

div {
  background-color: rga(0.0, 0.78, 0.1);
}

同じような変更として、hsl() | hsla()<hue>の値が<angle>(0-360[deg])にも対応が検討されています。

新しく検討されているモジュール

次に、新しく仕様として検討されているもののうち、Grid Layout ModuleとCSS Variablesについて触れておきます。

どちらも新しいモジュールとして仕様策定が進んでいるため、Module Levelはどちらも1となっております。

Grid Layout Module Level 1

CSS Grid Layout Module Level 1

flexboxによるレイアウトが一般的になりつつある現在において、次のレイアウトモジュールを担うものとして注目されているものです。

その名の通りグリッドベースのレイアウトをするために設計されているのと同時に、flexboxのようなレスポンシブなコンテンツの制作にも対応しています。

現状はなんとIE / Edgeのみぎりぎり利用可能というエッジのきいた対応状況になります。(Can I use…

書き方などは他にも詳しいサイトがあるとおもうので省略します。
flexboxよりもDOMの順序に影響しない書き方ができるように見受けられました。

CSS Variables Level 1

今まで変数はSASSやLESSなどのメタ言語でしか利用できませんでしたが、ようやく生のCSSで変数が利用可能になります。

SASSの変数と同じようなスコープ機能にも対応しています。全体で使う場合には:rootにおいて変数を宣言することでどこでも利用できるようになります。

:root {
  --main-bg-color: brown;
}
div {
  background-color: var(--main-bg-color);
}

対応状況としては以下のようになっています(2016/11/11時点)

css-variables-caniuse

最新の対応状況は CSS Variables (Custom Properties) | Can I use… を参照してください。

最後に

次世代のCSS(CSS4)の追加要素や変更点についてざっくばらんに紹介しました。
個人的には、変数や色の計算など、SASSでしかできなかったものがCSSの標準仕様として検討されているのが印象的でした。
SASSが必要ではなくなる時代はやってくるのでしょうか…?

今回W3Cの仕様策定ページを初めて理解しながら読み進んでみました。読むのが大変ですが、今まで知らなかった機能や仕様の詳細を知ることができて良い勉強になりました。時間がある時にまた読んでみようと思います。

参考サイト

  • BLOG
  • >
  • web
  • >
  • 次世代のCSS (CSS4) の現在の策定状況と気になった変更点・追加要素など