2012年03月03日

cssによるvisitedにブラウザが制限をかけた

 実は、ずっと前から「何か変だぞ」と思いつつ放置していたのが、QPBGM本体サイトのトップメニューです。
 リンクを埋め込んである文字(メニュー項目)は、リンクがあることを明確に分かるように下線を表示し、既訪問のページへのリンクは、下線を消してすっきりとした外見にしようという設定でした。

 それが、いつの間にか常に下線が表示されているようになっていました。

topindex(1).gif

(ブラウザはchrome)

 タグの記述ですが、この箇所だけは共通のCSSファイルを使わないで、ヘッダー内に次の記述をしてきました。

<style type="text/css">
<!--
A:link { color:#ffffff; text-decoration: underline; }
A:active{ color:#ffff00; text-decoration: underline; }
A:visited{ color:#ccccff; text-decoration: none; }
A:hover { color:#ffff00; background-color: #aa2222; }
-->
</style>


 実は私が管理をしている他のいくつかのサイトも、初心者の利用が多いので、「ここにリンクが埋め込まれている」とよく分かるように下線をつけ、リンクの存在が分かった後はすっきりとした表示で各ページを見てもらいたいので下線を消す、という方針でやってきましたが、QPBGMと同様の状態になっていました。
 特にリンク集では、下線がブラウザのウインドウを埋め尽くすと言うことになりますから、下線がうるさく離なります。

 そこで重い腰を上げて調べてみたところ、どうやらこの現象は、HTMLの記述ミスではなく、ブラウザが勝手に
text-decoration:noneを無視するようになっている
かららしい、ということが分かりました。しかも、
a:visitedのときだけ
です。

 で、理由はと言うと、ブラウザの利用者がどのページを開いたかが分かるのはプライバシーの侵害になるからだということのようです。それに対して対応すると明言しているのはmozillaで、他のブラウザはちょっと探したところでは、a:visitedのtext-decoration:none無視については記述が見つかりませんでした。

 あいにくmozilla(firefox)は、「軽い」という噂とは逆に、あまりに重くて私は削除してしまったので、ie/chrome/safariのみで確認をしましたが、全て同じ結果…つまり、visitedで下線を消してくれませんでした。
 「text-decoration:none無視」と書きましたが、「CSS の :visited に行われるプライバシー対策」では、

利用できる CSS プロパティは color, background-color, border-*-color, outline-color, そして fill と stroke の色に関するプロパティになります。その他のプロパティについては、未訪問のリンクに与えられたものが代わりに利用されます。

と述べられていて、「完全無視」ではないけれども、下線消去は無視であることが分かります。

 そんなわけで、リンクの表示については、
未訪問=青色
既訪問=紫色
ホバー=黄色+背景色(別のサイトでは、赤色+下線)
とすることにしました。ホバーで目立たせるのは、せめてリンクのあることを初心者にも分かりやすくしてもらうためです。

 QPBGMでは、こんな記述にしました。

<style type="text/css">
<!--
A:link { color:#ffffff; text-decoration: none; }
A:active{ color:#ffff00; text-decoration: underline; }
A:visited{ color:#ccccff; text-decoration: none; }
A:hover { color:#ffff00; background-color: #aa2222; }
-->
</style>

 1カ所変えただけです。

topindex(2).gif


 メニュー項目の文字の上と下のそれぞれの間隔がちょっと違いすぎてバランスが取れていませんが、これは後ほど修正することにします。

 よく分からないのは、例え下線などを表示しないようになっても、visitedで色は変わったりするので、ブラウザが未訪問・既訪問に対して別の反応を起こしていることに変わりはないと思うのですが、これでいいのだろうか、ということです。


関連することの書かれているページ
CSS の :visited に行われるプライバシー対策
一度クリックしたURLの下線について
「:link」「:visited」について、どのような場合に必要な、どのように見せるのかを考える

CSS の visited を利用してブラウザの訪問履歴を取得されうるユーザは 76 % 以上に上る










posted by kewpie at 10:45| Comment(4) | TrackBack(0) | ファイル作成
この記事へのコメント
お久しぶりです。

HTMLの記述は結構奥が深いですねー

表示もこれでOKと思っても、幾つかの縦横比の違うデイスプレーで確認すると、予測外の表示になるしchrome、Explorer、Firefox等等での確認ーーうーーん HPを維持する方には頭が下がります。


さて”ベルト・ケンプフェルト”
「真夜中のブルース」が流れるドイツ映画
「朝な夕なに」を観たいと思って今だ果たせずにいます。訳本の方は読んだのですけどね。でもねー 観る適正年齢というのがありますからね。今観ても「憧れは若き日の 夢をのせて 夕べ星のごと み空に群れとぶよ♪」
でしょうねー。

放射能計も買われましたね。
私も常時携帯していますが、赤城大沼湖畔で
話題のワカサギなど、禁漁前にすでにしっかりおいしく食べちゃいましたよ! 

笠間・水戸方面まで遠征ついでに計測して安心していたのに、まさかの奥利根水源地帯の予想外の値に驚いたりしています。 
 では では
 
Posted by 山屋:yamaya at 2012年03月03日 22:04
山屋さん、こんにちは。お久しぶりです。
 相変わらずの訳の分からないブログなのに読んで頂きありがとうございます。
 実はこの10日くらい、不調になったHDDの対処で振り回されてきました。とうとう、あきらめて本日買い換えをしました。そんなわけでこのところ、寝不足気味でもうろうとした状態が続いていました。

 HTMLもがんばってHTML5の勉強を始めようかと思っていましたが、世はスマホの大躍進で、ホームページもスマホを意識したページづくりをしなければならないかと思うと、急激に腰が重くなってきました。私自身は携帯電話経費が一月にたった1000円で済ませている(そうせざるを得ない)状況ですので、とてもスマホのために定額料金を払う気にはなれません。終生持たないことでしょう。大学生を2人持っては首が回りません。

 「朝な夕なに」…正直なところ、全く初めて耳にした映画ですが、せっかくの情報ご提供ですので探してみましたが、amazonでは中古VHSを¥12,800よりで、販売している状態です。TSUTAYAでもレンタルは見つからず、3,150円也で販売をしています。レンタルで店頭に並べても、回転が悪い、というよりも回転しないのでしょうね。失礼。「朝な夕なに」が悪いのではなく、店頭には若年層が飛びつく物が主体となって並んでいるから、という意味です。昨年、故あって「ドライビング・ミス・デイジー」を近所のTSUTAYAで探しましたがありませんでした。アカデミー賞受賞作品でもその始末です。

 「ワカサギなど、禁漁前に」・・・「え、解禁前に」の書き間違いではないかと思いましたが、そうではないのですね。「大沼の放射能は?」と騒がれる前に、すでに胃袋の中に入れられたということですね。さすが、「山屋」さんだけのことはあります。ひょっとして独自に、放射線の計測をしながらの釣りだったのでしょうか。
 私の方は、1日使っただけで、机の脇にぶら下がったままです。自宅と職場の間を往復するだけの毎日ですので。どこかに出かけるときには持って行こうと思います。





Posted by kewpie at 2012年03月03日 23:58
今晩はーー

”わかさぎ”

今思えば、湖畔や周囲の赤城の森の値が低かったのは梅雨の雨で洗い流されて大沼に集まったのですねー。
そしてワカサギに吸収されたーー 
それを知らずに、なんか一番濃縮されたとき食べちゃったような。

ガイガーカウンターをもっていても、よーく状況を考察しないと反省しています。
とはいえ「ワカサギがなんで放射能値が高くなったのは不明」と報道されたのはその後でしたからねー。

ところでお調べになったように「朝な夕なに」のVHS 今はプレミアムが付いていますので高値です。まあ、そのうちと思っています。

さてニニ・ロッソの「夜空のトランペット」がヒットしまたし「真夜中のトランペット」「星空のトランペット」他多くのトランペット名曲に加え様々な曲 例えば ギターで有名な「アルハンブラの思い出」とか「サン・トワ・マミー」、「ラ・ノビア」「君といつまでも」などトランペット・ソロがラジオで結構流れ、この楽器に憧れた若者が多かったのではないかと思います。

HTMLは4.01で遊んでいます。
いつかHPを立ち上げることになるか否かは不明ですが??。
Posted by 山屋 at 2012年03月04日 20:38
山屋さん、コメントをありがとうございます。

>なんか一番濃縮されたとき食べちゃったような。

 確かに・・・。(-_-;)
 赤城大沼のワカサギ釣りのことを、別のページに書いておきました。

 トランペット・・・上手に吹ければかっこいいですよね。逆の場合は、うるさいと怒られそうです。(笑)
 私が子どもの頃、父がニニ・ロッソの何だろう、もしかすると8トラックのテープだったでしょうか、よく聞いていました。
 私自身は、高校でクラシック・ギターをやりましたが、指が短くて演奏には不利で、3年間で止めました。娘の一人は高校でトランペットをやりました。
 リアルタイムでは聞きませんでしたが、ハーブ・アルパートが私は好きです。

 HTMLは私も4.01transitionalです。今確かめて見たところ、私が使っているHTMLエディター DreamWeaverCS5も一応HTML5に対応していることが分かりました。

Posted by kewpie at 2012年03月04日 22:42
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/54272522
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。