web-dev-qa-db-ja.com

cssのalt属性のターゲット設定に問題はありますか？

CSSのalt属性をターゲットにしようとしました。私のソリューションはFirefox/Mozillaで機能しましたが、Safari-Chrome/Webkitで失敗します。 altタグのスタイル設定に問題はありますか？そうでない場合、どのようにWebkitのトラブルシューティングを行うと思いますか。

例を次に示します：

CSS

img#logo[alt="Site Title"] { color: #999; font-size: 2em; }

HTML

<img id="logo" src="" alt="Site Title" width="" height="" />
csshtmlfirefoxgoogle-chromesafari
11
Ben Ackles

私はそれを試してみましたが、私には完璧に機能します。 colorプロパティとfont-sizeプロパティは、テキストが表示されないため、Chromeでは効果がないことに注意してください。 （画像が見つからない場合、Firefoxはaltテキストを表示します。）たとえば、widthプロパティを使用すると、正常に機能することがわかります。確認できるように、以下にコードを投稿します。

ただし、元の質問では、本質的にCSSの「フリーテキスト」フィールドをターゲットにすると、事故が発生しやすくなります。 CSSの影響を考えずにalt属性を変更するのは非常に簡単です（クラス名を明白に変更するのではなく）。

さらに、すでにIDをターゲットにしているため、そのセレクターを使用するだけで済みます。IDはページごとに1回しか使用できません。

<!DOCTYPE html>
<html>
<head>
  <style>img#logo[alt="Site Title"] { width:200px }</style>
</head>
<body>
  <img alt="Site Title" src="bullet.png" id="logo" />
</body>
</html>
5
DisgruntledGoat

属性セレクターはW3C CSS仕様で定義されているため、使用できるはずです。ただし、ブラウザの実装はさまざまであり、多少の信頼性があります。

CSS属性セレクターのSitePointリファレンスサポート でわかるように、Webkitのサポートにはバグがあります。 IEのcss属性セレクターのサポート がバージョンによって異なることも確認できます。

したがって、このセレクタはまだすべてのブラウザでサポートされているわけではありません。

より信頼性の高い方法として、すべてのブラウザーでサポートされているIDセレクターを使用する必要があります。

#logo {color：＃999;フォントサイズ：2em; }

2
Matthieu FAURE

いくつかのテストを行った後、Webkitを使用するブラウザーがalt属性テキストのスタイル設定をサポートしているようには見えません。ですから、あなたの観察は正確で避けられないようです。

1
John Conde

CSSセレクターはタグを選択しているため、タグの表示方法に影響します。画像をオフにして、その場所に表示される代替テキストを見ると、cssに記述されているとおりに表示されます。

彼らがそれを修正するためにwebkitプロジェクトのバグを開きたいと思うかもしれません-彼らがfirefoxの振る舞いが彼らがそこでやりたいことであると感じたら。

0
Evgeny