CSS4の追加・変更点についてのまとめ「Media Queries Level4編」

htmlと違って意外と話題になってないCSS4。そういえばCSS3もまだ勧告されていません。
突然ですが、実はCSSはバージョンの概念がないのは知ってましたか?

「え?どういうこと?CSS3ってあるじゃん」となってる方も多いかと思いますが、バージョンではなく正しくはLevel。
CSS3とは「CSS Level3」なわけですが、CSS4からなのかCSS3のどこかからなのかモジュール単位でのレベルになってるみたい

テレレレッ テッテッテー♪

今回はそんなレベルアップしそうなCSS4の中でもMedia Queries Level 4 【WD(草案)】について気になる変更点をざっくりまとめてみました。

目次

@media typeの変更点

メディアクエリ レベル4についての草案はこちら → Media Queries Level 4

メディアタイプについて

「@media ●●」のあれですが、4つ以外が非推奨となりそうな感じ。
2.3. Media Types

In addition, the following deprecated media types are defined. Authors must not use these media types; instead, it is recommended that they select appropriate media features that better represent the aspect of the device that they are attempting to style against.

tty,tv,projection,handheld,braille,embossed,aural
タイプ概要Level4からの変更点
allすべてのデバイスに適応推奨
print印刷されたものや印刷プレビューなど印刷される表現を意図したデバイスに適応推奨
screenパソコンなどのスクリーン推奨
speech音声出力(auralは非推奨なので注意)推奨
projectionプロジェクタ出力非推奨
handheld携帯電話非推奨
braille点字用ディスプレイ非推奨

個人的には「all」「screen」「print」がほとんどなのでこれはそんなに心配していないところ。

非推奨になるメディア特性

9. Appendix A: Deprecated Media Features

The following media features are deprecated. They kept for backward compatibility, but are not appropriate for newly written style sheets. Authors must not use them. User agents must support them as specified.

特性概要Level4からの変更点
device-width出力デバイスの表示領域の幅非推奨
device-height出力デバイスの表示領域の高さ非推奨
device-aspect-ratio出力デバイスのアスペクト比非推奨

「width」「height」「aspect-ratio」はそのまま使えるっぽいですが、過去に作ったサイトでも「device-width」で記述しているケースがあるのでちょっぴり心配かも。
※max/minの接頭辞の追加はもちろんできるので、max-width、min-widthで作ってる方は安心。

css3のMedia Queriesの時点での書き方と少し変化があります。
例えば400〜700ピクセルのデバイスで使用したい時の記述

CSS3 Media Queriesでの書き方
@media screen and (min-width: 400px) and (max-width: 700px) { … }
Media Queries Level 4での書き方
@media (400px <= min-width <= 700px) { … }

ちょっぴり描きやすくて良さそう

追加になる?品質表示系メディア特性

非推奨になるものとは別に新しく追加になるメディア特性の候補も一応あげておきます。
まだいまいち使いどころがわからないので、とりあえずあげておきますね。

9. Appendix A: Deprecated Media Features https://drafts.csswg.org/mediaqueries-4/#update
特性概要
updateレンダリングされた後、コンテンツの表示をどれだけの頻度で更新できるか、デバイスの能力を照会するために使います
update-frequencyからupdateに変更になった模様
none, slow, fast
overflow-blockブロックに沿ってViewportからはみ出たコンテンツをどのように扱うかnone, scroll, optional-paged, paged
overflow-inlineインラインに沿ってViewportからはみ出したコンテンツをスクロールするかしないかnone, scroll

インタラクション・メディア特性

こちらも追加になりそうな候補ですが、ユーザーがどのように操作するかのインタラクションについてのメディア特性です。

特性概要
pointerポインティングデバイスの精度を照会するために使うメディア特性none, coarse, fine
hoverタッチパネル・マウスなどの複数の入力手段がある場合の指定none, hover

品質表示系より少しわかりやすいかもしれませんが、pointerであればタッチスクリーンなのかマウス操作なのかを判断して指定を追加するための記述です。

pointerの使い方?
/* タッチパネルなどのポインターの精度が低いデバイスの場合もっと大きいチェックボックスやラジオボタンにしてみる とかかな? */
@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"] {
    min-width:30px;
    min-height:40px;
    background:transparent;
  }
}

スマホやタブレット・タッチスクリーンのデバイスでのhoverとデスクトップPCでのマウスのhoverが同じ動作になってしまうと不便なので(一回タップしてhoverだと不便)別々の指定をできるようにするための記述だと思う

hoverの使い方?
/* hoveerが可能なデバイスの時の指定の仕方 */
@media (hover) {
  ul.menu > li        {display:inline-block;}
  ul.menu ul          {display:none; position:absolute;}
  ul.menu li:hover ul {display:block; list-style:none; padding:0;}
  /* ... */
}

ちょっぴり用途のわかりづらいものもありましたが、なかなか便利そうなものも他にも多々。

今回はMedia Queries Level4について書きましたが時間をみて他のモジュールに関しても書いていければと思いますが、解釈間違ってる部分があったら教えてください。

おまけのつぶやき

AltCSSでの変数なんかもCSS4で使えるようになりそうですし、概念的にはこのままSCSSやSASSを覚えておけば良さそう。
親要素の指定なんかも待ち遠しいですね。

ただ、CSS4のWD(草案)やCR(勧告候補)を少し読んでいても、これからのデザイナー・フロントエンドエンジニアは「デバイスの解像度」「デバイスの入力方法(マウス・タッチスクリーン)」「色域・色深度」まで考えて作らないといけなくなるとかなり大変になりそうです。
まぁ通常のサービスでそこまで考える必要もないかもしれませんが。大規模業務システムとかになってくると用途としては色々出てきそう。

そんなこんなで、昔とはだいぶ変わってきたし・・・
国内のデザイナー・フロントエンドエンジニアはもっと評価されるべきだ! なんて思って見たり・・・