9月22日に安定版が出たChromeの新版には、見た目の小さな調整に効く機能がいくつか入りました。先日このブログで取り上げた、埋め込みのiframeが中身に合わせて伸びる仕組みもそのひとつですが、今回はその陰に隠れがちなCSSの追加に目を向けます。中心になるのは、下線や打ち消し線の始まりと終わりの位置を調整できる text-decoration-inset というプロパティです。あわせて、スクロールで切り替わる表示につける目印の振る舞いを選べるようになった変更と、ポップオーバーやダイアログの閉じ方の改善も紹介します。
下線の端を内側にも外側にもずらせる
これまで、文字につける下線(underline)や上線、打ち消し線は、表示された文字列とまったく同じ長さで引かれていました。デザインの都合で「下線を少し短くしたい」「左右に少しはみ出させたい」と思っても、text-decoration 側にはその手段がありませんでした。
Chrome for Developersの解説によると、text-decoration-inset は線の始点と終点を文字列の端から調整するためのプロパティです。値には auto、長さ、パーセンテージを指定でき、ひとつの値で両端をまとめて、ふたつの値で始点と終点を別々に指定できます。たとえば次のように書くと、両端が10pxずつ内側に寄ります。
a {
text-decoration: underline;
text-decoration-inset: 10px;
}正の値は線を内側に縮め、負の値は外側に伸ばします。始点と終点に違う値を入れれば、線を左右どちらかに寄せることもできます。見出しの下に短いアクセント線を引く、ボタン風のリンクで線の両端を少し余らせる、といった細かな調整が、線そのものの設定だけで済むようになります。
背景のグラデーションで描いていた下線の置き換え
制作の現場では、マウスを乗せたときに下線が左から伸びてくる演出がよく使われています。従来は、本物の下線ではなく background-image のグラデーションを細く敷いてその幅を動かしたり、::after の疑似要素で線を作ってアニメーションさせたりするのが定番でした。
公式の解説でも、このプロパティを使えば背景のグラデーションや追加の要素に頼らず、文字の装飾線そのもので「線が現れる」効果を作れると説明されています。本物の下線のまま扱えるので、線の太さや色、文字からの距離といった既存の指定と組み合わせやすく、複数行にまたがるリンクでも装飾線として素直に振る舞うことが期待できます。
一方で、今回の情報源はChrome側の発表で、ほかのブラウザでの対応状況は別に確かめる必要があります。対応していないブラウザでは通常の長さの下線になるだけなので、見た目の上乗せとして段階的に取り入れるのが無理のない使い方でしょう。既存サイトの疑似要素による実装を急いで書き換えるより、新しく作るパーツから試すほうが安全です。
スクロールの目印をタブとしても扱える
もうひとつのCSSの変更は、横スクロールのカルーセルなどで使う scroll-marker-group の拡張です。このプロパティは、スクロール領域の前後に目印のまとまりを自動で作るもので、新版ではその振る舞いを links と tabs のふたつから選べるようになりました。
リリースノートによると、既定の links では目印のまとまりがナビゲーション、個々の目印がリンクとして扱われ、Tabキーで順に移動できます。tabs を選ぶと、まとまりがタブの一覧、目印がタブ、中身がタブパネルとして扱われ、Tabキーで止まるのは選択中の目印だけになり、目印の間は矢印キーで移動します。選ばれていないパネルの中身は支援技術からも隠れます。
タブ切り替えのUIを自前で作ると、キー操作や役割の付与まで含めた実装はそれなりに手間がかかります。見た目だけでなく操作の約束事までCSSの指定で選べるのは、アクセシビリティの面でも意味のある変更だと感じます。ただしこちらも対応ブラウザは限られるため、当面はJavaScriptで作った既存のタブを置き換えるより、検証環境で挙動を確かめておく段階だと考えています。
外側を押すと閉じる動作の取りこぼしが減る
同じ版では、ポップオーバーやダイアログの外側をクリックして閉じる動作も見直されました。判定に使うイベントが、押した瞬間と離した瞬間の組み合わせから、クリックのイベントに変わっています。これにより、タッチ画面でのスクロール操作や右クリックで、意図せずポップオーバーやダイアログが閉じてしまうことがなくなるとされています。
スマートフォンでメニューを開いたまま中身をスクロールしようとして閉じてしまう、という問い合わせは小さな会社のサイトでも起こりがちです。ブラウザ側の変更なので制作側の作業は要りませんが、標準のポップオーバーやダイアログを使っている部分は、今後こうした改善が自動的に届く側に回ります。下線の長さのような細部も含めて、手作りしていた部分を少しずつ標準の機能に寄せていくと、保守の手間が軽くなっていくはずです。
