{
  "attachments": [],
  "comments_archived": true,
  "date": "2002-10-21T18:32:30.000Z",
  "layout": "post",
  "title": "RSS icon in CSS & HTML",
  "wordpress_id": 286,
  "wordpress_slug": "ooocaa",
  "wordpress_url": "http://www.decafbad.com/blog/?p=286",
  "year": "2002",
  "month": "10",
  "day": "21",
  "isDir": false,
  "slug": "ooocaa",
  "type": "entry",
  "postName": "2002-10-21-ooocaa",
  "html": "<p>Found something sick from <a href=\"http://www.livejournal.com/users/jwz/\">JWZ</a> on <a href=\"http://www.decafbad.com/twiki/bin/view/Main/LiveJournal\">LiveJournal</a> - <a href=\"http://www.livejournal.com/talkread.bml?journal=lj_nifty&amp;itemid=57340&amp;thread=1095420#t1095420\">a CSS-based RSS icon</a>.  Believe it or not, it's smaller in bytes than the gif.</p>\n<style type=\"text/css\">\n<!--\n  .xml_button {\n     color:            FFFFFF;\n     background-color: FF6600;\n     border-color:     FF6600;\n     border-style:     outset;\n     text-decoration:  none !important;\n     margin:           2em 0em 0em 0em;\n     padding:          0em 0.5em 0em 0.5em;\n     border-width:     2;\n  }\n  .xml_button:hover {\n     background-color: FF9900;\n  }\n  .xml_button:active {\n     border-style:     inset !important;\n  }\n-->\n</style>\n<p><a href=\"http://www.decafbad.com/newslog.xml\" class=\"xml_button\"><font size=\"-2\"><b>XML</b></font></a></p>\n<!--more-->\n\n\n<p>shortname=ooocaa</p>\n<div id=\"comments\" class=\"comments archived-comments\"><h3>Archived Comments</h3>\n<ul class=\"comments\">\n<li class=\"comment\" id=\"comment-221084781\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7499db0ba2d89023a4ba8997d19e9970&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"\">jm</a>\n</div>\n\n\n<p><a href=\"#comment-221084781\" class=\"permalink\"><time datetime=\"2002-10-21T14:58:31\">2002-10-21T14:58:31</time></a></p>\n</div>\n\n\n<div class=\"content\">You have another version on Sylvain's weblog</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084783\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.perceive.net\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=9e76d0bf99487acc610624122a6317f3&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.perceive.net\">Eric Vitiello</a>\n</div>\n\n\n<p><a href=\"#comment-221084783\" class=\"permalink\"><time datetime=\"2002-10-21T15:07:44\">2002-10-21T15:07:44</time></a></p>\n</div>\n\n\n<div class=\"content\">Actually, in the long run, this is not a smaller version.  Because browsers cache the images, the image only gets downloaded once.\nIn the case of the CSS version, at the very least, the contents of the A element, with everything in it must be downloaded each time it's needed.\nof course, you're going to have to download an A element and the IMG element if you're using a GIF, and thus those are equal - and if you link to the stylesheet externally, that would be properly cached, just as the GIF would be.\nHowever, it is STILL more bytes for the CSS version, because you must include the stylesheet via the link element, and there is nothing analagous to that when using the GIF version.\nSo, in conclustion of my rambling, the CSS vesion is still bigger, albeit a nice alternative.</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084787\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.afroginthevalley.com/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1bc240680dd5e38135c6ee4c028d8678&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.afroginthevalley.com/\">Sylvain Carle</a>\n</div>\n\n\n<p><a href=\"#comment-221084787\" class=\"permalink\"><time datetime=\"2002-10-21T16:24:29\">2002-10-21T16:24:29</time></a></p>\n</div>\n\n\n<div class=\"content\">The CSS version is also scalable, when a user has larger or smaller fonts configured, the size changes accordingly. The label (xml) can also be read by search engines and screen readers, it's just text. I think these advantages outweight the size issue.</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084789\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://radio.weblogs.com/0113759/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1d82ae1013529b2c68607d77d2626ec1&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://radio.weblogs.com/0113759/\">Seth Russell</a>\n</div>\n\n\n<p><a href=\"#comment-221084789\" class=\"permalink\"><time datetime=\"2002-10-21T16:37:54\">2002-10-21T16:37:54</time></a></p>\n</div>\n\n\n<div class=\"content\">Why does the button to a RSS feed show a face of XML instead of a face of RSS ?  I mean your pointin to a RSS, why not be as specific as you can?</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084790\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://markpasc.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7e91c7ddf6c6db73665d8df9bb55d0d9&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://markpasc.org/\">Mark Paschal</a>\n</div>\n\n\n<p><a href=\"#comment-221084790\" class=\"permalink\"><time datetime=\"2002-10-21T18:51:41\">2002-10-21T18:51:41</time></a></p>\n</div>\n\n\n<div class=\"content\">Yet another CSS icon.\nImage is 505 bytes (429 image plus 76 for each link: &lt;a href=\"/rss.xml\"&gt;&lt;img src=\"/xml.gif\" height=\"36\" width=\"14\" alt=\"XML\"&gt;&lt;/a&gt;). CSS is 360 bytes (260 CSS file, 56 to include it: &lt;style type=\"text/css\"&gt;@import \"/orangeXml.css\";&lt;/style&gt;, and 44 for each link: &lt;a class=\"orangeXml\" href=\"/rss.xml\"&gt;XML&lt;/a&gt;)\nConclusion: I just wasted time counting for a difference of 145 bytes. But if you have a page like this, you might go with CSS because it repeats less for each link.\nIt says \"XML\" because the originator of the image also uses it for another XML format, OPML.</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084791\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://radio.weblogs.com/0113759/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1d82ae1013529b2c68607d77d2626ec1&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://radio.weblogs.com/0113759/\">Seth Russell</a>\n</div>\n\n\n<p><a href=\"#comment-221084791\" class=\"permalink\"><time datetime=\"2002-10-22T07:01:37\">2002-10-22T07:01:37</time></a></p>\n</div>\n\n\n<div class=\"content\">Well me thinks we need a RSS button more than we need a XML button.</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084792\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://www.ecyrd.com/JSPWiki/Wiki.jsp?page=JanneJalkanen\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=8f688c7919a6645352e1bb59b2f45ae4&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://www.ecyrd.com/JSPWiki/Wiki.jsp?page=JanneJalkanen\">Janne Jalkanen</a>\n</div>\n\n\n<p><a href=\"#comment-221084792\" class=\"permalink\"><time datetime=\"2002-10-22T10:48:02\">2002-10-22T10:48:02</time></a></p>\n</div>\n\n\n<div class=\"content\">The PNG version of the XML button takes about 396 bytes.  It could probably even be smaller, if you'd optimize the color space properly.</div>\n\n\n</li>\n<li class=\"comment\" id=\"comment-221084793\">\n<div class=\"meta\">\n<div class=\"author\">\n<a class=\"avatar image\" rel=\"nofollow\" href=\"http://brilliantcorners.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=e3eb9baece2b43177b37ffcd2de9a43b&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\" width=\"\" height=\"\"></a>\n<a class=\"avatar name\" rel=\"nofollow\" href=\"http://brilliantcorners.org/\">Bill</a>\n</div>\n\n\n<p><a href=\"#comment-221084793\" class=\"permalink\"><time datetime=\"2002-10-24T20:46:16\">2002-10-24T20:46:16</time></a></p>\n</div>\n\n\n<div class=\"content\">These have just been denounced by Mr. Winer.</div>\n\n\n</li>\n</ul>\n\n\n</div>\n\n\n",
  "body": "Found something sick from <a href=\"http://www.livejournal.com/users/jwz/\">JWZ</a> on <a href=\"http://www.decafbad.com/twiki/bin/view/Main/LiveJournal\">LiveJournal</a> - <a href=\"http://www.livejournal.com/talkread.bml?journal=lj_nifty&amp;itemid=57340&amp;thread=1095420#t1095420\">a CSS-based RSS icon</a>.  Believe it or not, it's smaller in bytes than the gif.\r\n<br /><br />\r\n<STYLE TYPE=\"text/css\">\r\n<!--\r\n  .xml_button {\r\n     color:            FFFFFF;\r\n     background-color: FF6600;\r\n     border-color:     FF6600;\r\n     border-style:     outset;\r\n     text-decoration:  none !important;\r\n     margin:           2em 0em 0em 0em;\r\n     padding:          0em 0.5em 0em 0.5em;\r\n     border-width:     2;\r\n  }\r\n  .xml_button:hover {\r\n     background-color: FF9900;\r\n  }\r\n  .xml_button:active {\r\n     border-style:     inset !important;\r\n  }\r\n-->\r\n</STYLE>\r\n<A HREF=\"http://www.decafbad.com/newslog.xml\" CLASS=\"xml_button\"><FONT SIZE=\"-2\"><B>XML</B></FONT></A>\r\n<!--more-->\r\nshortname=ooocaa\r\n\r\n<div id=\"comments\" class=\"comments archived-comments\">\r\n            <h3>Archived Comments</h3>\r\n            \r\n        <ul class=\"comments\">\r\n            \r\n        <li class=\"comment\" id=\"comment-221084781\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7499db0ba2d89023a4ba8997d19e9970&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"\">jm</a>\r\n                </div>\r\n                <a href=\"#comment-221084781\" class=\"permalink\"><time datetime=\"2002-10-21T14:58:31\">2002-10-21T14:58:31</time></a>\r\n            </div>\r\n            <div class=\"content\">You have another version on Sylvain's weblog</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084783\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://www.perceive.net\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=9e76d0bf99487acc610624122a6317f3&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://www.perceive.net\">Eric Vitiello</a>\r\n                </div>\r\n                <a href=\"#comment-221084783\" class=\"permalink\"><time datetime=\"2002-10-21T15:07:44\">2002-10-21T15:07:44</time></a>\r\n            </div>\r\n            <div class=\"content\">Actually, in the long run, this is not a smaller version.  Because browsers cache the images, the image only gets downloaded once.\r\n\r\nIn the case of the CSS version, at the very least, the contents of the A element, with everything in it must be downloaded each time it's needed.\r\n\r\nof course, you're going to have to download an A element and the IMG element if you're using a GIF, and thus those are equal - and if you link to the stylesheet externally, that would be properly cached, just as the GIF would be.\r\n\r\nHowever, it is STILL more bytes for the CSS version, because you must include the stylesheet via the link element, and there is nothing analagous to that when using the GIF version.\r\n\r\nSo, in conclustion of my rambling, the CSS vesion is still bigger, albeit a nice alternative.</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084787\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://www.afroginthevalley.com/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1bc240680dd5e38135c6ee4c028d8678&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://www.afroginthevalley.com/\">Sylvain Carle</a>\r\n                </div>\r\n                <a href=\"#comment-221084787\" class=\"permalink\"><time datetime=\"2002-10-21T16:24:29\">2002-10-21T16:24:29</time></a>\r\n            </div>\r\n            <div class=\"content\">The CSS version is also scalable, when a user has larger or smaller fonts configured, the size changes accordingly. The label (xml) can also be read by search engines and screen readers, it's just text. I think these advantages outweight the size issue.</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084789\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://radio.weblogs.com/0113759/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1d82ae1013529b2c68607d77d2626ec1&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://radio.weblogs.com/0113759/\">Seth Russell</a>\r\n                </div>\r\n                <a href=\"#comment-221084789\" class=\"permalink\"><time datetime=\"2002-10-21T16:37:54\">2002-10-21T16:37:54</time></a>\r\n            </div>\r\n            <div class=\"content\">Why does the button to a RSS feed show a face of XML instead of a face of RSS ?  I mean your pointin to a RSS, why not be as specific as you can?</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084790\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://markpasc.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=7e91c7ddf6c6db73665d8df9bb55d0d9&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://markpasc.org/\">Mark Paschal</a>\r\n                </div>\r\n                <a href=\"#comment-221084790\" class=\"permalink\"><time datetime=\"2002-10-21T18:51:41\">2002-10-21T18:51:41</time></a>\r\n            </div>\r\n            <div class=\"content\">Yet another CSS icon.\r\n\r\nImage is 505 bytes (429 image plus 76 for each link: &lt;a href=\"/rss.xml\">&lt;img src=\"/xml.gif\" height=\"36\" width=\"14\" alt=\"XML\">&lt;/a>). CSS is 360 bytes (260 CSS file, 56 to include it: &lt;style type=\"text/css\">@import \"/orangeXml.css\";&lt;/style>, and 44 for each link: &lt;a class=\"orangeXml\" href=\"/rss.xml\">XML&lt;/a>)\r\n\r\nConclusion: I just wasted time counting for a difference of 145 bytes. But if you have a page like this, you might go with CSS because it repeats less for each link.\r\n\r\nIt says \"XML\" because the originator of the image also uses it for another XML format, OPML.</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084791\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://radio.weblogs.com/0113759/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=1d82ae1013529b2c68607d77d2626ec1&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://radio.weblogs.com/0113759/\">Seth Russell</a>\r\n                </div>\r\n                <a href=\"#comment-221084791\" class=\"permalink\"><time datetime=\"2002-10-22T07:01:37\">2002-10-22T07:01:37</time></a>\r\n            </div>\r\n            <div class=\"content\">Well me thinks we need a RSS button more than we need a XML button.</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084792\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://www.ecyrd.com/JSPWiki/Wiki.jsp?page=JanneJalkanen\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=8f688c7919a6645352e1bb59b2f45ae4&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://www.ecyrd.com/JSPWiki/Wiki.jsp?page=JanneJalkanen\">Janne Jalkanen</a>\r\n                </div>\r\n                <a href=\"#comment-221084792\" class=\"permalink\"><time datetime=\"2002-10-22T10:48:02\">2002-10-22T10:48:02</time></a>\r\n            </div>\r\n            <div class=\"content\">The PNG version of the XML button takes about 396 bytes.  It could probably even be smaller, if you'd optimize the color space properly.</div>\r\n            \r\n        </li>\r\n    \r\n        <li class=\"comment\" id=\"comment-221084793\">\r\n            <div class=\"meta\">\r\n                <div class=\"author\">\r\n                    <a class=\"avatar image\" rel=\"nofollow\" \r\n                       href=\"http://brilliantcorners.org/\"><img src=\"http://www.gravatar.com/avatar.php?gravatar_id=e3eb9baece2b43177b37ffcd2de9a43b&amp;size=32&amp;default=http://mediacdn.disqus.com/1320279820/images/noavatar32.png\"/></a>\r\n                    <a class=\"avatar name\" rel=\"nofollow\" \r\n                       href=\"http://brilliantcorners.org/\">Bill</a>\r\n                </div>\r\n                <a href=\"#comment-221084793\" class=\"permalink\"><time datetime=\"2002-10-24T20:46:16\">2002-10-24T20:46:16</time></a>\r\n            </div>\r\n            <div class=\"content\">These have just been denounced by Mr. Winer.</div>\r\n            \r\n        </li>\r\n    \r\n        </ul>\r\n    \r\n        </div>\r\n    ",
  "parentPath": "./content/posts/archives/2002",
  "path": "2002/10/21/ooocaa",
  "summary": "Found something sick from JWZ on LiveJournal - a CSS-based RSS icon.  Believe it or not, it's smaller in bytes than the gif.\n\nXML",
  "needsBuild": true,
  "prevPostPath": "2002/10/21/ooocao",
  "prevPostTitle": "Status check, damage report",
  "nextPostPath": "2002/10/24/ooocab",
  "nextPostTitle": "Not dead yet."
}