UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Chrome】scroll-to-text-fragment

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=クック諸島(,立憲君主制国家

f:id:uggds:20210507005321p:plain

補足でこの記事によると

web.dev

  • 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

参考

https://wicg.github.io/scroll-to-text-fragment/