CSSの新機能のまとめ -2018年、CSSワーキンググループの会議で変更が加えられたCSSの新機能とそのデモ

Post on:2018年11月9日

TPACとは

TPACとは、W3Cのテクニカルプレナリー・諮問委員会（Technical Plenary / Advisory Committee）の略称です。この会議は、W3Cのさまざまなワーキンググループのすべてがひとつに集まる貴重な機会となっています。毎年異なる場所で行われ、今年はフランスのリヨンで開催されました。

TPACの出席者はW3Cのテクノロジを扱うワーキンググループのメンバーで、メンバー組織の代表者または招待された専門家のいずれかになります。W3Cワーキンググループの他の会議と同様に、TPACでの議論はすべて議事録として残り、IRCログとして公開されます。

CSSワーキンググループ

CSSワーキンググループのメンバーはTPACだけでなく、年に2回ほど顔を合わせて会議を行っており、週に一度は電話でやり取りをしています。会議では、仕様に関するさまざまな問題が議論され、決定が下されています。

会議で議論された内容は、GitHubに議事録として残ります。もちろん、スターを付けてその内容を見ることができます。完全な議事録は、www-styleのメーリングリストに投稿されます。

この記事では、Web制作者のあなたが最も興味があろうことについて解説します。

スクロールバーのスタイル -scrollbarプロパティ

スクロールバーの仕様では、スクロールバーのサイズとカラーを設定するスタンダードな方法を模索しています。Firefox Nightlyで、それをテストすることができます。下記のデモを試すには、Firefox Nightlyの「http://about:config」にアクセスして、「layout.css.scrollbar-width.enabled」と「layout.css.scrollbar-color.enabled」のフラグを有効にしてください。

仕様では、scrollbar-widthとscrollbar-colorの2つの新しいプロパティが提供されています。scrollbar-widthプロパティは、auto, thin, none、またはlength（1emなど）の値を指定できます。lengthの値は仕様から取り除かれるかもしれません。これはスクロールバーの幅が操作できないような数値で指定されることを避けるため、キーワードのみで指定できるようにした方がよいためです。実際、Firefoxではlengthは実装されていません。

値にautoを使用するとブラウザはデフォルトの「scrollbar-width: thin;」を使用して細いスクロールバーを表示し、noneを使用すると目には見えないスクロールバーを表示します（ただしスクロールは可能です）。

「scrollbar-width: thin;」を指定したスクロールバー

この新しいscrollbarプロパティをサポートしているブラウザでは、デモで実際に見ることができます。

See the Pen CSS Scrollbars scrollbar-width by rachelandrew (@rachelandrew) on CodePen.

scrollbar-colorプロパティは、スクロールバーのカラーを扱います。スクロールバーには2つの部分があり、それぞれにカラーを適用できます。

thumb

スクロールすると上下に動くスライダー
track

スクロールバーの背景

scrollbar-colorプロパティの値は、auto, dark, light、および<color> <color>です。
値にautoを指定するとブラウザのデフォルトのカラーが適用されます。darkを指定するとダークカラーが適用され、lightを指定するとライトカラーが適用されます。

特定のカラーを使用したい場合は、スペースで区切られた2つのカラーを値として指定します。1つ目はtrackで、2つ目はthumbです。この2つのカラーには十分なコントラストが必要です。そうしないと、スクロールバーが一部の人には使いにくくなることがあります。

カスタムカラーを指定したスクロールバー

この新しいscrollbarプロパティをサポートしているブラウザでは、デモで実際に見ることができます。

See the Pen CSS Scrollbars scrollbar-color by rachelandrew (@rachelandrew) on CodePen.

アスペクト比の単位

今まではアスペクト比のボックスを作成するために、CSSのpaddingを使用したハック「Aspect Ratio Boxes」を使用していたと思います。しかし、Gridレイアウトとコンテンツのサイジングの出現により、CSSでアスペクト比を実際に利用できる方法が必要となっています。

この要件に関連するGitHubには2つのIssueがあります。

CSS Sizing Level 4があり、現時点では会議で決定をする前にさらなる議論を必要としている状況です。もしあなたが興味を持っているなら、ぜひそれらのIssueにコメントを寄せてください。

「:where()」機能的な疑似クラス

昨年、CSSWGは「:matches()」のように動作する擬似クラスを追加することを決意しましたが、詳細度がゼロだったため、デフォルトのスタイルシートで何かを無効にするために、後の要素の詳細度を優先させることで、簡単に上書きすることができます。

「:matches()」疑似クラスはレベル4セレクタなので、多くの制作者には新しいことかもしれませんが、セレクタのグループを指定してCSSを適用することができます。
例を見てましょう。

.foo a:hover,
p a:hover {
  color: green;
}

