textarea の左に行番号の列を並べ、改行の数から番号を作って、スクロールに合わせて動かします。scrollTop をそろえる書き方で起きる15pxのずれ、折り返しによるずれ、onSelect では拾えないキャレットの移動を Ch ...

タブでインデントしたコードは、ブラウザーでは空白8文字分の幅で表示されます。pre に tab-size: 4 を付けると4文字分になります。数値と長さの違い、タブ位置の考え方、効かない場合を Chromium で確かめました。

画像の R・G・B をそれぞれ数段階にそろえ、色の数を減らしたポスターのような画像を React で表示して PNG で保存しました。SVG のフィルターで表示だけを変える書き方と、color-interpolation-filter ...

CSS の背景画像を image-set() で書くと、倍率2の画面には2倍の大きさの画像、通常の画面には普通の画像をブラウザーが選んで読み込みます。書き方、倍率ごとに選ばれた画像、表示される大きさ、type() で形式を選ぶ方法を確 ...

CSS の text-spacing-trim で、かっこや句読点の空きを整えられます。Chrome と Edge では、隣り合うかっこは何も書かなくても詰まります。行頭も詰める指定や、フォントによって効かない場合も確かめました。

CSS の text-box-trim と text-box-edge を使うと、文字の上下にできる余白を、大文字の上端やベースラインの位置まで削れます。ボタンの文字を上下の中央に置く例や、日本語の文字で気をつけることを Chromi ...

:focus-visible に outline を書くと、Tab キーで選んだときだけ太い枠が出て、ボタンをマウスで押したときには出ません。暗い背景でも見える2色の枠、強制カラーモードで消えない書き方、枠が切れるときの直し方も確かめ ...

CSS の @scope を使うと、指定した要素の中だけにスタイルを効かせ、to で決めた要素から先は外せます。入れ子のテーマで近いほうが勝つ仕組みや、詳細度の数え方も Chromium で確かめました。

:invalid だと、開いた時点で必須の欄が赤くなります。:user-invalid に変えると、入力して欄を離れたときや送信しようとしたときに、間違っている欄だけが赤くなります。赤くなるタイミングも Chromium で確かめまし ...

CSS の @layer を使うと、詳細度ではなく、先に決めたレイヤーの順番でスタイルの勝ち負けが決まります。順番の宣言、レイヤーの外のスタイル、@import、!important での逆転を Chromium で確かめました。