Days on the Moon

「海馬日記 - data: URIでユーザスタイルシートに畫像を埋込む」より。リンクの種類を表すアイコンをつける話について。

まあその方法 (data URI を使う) が一番妥当でしょうね。ちなみにカーソルではなくリンクの前に埋め込むのなら一応 data URI を使わずともできます。

:-moz-any-link[target="_blank"]:before {
  content: "";
  font-size: 0;
  padding-left: 16px;
  padding-top: 14px;
  background: url("chrome://browser/skin/Toolbar-small.png") -160px -16px;
}

ディセンダの高さを 2px に決め打ちしているのがいかにも気持ち悪いですが。padding-top の替わりに font-size: 16px とすればこの気持ち悪さはなくなりますが、今度は拡大縮小に伴って切り抜き部分の高さが変わってしまいます。Gecko が display: inline-block に対応してくれれば解決すると思うんですけどね。

:-moz-any-link[target="_blank"]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("chrome://browser/skin/Toolbar-small.png") -160px -16px;
}

余談ですが、data URI のデータ部分は RFC 2397 で *urlchar と定義されています。で、urlchar は RFC 2396 からって書いてあるんですが、RFC 2396 にはどこにも urlchar なんて定義されていないんですよね。一番それっぽいのは uric なんですが、果たしてこれはどこかで訂正されているのでしょうか。……などと思っていたら SuikaWiki に詳しい解説がありました。このこと以外にもいろいろと穴のある仕様なんですね。