`:link` と `:visited`：ブラウザの深淵、プライバシーの要塞をハックする
CSSを単なる「見た目を整える道具」と捉えているなら、それはあまりに勿体ない。特に `:link` と `:visited` という、Webの黎明期から存在するこの二つの擬似クラスは、単なる色変えのトリガーではない。これらはブラウザが「ユーザーの履歴」という極めて機密性の高い情報を、いかにして安全かつ効率的にレンダリングパイプラインに乗せるかという、設計上の葛藤そのものだ。
上級エンジニアとして、我々は単に「未訪問は青、訪問済みは紫」と定義するだけでは足りない。ブラウザがこの二つをどのように扱い、なぜ我々のCSSの自由度がここで制限されるのかを理解する必要がある。
1. プライバシーの要塞：`:visited` の制約という名の仕様
かつて、悪意のあるサイトが `:visited` を悪用してユーザーの閲覧履歴をスクレイピングする「歴史的事件」があった。`getComputedStyle` を用いて、リンクの色が「訪問済みカラー」に変わったかどうかを判定し、ユーザーが特定のサイトを訪れたかを特定する手法だ。
この脆弱性に対し、ブラウザベンダーは即座に反応した。現在、`:visited` に対して指定できるCSSプロパティは極めて限定的だ（`color`, `background-color`, `border-color` など、視覚的に履歴を特定できるものに絞られている）。
- なぜ `opacity` や `display` が効かないのか？
それらは計算されたスタイルを外部から容易に算出できてしまうからだ。ブラウザのレンダリングエンジンは、`visited` 状態を「内部的なフラグ」として保持し、通常のCSSOMの計算プロセスとは一線を画した隔離された領域で管理している。
2. メモリとレンダリング負荷：擬似クラスの再計算コスト
多くのエンジニアが誤解しているが、CSSの擬似クラスは決して「コストゼロ」ではない。特にモダンなSPAにおいて、動的に生成されるリンクが数千個存在する場合、これらに対する `:link` や `:visited` の適用は、微細ながらもリペイントのトリガーとなる。
最適化のコツは、「状態の分離」にある。
/ アンチパターン：不必要な再計算を誘発する /
a:link, a:visited {
transition: all 0.3s ease; / transitionはvisitedに適用不可な場合が多く、無駄な計算コストを生む /
}
/ 推奨：構造的に分離し、プロパティを限定する /
.nav-link {
color: #333;
transition: color 0.2s ease;
}
/ visitedは最小限の変更に留める /
.nav-link:visited {
color: #555; / 色のみを変更。レイアウト計算を伴うプロパティは避ける /
}
ここで重要なのは、`:visited` に `transition` を適用しようとしないことだ。ブラウザはプライバシー保護のため、`:visited` のスタイル変更を即座に適用し、アニメーションの中間フレームを計算させない仕様になっている。これを無理に実装しようとすると、レンダリングエンジンの内部で無駄な競合が発生し、パフォーマンスを損なう原因となる。
3. アーキテクチャとしての「状態管理」
大規模なアプリケーションでは、リンクのステータス管理をCSSだけで完結させようとしない方が賢明な場合が多い。例えば、ユーザーの権限やコンテキストに応じてリンクの表示を変える必要があるなら、クラスによる制御と擬似クラスを適切に組み合わせるべきだ。
/ 設計のベストプラクティス：状態のコンテキスト化 /
.link-base {
text-decoration: none;
/ 共通の視覚的プロパティ /
}
/ `:link` を過信せず、ベースクラスでデフォルトを担保する /
.link-base:link {
color: var(–primary-color);
}
/ 訪問済みはユーザーのコンテキストとして扱う /
.link-base:visited {
color: var(–visited-color);
}
/ 状態管理をフレームワーク側で行う場合は、擬似クラスを強制上書きしない /
.link-base.is-disabled {
pointer-events: none;
color: gray;
}
4. 現場の知恵：バグを回避する「堅牢さ」の定義
実務で最も恐ろしいのは、ブラウザごとの微妙な挙動の差異だ。特に `visited` の制約は、CSSの仕様書よりも「ブラウザのセキュリティポリシー」が優先される。
- 鉄則： `:visited` には、`color` 以外のプロパティ（特に `box-shadow` や `transform`）を絶対に記述しないこと。これらはブラウザによって無視されるか、最悪の場合、レンダリングの不整合を引き起こす。
- デバッグの極意： 開発者ツールで `:visited` のスタイルを確認しようとして、「なぜか反映されない」と悩む時間を減らすこと。ブラウザはインスペクタ上でもプライバシー保護のために情報を隠蔽する。`color` 以外をいじろうとしているなら、それはあなたのコードが間違っているのではなく、ブラウザがあなたを「攻撃者」と見なしているだけだ。
最後に：Webの本質と向き合う
`:link` と `:visited` は、Webが「ハイパーテキスト（リンクの集合体）」であることを思い出させてくれる数少ない機能だ。現代のSPAフレームワークが「コンポーネント」という単位で画面を切り刻む中で、ブラウザがネイティブに保持する「履歴」というメタデータは、極めて原始的でありながら、最も強力なユーザー体験の指標でもある。
この二つの擬似クラスを使いこなすということは、ブラウザのセキュリティモデルを理解し、その上で美しく、かつ高速なインターフェースを構築するということだ。小手先のテクニックではなく、ブラウザの設計思想と対話する。それこそが、我々エンジニアが目指すべきフロントエンドの極致である。
コメント