最新版Chrome 134がリリース。 便利な新機能として、HTMLとCSSでプルダウンの装飾のカスタマイズが可能になりました。 （デモはICS MEDIAで公開中）

ICS MEDIAの記事はこちら。 ぜひご覧ください！ HTML/CSSで装飾可能に！ select・optionタグの新しいカスタマイズ方法 （担当：北川）

一見便利そうに見えますが、狭い端末やスクロール状況に応じて、画面内におさまるように制御するのはやや難易度が高いです。 （そこまではケアしてくれません） 腕に自信がある人が使うか、JSライブラリの成熟を待つか、あとはレアケースを無視して採用するか、かなと。 私見を述べると、そもそも標準のプルダウンは、自動的にOSごとに適切なUIで表示してくれるので、私としてはプルダウンはカスタマイズせず標準のものを選択すべきと考えています。

補足。 今回のselect::picker(select)やappearance: base-select;は嬉しい新機能です。 いままでは疑似プルダウンを、自前のdiv等の要素で作っていましたが、今後は各種ブラウザのサポートが進めば有力な選択肢になります。 ただ、従来より、ブラウザ標準のselect・optionの標準UIで実現可能なことが、疑似プルダウンで作られていることがウェブ制作の現場では多いと感じています。 疑似プルダウンは、アクセビリティーがないがしろになったり、画面サイズで見切れが発生しがちです。丁寧に作ると開発工数も大きくなります。 標準UIで十分満たせることが多いので、疑似プルダウンより、select・optionの標準UIをはじめに検討しましょう、という意見でした。 フロントエンドエンジニアに限らず、UIデザイナーに対しても。

just published some posts in the new page in @CoinMarketCap Community 🤩🎉 🔥 Join HUDI on CMC 👇