来週に Stable リリースされる Chrome119
新機能に地味だけど便利かもしれない機能があった

select タグに hr タグを入れて横線を表示できるようになる

<select>
	<option>Option1</option>
	<option>Option2</option>
	<hr/>
	<option>Option3</option>
	<option>Option4</option>
	<hr/>
	<option>Option5</option>
	<option>Option6</option>
</select>

これまでは option 以外の関係無いタグを入れても自動で削除されてた
Chrome 119 からは hr タグのところに横線が表示されるので 区切りをわかりやすくできる

ただ 見た目はあまりきれいじゃない
スタイルに height や margin などを設定しても無視される
hr タグの有無しか反映されてなさそう
hr タグを連続して入れることで太い線にできるけど 見た目のためにそれはどうなのって思う

hr タグを書いているのに表示されていないところがありました
他のところは表示されています
devtools の Elements タブで見ても hr タグには特別なスタイルは当たっていないようです

原因は親要素が display: flex かつ縦並びになっていたことでした

<div style="
	display: flex;
	flex-direction: column;
">
	<p>a</p>
	<hr>
	<p>b</p>
</div>

こういう HTML で再現できます

hr に width: 100% を指定することで hr を表示できます

ですが align-items のデフォルトは stretch なので width: 100% を指定しなくても横幅いっぱいになるはずです
実際の値を見てみても stretch になっていました
なぜ width 指定なしでうまく表示されないのでしょうか

もう少しあれこれ見てみると原因はユーザーエージェントのデフォルトスタイルシートでした
Chrome 系ブラウザでは hr のマージン関係のデフォルトがこうなっています

margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;

margin-inline が左右なのでこれが auto ということは中身のサイズに合わせて左右に自動でマージンが付きます
hr は中身が無いので幅が 0 になって表示されてないということでした

デフォルトは auto じゃなくて 0 でいいと思うのですけど