はじめに
この記事は NTTテクノクロス Advent Calendar 2018 の13日目です。
NTTテクノクロスの @suzukima こと鈴木雅貴です。こんにちは。
社内ではHTML/CSS/JavaScript周りの技術を活かし、Webアプリの見た目や使い勝手を良くする仕事をしています。また、弊社の技術ブロクで、VRやCSS組版の話(止まっててすみません)について書いたりしています。
今回は、CSSの仕様がいい感じにまとめられているドキュメント CSS Snapshotを紹介します。コードはまったく出てきません！
CSS Snapshotとは
CSSには数多くの仕様が存在するのですが、正直数が多く、使える/使えないを把握するのはなかなかに難しいです。
そんな人にオススメなのが、W3C CSS WGが発行するNote(ここでは参考資料と考えればよいでしょう)であります、CSS Snapshotです。その2018年版が11月15日に発行されました。
日本語訳はこちらです。 ➡️ CSS Snapshot 2018 日本語訳 (もんどさんいつもありがとうございます)
この文章はウェブ制作者というよりも実装者向けに書かれているのですが、現在のCSSがどの仕様で成り立っていると考えているのかが記されており、現在のCSSを把握するのにとても有用です。このようにまとまっているのはありがたいですね。感謝。
ここでは、2017年版との差異をみながら、その中身を軽い解説付きで紹介していきます。
CSSを構成する仕様たち
まずは、2018年のCSSを構成する仕様です。
| 仕様名 | 簡単な解説 |
|---|---|
| CSS Level 2, latest revision | CSSのコア仕様。最新版は2.1なのですが、間違い修正やCSS3仕様を奨励する2.2を作成中。くわしくはこちら ➡️ About the CSS 2.2 Specification (日本語訳: CSS 2.2仕様について) |
| CSS Syntax Level 3 | CSSのパース。 |
| CSS Style Attributes | style属性を使ったスタイル指定について。 |
| Media Queries Level 3 | メディアクエリー。 |
| CSS Conditional Rules Level 3 |
@mediaや@supportについて。 |
| CSS Namespaces |
@namespaceでXML名前空間を定義。 |
| Selectors Level 3 | セレクタ。 |
| CSS Cascading and Inheritance Level 3 | CSSのカスケーディングと継承。 |
| CSS Values and Units Level 3 | 値と単位。 |
| CSS Color Level 3 | 色。 |
| CSS Backgrounds and Borders Level 3 | 背景と枠線。 |
| CSS Image Values and Replaced Content Level 3 | 画像とその配置。 |
| CSS Fonts Level 3 | フォント。 |
| CSS Multi-column Layout Level 1 | いわゆる段組み。 |
| CSS User Interface Module Level 3 |
cursorやoutlineといったUIまわり。 |
| CSS Compositing and Blending Level 1 | 要素が重なった際の合成や混合を制御するもの。 |
| CSS Writing Modes Level 3 | 書字方向。縦書きなどを実現できる。 |
| CSS Flexible Box Module Level 1 | みんな大好きFlexbox。 |
| CSS Custom Properties for Cascading Variables Module Level 1 | CSSで変数を使えるようにする。 |
| CSS Grid Layout Module Level 1 | みんな大好きGrid。 |
2017年と比較すると、新しく以下が追加されました。
- CSS Flexible Box Module Level 1
- CSS Custom Properties for Cascading Variables Module Level 1
- CSS Grid Layout Module Level 1
特にCSS Gridは後述する「仕様は安定しているがテストと実装が不十分」からのジャンプ採用です。それだけ待望されて、みんなのリソースが注がれたということではないかと。それと比較するとFlexboxの採用はずいぶん遅いなという気がします。
テストやバグ修正が足りておらず、採用まであと少しの仕様
ある程度のブラウザで使われるようになっているが、テストやバグ修正が不十分という仕様も示されています。つまり後少しで前述の仕様たちに仲間入りできそうなものです。2017年、FlexboxとCustom Propertiesはここに含まれていました。
| 仕様名 | 簡単な解説 |
|---|---|
| CSS Transitions Level 1 | いわゆるCSSトランジション。 |
| CSS Animations Level 1 | いわゆるCSSアニメーション。 |
| CSS Transforms Level 1 | 変形。 |
| CSS Text Module Level 3 | テキスト操作。 |
| CSS Will Change Level 1 | 値が変更されることを明示することで、パフォーマンス向上につなげるwill-changeプロパティ関連。 |
| Filter Effects Module Level 1 | フィルターエフェクト。 |
2017年と比較すると、新しく以下が追加されました。
Will Changeは期待が高い印象がありますね。TransitionやAnimation、Transformは普通に使われているイメージですが、ここに含まれています。
仕様は安定しているが、実装やテストが不十分な仕様
もうすぐ使えるようになりますよ、的な仕様も紹介されています。2017年、Gridはここに含まれていました。実際、一気にすすんだ印象がありますね。
| 仕様名 | 簡単な解説 |
|---|---|
| CSS Counter Styles Level 3 | CSSのカウンターを拡張するもの。新しく@counter-styleが用意される。 |
| CSS Masking Module Level 1 | クリッピングやマスキング。 |
| CSS Shapes Module Level 1 | float状態の要素を矩形以外の形にすることができ、回り込みもいい感じになる。 |
| CSS Text Decoration Module Level 3 | テキスト装飾。圏点やシャドウが追加されている |
| CSS Speech Module |
media="print"のようにmedia="speech"を使って、文章の音声化をCSSに任せる。のですが、仕様を見る限り、2018.06.05版で廃止となっているような…😢 |
| CSS Box Alignment Module Level 3 | いろいろなCSSボックスレイアウトにおける、コンテナ内のボックスレイアウト関連仕様。 |
| CSS Fragmentation Module Level 3 | ページ・列・領域内フローを分割するフラグメンテーションモデルについて。 |
| CSS Containment Module Level 1 | 要素のサブツリーがページから独立していることを示すcontainsプロパティについて。 |
| CSS Scroll Snap Module Level 1 | スクロールのスナップポイントを導入する。 |
| Media Queries Level 4 | メディアクエリーの新しい仕様。メディアタイプがall, print, 'screen', 'speech'以外が非推奨となったり、メディアクエリーのサイズ指定が400px <= width <= 700pxと書けるようになったり。 |
| CSS Cascading and Inheritance Level 4 | CSSのカスケーディングと継承の新しい仕様。 |
2017年と比較すると、新しく以下が追加されました。
- CSS Containment Module Level 1
- CSS Scroll Snap Module Level 1
- Media Queries Level 4
- CSS Cascading and Inheritance Level 4
新しめの仕様がたくさんあるので、ざっくり見ておくと今後の方向性がみえてくると思います。CSS Speechはどうなるのでしょうね。
まとめ
CSSの今とこれからを把握するのに、CSS Snapshotは有用ですよ、というお話でした。CSS Snapshotは今後も出ると思いますので、定期的な状況把握として使うとよいと思います。
CSS Gridどんどん使っていきましょう 🦆🦆🦆
明日の担当は @zon_zone です。お楽しみに！