CSS だけで画像を切り抜く: 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[LINK] に対応してくれれば解決すると思うんですけどね。

Bug 9458 および Bug 368622 の修正により display: inline-block が無事動作するようになりました。Firefox 3 以降は以下でいけるはずです。

:-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[LINK] と定義されています。で、urlchar は RFC 2396 からって書いてあるんですが、RFC 2396 にはどこにも urlchar なんて定義されていないんですよね。一番それっぽいのは uric[LINK] なんですが、果たしてこれはどこかで訂正されているのでしょうか。……などと思っていたら SuikaWiki に詳しい解説がありました。このこと以外にもいろいろと穴のある仕様なんですね。