ウェブ制作の現場では、ブラウザの新しい版に何が入るかを追いかけるかどうかで、書けるコードの幅が少しずつ変わってきます。今回はChromeの次の安定版に向けたベータ版で公開された変更のうち、中小規模のサイト制作でも出番がありそうなものを並べてみます。
派手な目玉機能があるわけではありません。ただ、これまでJavaScriptを足して解決していた場面や、ブラウザ任せにするしかなかった挙動を、書き手の側で決められるようになる追加がいくつか含まれています。
再生中か一時停止かをCSSだけで見分ける
音声や動画の要素に対して、再生の状態に応じて当たる擬似クラスが加わります。再生中を表す:playing、一時停止の:pausedのほか、シーク中の:seeking、読み込み待ちの:buffering、止まってしまった状態の:stalled、消音中の:muted、音量が固定されている:volume-lockedの計7種類です。
これまでは再生ボタンの見た目を切り替えるだけでも、イベントを拾ってクラスを付け外しするコードが必要でした。状態がそのままセレクタになるなら、装飾はCSS側に寄せられます。動画を使った制作物が多い方は、書き方が変わってくるところだと思います。
元の色はそのままに透明度だけを変える
CSS Color 5で定義されているalpha()が使えるようになります。すでにある色の値を起点にして、透明度の部分だけを差し替えた色を作れる指定です。
色をカスタムプロパティで一括管理していると、同じ色の薄い版を用意するために別の変数を足したり、色の値を分解して書き直したりしがちでした。元の色を参照したまま透明度を変えられれば、配色の管理は素直になります。ブランドカラーを一箇所で定義して各所に展開する作りとは相性が良さそうです。
入力欄の自動修正を書き手が決められる
autocorrect属性が、どの要素にも書ける共通の属性として扱われるようになります。inputやtextarea、contenteditableを指定した箇所で、入力内容に自動修正をかけるかどうかを指定できます。
氏名や住所、型番のように、勝手に直されると困る値を扱うフォームは少なくありません。問い合わせフォームの取りこぼしは中小企業のサイトでは直接の機会損失になるので、こうした細かい制御が標準の属性で書けるのは実務寄りの改善です。
読み込み先を絞り込むヘッダー
レスポンスヘッダーで接続先の許可リストを指定し、そこに載っていない宛先への通信を接続の前段階で止める仕組みも入ります。想定していない外部への送信を、ページを配信する側の設定で断てるという考え方です。
コンテンツセキュリティポリシーと重なる部分もありますが、プラグインやタグを多く積んだサイトほど、外部との通信経路は把握しづらくなります。制作を引き継いだサイトの棚卸しに使える道具が増えた、という見方もできます。
デスクトップ向けの指定や端末性能の判定
このほか、インストール型のデスクトップアプリとして動かしたときにタイトルバーとして扱う領域を決めるwindow-dragプロパティや、端末のCPU性能の段階を取得できるAPIも追加されます。前者は従来のapp-regionを置き換えるもので、後者は重い処理を出し分ける用途が想定されています。
どちらも一般的なコーポレートサイトで今すぐ使う類のものではありません。ただ、ブラウザで動かすものの幅がどこまで広がっているかを知る目安にはなります。
ベータ版の内容は正式版までに変わることがあるので、この段階で本番に入れる話ではありません。Chromeの開発者向けブログに各項目の詳細が載っているので、気になるものがあれば一次情報を確認しておくと、正式に配信されたときに動きやすくなります。
