{"id":70,"date":"2005-04-16T10:39:55","date_gmt":"2005-04-16T10:39:55","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/04\/handy-css"},"modified":"2006-04-30T23:46:23","modified_gmt":"2006-04-30T23:46:23","slug":"handy-css","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/04\/handy-css","title":{"rendered":"Handy CSS"},"content":{"rendered":"

As I promised over two\r\n\t\tweeks ago<\/a>, I\u2019ve written some useful CSS that I\u2019m going\r\n\tto share with you all. The first is used to identify\r\n\tlinks using relationships<\/a>\tlike rel=\"nofollow\"<\/code> and rel=\"tag\"<\/code>, the second for identifying\r\n\tthe language<\/a> of a document being linked to, the third can be used either as\r\n\ta substitute for rel=\"external\"<\/code> on external\r\n\tlinks<\/a>, or for identifying\r\nlinks to a particular site, and the fourth and final is Hixie\u2019s\r\nCat Attack Hack<\/a>.<\/p>\r\n

They\u2019re not all new, some of you have probably seen or used similar variants\r\n\tbefore. However, that doesn\u2019t make them any less useful, which is why I\u2019m publishing\r\n\tthem.<\/p>\r\n

Relationships<\/h3>\r\n

The rel<\/code> attribute is supposed to indicate a semantic\r\n\tlink relationship from one resource to another. However, it has been very much\r\n\tabused lately for non-semantic, functional uses designed for a particular user\r\n\tagent (namely, search engines). The relationships I\u2019m specifically referring\r\n\tto are Google\u2019s nofollow<\/code>, which\r\n\tI argued strongly\r\n\tagainst<\/a>, and Technorati\u2019s tag<\/code>. (I know, I know,\r\n\tmy current blog has them both cause they\u2019re embedded in WordPress by default\r\n\twith no easy way to turn them off, but they will both be getting removed later).<\/p>\r\n

a[rel~=\"nofollow\"]::after {\r\n    content: \"\\2620\";\r\n    color: #933;\r\n    font-size: x-small;\r\n}\r\na[rel~=\"tag\"]::after {\r\n    content: url(http:\/\/www.technorati.com\/favicon.ico<\/a>);\r\n}<\/code><\/pre>\r\n
These make use of the attribute\r\n\t\tselector<\/a> for space separated lists of values.\r\n\tAny a<\/code> element with a relationship\r\n\tcontaining those values will be matched. Links with the nofollow<\/code> relationship\r\n\twill be followed by a dark red skull and crossbones (?) and those with the\r\n\ttag relationship will be followed by the Technocrati icon. For the adventurous,\r\n\tyou may wish to convert the Technorati icon to a data:\r\n\tURI<\/a>; but if you do\r\n\tremember to either quote the data: URI or escape the special characters.\r\n\tSee the CSS <uri> value<\/a>\tfor more information.<\/p>\r\n
The nofollow<\/code> style is a slight variation of the\r\n\tsuggestion I found listed with the Nofollow\r\n\tFinder Greasmonkey script<\/a>,\r\n\tand a slightly less irritating variation of Phil\r\n\tRingnalda\u2019s blinking lime<\/a>.<\/p>\r\n
Language<\/h3>\r\n
The hreflang<\/code> attribute in HTML is used to indicate the language of the document\r\n\tbeing linked to; however, most user agents do absolutely nothing with it that\r\n\tis helpful for the user. So, basically, the only people that have used it in\r\n\tthe past are people that actually care about semantics. Well, I\u2019ve come up with\r\n\ta useful way to make use of it to identify links pointing to a document in a\r\n\tlanguage I won\u2019t be able to understand. Since I only understand English and\r\n\tbecause I don\u2019t need to be explicitly told when a document is in English, those\r\n\tlinks won\u2019t be indicated with this CSS.<\/p>\r\n
:link[hreflang]:not([hreflang|=en])::after {\r\n    content: \" [\" attr(hreflang) \"]\";\r\n    font-size: xx-small;\r\n    font-weight: 100;\r\n    vertical-align: super;\r\n}<\/code><\/pre>\r\n
Again, this makes use of the attribute selectors, as well as the commonly\r\n\tused :link<\/code> pseudo-class. This first attribute selector matches any link with\r\n\tthat attribute and the second matches when the attribute has a hyphen separated\r\n\tlist of values beginning with en. The negation\r\n\tpseudo-class<\/a>: :not(\u2026)<\/code> is a functional\r\n\tnotation taking a simple selector.<\/p>\r\n
External Links<\/h3>\r\n
Unlike the previous examples, this one is designed for use in an author stylesheet,\r\n\tnot a user stylesheet. Many people make use of the non-standard rel=”external” relationship\r\n\tto indicate a link to an external site. However, adding that to each and every\r\n\tlink is time consuming and and unnecessary. This style rule will place an north\r\n\teast arrow ( ?) after any link on your site to an external site. <\/p>\r\n
[href^=\"http:\/\/\"]:not([href*=\"lachy.id.au\"])::after {\r\n    content: \"\\2197\";\r\n}<\/code><\/pre>\r\n
It works by selecting any link with the href attribute beginning with “http:\/\/<\/code>“,\r\n\tbut does not contain your domain name. It uses two separate attribute selectors\r\n\tso that it will match when the URI uses the www.<\/code> or not. So, the above will\r\n\tmatch not match either <a href=http:\/\/lachy.id.au\u2026\"><\/code> or <a\r\n\thref=http:\/\/www.lachy.id.au\u2026\"><\/code>. If,\r\n\tyou want to actually highlight links to a certain site, then just remove the\r\n\tnegation pseudo-class, leaving just the two attribute selectors.<\/p>\r\n
Hixie\u2019s Cat Attack Hack<\/h3>\r\n
Anyone that regularly reads Hixie\u2019s Natural\r\n\t\tLog<\/a> will be aware of Hixie\u2019s obsession\r\n\twith cats and those of us using Firefox will have noticed something very\r\n\t\tstrange happenning with the autoscroll icon. When used, the normal autoscroll\r\n\t\ticon becomes extra large, there\u2019s a picture of a cat in the background\r\n\t\tand the cursor becomes a pointer.<\/p>\r\n
That trick, which I will call Hixie\u2019s Cat Attack<\/em>, makes use of the way Firefox\r\n\tinserts the autoscroll image as a direct descendant of the html<\/code> element. This,\r\n\twhich I will call Hixie\u2019s Cat Attack Hack, simply reverses the effects of Hixie\u2019s\r\n\tCat Attack. This CSS, like the first two, should be placed in userContent.css\r\n\tin your profile directory.<\/p>\r\n
html>img {\r\n    width: 28px !important;\r\n    height: 28px !important;\r\n    background: none !important;\r\n    cursor: normal !important;\r\n}<\/code><\/pre>","protected":false},"excerpt":{"rendered":"Some handy CSS tricks.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/70"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/70\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}