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
メディアタイプについて3>
「@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 | すべてのデバイスに適応 | 推奨 |
印刷されたものや印刷プレビューなど印刷される表現を意図したデバイスに適応 | 推奨 | |
screen | パソコンなどのスクリーン | 推奨 |
speech | 音声出力(auralは非推奨なので注意) | 推奨 |
projection | プロジェクタ出力 | 非推奨 |
handheld | 携帯電話 | 非推奨 |
braille | 点字用ディスプレイ | 非推奨 |
個人的には「all」「screen」「print」がほとんどなのでこれはそんなに心配していないところ。
非推奨になるメディア特性
9. Appendix A: Deprecated Media FeaturesThe 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ピクセルのデバイスで使用したい時の記述
@media screen and (min-width: 400px) and (max-width: 700px) { … }Media Queries Level 4での書き方
@media (400px <= min-width <= 700px) { … }
ちょっぴり描きやすくて良さそう
追加になる?品質表示系メディア特性
非推奨になるものとは別に新しく追加になるメディア特性の候補も一応あげておきます。
まだいまいち使いどころがわからないので、とりあえずあげておきますね。
特性 | 概要 | 値 |
---|---|---|
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(勧告候補)を少し読んでいても、これからのデザイナー・フロントエンドエンジニアは「デバイスの解像度」「デバイスの入力方法(マウス・タッチスクリーン)」「色域・色深度」まで考えて作らないといけなくなるとかなり大変になりそうです。
まぁ通常のサービスでそこまで考える必要もないかもしれませんが。大規模業務システムとかになってくると用途としては色々出てきそう。
そんなこんなで、昔とはだいぶ変わってきたし・・・
国内のデザイナー・フロントエンドエンジニアはもっと評価されるべきだ! なんて思って見たり・・・