{"id":280,"date":"2006-12-05T15:15:37","date_gmt":"2006-12-05T14:15:37","guid":{"rendered":"http:\/\/notizblog.org\/2006\/12\/05\/css-fuer-xfn-rel-tags\/"},"modified":"2023-05-19T23:19:51","modified_gmt":"2023-05-19T21:19:51","slug":"css-fuer-xfn-rel-tags","status":"publish","type":"post","link":"https:\/\/notiz.blog\/2006\/12\/05\/css-fuer-xfn-rel-tags\/","title":{"rendered":"CSS f\u00fcr XFN rel-tags"},"content":{"rendered":"\n<p>Da mir die neuen <a href=\"http:\/\/microformats.org\/wiki\/icons\">XFN Icons<\/a> von <a href=\"https:\/\/www.bartelme.at\/\">Wolfgang Bartelme<\/a> und <a href=\"https:\/\/factoryjoe.com\/\">Chris Messina<\/a> recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/notiz.blog\"<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"friend met colleague\"<\/span>&gt;<\/span>...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Deshalb hab ich f\u00fcr mich die Hierarchie festgelegt:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>me<\/li><li>professional: co-worker, colleague<\/li><li>friendship (at most one): friend, acquaintance, contact<\/li><li>romantic: muse crush date sweetheart<\/li><\/ul>\n\n\n\n<p>Das hei\u00dft im Klartext: Wenn ich einen rel-tag wie z.B. <code>rel=\"friend met colleague\"<\/code> wird nur <em>friend<\/em> und <em>met<\/em> ber\u00fccksichtigt weil das f\u00fcr mich h\u00f6herwertig is. Wenn ihr ne andere Reihenfolge wollt, k\u00f6nnt ihr das ganze einfach in der CSS Datei umstellen (das Wichtigste unten).<\/p>\n\n\n\n<p>Ich habe das ganze mit den in CSS 2.1 definierten <a href=\"https:\/\/www.w3.org\/TR\/CSS21\/selector.html#attribute-selectors\">Selectors<\/a> realisiert und mit Firefox 2.0 und IE7 getestet.<\/p>\n\n\n\n<p><strong>Beispiel CSS Code:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"me\"<\/span>]<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(images\/xfn-me.png) no-repeat right; <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">25px<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"co-worker\"<\/span>]<\/span>, <span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"colleague\"<\/span>]<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(images\/xfn-colleague.png) no-repeat right; <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">25px<\/span>;\n}\n\n<span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"co-worker\"<\/span>]<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"met\"<\/span>]<\/span>, <span class=\"hljs-selector-tag\">a<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"colleague\"<\/span>]<\/span><span class=\"hljs-selector-attr\">&#91;rel~=<span class=\"hljs-string\">\"met\"<\/span>]<\/span> {\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">url<\/span>(images\/xfn-colleague.png) no-repeat right; <span class=\"hljs-attribute\">padding-right<\/span>: <span class=\"hljs-number\">25px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code-Sprache:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><a href=\"https:\/\/notiz.blog\/wp-content\/uploads\/2006\/12\/xfn.css\">Komplette CSS Datei runterladen<\/a><\/p>\n\n\n\n<p>Beispiele: <a href=\"https:\/\/notiz.blog\">ME<\/a>, <a href=\"#\">FRIEND COLLEAGUE<\/a>, <a href=\"#\">COLLEAGUE<\/a>, <a href=\"#\">COLLEAGUE MET<\/a>, <a href=\"#\">FRIEND MUSE<\/a>, <a href=\"#\">FRIEND MUSE MET<\/a>.<\/p>\n\n\n\n<p>W\u00fcrde mich sehr \u00fcber Kommentare und Anregungen freuen&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Da mir die neuen XFN Icons von Wolfgang Bartelme und Chris Messina recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel: Deshalb hab ich f\u00fcr mich die Hierarchie festgelegt: me professional: co-worker, colleague friendship (at most one): friend, acquaintance, contact [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[2],"tags":[126,164,183,188,165],"class_list":{"0":"post-280","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-web","7":"tag-css","8":"tag-microformats","9":"tag-mikroformate","10":"tag-selector","11":"tag-xfn","12":"h-entry","13":"hentry"},"_links":{"self":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/comments?post=280"}],"version-history":[{"count":4,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":22629,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/posts\/280\/revisions\/22629"}],"wp:attachment":[{"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notiz.blog\/wp-api\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}