Chrome チームは、今年の CSS Day カンファレンスで大きな存在感を示しました。CSS ヘルプデスクを運営し、参加者からの質問に回答しました。また、ホワイトボードを使って、CSS にまだ不足していると思われる機能について参加者に尋ねました。この記事では、その質問の結果をお知らせします。また、こちらの簡単なアンケートにご協力いただき、HTML と CSS に欠けていると思われる機能についてお知らせください。CSS Day の参加者の意見に賛成ですか？
リクエスト数の上位 10 件
参加者は、アイデアを付箋に書き、ボードに追加するよう求められました。ステッカーを追加して、アイデアに投票することもできます。上位 10 個の機能は次のとおりです。
入力のスタイル設定のサポート
この機能は 21 票を獲得し、最も多くのご要望をいただきました。これらの一般的な UI 要素を一貫した方法でスタイル設定する方法が必要です。
これは、デベロッパーにとって最大の問題点として Chrome で認識されている領域であり、デベロッパー向けのより優れたソリューションの作成に向けて取り組んでいます。たとえば、カスタマイズ可能な選択要素は、新しいスタイル設定動作を有効にする方法を提供することを目的としています。その後、オプションに画像を追加したり、より複雑なスタイルを追加したりできます。このアプローチの利点は、通常の選択メニューにフォールバックするため、段階的な拡張が可能になることです。
視覚的に非表示
CSS Day で 19 票を獲得し、2 番目に人気のあるリクエストでした。スクリーン リーダーでのみ使用されるコンテンツを追加する方法を求めています。これは、コンテンツが表示されず、スクリーン リーダーによって読み上げられるだけの HTML 要素である可能性があります。
通常、これは .visually-hidden クラスを作成してコンテンツを非表示にし、スクリーン リーダーがアクセスできるようにすることで実現します。
これは一般的なリクエストですが、実装すべきではないと考える人もいます。詳しくは、視覚的に非表示のコンテンツは、解決すべきハックであり、固定すべきものではないと、CSS WG の問題 560に関するディスカッションをご覧ください。
position: sticky inside overflow:hidden
このリクエストには 16 票が集まりました。現在、position: sticky はすべての親が overflow: visible の場合にのみ機能します。
2017 年からこの機能をリクエストするオープンな問題があります。浮動小数点数を消去するために overflow: hidden の使用を有効にする最初のユースケースは、現在あまり必要とされていませんが、スレッドには他にも多くのシナリオが詳しく記載されています。
height: auto にアニメーション化する
12 票が集まったのは、height: auto にアニメーション化したいという意見でした。この機能は、CSS の interpolate-size プロパティと calc-size() 関数とともにウェブ プラットフォームに導入されます。これらの機能は Chrome 129 以降で利用可能になります。今後の投稿で、これらの機能の詳細をご確認ください。
その他の入力タイプ
HTML5 では、<input> 要素のさまざまなタイプが導入されました。たとえば、メールアドレスの場合は type="email"、範囲スライダーの場合は type="range" です。CSS Day では、ダブル範囲やカスタム データリストによる自動入力など、このようなタイプの追加について 10 票の投票がありました。
CSS での真の乱数
10 票を獲得した別のリクエストは、CSS での実数乱数に関するものです。これは以前リクエストされており、ランダムな animation-duration で回避されていました。
Mixin スタイルクラス
CSS には、以前の CSS プリプロセッサで使用されていた多くの機能（カスタム プロパティを使用した変数、CSS ネスト）が追加されています。ただし、再利用可能なミックスインはまだ言語の一部になっていません。CSS Day の参加者のうち 7 人が、この機能の導入を希望しています。
この機能の仕様策定を開始するための CSS ワーキング グループの決議が下されました。この問題のディスカッションに、ご意見やユースケースを追加できます。
Shadow DOM のグローバル スタイル
ユースケースに関する大きなディスカッション スレッドがあるもう 1 つの問題は、グローバル CSS スタイルを Shadow DOM 内に適用できるようにするリクエストです。CSS Day では 6 人がこのリクエストをしました。この機能により、グローバル リセット スタイルをウェブ コンポーネントにも適用し、単一の CSS ファイルをサイトのすべてのコンポーネントで使用できるようになります。ユースケースの概要をご覧いただき、この機能がご希望の機能であるかどうかをお知らせください。
混合単位の分割
calc(100vw / 1px) などの混合単位で除算する機能をリクエストする Interop 2024 の提案がありました。Interop 2024 では範囲が広すぎると判断されましたが、CSS Day の 6 人を含む多くのデベロッパーが、これを実装することを望んでいます。
nth-letter
CSS には、コンテンツの一部をスパンでラップしたかのように動作する疑似要素がいくつかあります。たとえば、::first-letter 疑似要素は、適用先のブロック コンテナの最初の行の最初の文字をターゲットにします。
このリストに ::nth-letter がありません。ウェブ デベロッパーから ::nth-letter の要望が寄せられたのは 20 年ほど前で、長い間要望されている機能です。CSS Day では 6 人がこの機能に投票し、トップ 10 の希望する機能の最後になりました。
CSS Day のトップ 10 に同意しますか？
これらの問題について、幅広いユーザーの皆様からご意見をお聞かせください。これらの問題が、皆様のトップ 10 に含まれていますか？そうでない場合は、CSS と HTML で他に何かご希望はありますか？こちらの簡単なフォームにご記入のうえ、お知らせください。回答の概要を別の投稿でまとめます。