Open2024/04/27にコメント追加4

HTMLあれこれ

目次とか

HTML関連のあれこれを記録するところ

chrome で img 要素の loading="lazy"が思うように効いてくれないので、代わりに交差オブザーバーを使ってみる。

イメージとしては、旧twitter のように、リストを下部までスクロールすると追加要素の読み込みが行われる感じにしたい。

MDN のコードをコピればすぐに試すことができる。

説明されていない(と思う)が、obsever の与えた option.rootと observer.observe(target)した target において、「交差したとき」と「交差しなくなったとき」の少なくとも2回 callback が走る。
なので、説明にもあるが、callback では entry.isIntersecting の値の確認が必要。
observer.observe()を異なる対象に対して実行することで、複数の要素を1つの observer で監視できる。
callback の entries の数は基本的に1つ。監視対象が2つ以上で、かつ「交差した/しなくなったとき」が全く同一の要素がある場合は、entriesの数が1より大きくなる。特殊ケースとして、最初のページ表示時に走る callback ではentries の数は監視対象の数と同じ。

「フォーカスを受け取るかどうか」についてのHTML仕様

フォーカス可能 (focusable)
理論上フォーカス可能であることを意味する
すなわち、"フォーカス可能"な要素には.focus()によってフォーカスを移すことができる
逆に言えば、"フォーカス可能"ではない要素では、.focus()を実行しても何も起こらない
逐次フォーカス可能 (sequential focusable)
「Tabキーを押すことによるフォーカスの移動」の対象に含まれることを意味する
"逐次フォーカス可能"ではない要素は、tabindexを0にすると"逐次フォーカス可能"になる
"逐次フォーカス可能"な要素は、tabindexを-1にすると"逐次フォーカス可能"ではなくなる
ある要素が"逐次フォーカス可能"ならば、その要素は"フォーカス可能"である
クリックフォーカス可能 (click focusable)
「その要素をクリックすることによるフォーカスの移動」が可能であることを意味する
"クリックフォーカス可能"でない要素は、tabindexを設定すると"クリックフォーカス可能"になる
"クリックフォーカス可能"な要素は、tabindexをどのように変更してもそのままである
ある要素が"クリックフォーカス可能"ならば、その要素は"フォーカス可能"である