Browser-Specific Image

Dec 30, 2010 19:13


Remember how I used an HTML/CSS trick¹ to embed two images in a post, and different people would see a different image depending upon which browser they were using (pretty much either IE, or everybody else). Well, here's a single image which looks different in different browsers:


How does it work?  Fucking magnets!  It's an APNG (animated PNG) file. The image has two frames; but only Firefox supports the APNG format, so it skips to the second frame and stops there. Neither IE, Chrome, nor Safari, support the APNG format; so they display the first frame only. To embed this in your journal, just use the following code:
tp://pics.livejournal.com/allah_sulu/pic/003zbgqs">

Unfortunately, I don't have a graphics program which supports the creation of APNGs, so I can't make customized versions for my own evil fun. According to somebody on Reddit, the APNG format² is also supported by Opera, Adobe Photoshop, and GIMP.
¹Thanks to LJ's recent code changes, that trick still works in posts but no longer works in comments.
²In case you didn't bother clicking on the above links (tl;dr), the APNG is an unofficial extension to the PNG standard. So there are good reasons why many programs don't support it yet, if it's still subject to revision or rejection.

urls, html/css, inconsistencies, browsers, images, miscellaneous

Previous post Next post
Up