Stupid CSS tricks

* * * * *

Stupid CSS tricks

I thought of maybe trying to spruce up Pornfinity [1] to maybe make it more
attractive at auction [2] (and no, I didn't spruce it up—I got distracted as
you'll see) by adding some links or something.

I wanted to do a bit more than just present a simple list of sites. I mean,
sure, I could do something like:

* Flutterby! [3]
* kottke.org - home of fine hypertext products [4]
* 0xDECAFBAD: Because a day without caffeine is no day at all. [5]
* l.m.orchard's 0xDECAFBAD OPML blog: Thursday, February 23, 2006 [6]
* Tevis.net Web Log [7]
* Instapundit.com [8]
* spin the cat [9]
* WIL WHEATON DOT NET 50,000 monkeys at 50,000 typewriters can't be wrong.
[10]
* Comics - Mike Sterling's Progressive Ruin [11]
* news from me [12]
* Postcards from the Bleeding Edge [13]

(And no, these aren't porn sites, these are blogs that I read. I'm using them
for an example. If you want porn, you'll have to go on your own and find
some)

A lot of sites now have a favicon [14] so I thought it might be nice to
include them with the links (yes, that's the extent of my “snazzing up” the
list of porn sites). So, first off, is it possible to change the default
glyph used for lists?

The answer: yes [15]. By using the CSS (Cascading Style Sheet) attribute list
style-image, you can have custom bullet points.

Now, I have noticed that Firefox [16] will store the favicon when you
bookmark a site. Curious as to where that information was stored (if I
already have the data (and yes, I do have one or several dozen porn sites
bookmarked—ahem) why bother re-downloading it all again?), I found that
Firefox stored the data in a rather curious looking URL (Universal Resource
Locator)—the data: scheme [17].

Hmmm … I wonder … would this work?

> <li style="list-style-image: url(data:image/x-icon;base64,AAAB...A==);">
> <a href="http://www.flutterby.com/">Flutterby!</a>
> </li>
>

Well … what do you know? It works:

* Flutterby! [18]
* kottke.org - home of fine hypertext products [19]
* 0xDECAFBAD: Because a day without caffeine is no day at all. [20]
* l.m.orchard's 0xDECAFBAD OPML blog: Thursday, February 23, 2006 [21]
* Tevis.net Web Log [22]
* Instapundit.com [23]
* spin the cat [24]
* WIL WHEATON DOT NET 50,000 monkeys at 50,000 typewriters can't be wrong.
[25]
* Comics - Mike Sterling's Progressive Ruin [26]
* news from me [27]
* Postcards from the Bleeding Edge [28]

Well, probably not under Microsoft Internet Explorer, but I don't care about
that browser.

Pretty neat trick, actually.

Well … I thought it was anyway.

[1] http://www.pornfinity.com/
[2] gopher://gopher.conman.org/0Phlog:2007/07/31.1
[3] http://www.flutterby.com/
[4] http://www.kottke.org/
[5] http://www.decafbad.com/blog/
[6] http://blogs.opml.org/decafbad
[7] http://www.tevis.net/
[8] http://instapundit.com/
[9] http://spinthecat.blogspot.com/
[10] http://www.wilwheaton.net/
[11] http://progressiveruin.com/
[12] http://www.newsfromme.com/
[13] http://the-edge.blogspot.com/
[14] http://en.wikipedia.org/wiki/Favicon
[15] http://www.w3.org/TR/CSS21/generate.html#list-style
[16] http://www.mozilla.com/firefox/
[17] http://en.wikipedia.org/wiki/Data:_URI_scheme
[18] http://www.flutterby.com/
[19] http://www.kottke.org/
[20] http://www.decafbad.com/blog/
[21] http://blogs.opml.org/decafbad
[22] http://www.tevis.net/
[23] http://instapundit.com/
[24] http://spinthecat.blogspot.com/
[25] http://www.wilwheaton.net/
[26] http://progressiveruin.com/
[27] http://www.newsfromme.com/
[28] http://the-edge.blogspot.com/

Email author at [email protected]