-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
独自の:target
セレクタを使用しない
#102
Comments
このやり方なら、 |
Chromeでのテスト結果だけど、以下のコードでもうまく動いた。やはり、履歴を移動する際に history.replaceState({}, '', '#hash');
history.pushState({}, '', location.pathname + location.search + location.hash);
history.back(); |
history.pushState({}, '', ''); ちゃんと仕様なり実際の挙動なりを調べる必要はあるけど、Chrome 83.0では「URLを変更しないpush」はこれで実現できた。 |
sounisi5011.jp/src/scripts/add-header-height.js Lines 98 to 100 in b5ddc53
history.replaceState(null, '', newURL);
history.pushState(null, '', newURL);
history.back(); 空文字列の動作ははっきりと仕様から読み解けなかった。 |
このコードでページ内移動もやってくれるかなって思ったんだけど、そううまくはいかなかった。 |
現在、小説ページ内でURLハッシュフラグメントを用いて移動した先のスタイルを指定する
:target
セレクタには、.pseudo-class::target
が併記されている。sounisi5011.jp/src/styles/novels.scss
Lines 135 to 136 in b5ddc53
これは、
add-header-height.js
内でdata-jump-id
属性に基づくページ移動を行う際に、history.replaceState()
メソッドでは:target
セレクタが機能しなかったため追加した回避措置である。しかし、これ以外の方法で、
:target
セレクタを機能させる方法を発見した。whatwg/html#639 (comment)
この手法により、
:target
セレクタを機能させることが可能になり、余計なCSSやコードを回避することが可能となる。ブラウザの「進む」ボタンの履歴が上書きされてしまうものの、
data-jump-id
属性を追加するのはOGP/Twitter Cardからの直リンクでハッシュフラグメントを追加できない問題を回避するためであり、進む履歴は存在しない。よって、この問題は無視することが可能である。The text was updated successfully, but these errors were encountered: