weavin'

 | 

2005-05-050094

[][] The "moz-icon:" Scheme

前述したdataスキームのやり方で、いろいろ遊んでみることにしました。

たぶん僕が書いたのが初めてだと思うのですが、PDFファイルへのアンカーには[pdf]という文字をつけるっていうやつがあります。いろんなところで似たようなコードを見かけるので、結構広まってるんだなぁと。

ただ不満が。文字だけではあんまり面白みがないんですよね。そんなわけでAdobe Readerからアイコンをぶっこぬいてきて、userContent.cssに書き加えてみました。おー、アイコンが表示される!

さて、コードをここに書いておこうと思ったのですが、そうするとアイコンの実体をここに出すことになります。著作権とかそこら辺でなんとなくグレーな感じがします。うーん。

とぼやいていたら、kyoさんから「moz-icon://.PDF?size=16で.pdfに関連付けられてるアイコン出てくるよ」との情報が。なにーっ。

試してみました。

a[href$=".pdf"]:not([href^="/search?"])::after {
  content :url("moz-icon://.PDF?size=16");
  margin :auto 0.25em;
}

うおっ、表示される。こんなのがあっただなんて。。。

moz-icon://で検索してみると特定の拡張子を目立たせる - Firefox Customizeなどで紹介されているではありませんか。知らなかった、、、世界って広い。。。

まぁ、moz-icon:スキームでは関連づけられたアイコンしか出てこないので、気に入ったアイコンを表示させたりするときにはdataスキーム法でやるとよさそうです。

ちなみに:not([href^="/search?"])というのは、Googleで検索したときに、Similar Pagesのところでもアイコンが表示されるのを防ぐ工夫です。

kotastylekotastyle2005/05/06 01:25ええと隣接セレクタだとどうしても+のことと思われがちなので、~な方の隣接セレクタ (indirect adjacent selector)は兄弟と呼んでいる次第です。

 | 
© 2004 kota.