プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
ブラウザ毎の「a:link」「a:visited」「a:hover」「a:active」に対する「text-shadow」の適用を検証してみた。
以前

CSS、「a」「a:link」「a:visited」「a:hover」「a:active」に対する「text-shadow」の適用順序について

の記事を書きました。
この記事を書くときにはGoogle Chromeを使って検証したのですが、
「他のブラウザでも同じなんだべか(--?」と気になっていたのですよ。

それを今回、検証してみました。

結論を先に書くと、ブラウザによって挙動が違ったんですけどね(-。-)ぼそっ

検証に使ったブラウザは

Internet Explorer 11.0.9600.77239

20140901-01.png


FireFox 31.0

20140901-02.png


Google Chrome 37.0.2062.102 m

20140901-03.png


Safari 4.0.4(531.21.10)

20140901-04.png


Opera 12.17

20140901-05.png


の5つです。

検証用のテストコードはこんな感じφ(--)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 <title>test</title>

<style type="text/css">
<!--
/***
a {
 color: #000;
 text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}
****/
a:link {
 color: #00f;
 text-shadow: 1px 3px 4px rgba(0, 0, 255, 1);
}

a:visited {
 color: #0f0;
 text-shadow: 1px 3px 4px rgba(0, 255, 0, 1);
}

a:hover {
 color: #f00;
 text-shadow: 1px 3px 4px rgba(255, 0, 0, 1);
}

a:active {
 color: #ff0;
 text-shadow: 1px 3px 4px rgba(255, 255, 0, 1);
}

-->
</style>

</head>
<body>

<a href="test2.html">未訪問リンク</a><br><br>
<a href="test.html">訪問済リンク</a><br><br>

</body>
</html>

以前の使い回しですけどね(^^ゞ
未訪問リンクは青、訪問済リンクは緑、マウスオーバーで赤、
クリックで黄色になることを想定しています。

これで準備はOKです。
それでは検証していきます。

まずIEはこんな結果でしたφ(--)

20140901-06.png
 文字色
未訪問
訪問済
マウスオーバー
クリック黄色黄色

訪問済の影が青になっています。
以前検証したGoogle Chromeと同じでした。
やっぱり訪問済の影を指定しても無効なんですかね(--ゞ

次に、FireFoxはこんな結果でしたφ(--)

20140901-07.png
 文字色
未訪問
訪問済
マウスオーバー
クリック黄色黄色

そもそも訪問済リンクの文字色自体が緑ではなく青でした。
な、なんで(--?

気を取り直して、Google Chromeの結果はこちらですφ(--)

20140901-08.png
 文字色
未訪問
訪問済
マウスオーバー
クリック黄色黄色

やっぱり訪問済の影が青になっています。
IE11と同じです。

Safariの結果はこんなんでしたφ(--)

20140901-09.png
 文字色
未訪問
訪問済
マウスオーバー
クリック黄色黄色

おぉ!Σ( ̄◇ ̄;
訪問済リンクの影も緑色になっています。
やるじゃん!Safariさん!

最後に、Operaの結果はこちらですφ(--)

20140901-10.png
 文字色
未訪問
訪問済
マウスオーバー
クリック黄色黄色

おぉ!Σ( ̄◇ ̄;
訪問済リンクの影も緑色になっています。
Operaもやるじゃん!

違いがあった部分の結果をまとめると、こんな感じですφ(--)

 訪問済:文字色訪問済:影
IE
FireFox
Google Chrome
Safari
Opera

挙動としてはIEとGoogle Chromeが同じ、SafariとOperaが同じ、
FireFoxは独自路線を走っているように見えます。

今後のバージョンアップで統一されるかもしれませんが、
2014年9月1日時点の最新ブラウザではそのような状態です。
スタイルに「text-shadow」を使う方はご注意ください。

ってなところで「text-shadow」の検証、完了\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事