/* TARGETING BROWSERS by CSS ----updated ultimo jan. 2011------ Relevant article: NOTE: THE FOLLOWING BROWSER-TARGETING IS FOR TESTING-PURPOSES ONLY - NOT FOR SERIOUS USE. The only thing that happens here is that I switch between background-images for a "CSS Sledgehammer" image found - usually in the right column - on some pages in this site-section. This gives me a rough idea of which browser-targeting hacks that actually work for which versions at any one time, as new browsers and browser-versions arrive. ------------------------ Regular @media wrappers are used to keep old browsers from seeing the styles. No need to put regular @media wrappers around each "hack style block", as most real-world stylesheets have @media wrappers in place already. Proprietary wrappers for hacking Gecko and WebKit browsers MUST be kept, as my hacks are not safe to use as shown without those wrappers. Proprietary wrappers can/must not be placed inside regular @media wrappers, so the entire hacks with wrappers and all must be placed AFTER all regular @media wrappers. ------------------------ NOTE that the order (sequence) these filters are applied in is as important as the selector-combination used. Order is especially important when hacking several versions of the same browser engine. Some filters will not work as intended, or at least not in the order used below, when XHTML is served as application/xhtml+xml. ------------------------ NOTE also that "safe filter" means just that: the filter will target the correct browser-engine and none other. It does NOT mean it is safe to hack that browser-engine. CSS filters are not reliable over time. New browser-versions WILL inevitable upset the whole system. *** USE THESE AND OTHER CSS FILTERS AT YOUR OWN RISK - OR RATHER NOT AT ALL *** ------------------------ BROWSER-HACKING ON THIS SITE: Only old and obsolete browser-versions are hacked for real on this site - mainly IE7 and older. For that I use only well-tested version-targeting hacks and methods that I know will fail in later versions. ++++++ ONE SHOULD ONLY HACK THE DEAD! ++++++ */ /* "which browser?" -- testing CSS-filtering */ /* soft start - default -------- */ img#shtarget {background: url(../imagedepot/cat-dunno.png) no-repeat 0 100%;} /* NN4 ? -----safe filter----- */ /*/*/ /*/ img#shtarget {display: none;} /* */ /* IE mac? -----safe filter----- */ /*\*//*/ * html>body img#shtarget {background: url(../imagedepot/cat-iemac52.png) no-repeat 0 100%;} /**/ /* IE win? -----safe filter if later versions than IE6 are set to run in 'standards mode'----- */ @media all { * html img#shtarget { background: url(../imagedepot/cat-ie50.png) no-repeat 0 100%;} /* IE5.0 + 5.5 + 6 win */ * html img#shtarget { background/**/: url(../imagedepot/cat-ie55.png) no-repeat 0 100%;} /* IE5.5 win */ * htm\l img#shtarget { background: url(../imagedepot/cat-ie60.png) no-repeat 0 100%;} /* IE6 win */ * htm\l dummy#wrapper img#shtarget {background: url(../imagedepot/cat-ie40.png) no-repeat 0 100%;} /* IE4 win */ } /* IE7 ? -----almost safe filter----- */ @media all { *:first-child+html>body img#shtarget { background: url(../imagedepot/cat-ie70.png) no-repeat 0 100%; background-position: -199px;} } /* IE8 ? -----pretty safe (non-valid) filter----- */ @media all { html:lang(en) body img#shtarget { background: url(../imagedepot/cat-ie80.png) no-repeat 0 100%\0/!important;} /* Note: the hack is the "\0/" directly following last value in each property/value pair */ } /* IE9 beta ? -----can't "nail" this hack yet----- */ @media screen and (min-width: 0px) { html:lang(en) body img#shtarget { background: url(../imagedepot/cat-ie90.png) no-repeat 0\0/ 100%!important;} /* Note: the hack is the "\0/" inserted at the RIGHT place in each property/value pair. Only tested in the latest beta - January 31 2011. */ } /* --- fallback for unknown non-IE --- */ @media screen { :root body div div img#shtarget {background: url(../imagedepot/cat-confused.png) no-repeat 0 100%;} :root:not(:nth-child(1)) body>*|*:not(p) div#iewrapper[id^="ie"] img#shtarget {background: url(../imagedepot/cat-confused-1.png) no-repeat 0 100%;} /* Note: these filters do kick in in WebKit engines and some other. Thus they provide useful information if/when the more targeted and/or proprietary and high specificity filters for those engines fail in new engine versions. */ } /* old Gecko? -----pretty safe (proprietary) filter----- */ @media all { :root:lang(en)>body img#shtarget, x:-moz-any-link {background: url(../imagedepot/cat-gecko-old.png) no-repeat 0 100%;} } /* Gecko? -----safe (proprietary) filter----- */ @-moz-document url-prefix() { html:lang(en)>body>*|*:not(p) img#shtarget, x:-moz-any-link {background: url(../imagedepot/cat-gecko.png) no-repeat 0 100%!important;} /* Firefox 1.5 & 2 */ html:lang(en)>body>*|*:not(p) img#shtarget, x:-moz-any-link, x:default { background: url(../imagedepot/cat-fx.png) no-repeat 0 100%!important;} /* Firefox 3 */ :root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) div img#shtarget, x:-moz-any-link, x:default { background: url(../imagedepot/cat-fx1.png) no-repeat 0 100%!important;} /* Firefox 3.1 */ } /* older iCab? -----pretty safe (non-valid) filter----- */ @media screen { html:first-child:lang(en) body::before div#iewrapper[id^="ie"][id*="ieW"] img#shtarget {background: url(../imagedepot/cat-icab3.png) no-repeat 0 100%!important;} /* iCab 3 */ } /* older Safari? -----pretty safe (proprietary) filter----- */ @media screen { html:first-child>body div#iewrapper[id^="ie"][id*="ieW"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-mac.png) no-repeat 0 100%!important;} /* Safari 2 */ } /* Safari? -----safe (proprietary) filter----- */ @media screen and (min-width: 600px) and (-webkit-min-device-pixel-ratio:0) { :root>body div#iewrapper, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen4.png) no-repeat 0 100%!important;} /* general VebKit 4 */ } @media screen and (-webkit-min-device-pixel-ratio:0) { :root:not(:nth-child(1)) body>*|*:not(p) div#iewrapper[id^="ie"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen5.png) no-repeat 0 100%!important;} /* general VebKit 5 */ :root>body>*|*:not(p) div#iewrapper[id^=""][id*="iew"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen.png) no-repeat 0 100%!important;} /* general VebKit */ :root>body>*|*:not(p):not(:before) div#iewrapper[id^=""][id*="iew"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen1.png) no-repeat 0 100%!important;} /* general VebKit 1 */ :root:not(:nth-child(1)) body>*|*:not(p):not(:before):not(*|html:root):only-of-type>*|*:not(|*) div#iewrapper[id^="ie"][id*="iew"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen2.png) no-repeat 0 100%!important;} /* general VebKit 2 */ *:root:lan\g(en)>body:first-of-type:nth-of-type(1):not(:nth-child(0)):only-of-type>*|*:not(|*):not(:before):not(*|html:root) div#iewrapper[id^=""][id*="iew"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen3.png) no-repeat 0 100%!important;} /* general VebKit 3 */ :root:not(:nth-child(1)) body>*|*:not(p):not(:before) div#iewrapper[id^="ie"][id*="iew"] img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen4.png) no-repeat 0 100%!important;} /* general VebKit 4 */ } /* Konqueror? -----unsafe filter----- */ @media screen { :root:lang(en):not(:nth-child(1))>body:not(:nth-child(0)):only-of-type>*|*:not(:not):not(:before):not(*|html:root) img#shtarget, x:-khtml-any-link { background: url(../imagedepot/cat-konq.png) no-repeat 0 100%!important;} /* Konqueror 4 (tested only in version 4.0.3) */ } /* Opera 10+? -----unsafe filters----- */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { :root body div div img#shtarget {background: url(../imagedepot/cat-opera-p.png) no-repeat 0 100%;} /* This is a strange filter that I can't make "heads or tails" of. The hack works as intended in Opera 10 and 11 though. */ } /* Opera 9.5+? -----unsafe filters----- */ @media screen and (min-device-aspect-ratio:1/1), tv and (min-device-aspect-ratio:1/1) { :root:lang(en)>body:only-of-type>*|*:not(|*) div#iewrapper[id^=""][id*="iew"] img#shtarget {background: url(../imagedepot/cat-operabns.png) no-repeat 0 100%;} /* Opera (9.50+)*/ :root:lan\g(en) body:only-of-type>*|*:no\t(|*)>div#iewrapper[id^=""][id*="iew"] div div img#shtarget {background: rgba(0,0,0,0) url(../imagedepot/cat-opera-p.png) no-repeat 0 100%;} /* Opera (10.00 alpha+) */ } /* older Opera? -----unsafe filters----- */ /* let older versions recover from various rules they don't understand */ .dummy {list-style: inside;} @media screen and (min-width: 0px), tv and (min-width: 0px) { html:first-child>body div div img#shtarget {background: url(../imagedepot/cat-operar.png) no-repeat 0 100%;} /* Opera 7.20+ */ html:lang(en):first-child>body div div img#shtarget {background: url(../imagedepot/cat-operab.png) no-repeat 0 100%;} /* Opera 7.50+ */ html:lang(en):first-child>body div div img#shtarget {background: url(../imagedepot/cat-operaba.png) no-repeat left 100%;} /* Opera 8.0+ */ html:lang(en):first-child>body>div div img#shtarget[id*="tar"] {background: url(../imagedepot/cat-operabn.png) no-repeat 0 100%;} /* Opera 9.0+ */ } /* CONTROL: all browsers back on line? ----- */ img#shtarget {border-bottom: solid 1px #ddd!important;} /* marker in Opera */ #footer .nav::after {content: -o-skin("Smiley Cool"); position: absolute; right: 1px; top: -2px;} /* Strange selector constructions seem to pass only in (some versions of) the following browsers: - KHTML: ":not(:not)" - KHTML/WebKit: ":not(:before):not(*|html:root)" - Gecko/KHTML/WebKit: "body:not(:nth-child(0))" - iCab 3: "body::before" */