Re: リンクのすぐそばにアイコンをつけるCSS

投稿
最終更新

別窓やPDFなど、リンクアンカーの前後に付けるアイコンをCSSで表現するときは background-image より content プロパティの方が良いのではないかという記事。

プロパティの選択については同意見ですが、私は以下のように考えています。

  • 拡張子で判定するのは望ましくない
  • CSSで表現するよりも、サーバーサイドや JavaScript でimg要素を挿入した方がより良い

拡張子の件については、PDFの拡張子が .pdf とは限らないからです。.xls に対する .xlsx のように新しい拡張子が将来出現しないとも限りませんし、サーバーサイドで動的に生成する場合など拡張子がないケースも存在します。そのため、PDFのリンクには type="application/pdf" や class="pdf" を付けるなどPDFであることを明示した方がより良いと思います。

もちろん既存ページに対してCSS改修のみでアイコンを付ける場合など、拡張子で判定せざるを得ないケースはあると思いますが。

また、 background-image にしろ content にしろ、CSSでは代替テキストが設定できないという問題があるため、アイコンはimg要素で挿入した方が良いと思います。実は CSS3 ではフォールバック機構が定義されているのですが、対応ブラウザはまだなさそうなので。

Thus to make an element fallback on its contents, you have to explicitly give 'contents' as a fallback:

content: url(1), url(2), url(3), contents;

11. Inserting and replacing content with the 'content' property(W3C)

もっとも、このようなアイコンはあくまで付加情報であり（リンク先へ飛べばPDFかどうかは分かるので）、必ずしも代替テキストを設定する必要はないという意見もあるかもしれません。

また本質的には、（それが本当に必要ならば）サイト側が個々に対応するのではなくブラウザの機能として提供されるべきものだと思っています。

2013年12月30日追記(再)返信記事(d.hatena.ne.jp)をいただきました。代替テキストの件について意図を補足しますと、「詳しくはこちらのPDFで」のように文言からリンク先の内容やリンクの開き方（別窓とか）が理解できる場合は空でいいでしょうし、すなわちCSSでやっても問題ないでしょう。ただそうでない場合は、代替テキストを設定した方が好ましいと思います（つまり現状はCSSでの実装は避ける）。