独自の:targetセレクタを使用しない

[sounisi5011]

現在、小説ページ内でURLハッシュフラグメントを用いて移動した先のスタイルを指定する:targetセレクタには、.pseudo-class::targetが併記されている。

sounisi5011.jp/src/styles/novels.scss

Lines 135 to 136 in b5ddc53

	:target,
	.pseudo-class\:\:target {

これは、add-header-height.js内でdata-jump-id属性に基づくページ移動を行う際に、history.replaceState()メソッドでは:targetセレクタが機能しなかったため追加した回避措置である。

しかし、これ以外の方法で、:targetセレクタを機能させる方法を発見した。

whatwg/html#639 (comment)

この手法により、:targetセレクタを機能させることが可能になり、余計なCSSやコードを回避することが可能となる。

ブラウザの「進む」ボタンの履歴が上書きされてしまうものの、data-jump-id属性を追加するのはOGP/Twitter Cardからの直リンクでハッシュフラグメントを追加できない問題を回避するためであり、進む履歴は存在しない。よって、この問題は無視することが可能である。

[sounisi5011]

このやり方なら、plugins/metalsmith/tweetable-paragraphsも外部化できそうだなぁ。<script>要素の埋め込みが現実的になる。

[sounisi5011]

Chromeでのテスト結果だけど、以下のコードでもうまく動いた。やはり、履歴を移動する際に:targetセレクタの更新処理が走るらしい。

history.replaceState({}, '', '#hash');
history.pushState({}, '', location.pathname + location.search + location.hash);
history.back();

[sounisi5011]

history.pushState()の第三引数には空文字列でいいかもしれない。

history.pushState({}, '', '');

ちゃんと仕様なり実際の挙動なりを調べる必要はあるけど、Chrome 83.0では「URLを変更しないpush」はこれで実現できた。

[sounisi5011]

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

	const newURL = canonicalURL + '#' + encodeURIComponent(fragmentID);
	if (history && isFunc(history.replaceState)) {
	history.replaceState(null, '', newURL);

history.replaceState(null, '', newURL);
history.pushState(null, '', newURL);
history.back();

空文字列の動作ははっきりと仕様から読み解けなかった。

[sounisi5011]

Chromeでのテスト結果だけど、以下のコードでもうまく動いた。やはり、履歴を移動する際に:targetセレクタの更新処理が走るらしい。

history.replaceState({}, '', '#hash');
history.pushState({}, '', location.pathname + location.search + location.hash);
history.back();

このコードでページ内移動もやってくれるかなって思ったんだけど、そううまくはいかなかった。