Go my way

今さらですが、画像置換と outline プロパティについてまとめてみました (画像置換うんぬんはさておき…)。

ご存知のとおり、Firefox 1.5 から outline プロパティがサポートされました。そのため、画像置換したアンカー要素に予想外のアウトラインが出てしまいます。

こんなとき、outline: 0; を指定してやればうまくいきます。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    outline: 0;
}

ただこの方法だと、フォーカスした際にアウトラインが表示されません。今どこをフォーカスしているのかわからないのは、アクセシビリティ的に問題です。

overflow プロパティで解決

先ほどの outline: 0; を overflow: hidden; に変えるとすべてがうまくいきます。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    /* outline: 0; */
    overflow: hidden;
}

これでアンカー要素だけにアウトラインが表示されました (主要なモダンブラウザでちゃんと表示されるのを確認しました)。

Mac IE 5 は要注意

Mac IE 5 には「overflow プロパティに visible 以外の値が指定された要素が表示されない」というバグが存在します。今さら Mac IE 5 に対応する必要もないかと思いますが、念のため対策法を載せておきます。

バックスラッシュハックを使って、Mac IE 5 だけに overflow: visible; を読み込ませます。このままだとフォーカスしてもアウトラインが表示されないので、ダイナミック擬似クラスも同時に指定します。

a {
    display: block;
    width: 500px;
    height: 50px;
    background: #fff url(hoge.gif);
    text-decoration: none;
    text-indent: -7777px;
    overflow: hidden;
}

/* for Mac IE 5 \*//*/
a {
    overflow: visible;
}
a:focus,
a:active {
    outline: 1px solid #333;
}
/**/

最後に

この方法は自分で考えたわけではなく、会社の先輩に教えてもらいました。ありがとうございます！

Tag

CSS, Firefox