HTML&CSSとWeb制作の3年間の変化について

HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』はHTMLとCSSをリファレンス的にまとめた書籍です。第1版を出してから3年が経ち、その間の変化を反映させて最新の状態に改定しました。

『HTML5&CSS3デザイン 現場の新標準ガイド【第2版】』表紙

Web制作の変化

3年の間にWeb制作の現場は大きく変化しました。

第1版を出した時点ではマイナーな存在だった「フレキシブルボックス(Flexbox)」や「CSSグリッド(CSS Grid)」も、今ではWebデザインのコントロールに欠かせないメジャーな機能となっています。フィルタやブレンドといった便利な機能も幅広く活用されるようになってきました。

あれもこれもフロート(float)でコントロールしていたことを考えると、たった3年の間にWeb制作の効率が大幅に向上したと言えるでしょう。

第2版には、

  • フレキシブルボックスの「ギャップ(gap)」
  • CSSグリッドの「サブグリッド(subgrid)」
  • スクロールスナップ
  • 比較関数 min() / max() / clamp()
  • :is() / :where()疑似クラス
  • IEのみ(ES6 モジュールに未対応なブラウザのみ)でスクリプトを実行できる<script nomodule>

などなど、さらにWeb制作が便利になる最新機能の情報を追加しています。

ブラウザ対応の変化

第1版では「この先、対応ブラウザは増えるのだろうか?」と思いつつ掲載していた機能も多々ありました。しかし、3年の間に主要ブラウザでの対応が進み、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に掲載しています。

新しい機能の開発・標準化までの流れの変化

3年の間に変わったのはWeb制作の現場だけではありません。Webそのものに求められることも格段に多くなり、変化のスピードもどんどん速くなっています。それに応えるように、ブラウザにはWebの問題を解決する機能が次々と追加され、HTMLとCSSの仕様にもすぐに反映されるようになっています。

たとえば、『Webサイト高速化のための 静的サイトジェネレーター活用入門』でGatsbyJSが使用していた

  • 高速化関連の機能(プリロードやプリフェッチ)
  • PWA関連の機能(マニフェストファイルの指定)
  • 画像の遅延読み込み(Lazy Load)

なども、HTMLの標準仕様「HTML Living Standard」に採用済みです。

HTML&CSS コーディング・プラクティスブック 3』で使用した

  • ダークモードを実現する特性(prefers-color-scheme)

は、メディアクエリのLevel 5の仕様(CSS5)で策定が進められています。
いずれの機能も第2版に追加していますので、参考にしていただければと思います。


このように開発や標準化の作業がスピーディになったと感じるのは、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

3年ではそれほど変わっていない気もしていましたが、改定作業を通して思った以上にアレやコレやと変わっていたことに気付くことができました。これからも、制作現場、ユーザー、Webを取り巻く諸々に応じて、HTMLとCSSは進化していくのだと思います。

第1版から追加・変更した主なHTML&CSS

最後に、第1版から追加・変更した主な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