/* TARGETING BROWSERS by CSS
----updated medio nov. 2017------
This is a revised version for:
Relevant article and link to original stylesheet is found at:
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. These background images point back to the individual hacks and their place
in the cascade.
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, WebKit and Opera 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.
Mixing the hacks shown here with hacks found elsewhere, may also have disastrous
effects on "hacking-order" and cause CSS break-outs in one or another browser.
------------------------
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
IE8 and older. For that I use only well-tested version-targeting hacks and
methods that I know will not affect 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%; background-size: 100% 100%;} /* Well, at this point the cat really don't know */
/* NN4 ? -----safe filter----- (kept for nostalgic reasons.) */
/*/*/ /*/
img#shtarget {display: none;}
/* */
/* IE mac? -----safe filter----- (kept for nostalgic reasons.) */
/*\*//*/
* 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 */
/* Sometimes old IE's lack of support for full PNG transparency causes problems for the test
itself, so the following is to swith out the PNG with GIF transparency image so the
background image can shine through and reveal actual IE version. */
* html img.notie6 {display: none!important;}
* htm\l dummy#wrapper img.notie6 {display: none!important;}
}
/* 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 100%;}
}
/* IE8 ? -----pretty safe (non-valid) filter----- */
@media \0screen {
html:lang(en) body img#shtarget { background: url(../imagedepot/cat-ie80.png) no-repeat 0 100%!important;}
/* Note: the hack is the "\0screen" in the @media wrapper, which exploits a seemingly
unique and stable IE8 version bug.
I practical terms that means IE8 can be given corrections and workarounds in its
own section in a regular stylesheet. */
}
/* IE9 ? -----pretty safe (non-valid) filter----- */
@media screen and (min-width:100px\0/) {
:root body img#shtarget { background: url(../imagedepot/cat-ie90.png) no-repeat 0 100%!important;}
/* Note: pr 26.feb.2013: IE10+ do see this hack. */
}
/* IE10+ ? -----pretty safe (proprietary) filter----- */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
_:-ms-input-placeholder, :root body img#shtarget { background: url(../imagedepot/cat-ie100.png) no-repeat 0 100%!important;}
}
/* IE11+ ? -----pretty safe (proprietary) filter----- */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
_:-ms-fullscreen, :root body img#shtarget { background: url(../imagedepot/cat-ie110.png) no-repeat 0 100%!important;}
}
/* MS Edge 12+ ? -----pretty safe (proprietary) filter--
See: https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ */
@supports (-ms-accelerator:true) { /* msedge 12/13 */
_:-ms-lang(en), :root body img#shtarget { background: url(../imagedepot/cat-msedge.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (-webkit-appearance:none) { /* msedge 13+ */
_:-ms-lang(en), :root body img#shtarget { background: url(../imagedepot/cat-msedge+.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (-ms-ime-align:auto) and (color:unset) { /* msedge 14+ */
_:-ms-lang(en), :root body img#shtarget { background: url(../imagedepot/cat-msedge++.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) {
_:-ms-lang(en), :root body img#shtarget { background: url(../imagedepot/cat-msedge15+.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
/* --- fallback for unknown old non-IE and latest 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%;}
/* covers all Gecko from "old Mozilla" to latest Firefox (kicks in in Fx12 & 13.01)
Kicks in for SeaMonkey, hacks not thoroughly tested in SeaMonkey */
@supports () {
:root:lang(en)>body img#shtarget, x:-moz-any-link {background: url(../imagedepot/cat-gecko-a.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;} /* three bars - Firefox 1.5 & 2+ (kicks in in Fx12 & 13.01) */
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;} /* two bars - Firefox 3+ (kicks in in Fx12 & 13.01) */
:root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) * img#shtarget, x:-moz-any-link, x:default {background: url(../imagedepot/cat-fx1.png) no-repeat 0 100%!important;} /* one bar - Firefox 3.1+ (kicks in in Fx12 & 13.01) */
/*\*//*/
}
/**/
@media screen {
:root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) * img#shtarget, x:-moz-any-link, x:default {background: url(../imagedepot/cat-fx2.png) no-repeat 0 100%!important;} /* one "+" - Firefox Fx12+ */
}
@supports (scroll-behavior: smooth) {
/* Chrome et al - testing, not in sequence */
_:lang(en)::-internal-media-controls-overlay-cast-button, :root body div#base main * * img#shtarget {background: url(../imagedepot/cat-blink-53+++.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (scroll-behavior: smooth) {
/* Safari - testing, not in sequence */
_:lang(en)+_:-webkit-full-screen-document, :root body div#base main * * img#shtarget {background: url(../imagedepot/cat-safari-gen6.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (scroll-behavior: smooth) {
/* Firefox - testing, not in sequence */
_:lang(en-us)::-moz-placeholder, :root body div#base main * * img#shtarget {background: url(../imagedepot/cat-fx57++.png) no-repeat 0 100%!important;
background-size: 100% auto!important;}
}
@supports (scroll-behavior: smooth) and (-moz-appearance:meterbar) {
:root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) * img#shtarget, x:default {background: url(../imagedepot/cat-fx57+.png) no-repeat 0 100%!important;
background-size: 100% auto!important;} /* Firefox Quantum Fx57+ ... not thoroughly checked, but the following do not override it */
}
@supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {
:root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) * img#shtarget, x:-moz-any-link, x:default {background: url(../imagedepot/cat-fx30+.png) no-repeat 0 100%!important;
background-size: 100% auto!important;} /* Firefox Fx30+ */
}
@supports (scroll-behavior: smooth) {
:root:lang(en)>body:not(:nth-child(0)):only-of-type>*|*:not(|*) * img#shtarget, x:-moz-any-link, x:default {background: url(../imagedepot/cat-fx36+.png) no-repeat 0 100%!important;
background-size: 100% auto!important;} /* Firefox Fx36+ */
}
}
/* 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#main[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 (-webkit-min-device-pixel-ratio:0) {
:root>body div#base div#main div img#shtarget, x:-webkit-any-link,
:root>body div#base main * img#shtarget, x:-webkit-any-link {background: url(../imagedepot/cat-safari-gen5.png) no-repeat 0 100%!important;} /* general VebKit 4+ */
}
/* Blink? -----safe (proprietary) filter----- added: 10.mar.2014 -- */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
:root>body div#base div#main div img#shtarget, x:-webkit-any-link,
:root>body div#base main * img#shtarget, x:-webkit-any-link {background-image: url(../imagedepot/cat-blink-29+.png); background-size: 100% auto!important;}
/* -- added: 22.sep.2016 -- */
@supports (filter: grayscale(100%)) {
:root>body div#base div#main div img#shtarget, x:-webkit-any-link,
:root>body div#base main * img#shtarget, x:-webkit-any-link {background-image: url(../imagedepot/cat-blink-50+.png)!important;background-size: 100% auto!important;}
}
@supports (hyphens: manual) {
:root>body div#base div#main div img#shtarget, x:-webkit-any-link,
:root>body div#base main * img#shtarget, x:-webkit-any-link {background-image: url(../imagedepot/cat-blink-53+.png)!important; background-size: 100% auto!important;}
}
@supports (scroll-behavior: smooth) {
:root>body div#base div#main div img#shtarget, x:-webkit-any-link,
:root>body div#base main * img#shtarget, x:-webkit-any-link {background-image: url(../imagedepot/cat-blink-53++.png)!important; background-size: 100% auto!important;}
}
@supports (scroll-behavior: smooth) {
/* Edge(Chromium) - https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e */
_:lang(en)::-ms-, :root body div#base main img#shtarget {background-image: url(../imagedepot/cat-msedgechr.png)!important; background-size: 100% auto!important;}
}
}
/* inserted for testing -- not active as is */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}}
/* 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) */
/* I have no idea if this work in later versions - can't test now */
}
/* Opera 12+? -----somewhat safe filter----- */
@media screen and (-o-min-device-pixel-ratio: 1/1){
:root body * * img#shtarget {background: url(../imagedepot/cat-opera-p2.png) no-repeat 0 100%;}
/* As this filter relies on the "-o-" prefix, this filter is pretty safe until
they decide to drop the prefix in a future version.
Covers Opera 11 and 12, but because the 11 filter relies on a bug that is
fixed in 12, 11 and 12 can be separated - see below. */
}
/* Opera 11+? -----safe filter----- */
@media not screen and (1) and (-o-min-device-pixel-ratio: 1/1){
:root body * * img#shtarget {background: url(../imagedepot/cat-opera-p1.png) no-repeat 0 100%!important;}
}
/* Opera 10+? -----unsafe filter----- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
:root body * * 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+) */
}
/* let older versions recover from various rules they don't understand */
.dummy {list-style: inside;}
/* CONTROL: all browsers back on line? ----- */
img#shtarget {border-bottom: solid 1px #ddd!important; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.75))!important;}