『HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』はHTMLとCSSをリファレンス的にまとめた書籍です。第１版を出してから３年が経ち、その間の変化を反映させて最新の状態に改定しました。
Web制作の変化
３年の間にWeb制作の現場は大きく変化しました。
第１版を出した時点ではマイナーな存在だった「フレキシブルボックス（Flexbox）」や「CSSグリッド（CSS Grid）」も、今ではWebデザインのコントロールに欠かせないメジャーな機能となっています。フィルタやブレンドといった便利な機能も幅広く活用されるようになってきました。
あれもこれもフロート（float）でコントロールしていたことを考えると、たった３年の間にWeb制作の効率が大幅に向上したと言えるでしょう。
第２版には、
- フレキシブルボックスの「ギャップ（gap）」
- CSSグリッドの「サブグリッド（subgrid）」
- スクロールスナップ
- 比較関数 min() / max() / clamp()
- :is() / :where()疑似クラス
- IEのみ（ES6 モジュールに未対応なブラウザのみ）でスクリプトを実行できる<script nomodule>
などなど、さらにWeb制作が便利になる最新機能の情報を追加しています。
ブラウザ対応の変化
第１版では「この先、対応ブラウザは増えるのだろうか？」と思いつつ掲載していた機能も多々ありました。しかし、３年の間に主要ブラウザでの対応が進み、EdgeがChromiumベースになったことも相まって、IE対応の必要がなければ実戦投入できるものが増えています。
たとえば、
- フロート時代のクリアフィックス（clearfix）を簡単に実現できるフロールート「display: flow-root」
- display: none と同じようにボックスを非表示にしつつ子階層のボックスは構成する「display: contents」
- ボックスサイズを中身に合わせる「min-content」や「max-content」
- デバイスの判別に使えるメディアクエリの特性「pointer」や「hover」
- リストマークの疑似要素「::marker」
- UAスタイルシートの設定に戻せるキーワード「revert」
- 全プロパティの設定をリセットできる「all」
… などなど。
それぞれはちょっとした機能ですが、これまでの機能では実現が難しかったものが揃っています。地味ながら、日本語関連の
- 禁則処理（line-break）
- 圏点（text-emphasis）
- 縦書き内の文字の向き（text-orientation）
なども、IE以外のブラウザが対応済みとなりました。こうした機能はどんどん使っていきたいところです。
個人的に興味を引かれたのは、アルファチャンネルを使ったシェイプ（shape-outside）の回り込みです。実戦投入したらWebデザインが楽しくなりそうなので、どこかで使ってみたいと思います。
HTMLとCSSのブラウザ対応一覧表は本書の特典PDFに掲載しています。
新しい機能の開発・標準化までの流れの変化
３年の間に変わったのはWeb制作の現場だけではありません。Webそのものに求められることも格段に多くなり、変化のスピードもどんどん速くなっています。それに応えるように、ブラウザにはWebの問題を解決する機能が次々と追加され、HTMLとCSSの仕様にもすぐに反映されるようになっています。
たとえば、『Webサイト高速化のための 静的サイトジェネレーター活用入門』でGatsbyJSが使用していた
- 高速化関連の機能（プリロードやプリフェッチ）
- PWA関連の機能（マニフェストファイルの指定）
- 画像の遅延読み込み（Lazy Load）
なども、HTMLの標準仕様「HTML Living Standard」に採用済みです。
『HTML&CSS コーディング・プラクティスブック 3』で使用した
- ダークモードを実現する特性（prefers-color-scheme）
は、メディアクエリのLevel 5の仕様（CSS5）で策定が進められています。
いずれの機能も第２版に追加していますので、参考にしていただければと思います。
このように開発や標準化の作業がスピーディになったと感じるのは、HTMLの標準仕様がWHATWGの「HTML Living Standard」に一本化され、ブラウザ開発者目線での変更が直接反映されるようになったのが大きいと言えるでしょう。
さらに、HTMLもCSSも、GitHubで策定作業が進められるようになったことも大きいように感じます。おかげで、仕様に関する情報を追いやすくなりました。
HTML Living Standardのリポジトリ
https://github.com/whatwg/html
CSS Working Groupのリポジトリ
https://github.com/w3c/csswg-drafts
３年ではそれほど変わっていない気もしていましたが、改定作業を通して思った以上にアレやコレやと変わっていたことに気付くことができました。これからも、制作現場、ユーザー、Webを取り巻く諸々に応じて、HTMLとCSSは進化していくのだと思います。
第１版から追加・変更した主なHTML&CSS
最後に、第１版から追加・変更した主なHTMLとCSSをまとめておきます。標準仕様から外されたものや、IEと旧版のEdgeしか対応していなかった拡張機能については削除しています。
| HTML | |
|---|---|
| タグ | hgroup / menu / dialog |
| linkの属性 | integrity / referrerpolicy |
| scriptの属性 | nomodule / referrerpolicy |
| imgの属性 | loading / decoding / width / height |
| formの属性 | rel |
| linkのrel属性の値 | 追加： manifest / modulepreload / preconnect / prefetch / preload / prerender / pingback 拡張値から仕様に採用： canonical / dns-prefetch |
| aのrel属性の値 | 追加： external / noopener / opener |
| metaのname属性の値 | 拡張値から仕様に採用： referrer / theme-color |
| 削除 | menuitem htmlのmanifest属性 linkやaのrev属性 |
| CSS | |
|---|---|
| 疑似クラス | :is() / :where() / :fullscreen / :focus-visible / :focus-within |
| 疑似要素 | ::backdrop / ::marker / ::placeholder |
| メディアクエリの特性 | color-gamut / display-mode / prefers-color-scheme / prefers-reduced-motion |
| レンダリング関連 | contain / content-visibility / contain-intrinsic-size |
| 論理プロパティ | margin-block / border-block / padding-block / margin-inline / border-inline / padding-inline / inset-block / inset-inline など |
| シェイプ | shape-outside（画像のアルファチャンネル） / shape-margin / shape-image-threshold |
| スクロールスナップ | scroll-snap-type / scroll-snap-align / scroll-padding / scroll-margin |
| フレキシブルボックス | gap |
| CSSグリッド | subgrid |
| テキスト装飾 | text-decoration-skip-ink |
| 縦横比 | aspect-ratio |
| 扇形グラデーション | conic-gradient() / repeating-conic-gradient() |
| 単位 | Q（級数） |
| CSS4の色指定 | 「rgb(R G B / A)」「color()」など |
| CSS-wide キーワード | revert |
| 比較関数 | min() / max() / clamp() |
| プロパティ値の追加 | background-clip: text font-family: system-ui line-break: anywhere overflow-wrap: anywhere object-fit: scale-down white-space: break-spaces |
| 削除 | @viewport リージョン flow-into / flow-from エクスクルージョン wrap-flow |
