Chrome80からscroll-to-text-fragmentがデフォルトで有効になっていることに気付いた
scroll-to-text-fragmentは以下のjxckさんの記事がわかりやすい blog.jxck.io
いままで特定の位置へのスクロールにはURLの後ろにHTMLのID属性をこんな感じでhttp://example.com#some-id
つけていたが
これだと、IDがない場合に使えないので他の方法が考えられていた
それがscroll-to-text-fragment
で、URLの後ろに:~:text=[prefix-,]textStart[,textEnd][,-suffix]
の構文の文字列をつけてアクセスすると、その箇所にスクロールとハイライトされて表示される
https://ja.wikipedia.org/wiki/クック諸島#:~:text=クック諸島(,立憲君主制国家
補足でこの記事によると
- 1つのURLに複数のテキストフラグメントをつける場合はアンパサンド
&
で区切る必要がある - 強調のスタイルを変える場合は
::target-text
疑似セレクターを使う
:root::target-text { color: black; background-color: red; }
- 同じページの遷移、iframe内では使用できない
セキュリティの面で、外部からそのテキストがヒットしたかどうかは判断できない
例えば悪質業者がログイン中かどうか知ろうとして「ログアウト」というテキストを探そうとしても探せないようになっているこの機能を無効にして必ずページトップにさせたい場合は以下をヘッダーにいれる(実験中)
Document-Policy: force-load-at-top
https://www.chromestatus.com/feature/5744681033924608