Goldilocksなカスタマイズ可能なセレクトの高さ
カスタムセレクト要素の高さ設定における「ちょうどいい」バランスを探る記事。Jake Archibaldが、セレクトメニューのドロップダウンが短すぎず長すぎず、ユーザーにとって最適な高さを動的に決定する手法について考察している。
背景メモ
Jake ArchibaldはGoogleのエンジニアで、Web標準やブラウザAPIについての解説で知られる。
「Goldilocksなselect要素の高さ」問題とは、HTMLのネイティブ`<select>`ドロップダウンの表示項目数が少なすぎず多すぎず「ちょうどいい」高さをブラウザがどう決めるか、という話。OSやブラウザごとに挙動が違い、特に画面の下端で表示が切れたり、選択肢が少ないのに不自然に大きなドロップダウンになったりする。
Archibaldは、CSSの`size`属性や`max-height`などで制御しようとする従来の方法の限界を指摘し、近年のCSS(anchor positioning、`interpolate-size: allow-keywords` など)を使ったより洗練されたアプローチを提案している。`<select>`は2020年代後半のブラウザアップデートでスタイルのカスタマイズ性が大幅に向上しており、この記事もその流れの一環。