/**/

github / 目次 / 6. web-doc-base を拡張する為の技術情報 / 2. CSS をカスタムする為の情報

リンク要素とフォーム部品のインタラクションについて

📅 2022年03月14日月曜日 13:03

itozyun 2003年から HTML を書いてます。

ogp用概要をここにも表示

工事中です。

多くのブラウザは Tab キーで、文書中の要素とフォーム部品に順にフォーカスを当てる機能を備えています。この中にはデフォルトで無効で、設定画面から有効にするものもあります。

プロジェクトは、フォーカスされた要素に適切にスタイルを設定して、ユーザーの閲覧を助けます。

同様にして、要素へのホバーとアクティブ化にも適切にスタイルを設定します。

リンク(未訪問)、訪問済のリンクに応じた、ホバー・アクティブ化・フォーカスにそれぞれスタイルを設定します。

これらダイナミック疑似クラスの実装は羽陽曲折を経て、現在のソレになりました。web-doc-base はブラウザ毎の実装状況を SCSS 変数のフラグにして、ブラウザ別 CSS を実現します。

リンクテキストのインタラクションを整理する

基本的なダイナミック疑似クラスの実装状況とスタイルの制限

ブラウザ	`<a>`			`<form>`部品			:target
ブラウザ	:hover	:active	:focus	:hover	:active	:focus	:target
IE ~6(*2)	✔	✔	`:active` で代替	×	×	×	×
IE 7(*2)	✔	✔	✔	✔	(*10)	×	×
IE 8	✔	✔	✔	✔	✔	✔	×
IE 9+	✔
Opera 7~7.20(*1)	✔	✔	✔(*11)	✔	✔	✔	×
Opera 7.23~7.5(*1)	✔	✔	✔(*11)	✔	✔	✔	×
Opera 8~9.27	✔	✔	✔(*11)	✔	✔	✔	×
Opera 9.5	✔	`:focus` で代替	✔	✔	`:focus` で代替(*4)	✔	✔
Opera 9.6+	✔
Firefox ~0.9.9(2, 6)	✔	`:focus` で代替	✔	✔(3,5)	`:focus` で代替(*4)	✔	×
Firefox 1.0~1.2(*2)	✔	`:focus` で代替	✔	✔	`:focus` で代替(*4)	✔(*9)	×
Firefox 1.3(*2)	✔	`:focus` で代替	✔	✔	`:focus` で代替(*4)	✔(7, 8)	✔
Firefox 1.4~1.7(*2)	✔	`:focus` で代替	✔	✔	`:focus` で代替(*4)	✔(*7)	✔
Firefox 1.8+	✔