今年の CSS Day カンファレンスでは、Chrome チームが大きな存在感を示しました。CSS ヘルプデスクを運営し、参加者からの質問に回答したほか、CSS にまだ足りないと思うものを尋ねるホワイトボードも用意しました。この記事では、その質問の結果を紹介します。また、こちらの簡単なアンケートにご協力いただき、HTML と CSS に欠けていると思われる点をお聞かせください。CSS Day の参加者に同意しますか？
上位 10 件のリクエスト
参加者に付箋にアイデアを書き、ボードに追加してもらいました。ステッカーを追加してアイデアに投票することもできます。上位 10 個の機能は次のとおりです。
入力のスタイリングのサポート
これは 21 票を獲得した、最も要望の多かった機能でした。これらの一般的な UI 要素のスタイルを統一したいと考えるでしょう。
Chrome では、この問題がデベロッパーにとっての最大の課題の 1 つであることを認識しており、デベロッパー向けのより良いソリューションを作成する取り組みを進めています。たとえば、カスタマイズ可能な select 要素は、新しいスタイリング動作をオプトインする方法を提供することを目的としています。その後、画像を追加したり、オプションにさらに複雑なスタイルを設定したりできます。このアプローチの利点は、通常の選択メニューにフォールバックできるため、プログレッシブ エンハンスメントが可能になることです。
視覚的に非表示
CSS Day で 19 票を獲得し、2 番目に人気のあるリクエストでした。このリクエストは、スクリーン リーダーでのみ使用されるコンテンツを追加する方法に関するものです。これは HTML 要素である可能性があり、コンテンツは表示されず、スクリーン リーダーによって読み上げられるだけです。
通常、コンテンツを非表示にしつつ、スクリーン リーダーからアクセスできるようにするには、.visually-hidden クラスを作成します。
このリクエストは多く寄せられていますが、実装すべきではないと考えているユーザーもいます。詳しくは、Visually hidden content is a hack that needs to be resolved, not enshrined と CSS WG issue 560 のディスカッションをご覧ください。
overflow: hidden 内の position:sticky
このリクエストには 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 スタイルをシャドー DOM 内に適用できるようにするリクエストです。CSS Day では 6 人がこのリクエストを行いました。この機能により、グローバル リセット スタイルをウェブ コンポーネントにも適用し、単一の CSS ファイルをサイトのすべてのコンポーネントで動作させることができます。ユースケースの概要をご覧になり、この機能をご希望の場合はお知らせください。
単位の異なる数値の割り算
Interop 2024 の提案では、calc(100vw / 1px) などの混合単位で除算する機能がリクエストされました。Interop 2024 には広すぎると判断されましたが、CSS Day の 6 人を含む多くのデベロッパーがこの実装を望んでいます。
nth-letter
CSS には、コンテンツの一部を span で囲んだかのように動作する疑似要素がいくつかあります。たとえば、::first-letter 疑似要素は、適用先のブロック コンテナの最初の行の最初の文字をターゲットにします。
このリストに ::nth-letter が含まれていません。ウェブ デベロッパーの皆様は 20 年ほど前から ::nth-letter を求めていらっしゃいます。CSS Day では 6 人がこの機能に投票し、上位 10 個の要望機能の最後となりました。
CSS Day のトップ 10 に同意しますか？
これらの問題について、より多くのユーザーからご意見をお聞かせいただきたいと考えています。これらの問題は、皆様のトップ 10 に入りますか？他に CSS や HTML で見たいものがあれば、こちらのフォームにご記入のうえ、お知らせください。回答は別の投稿でまとめさせていただきます。