{"id":177,"date":"2005-03-13T15:14:40","date_gmt":"2005-03-13T15:14:40","guid":{"rendered":"http:\/\/www.stevepugh.net\/VTT\/?p=177"},"modified":"2005-03-13T15:14:40","modified_gmt":"2005-03-13T15:14:40","slug":"funky-css-stuff-for-gecko-browsers","status":"publish","type":"post","link":"https:\/\/stevepugh.net\/VTT\/2005\/03\/funky-css-stuff-for-gecko-browsers\/","title":{"rendered":"Funky CSS stuff for Gecko browsers"},"content":{"rendered":"<p>This grew out of a discussion regarding <a href=\"http:\/\/groups-beta.google.com\/group\/alt.html\/browse_frm\/thread\/7eb3291020913ea2\/98b15c6e59db0920#98b15c6e59db0920\">.ICO files and CSS<\/a> on alt.html. Now, I made some mistakes in my off-the-cuff suggestion there (I used <code>[att|=val]<\/code> rather than the correct (and, annoyingly, CSS3) selector <code>[att^=val]<\/code>. After switching to the correct selector I realised that, even allowing for the simplification supplied by <a href=\"http:\/\/tobyinkster.co.uk\/\">Toby Inkster<\/a>, this would be Gecko only for now. But it is a nice trick anyway.<\/p>\n<p>In essence what it does is insert a site&#8217;s <a href=\"http:\/\/en.wikipedia.org\/wiki\/Favicon\">favicon<\/a> before any link to that site. As CSS doesn&#8217;t parse the value of <code>att()<\/code> it can&#8217;t be done on a generic level (it could be done with JavaScript but raises a number of other issues) but it can be done for sites that you link to frequently.<\/p>\n<pre><code>#content a[href^='http:\/\/groups-beta.google'] {\n  background-image: url('http:\/\/www.google.com\/favicon.ico');\n  padding-left: 20px; background-repeat: no-repeat;\n}\n\n#content a[href^='http:\/\/www.imdb.com'] {\n  background-image: url('http:\/\/www.imdb.com\/favicon.ico');\n  padding-left: 20px; background-repeat: no-repeat;\n}\n\n#content a[href^='http:\/\/www.amazon.co.uk'] {\n  background-image: url('http:\/\/www.amazon.co.uk\/favicon.ico');\n  padding-left: 20px; background-repeat: no-repeat;\n}\n\n#content a[href^='http:\/\/en.wikipedia'] {\n  background-image: url('http:\/\/en.wikipedia.com\/favicon.ico');\n  padding-left: 20px; background-repeat: no-repeat;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>This grew out of a discussion regarding .ICO files and CSS on alt.html. Now, I made some mistakes in my off-the-cuff suggestion there (I used [att|=val] rather than the correct (and, annoyingly, CSS3) selector [att^=val]. After switching to the correct selector I realised that, even allowing for the simplification supplied by Toby Inkster, this would [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[16,18],"tags":[74],"class_list":["post-177","post","type-post","status-publish","format-standard","hentry","category-blogs","category-browsers","tag-css"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1fxq5-2R","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/comments?post=177"}],"version-history":[{"count":0,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"wp:attachment":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}