{"id":327,"date":"2004-02-19T20:33:14-05:00","date_gmt":"2004-02-20T04:33:14+00:00","guid":{"rendered":"http:\/\/peterjanes.ca\/wordpress\/?p=327"},"modified":"2004-02-19T20:33:14-05:00","modified_gmt":"2004-02-20T04:33:14+00:00","slug":"xfn-css","status":"publish","type":"post","link":"https:\/\/peterjanes.ca\/blog\/2004\/02\/19\/xfn-css\/","title":{"rendered":"XFN&nbsp;CSS"},"content":{"rendered":"<div class='e-content'><p>I&#8217;ve just put together <a href=\"\/styles\/xfn\">a CSS2\/CSS3 stylesheet<\/a> for <a href=\"http:\/\/gmpg.org\/xfn\/\">XFN<\/a>.  It uses <a href=\"http:\/\/www.rogerdarlington.co.uk\/nighthawk\">Roger Darlington<\/a>&#8216;s <a href=\"http:\/\/gmpg.org\/xfn\/xfn-mini.gif\">XFN icon<\/a> to indicate the presence of XFN information for browsers that support CSS2, which is cool but ultimately not a big deal.  The interesting part is the set of rules for CSS3, which append a set of icons (currently single characters) to each XFN-enabled link that highlight the relationships in that reference; in a CSS3-capable browser you will see something like <samp><a href=\"#\">this<\/a> (fmcnr&amp;M&#x2665;)<\/samp>.  (At least, that&#8217;s the theory&#8230; I don&#8217;t know of any browser that can handle the CSS3 rules yet.)<\/p>\n\n<p>There are actually CSS2 rules for each individual relationship in the file as well, but they&#8217;re overridden by the icon rule because only the last value will be displayed anyway.  They&#8217;re included for completeness, and because they may be useful as examples.<\/p>\n\n<p>I&#8217;ve looked for, but been unable to find as of yet, a set of XFN relationship icons.  I&#8217;ve used some Unicode glyphs for the <cite class=\"term\">romantic<\/cite> relationships, but if anyone has more or (a set of) images they&#8217;d like to share, please let me know and I&#8217;ll either reference them or provide them directly from here.<\/p>\n\n<p><ins datetime=\"2004-02-23T02:12:00-05:00\">As the <a href=\"http:\/\/creativecommons.org\/\">Creative Commons<\/a> license in the file suggests, <q>Share and enjoy!<\/q><\/ins><\/p><\/div><div class=\"syndication-links\"><\/div>","protected":false},"excerpt":{"rendered":"I&#8217;ve just put together a CSS2\/CSS3 stylesheet for XFN. It uses Roger Darlington&#8217;s XFN icon to indicate the presence of XFN information for browsers that support CSS2, which is cool but ultimately not a big deal. The interesting part is the set of rules for CSS3, which append a set of icons (currently single characters)&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"mf2_syndication":[],"venue_id":0},"categories":[5,3],"tags":[],"kind":false,"_links":{"self":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/327"}],"collection":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/comments?post=327"}],"version-history":[{"count":0,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/posts\/327\/revisions"}],"wp:attachment":[{"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/media?parent=327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/categories?post=327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/peterjanes.ca\/blog\/wp-json\/wp\/v2\/tags?post=327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}