Firefoxで画像がない時の表示を分かりやすくする

Tweet

Category develop 2012/08/08

問題

Firefoxって、imgタグなどの画像がないとき、何も表示しないですよね。

Firefoxで画像がない時(404など)の表示を分かりやすくすることはできる？

答え

Firefoxでは<img>の画像が404の時、ALTを代替として表示する設定になっていますが、ALTが設定されていない場合、何も表示されません。

すると、webサイト制作中にfirefoxで動作確認しているとデザインが破綻しない限り見つからず、IE等でのチェックの段階で見つかることになり、ちょっとした手間となります。

そこで、firefoxに手を加えてIEのように表示されるようにしましょう。

どうするの？

表示するためには、userContent.cssを使います。

ユーザースタイルシートと呼ばれる、全てのサイトに適用される個人用のCSSです。

詳しい設置方法は下記URLを参照してください。

http://firefox.geckodev.org/index.php?cmd=read&page=usercontent.css&word=css

userContent.cssに以下を書きくわえます。

/*
 * Show image placeholders
 */
@-moz-document url-prefix(http), url-prefix(https), url-prefix(file) {
  img:-moz-broken {
    -moz-force-broken-image-icon: 1;
    width: 24px;
    height: 24px;
  }
}

また、about:configにて、browser.display.show_image_placeholders が true になっているか確認してください（デフォルトはtrue)。

結果

これで下図の様な表示になります。