九月に入ってから、ブラウザ側と WordPress の編集画面側で、更新の発表が重なりました。目立つ新機能というより、これまで回避策でしのいでいた部分が標準の機能に置き換わるものが多く、日々の制作にはむしろこちらのほうが効いてきます。

Chrome は次の版がベータに入り、編集画面まわりも新しい版が公開されています。実務で使えそうなものを並べて見ていきます。

下線の引き方をCSSだけで決められる

Chrome の次の版のベータには、text-decoration-inset と text-decoration-skip-spaces という二つのCSSプロパティが入っています。前者は、下線や上線、打ち消し線を文字の端からどれだけ内側に入れるか、あるいは外側に伸ばすかを指定するものです。auto のほか長さや割合で指定でき、開始側と終了側を別々に書くこともできます。

後者は、装飾の線を空白文字の下で途切れさせるかどうかを決めます。下線の位置を細かく調整したいとき、これまでは背景のグラデーションで線を描いたり、余計な要素を挟んだりして代用していました。文字装飾そのもので済むなら、あとから文字サイズを変えたときの崩れも減ります。

ポップアップが指の操作で勝手に閉じない

popover や dialog には、外側をクリックすると閉じる挙動が標準で備わっています。この判定が押した瞬間と離した瞬間の組み合わせで行われていたため、スマートフォンでポップアップの中身をスクロールしようとした指の動きや、右クリックでも閉じてしまうことがありました。

次の版では判定がクリックそのものに変わり、タッチでのスクロール操作や右クリックでは閉じなくなります。問い合わせフォームや絞り込みメニューをポップアップで出しているサイトなら、入力の途中で消えてしまう取りこぼしが減るはずです。

埋め込み枠の高さを中身に合わせられる

iframe の大きさを中身に合わせる仕組みも入ります。サイト側で明示的に有効にすると、親のページに置いた iframe 要素が、埋め込んだ文書の内容の高さに合わせて広がり、中の文書側にスクロールが発生するのを避けられます。

予約フォームや外部サービスの申し込み画面を埋め込むと、枠の中だけが二重にスクロールする状態になりがちで、これまでは高さを親のページに送り返す処理を自前で書いていました。標準の仕組みでまかなえるなら、埋め込み先ごとに用意していたスクリプトを減らせます。

カルーセルの印にどう振る舞わせるかを選べる

横スクロールで切り替わる領域に付く小さな印をまとめる scroll-marker-group に、links と tabs という二つのモードが加わります。links は既定のモードで、印の並びが案内リンクの一覧として扱われ、それぞれが順番にキーボード移動の対象になります。tabs のほうはタブの並びとして扱われ、選ばれている印だけが移動の対象になって、印の間は矢印キーで動きます。

見た目は同じでも、キーボードや読み上げでの扱いが変わる部分です。ここを自前のJavaScriptで作り込むと支援技術への対応まで自分で面倒を見ることになるので、指定ひとつで役割が切り替わるのは扱いやすいところだと思います。

編集画面では挿入ボタンを探さなくてよくなる

WordPress の編集画面側では、Gutenberg の新しい版でブロックの追加まわりが変わりました。選んでいるブロックによっては追加ボタンが見つけにくく、選択をやり直したり画面をスクロールしたりしていましたが、ブロックのツールバーから直接追加できるようになっています。グループの中に要素を足す、ギャラリーに画像をもう一枚足すといった操作が短くなります。

スタイルまわりでは、個別に上書きした指定が入っているブロックに印が付き、上書きのあるものだけを絞り込んで見られるようになりました。引き継いだサイトで、どこに手が入っているか分からないまま触るのが一番こわいので、一覧できるのは助かります。グループブロックの余白を縦と横で別々に指定できる、theme.json からラベル要素や入力欄、選択欄に指定を書ける、といった細かい追加も入っています。

直っているのは新機能だけではない

Safari の直近の版は、新機能よりも不具合の修正が中心でした。ページの拡大時に ic という文字幅の単位が仕様どおりの値にならない問題、位置指定に position-area を使った固定配置が本文をスクロールできる状態でうまく代替位置に回らない問題、本体のスクリプトが欠けた Service Worker の登録が自動で解除されず、新しいものを登録し直せない問題などが直っています。

この手の修正は告知を追っていないと気づきにくく、原因が分からないまま自分の書き方を疑って時間を使ってしまう部分でもあります。修正の一覧に目を通しておくと、次に似た症状に出くわしたときの見当が付きやすくなります。

こうして並べてみると、自前のスクリプトや回避策で埋めていた部分が、少しずつ標準の側へ移ってきているのが分かります。今あるサイトを急いで書き換える必要はありませんが、次にフォームや埋め込み、横スクロールの領域を作るときには、以前より短い書き方で済まないか一度確かめてみる価値はありそうです。