独自の`:target`セレクタを使用しない
Opened this issue · 5 comments
現在、小説ページ内で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
セレクタを機能させる方法を発見した。
この手法により、:target
セレクタを機能させることが可能になり、余計なCSSやコードを回避することが可能となる。
ブラウザの「進む」ボタンの履歴が上書きされてしまうものの、data-jump-id
属性を追加するのはOGP/Twitter Cardからの直リンクでハッシュフラグメントを追加できない問題を回避するためであり、進む履歴は存在しない。よって、この問題は無視することが可能である。
このやり方なら、plugins/metalsmith/tweetable-paragraphs
も外部化できそうだなぁ。<script>
要素の埋め込みが現実的になる。
Chromeでのテスト結果だけど、以下のコードでもうまく動いた。やはり、履歴を移動する際に:target
セレクタの更新処理が走るらしい。
history.replaceState({}, '', '#hash');
history.pushState({}, '', location.pathname + location.search + location.hash);
history.back();
history.pushState()
の第三引数には空文字列でいいかもしれない。
history.pushState({}, '', '');
ちゃんと仕様なり実際の挙動なりを調べる必要はあるけど、Chrome 83.0では「URLを変更しないpush」はこれで実現できた。
history.pushState()
の第三引数には空文字列でいいかもしれない。history.pushState({}, '', '');ちゃんと仕様なり実際の挙動なりを調べる必要はあるけど、Chrome 83.0では「URLを変更しないpush」はこれで実現できた。
history.replaceState()
でフルパスを渡してるから、その変数をそのまま流用するのでいいと思う。
sounisi5011.jp/src/scripts/add-header-height.js
Lines 98 to 100 in b5ddc53
history.replaceState(null, '', newURL);
history.pushState(null, '', newURL);
history.back();
空文字列の動作ははっきりと仕様から読み解けなかった。
Chromeでのテスト結果だけど、以下のコードでもうまく動いた。やはり、履歴を移動する際に
:target
セレクタの更新処理が走るらしい。history.replaceState({}, '', '#hash'); history.pushState({}, '', location.pathname + location.search + location.hash); history.back();
このコードでページ内移動もやってくれるかなって思ったんだけど、そううまくはいかなかった。