Flexboxのgapプロパティがようやく使える

以前ほど筆者が細かく目を通していないため，CSSについてあまり大きなトピックを取り上げられないのですが，細かいところで注目している機能がいくつかあります。

そのひとつが，Flexboxのgapプロパティです。gapプロパティは，主にCSSのGridレイアウトで使われる，レイアウト内のボックスの隙間を定義する機能です。marginプロパティと役割が被るのですが，隙間を個々の要素でなくGridを定義したコンテナに指定することや，マージン・コラプスといった複雑な挙動がないことが，使いやすさとなっています。

gapプロパティはFlexboxにも定義されているのですが，あとから追加された機能なので実装が揃わない状態が続いていました。長らくFirefoxのみで実装されていたのですが，2020年7月のChrome 84でついに対応しました。WebKitにおいても実装されたため，おそらく春にリリースされるだろうSafari 14.1で対応しそうです（※1⁠）⁠。

※1

gapプロパティの実装状況。

CSSには@supportsブロックという，プロパティやセレクタのサポート状況に応じてCSSをかき分ける仕組みがあるのですが，Flexboxでgapがサポートされているかのチェックができませんでした。これは@supportsが「パーズ可能か」という点でしか対応状況をチェックしないためです。gapプロパティはすでにGridの機能として実装されているので，Flexboxにも対応しているかをこの方法では判別できません。結果，Firefoxで使えても他で使えないので，あきらめてmarginを使うなんてことをしていました。

gapプロパティはもともとgrid-gapプロパティという名で提案され，後にFlexboxなどへも適用させたいという思惑から，単にgapプロパティと改称された経緯がありました。Flexboxでのgapサポートも同じように，まずflex-gapといった名前で仕様が定義していたら，もうすこし早く使い始められたのになあと，仕様の不備を少し嘆いてしまいます。

Microsoftのアクセシビリティ周りのCSS改善

EdgeのChromiumへの移行にあたり，Microsoftがまず取り組みたいと言及したことのひとつに，アクセシビリティがありました。WindowsのデフォルトブラウザになるEdgeですから，それらのアクセシビリティの確保はMicrosoftにとって重要な課題です。

以降，アクセシビリティの取り組みが進みます。ひとつはハイコントラストモードが設定されたときのCSSの指定方法です。Windowsのハイコントラストモードは色を反転したようなものですが，旧Edgeでは-ms-high-contrastというベンダー接頭辞つきのメディア特性を導入対応していました。Chromium版EdgeはChromiumベースということもあり，Windows以外のプラットフォームにも対応します。Microsoft固有でも，Windows固有でもうれしくはありません。

標準化が行われ，メディアクエリー仕様にprefers-contrastというコントラストモードの度合いを示すメディア特性が追加されました。これにダークモード対応でも使われるprefers-color-schemeメディア特性を組み合わせると，ハイコントラストモードに対応できるとのことです。

CSSの改善はほかにも，HTMLのフォームのデフォルトスタイルシートに対しても行われました。MicrosoftはGoogleと共同で進め，2020年5月リリースのChromium 83で投入しています。各種コントロールのコントラスト比が向上し，フォーカスリング（キーボードなどでフォーカスした際に出る枠線）もふわっとした青色から，くっきりした黒色（ダークモード時は白色）に変更されました。

フォームのカスタマイズ性も向上

Chromiumのフォームのスタイルの変更はアクセシビリティのみを狙ったものではなく，CSSで見た目をコントロールさせやすくしたいというプロジェクトの一環でもあります。

HTML5ではスライダーや日付ピッカーなど新しいフォームコントロールが導入されましたが，見た目のカスタマイズの不自由さからか，あまり広まってはいません。以前から存在するselect要素なども，表示される部品や挙動のカスタマイズがしにくく，サイトやアプリのデザインと合わないことから同じく敬遠されがちです。結果としてJavaScriptによる再実装が手間をかけ行われ，そしてアクセシビリティを損なうといった問題が起きています。こうしたカスタマイズ性を持つフォームコントロールにすることで，これらの問題を解決したいわけです。

こうしたフォームの拡張について，Microsoftがselect要素のカスタマイズをできるように提案しています。見た目だけでなくコンボボックスなどの機能追加も考えていることから，かなり野心的だなと感じますが，実現できればとてもうれしいものです。

OSやライブラリのコントロール実装を調べ，使われている内部部品の名前や挙動をまとめようとするプロジェクトOpen UIも進んでいます。CSSWGとの合同ミーティングも提案・開催するなど，標準に対するインプットも行うようです。

フォームに関するCSSについてはこうした取り組みの外でも，セレクターの定義や実装が行われています。ファイル選択の「ファイルを開く」ボタンを表す::file-selector-button疑似要素や，フォームの自動入力時の状態を決める:autofill疑似クラスなどはMozillaにより提案され，実装も始まっています。どちらもWebKitのベンダー接頭辞付き実装があり，それらへの互換性確保という目的もありそうです。