Unix時間を打てば日時に、日時を選べばUnix時間に変わる入力欄を React で作りました。datetime-local の値をブラウザのタイムゾーンで読む方法、valueAsNumber の落とし穴、秒とミリ秒の取り違え、夏時間 ...

img に object-view-box: xywh(x y 幅 高さ) を付けると、画像のその範囲だけが表示され、img の大きさも範囲に合わせて決まります。書き方、object-fit との組み合わせ、拡大やアニメーションを C ...

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 で確かめました。