.foo a:hover,

p a:hover {

color: green;

}

「:matches()」を使用すると、下記のようになります。

:matches(.foo, p) a:hover {
  color: green;
}

:matches(.foo, p) a:hover {

color: green;

}

同じルールが定義されたセレクタが複数ある場合、「:matches()」は非常に有用です。CodePenでは、matches()機能を示すためにwebkit-anyと-moz-anyのプレフィックスを使用します。

See the Pen :matches() by rachelandrew (@rachelandrew) on CodePen.

このようにセレクタの積み重ねが必要な箇所で、「:matches()」はデフォルトのスタイルシートとして最も役立ちます。ただし、これらのデフォルトを上書きする際には、デフォルトに対して確実に上書きが行われるように注意する必要があります。そのため、詳細度ゼロのバージョンが提案されました。

会議で議論された問題は、この擬似クラスに名前を付けることでした。GitHubで最終的な解決策を見ることができます。さまざまな名前が除外されたのか疑問に思うなら、スレッドを見てください。CSSでの命名は非常に難しいものです。なぜなら、皆がその名前を永遠に使用することになるからです。多くの議論をかわした後、投票で「:where()」に決まりました。

私がこの記事を書いている間、「matches()」を「is()」に改名するよう提案されました。どちらがよいか、あなたの意見はRename :matches() to :is()で受け付けています。

marginとpaddingのための論理的なショートハンド

この命名については「Understanding Logical Properties And Values」をご覧ください。これらのプロパティと値は、相対的なマッピングを提供します。これはmarginやpaddingなど幅と高さがテキストの方向に従い、物理的なスクリーンのサイズにリンクしていないことを意味します。

例えば、物理marginは下記のようになります。

margin-top
margin-right
margin-bottom
margin-left

これらの論理的なマッピングは下記のとおりです。

margin-block-start
margin-inline-end
margin-block-end
margin-inline-start

わたし達は2つの値のショートハンドを使用できます。
例えば、「margin-block-start」と「margin-block-end」の両方を使ったショートハンドは、「margin-block: 20px 1em」を使用することができます。最初の値はブロック次元の開始エッジを表し、2番目の値はブロック次元の終了エッジを表します。

しかし、これでは4つの値をショートハンドにする際に問題が生じます。そのプロパティ名は物理的なマージンに使用されるとしたら、4つではどのように表示されるでしょうか？
現在、さまざまなことが提案されています。

例えば、ファイルの先頭にスイッチを入れてみたり、

@mode "logical";

1	@mode "logical";

あるいは、@mediaのように記述したり、

@mode (flow-mode: relative) {

}

@mode (flow-mode: relative) {

}

キーワードを加えたり、新しいプロパティ名にしたり、いろいろな案があります。

margin: relative 1em 2em 3em 4em;
margin: 1em 2em 3em 4em !relative;
margin-relative: 1em 2em 3em 4em;
~margin: 1em 2em 3em 4em;

margin: relative 1em 2em 3em 4em;

margin: 1em 2em 3em 4em !relative;

margin-relative: 1em 2em 3em 4em;

~margin: 1em 2em 3em 4em;

更に知りたい時は、Flow-relative syntax for margin-like shorthandsをご覧ください。ちなみに、CSSの先頭に@modeを記述してしまうと、紛らわしくなります。

私の好みで言うと、ある種のキーワードを与えることです。キーワードを使用すると、どのモードが使用されているかを正確に認識することができます。プリプロセッサで扱うのも簡単になるでしょう。

この問題はまだ解決されていないので、もしこれらの中で最も良いと思われるものがあるか、または記述されていない問題がある場合は、GitHubにコメントしてください。

Web Platform Tests 参加の呼びかけ

CSSワーキンググループの会議の非カンファレンススタイルのテクニカルプレナリーデーで、仕様のテストのためにもっと多くの人々を関与させるべきか議論しました。Web Platform Testsプロジェクトは、すべてのWebプラットフォームのテストを提供することを目的としています。ここでのテストは、ブラウザの各ベンダーが正しい仕様かどうかを確認するのに役立ちます。

CSSワーキンググループでは、候補勧告（CR）ステータスに達した仕様に対する変更は、テストが伴わなければなりません。これは、CRに達したら、ブラウザにその仕様を実装してフィードバックを求めているので意味があります。ブラウザのプログラムコードがアップデートできるように、仕様に変化があったら知る必要があります。

問題は、仕様を書く人が非常に少ないことです。仕様作成者はすべてのテストを書く必要があるため、CSSの進捗が遅れることになります。Web Platform Testsに貢献するということは、仕様の仕組みを深く知る方法であり、他の人がテストを書くのを見たいと考えています。この考えに興味がある方は、Testing the Web Platformを見てください。