browser strangeness

*** Updated for Microsoft Edge and Safari 11 ***


This is my public LIVE browser test page for my own CSS hack contributions to the universe. If you are new to web development... These are quick-fixes for browser-specific bugs, not anything to do with illegal activity. If you use them, remember that CSS Hacks are bandaids, temporary fixes ONLY! Recently I was asked how I find these: examine browser source code where available, read developer notes for Chrome, Firefox and IE/Edge, test... a lot! Why do I do this? Because it is a fun hobby and I like puzzles. You will see a bit of my work and testing at BrowserHacks.com - If you post to the GitHub boards about CSS hacks I am certain one of us will respond.

Check out the Safari 6.1 and newer hacks and the new Windows 10 browser: Microsoft Edge (Formerly the Spartan Project) browser hacks. These were formerly tested in Windows 10 (preview) but I have refined them for you since the final Winows 10 release version.

Most of these are the product of my own research and labors and also permutations of other hacks to get the right results, as well as heavy testing on many browsers in order to not have the usual problem of partially tested hacks that affect browsers other than intended by the programmers using them, and to target as many specific browsers as possible - and ONLY those browsers where it can be accomplished. Only a few special cases are not mine but are good and provide important basics so are worth including. I have made a point to reference my sources for those I did not create personally.

Why do I post where it came from - because in every OTHER programming topic people are completely expected the credit for their hard work. It is the right thing to do. I spent years researching these - and tested the ones listed here under other people - mostly for my own amusement but also to make sure that they do what they say they do. Still tested working in 2015. If you want to duplicate my work from here, please put a link back to this page or my blog at jeffclayton.wordpress.com.

It is always better to use good css before resorting to css hack workarounds, but these are here for solutions in the meantime.

--Jeff Clayton [ tech blog: jeffclayton.wordpress.com ] 

/* My Safari 7.1+ CSS Hack (Formatted Example) */

_::-webkit-full-page-media, _:future, :root .selector {
   property:value; 
}

Author: Jeff Clayton



If a CSS hack matches your browser it will turn red.

[Index] [EdgeHTML] [Internet Explorer] [Firefox] [Safari] [Chrome] [Chrome+Safari] [Opera Mini]

-: MS Edge (EdgeHTML) Browser CSS :-


Windows 10's Microsoft Edge Browser started at version 12, where Internet Explorer left off at version 11, and continued to version 18. In January of 2020 the Chromium 79 based version of MS Edge has been released. The hacks for Chrome work for it, not the MS EdgeHTML ones.

Special Purpose


@supports (-ms-ime-align:auto) { .selector { property:value; } }
Microsoft Edge 12-18 (all EdgeHTML) Not Chromium
Author: Jeff Clayton
_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
Microsoft Edge 12-18 (all EdgeHTML) Not Chromium
Author: Jeff Clayton
@supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) { .selector { property:value; } }
All Microsoft Edge (Includes Chrome 28+)
Author: Jeff Clayton
@supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { .selector { property:value; } }
Microsoft Edge-Chromium (Chrome 79+)
Author: Jeff Clayton

By Version


@supports (-ms-ime-align:auto) and (-webkit-mask: url()) { .selector { property:value; } }
Microsoft Edge 18
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (font-variation-settings:normal) { .selector { property:value; } }
Microsoft Edge 17+ (to 18)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (font-variation-settings:normal) and (not (-webkit-mask: url())) { .selector { property:value; } }
Microsoft Edge 17
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (-webkit-mask: url())) { .selector { property:value; } }
Microsoft Edge 17- (to 12)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (position:sticky) { .selector { property:value; } }
Microsoft Edge 16+ (to 18)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (position:sticky) and (not (font-variation-settings:normal)) { .selector { property:value; } }
Microsoft Edge 16
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (font-variation-settings:normal)) { .selector { property:value; } }
Microsoft Edge 16- (to 12)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial) { .selector { property:value; } }
Microsoft Edge 15+ (to 18)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (-webkit-text-stroke:initial)) and (not (position:sticky)) { .selector { property:value; } }
Microsoft Edge 15
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (position:sticky)) { .selector { property:value; } }
Microsoft Edge 15- (to 12)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Microsoft Edge 14+ (to 18)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (-ms-accelerator:true)) and (not (-webkit-text-stroke:initial)) { .selector { property:value; } }
Microsoft Edge 14
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (not (-webkit-text-stroke:initial)) { .selector { property:value; } }
Microsoft Edge 14- (to 12)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) and (color:unset) { .selector { property:value; } }
Microsoft Edge 13+ (to 18)
Author: Jeff Clayton
_:-ms-lang(x), _::-webkit-meter-bar, .selector { property:value; }
Microsoft Edge 13+ (to 18)
Author: Jeff Clayton
@supports (-ms-accelerator:true) and (color:unset) { .selector { property:value; } }
Microsoft Edge 13
Author: Jeff Clayton
@supports (-ms-ime-align:auto) { .selector { property:value; } }
Microsoft Edge 12-18 (all EdgeHTML) Not Chromium
Author: Jeff Clayton
@supports (-ms-accelerator:true) { .selector { property:value; } }
Microsoft Edge 13- (to 12)
Author: Jeff Clayton
_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }
Microsoft Edge 12-18 (all EdgeHTML) Not Chromium
Author: Jeff Clayton
@supports (-ms-accelerator:true) and (not (color:unset)) { .selector { property:value; } }
Microsoft Edge 12
Author: Jeff Clayton

A Few Others


@supports (not (-ms-ime-align:auto)) { .selector { property:value; } }
Any non-Microsoft modern browsers (Safari 9+, Chrome 28+, Firefox 22+)
Author: Jeff Clayton
@charset "<Internet Explorer 11 and Microsoft Edge>"; _:-ms-lang(x), .selector { property:value; }";
Internet Explorer 11 and Microsoft Edge (Put the above line at the top of an external stylesheet)
Author: Jeff Clayton
@supports (-ms-ime-align:auto) { .selector { --this-variable:value; property:var(--this-variable); } }
Microsoft Edge 15+ (to 18, CSS3 Variable Method)
Author: Jeff Clayton

-: Internet Explorer CSS :-


Special Purpose


_::selection, :root .selector { property:value; }
Anything But Firefox 61- and Internet Explorer 8-
Author: Jeff Clayton
_::selection, .selector { property:value; }
Anything But Firefox 61- and Internet Explorer 8
Author: Jeff Clayton
:root .selector { property:value; }
Anything But Internet Explorer 8-
Source: Standard CSS3
_:root, .selector { property:value; }
Anything But Internet Explorer 8 (or ie6-)
Author: Jeff Clayton
.selector, #not#ie8 { property:value; }
Anything But Internet Explorer 8
Source: Big List of CSS Hacks
_:lang(x), .selector { property:value; }
Anything But Internet Explorer 7-
Author: Jeff Clayton
_css-text, .selector { property:value; }
Anything But Internet Explorer 6-
Author: Jeff Clayton
.selector { prop\erty:value; }
Anything but Internet Explorer 5-
Source: Big List of CSS Hacks

By Version


@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 { .selector { property:value; } }
Internet Explorer 11- (All but ie8)
ie11 Hack - Author: Jeff Clayton
_:-ms-fullscreen, :root .selector { property:value; }
Internet Explorer 11
ie11 Hack - Author: Jeff Clayton
_:-ms-lang(x), .selector { property:value; }
Internet Explorer 10-11, Microsoft Edge
Author: Jeff Clayton
_:-ms-input-placeholder, :root .selector { property:value; }
Internet Explorer 10-11 SpPrev
Author: Jeff Clayton
_:-ms-lang(x), .selector { property:value\9; }
Internet Explorer 10
Author: Jeff Clayton
_::selection, .selector { property:value\0; }
Internet Explorer 9-11
Author: Jeff Clayton
@media screen and (min-width:0\0) and (min-resolution:+72dpi) { .selector { property:value; } }
Internet Explorer 9-11
Author: Jeff Clayton
@media screen and (min-width:0\0) and (min-resolution:.001dpcm) { .selector { property:value; } }
Internet Explorer 9
Author: Jeff Clayton
.selector { property:value\0; }
Internet Explorer 8-11 (and old Firefox 1.x)
Source: Big List of CSS Hacks
.selector { property:value\0/; }
Internet Explorer 8
Source: Paul Irish
_:first, .selector { property:value; }
Internet Explorer 7
Author: Jeff Clayton
*+html .selector { property:value; }
Internet Explorer 7
Source: Paul Irish
.selector, { property:value; }
Internet Explorer 7-
Source: CSS Mojo
.selector { _property:value\9; }
Internet Explorer 6
Source: (Simple Combination)
.selector { _prop\erty:value; }
Internet Explorer 6
Source: (Simple Combination)
* html .selector { property:value; }
Internet Explorer 6-
Source: Web Devout
.selector { _property:value; }
Internet Explorer 6-
Source: Paul Irish

A Few Others


@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { .selector { property:value; } }
Internet Explorer 10-11 SpPrev
Source: Paul Irish
@media screen\0 { .selector { property:value; } }
Internet Explorer 8-11 (and old Firefox 1.x)
Source: Keith Clark
@media screen\0 { .selector { property:value; } _:-moz-tree-row(hover), .selector { property:value; } }
Internet Explorer 8-11 (The second selector blocks Firefox 1.x)
Source: (My Combination)
@media screen and (min-width:1vmin) { .selector { property:value; } }
IN TESTING: Chrome 44+, MS Edge (All Including Chromium), Not MSIE, Needs Testing in old Firefox + Safari
Source: Suggested by WebMechanic
@charset "<Any Browser but MSIE 10 and below>";
Any modern browser but Internet Explorer 10-, Firefox 18- (Put the above line at the top of an external stylesheet)
Microsoft Notes - External Stylesheet Bugs
@charset "<Internet Explorer 11 and Microsoft Edge>"; _:-ms-lang(x), .selector { property:value; }";
Internet Explorer 11 and Microsoft Edge (Put the above line at the top of an external stylesheet)
Author: Jeff Clayton

-: Firefox CSS :-


If you are using iOS Firefox please scroll down to the notes for iOS Chrome. The iOS version of the browser uses the Safari engine, and thus uses the Safari hacks instead of the Firefox ones. In Google Chrome & Firefox, it has been found that one can check for an Apple M1 GPU to Detect and Differentiate Apple Intel Macs and M1 based Macs. You can view this Test Page for Google Chrome & Firefox on an M1 Mac.

Special Purpose


_::selection, :root .selector { property:value; }
Anything But Firefox 61- and Internet Explorer 8-
Author: Jeff Clayton
_::selection, .selector { property:value; }
Anything But Firefox 61- and Internet Explorer 8
Firefox Blocker - Author: Jeff Clayton
_:-moz-tree-row(hover), .selector { property:value; }
Firefox 63-
The -moz-tree-row(hover) Hack - Author: Jeff Clayton
_:-moz-read-write, :root .selector { property:value; }
Firefox 1.5+
Author: Jeff Clayton
_:-moz-any-link, :root .selector { property:value; }
Firefox 1+ (to 56)
Author: Jeff Clayton
@supports (-moz-appearance:none) { .selector { --this-variable:value; property:var(--this-variable); } }
Firefox 31+ (CSS3 Variable Method)
Author: Jeff Clayton
@-moz-document regexp('http:.*') { .selector { property:value; } }
Non-SSL Pages (Firefox 6-60)
Author: Jeff Clayton
@-moz-document regexp('https:.*') { .selector { property:value; } }
SSL Pages (Firefox 6-60)
Author: Jeff Clayton
@supports (-moz-osx-font-smoothing:auto) { .selector { property:value; } }
Mac OS X 10.6 Snow Leopard and up (Firefox 25+)
Author: Jeff Clayton
@media screen and (-moz-overlay-scrollbars) { .selector { property:value; } }
Mac OS X 10.8 Yosemite and up (Firefox 24+)
Author: Jeff Clayton
@supports (-moz-osx-font-smoothing:auto) and (text-align-last:auto) { .selector { property:value; } }
Mac OS X 10.9 Mavericks and up (Firefox 49+)
Author: Jeff Clayton
@supports (-moz-osx-font-smoothing:auto) and (not (text-align-last:auto)) { .selector { property:value; } }
Mac OS X 10.6 Snow Leopard - 10.8 Yosemite (Firefox 25+)
Author: Jeff Clayton
@media screen and (-moz-overlay-scrollbars) { @supports (not (text-align-last:auto)) { .selector { property:value; } } }
Mac OS X 10.8 Yosemite (Firefox 24+)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { .selector { property:value; } }
Not Mac OS X (Firefox 25+)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { @media not screen and (-moz-os-version) { .selector { property:value; } } }
Android / Linux (Firefox 25-57)
Author: Jeff Clayton
@media screen and (-moz-windows-theme) { .selector { property:value; } }
Windows Only (Firefox 4-57)
Author: Jeff Clayton
@media not screen and (-moz-windows-theme) { _:-moz-ui-valid, .selector { property:value; } }
Any Non-Windows OS (Firefox 4+)
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-xp) { .selector { property:value; } }
Windows XP Only (Firefox 25-52) XP not supported by Firefox 53+
Source: Native in Firefox
@media screen and (-moz-os-version:windows-vista) { .selector { property:value; } }
Windows Vista Only (Firefox 25-52) Vista not supported by Firefox 53+
Source: Native in Firefox
@media screen and (-moz-os-version:windows-win7) { .selector { property:value; } }
Windows 7 Only (Firefox 25-57)
Source: Native in Firefox
@media screen and (-moz-os-version:windows-win8) { .selector { property:value; } }
Windows 8 Only (Firefox 25-57)
Source: Native in Firefox
@media screen and (-moz-os-version:windows-win10) { .selector { property:value; } }
Windows 10 Only (Firefox 25-57)
Source: Native in Firefox
@media screen and (-moz-os-version:windows-win8), screen and (-moz-os-version:windows-win10) { .selector { property:value; } }
Windows 8+ (Firefox 25-57)
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-win7), screen and (-moz-os-version:windows-win8), screen and (-moz-os-version:windows-win10) { .selector { property:value; } }
Windows 7+ (Firefox 25-57)
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-vista), screen and (-moz-os-version:windows-win7), screen and (-moz-os-version:windows-win8), screen and (-moz-os-version:windows-win10) { .selector { property:value; } }
Windows Vista+ (Firefox 25-52) Vista not supported by Firefox 53+
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-xp), screen and (-moz-os-version:windows-vista), screen and (-moz-os-version:windows-win7), screen and (-moz-os-version:windows-win8) { .selector { property:value; } }
Windows 8- (Firefox 25-57)
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-xp), screen and (-moz-os-version:windows-vista), screen and (-moz-os-version:windows-win7) { .selector { property:value; } }
Windows 7- (Firefox 25-57)
Author: Jeff Clayton
@media screen and (-moz-os-version:windows-xp), screen and (-moz-os-version:windows-vista) { .selector { property:value; } }
Windows Vista- (Firefox 25-52) XP & Vista not supported by Firefox 53+
Author: Jeff Clayton

By Version


@supports selector(:-moz-is-html) { .selector { property:value; } }
Firefox 69+
Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (orientation) { _:-moz-tree-row(hover), .selector { property:value; } }
Firefox 63
Author: Jeff Clayton
@supports (-moz-appearance:none) and (image-orientation:90deg) { _::selection, .selector { property:value; } }
Firefox 62
Authors: Guillaume Simons & Jeff Clayton
_:any-link:-moz-tree-row(hover), .selector { property:value; }
Firefox 50+ (to 63)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (text-align-last:auto) { .selector { property:value; } }
Firefox 49+
Author: Jeff Clayton
_:-moz-any-link:dir(ltr), .selector { property:value; }
Firefox 49+ (to 56)
Author: Jeff Clayton
_:-moz-any-link:dir(ltr), _:-moz-full-screen-ancestor, .selector { property:value; }
Firefox 49
Author: Jeff Clayton
@supports (-moz-appearance:none) and (color-adjust:exact) { .selector { property:value; } }
Firefox 48+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (color-adjust:exact) and (not (text-align-last:auto)) { .selector { property:value; } }
Firefox 48
Author: Jeff Clayton
@media (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen) { .selector { property:value; } }
Firefox 47+
Author: Jeff Clayton
*[browser="FF47IUP" i] _:-moz-tree-row(hover), .selector { property:value; }
Firefox 47+ (to 63) Case-Insenstive Attribute Combo - Use attribute: <div class="selector" browser="ff47iup">Stuff Here</div>
Author: Jeff Clayton
ff47up = (!!window.sidebar && !!((1/[0].lastIndexOf(0,-0))>0) && !!(typeof Reflect==='object') && !!(typeof Reflect.isExtensible==='function'));
Firefox 47+ (JavaScript Method)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::backdrop, .selector { property:value; }
Firefox 47+ (to 63)
Author: Jeff Clayton
@media (min--moz-device-pixel-ratio:0) and (display-mode:browser), (min--moz-device-pixel-ratio:0) and (display-mode:fullscreen) { @supports (not (color-adjust:exact)) { .selector { property:value; } } }
Firefox 47
Author: Jeff Clayton
@supports (-moz-appearance:none) and (text-emphasis:none) { .selector { property:value; } }
Firefox 46+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (text-emphasis:none) { _:-moz-type-unsupported-platform, .selector { property:value; } }
Firefox 46
Author: Jeff Clayton
@supports (-moz-appearance:none) and (word-spacing:100%) { .selector { property:value; } }
Firefox 45+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (word-spacing:100%) and (not (text-emphasis:none)) { .selector { property:value; } }
Firefox 45
Author: Jeff Clayton
@supports (-moz-appearance:none) and (not (-moz-window-shadow:none)) { .selector { property:value; } }
Firefox 44+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (not (-moz-window-shadow:none)) and (not (word-spacing:100%)) { .selector { property:value; } }
Firefox 44
Author: Jeff Clayton
@supports (-moz-appearance:none) and (hyphens:none) { .selector { property:value; } }
Firefox 43+
Author: Jeff Clayton
@supports (-moz-window-shadow:none) and (hyphens:none) { .selector { property:value; } }
Firefox 43
Author: Jeff Clayton
ff42up = (!!window.sidebar && !!(typeof Reflect==='object') && !!(typeof Reflect.isExtensible==='function'));
Firefox 42+ (JavaScript Method)
Author: Jeff Clayton
ff42 = (!!window.sidebar && !!(typeof Reflect==='object') && !!(typeof Reflect.isExtensible==='function') && !Array.prototype.includes);
Firefox 42 (JavaScript Method)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (writing-mode:horizontal-tb) and (not (hyphens:none)) { .selector { property:value; } }
Firefox 41-42
Author: Jeff Clayton
@supports (-moz-appearance:none) and (writing-mode:horizontal-tb) { .selector { property:value; } }
Firefox 41+
Author: Jeff Clayton
ff41 = (!!window.sidebar && !!(typeof Request==='function'))?!!(typeof Symbol.species==='symbol')&&!!(req=new Request(0).context==='fetch'):false;
Firefox 41 (JavaScript Method)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (scroll-snap-type:none) and (not (-moz-text-decoration-style:inherit)) { .selector { property:value; } }
Firefox 40+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (not (writing-mode:horizontal-tb)) and (not (-moz-text-decoration-style:inherit)) { .selector { property:value; } }
Firefox 40
Author: Jeff Clayton
@supports (-moz-appearance:none) and (scroll-snap-type:none) { .selector { property:value; } }
Firefox 39+
Author: Jeff Clayton
@supports (scroll-snap-type:none) and (-moz-text-decoration-style:inherit) { .selector { property:value; } }
Firefox 39
Author: Jeff Clayton
@supports (-moz-appearance:none) and (ruby-position:over) { .selector { property:value; } }
Firefox 38+
Author: Jeff Clayton
_:-moz-tree-row(hover), _:unresolved, .selector { property:value; }
Firefox 38+ (to 63)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (ruby-position:over) and (not (scroll-snap-type:none)) { .selector { property:value; } }
Firefox 38
Author: Jeff Clayton
@supports (-moz-appearance:none) and (display:contents) { .selector { property:value; } }
Firefox 37+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (display:contents) and (not (ruby-position:over)) { .selector { property:value; } }
Firefox 37
Author: Jeff Clayton
@supports (-moz-appearance:none) and (will-change:auto) { .selector { property:value; } }
Firefox 36+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (will-change:auto) and (not (display:contents)) { .selector { property:value; } }
Firefox 36
Author: Jeff Clayton
@supports (-moz-appearance:none) and (mask-type:alpha) { .selector { property:value; } }
Firefox 35+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (mask-type:alpha) and (not (will-change:auto)) { .selector { property:value; } }
Firefox 35
Author: Jeff Clayton
@supports (-moz-appearance:none) and (font-kerning:none) { .selector { property:value; } }
Firefox 34+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (font-kerning:none) and (not (mask-type:alpha)) { .selector { property:value; } }
Firefox 34
Author: Jeff Clayton
@supports (-moz-appearance:none) and (list-style-type:any) { .selector { property:value; } }
Firefox 33+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (list-style-type:any) and (not (font-kerning:none)) { .selector { property:value; } }
Firefox 33
Author: Jeff Clayton
@supports (-moz-appearance:none) and (box-decoration-break:clone) { .selector { property:value; } }
Firefox 32+
Author: Jeff Clayton
_:-moz-tree-row(hover), _:scope, .selector { property:value; }
Firefox 32+ (to 63)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (box-decoration-break:clone) and (not (list-style-type:any)) { .selector { property:value; } }
Firefox 32
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-blend-mode:difference,normal) { .selector { property:value; } _::-moz-math-stretchy, .selector { property:value; } }
Firefox 31+ /* The second selector blocks 30 */
Author: Jeff Clayton
_:-moz-tree-row(hover), .selector { --this-variable:value; property:var(--this-variable); }
Firefox 31+ (to 63, CSS3 Variable Method)
Author: Jeff Clayton
@supports (-moz-background-inline-policy:continuous) and (background-blend-mode:difference,normal) { .selector { property:value; } _::-moz-math-stretchy, .selector { property:value; } }
Firefox 31 /* The second selector blocks 30 */
Author: Jeff Clayton
@supports (-moz-background-inline-policy:continuous) { .selector { --this-variable:value; property:var(--this-variable); } }
Firefox 31 (CSS3 Variable Method)
Author: Jeff Clayton
@supports (-moz-background-inline-policy:continuous) and (background-blend-mode:difference,normal) { .selector { property:value; } }
Firefox 30-31
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-blend-mode:difference,normal) { .selector { property:value; } }
Firefox 30+
Authors: Guillaume Simons & Jeff Clayton
@supports (background-blend-mode:difference,normal) { _::-moz-math-stretchy, .selector { property:value; } }
Firefox 30
Author: Jeff Clayton
@supports (-moz-appearance:none) and (box-sizing:content-box) { .selector { property:value; } }
Firefox 29+
Author: Jeff Clayton
@media screen and (min--moz-device-pixel-ratio:0) and (min-resolution:3e1dpcm) { .selector { property:value; } }
Firefox 29+ (media query method)
Source: Guillaume Simons
@supports (-moz-appearance:none) and (box-sizing:content-box) and (not (background-blend-mode:difference,normal)) { .selector { property:value; } }
Firefox 29
Author: Jeff Clayton
@supports (-moz-appearance:none) and (list-style-type:japanese-formal) { .selector { property:value; } }
Firefox 28+
Authors: Guillaume Simons & Jeff Clayton
_:-moz-tree-row(hover), _::-moz-range-track:hover, .selector { property:value; }
Firefox 28+ (to 63)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (list-style-type:japanese-formal) and (not (box-sizing:content-box)) { .selector { property:value; } }
Firefox 28
Author: Jeff Clayton
@supports (-moz-appearance:none) and (all:initial) { .selector { property:value; } }
Firefox 27+
Authors: Guillaume Simons & Jeff Clayton
_:-moz-tree-row(hover), _::-moz-color-swatch, .selector { property:value; }
Firefox 27+ (to 63)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (all:initial) and (not (list-style-type:japanese-formal)) { .selector { property:value; } }
Firefox 27
Authors: Guillaume Simons & Jeff Clayton
@supports (-moz-appearance:none) and (image-orientation:90deg) { .selector { property:value; } }
Firefox 26+ (to 62)
Authors: Guillaume Simons & Jeff Clayton
_:-moz-devtools-highlighted, :root .selector { property:value; }
Firefox 26+ (to 62)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (image-orientation:90deg) and (not (all:initial)) { .selector { property:value; } }
Firefox 26
Authors: Guillaume Simons & Jeff Clayton
@supports (-moz-appearance:none) and (background-attachment:local) { .selector { property:value; } }
Firefox 25+
Authors: Guillaume Simons & Jeff Clayton
@supports (background-attachment:local) and (-moz-text-blink:none) { .selector { property:value; } }
Firefox 25
Author: Jeff Clayton
@supports (-moz-appearance:none) and (cursor:zoom-in) { .selector { property:value; } }
Firefox 24+
Authors: Guillaume Simons & Jeff Clayton
@supports (-moz-appearance:none) and (cursor:zoom-in) and (not (background-attachment:local)) { .selector { property:value; } }
Firefox 24
Authors: Guillaume Simons & Jeff Clayton
 
A combination of html features and CSS work together for this next effect. Firefox 23 blocks insecure non-ssl (http://) stylesheets from loading by default from within ssl-secured (https://) stylesheets using the @import feature. All other browsers already would not load insecure stylesheets from within secure stylesheets. Additional test page here (including Firefox 23+): https://jeffclayton.github.io/mixed_ssl_css.htm The hacks are the same, the order that the colors are loaded are different. Write the base CSS first, then load the Firefox 22 code in the external stylesheet. A more in-depth description can be found on my wordpress site: https://jeffclayton.wordpress.com/2016/01/16/htmlssl-css-hacks-for-firefox-22-and-23
@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .selector { property:value; } }
Firefox 23 (import http stylesheet within https stylesheet) Start with Red -- Overwrite with Gray.
Author: Jeff Clayton
@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .selector { property:value; } }
Firefox 22 (import http stylesheet within https stylesheet) Start with Gray -- Overwrite with Red.
Author: Jeff Clayton
@supports (-moz-appearance:none) and (not (cursor:zoom-in)) { .selector { property:value; } }
Firefox 22-23
Authors: Guillaume Simons & Jeff Clayton
@supports (-moz-appearance:none) and (display:flex) { .selector { property:value; } }
Firefox 22+
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-range-progress, .selector { property:value; }
Firefox 22+ (to 63)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-range-track, .selector { property:value; }
Firefox 21 (to 63)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-range-track, .selector { property:value; } _:-moz-tree-row(hover), _::-moz-range-progress, .selector { property:value; }
Firefox 21 (The second selector blocks 22+)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-placeholder, .selector { property:value; }
Firefox 19 (to 63)
Author: Jeff Clayton
_:-moz-dir(ltr), .selector { property:value; } _:-moz-dir(ltr), _:-moz-has-handlerref, .selector { property:value; }
Firefox 18+ (to 52) /* The second selector blocks 17 */
Author: Jeff Clayton
_:-moz-dir(ltr), .selector { property:value; } _:-moz-dir(ltr), _:-moz-has-handlerref, .selector { property:value; } _:-moz-tree-row(hover), _::-moz-placeholder, .selector { property:value; }
Firefox 18 /* The second selector blocks 17, third blocks 19+ */
Author: Jeff Clayton
_:-moz-dir(ltr), .selector { property:value; }
Firefox 17+ (to 52)
Author: Jeff Clayton
_:-moz-dir(ltr), _:-moz-has-handlerref, .selector { property:value; }
Firefox 17
Author: Jeff Clayton
@media screen and (min--moz-device-pixel-ratio:0) and (min-resolution:.1dppx) { .selector { property:value; } }
Firefox 16+
Author: Jeff Clayton
_:-moz-meter-optimum, :root .selector { property:value; }
Firefox 16+
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-meter-bar, .selector { property:value; }
Firefox 16 (to 63)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-meter-bar:-moz-handler-blocked, .selector { property:value; } _:-moz-dir(ltr), .selector { property:value; }
Firefox 16 /* The second selector blocks 17+ */
Author: Jeff Clayton
_:-moz-type-unsupported-platform, :root .selector { property:value; } _::-moz-meter-bar, :root .selector { property:value; }
Firefox 15 (The second selector blocks 16+)
Author: Jeff Clayton
@media screen and (min--moz-device-pixel-ratio:0) { @media (min-width:0px) { .selector { property:value; } } }
Firefox 11+
Author: Jeff Clayton
_:-moz-full-screen-ancestor, :root .selector { property:value; }
Firefox 10+ (to 49)
Author: Jeff Clayton
_:-moz-full-screen, :root .selector { property:value; }
Firefox 9+
Author: Jeff Clayton
_:-moz-full-screen:-moz-handler-blocked, :root .selector { property:value; } _:-moz-full-screen-ancestor, :root .selector { property:value; }
Firefox 9 (The second selector blocks 10+)
Author: Jeff Clayton
@media screen and (min--moz-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .selector { property:value; } }
Firefox 8+
Author: Jeff Clayton
@media screen and (min--moz-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .selector { property:value; } _:-moz-full-screen, :root .selector { property:value; } }
Firefox 8 (The second selector blocks 9+)
Author: Jeff Clayton
@-moz-document regexp('*') { .selector { property:value; } }
Firefox 6+ (to 60)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-progress-bar, .selector { property:value; }
Firefox 6+ (to 63)
Author: Jeff Clayton
_:-moz-ui-valid, :root .selector { property:value; }
Firefox 4+
Author: Jeff Clayton
_:-moz-locale-dir(ltr), .selector { property:value; }
Firefox 3.6+
Author: Jeff Clayton
_:not(), _:-moz-handler-crashed, .selector { property:value; }
Firefox 3.6
Author: Jeff Clayton
_:not(), .selector { property:value; }
Firefox 3.x- (3.6- a.k.a Firefox < 4.0)
The blank-not() hack -- Author: Jeff Clayton
_:not(), _:-moz-loading, .selector { property:value; }
Firefox 3.x (Firefox 3.0-3.6)
Author: Jeff Clayton
_:-moz-handler-blocked, :root .selector { property:value; }
Firefox 3.5+ (to 46)
Author: Jeff Clayton
_:-moz-loading, :root .selector { property:value; }
Firefox 3+
Author: Jeff Clayton
_:-moz-is-html, :root .selector { property:value; }
Firefox 2+
Author: Jeff Clayton
_:-moz-read-write, :root .selector { property:value; }
Firefox 1.5+
Author: Jeff Clayton
_:-moz-only-whitespace, :root .selector { property:value; }
Firefox 1.5+
Author: Jeff Clayton
_:-moz-read-write, _::-moz-viewport, :root .selector { property:value; }
Firefox 1.5
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-viewport, .selector { property:value; }
Firefox 1.x (Firefox 1.0-1.5)
Author: Jeff Clayton
_:-moz-any-link, :root .selector { property:value; }
Firefox 1.0+ (to 56)
Author: Jeff Clayton
_:-moz-tree-row(hover), .selector { property:value; }
Firefox 1.0+ (to 63)
The -moz-tree-row(hover) hack - Author: Jeff Clayton

A Few Others


_:-moz-tree-row(hover), _::selection, .selector { property:value; }
Firefox 62-63
Author: Jeff Clayton
@media screen and (-moz-overlay-scrollbars) { @supports (text-align-last:auto) { .selector { property:value; } } }
Mac OS X 10.9 Mavericks and up (Firefox 49+) Alternate Method
Author: Jeff Clayton
@supports (-moz-appearance:none) and (list-style-type:disclosure-open) { .selector { property:value; } }
Firefox 33+
Author: Jeff Clayton
@supports (-moz-appearance:none) and (image-orientation:90deg) { @supports not (all:initial) { .selector { property:value; } } }
Firefox 26 (nested method)
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-attachment:local) and (not (image-orientation:90deg)) { .selector { property:value; } }
Firefox 25, 63+
Authors: Guillaume Simons & Jeff Clayton
@supports (display:flex) and (-moz-background-inline-policy:continuous) { .selector { property:value; } }
Firefox 22+ (to 31)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-math-stretchy, _::-moz-range-progress, .selector { property:value; }
Firefox 22+ (to 30)
Author: Jeff Clayton
_:-moz-tree-row(hover), _::-moz-math-stretchy, _::-moz-range-track, .selector { property:value; }
Firefox 21+ (to 30)
Author: Jeff Clayton
_:-moz-type-unsupported-platform, :root .selector { property:value; }
Firefox 15+ (to 46)
Author: Jeff Clayton
_::-moz-math-stretchy, _:-moz-ui-valid, :root .selector { property:value; }
Firefox 4+ (to 30)
Author: Jeff Clayton
_:-moz-handler-crashed, :root .selector { property:value; }
Firefox 3.6+ (to 46)
Author: Jeff Clayton
_:not(), _:-moz-handler-blocked, .selector { property:value; }
Firefox 3.5-3.6
Author: Jeff Clayton
_:not(), _:optional, .selector { property:value; }
Firefox 1.5-3.6 (Firefox > 1.0 and < 4.0)
Author: Jeff Clayton

Experiments


@supports (-moz-osx-font-smoothing:auto) { .selector { property:value; } @media (-moz-images-in-menus:0) { .selector { property:value; } } }
Special Purpose (Mac) - The Second Selector blocks the First Selector
Author: Jeff Clayton
@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) { @media not screen and (-moz-os-version) { .selector { property:value; } @media (-moz-images-in-menus:0) { .selector { property:value; } } } }
Special Purpose (Win/Lin) - The Second Selector blocks the First Selector
Author: Jeff Clayton

-: Chrome and Safari CSS :-


If you are using iOS Chrome (say in version 7) and the hacks seem to be off, BEFORE you complain that these do not work, there is nothing wrong with the hacks -- it is not like other versions of Chrome. iOS Chrome uses the Safari hacks INSTEAD of the ones for Chrome. Chrome for iOS is NOT using the Chrome engine but opted to use the Safari engine from Apple instead. It may look like Chrome, but it isn't when you look under the hood. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple

Special Purpose


_:-webkit-full-screen-ancestor, :root .selector { property:value; }
iOS Blocker! (For Chrome 15+, Safari 5.1+, and Opera 14+) [If using Android, Requires OS & Browser 4.0+]
The iOS-Blocker Hack - Author: Jeff Clayton
@supports (not (-webkit-hyphens:none)) { .selector { property:value; } }
Any modern browser but Safari and Internet Explorer (Chrome 28+, Firefox 22+, MS Edge-all)
Author: Jeff Clayton
.selector:not(*:root) { property:value; }
Chrome and Safari (and Opera 14+)
Source: Known Hack
_:not(*:root), .selector { property:value; }
Chrome and Safari (and Opera 14+) (Another Way)
Author: Jeff Clayton
_:-webkit-any-link, :root .selector { property:value; }
Chrome and Safari (and Opera 14+)
Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Chrome and Safari (and Opera 14+), Microsoft Edge
Source: Paul Irish
@media screen and (-webkit-min-device-pixel-ratio:0) { @supports (not (-ms-ime-align:auto)) { .selector { property:value; } } }
Chrome and Safari (and Opera 14+), NOT Microsoft Edge
Author: Jeff Clayton
_::-webkit-:-webkit-full-screen:host:not(:root:root), .selector { property:value; }
Safari 10.0 (Not iOS)
Author: Jeff Clayton
@supports (overflow:-webkit-marquee) and (-webkit-text-size-adjust:none) and (justify-content:inherit) { .selector { property:value; } }
Safari 9 (iOS Only)
Author: Jeff Clayton
_:-webkit-full-screen:not(:root:root), .selector { property:value; }
Safari 9+ (Not iOS)
Author: Jeff Clayton
_:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .selector { property:value; }
Safari 6.2,7.1+ (Not iOS)
Author: Jeff Clayton
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { _:-webkit-full-screen, .selector { property:value; } } }
Safari 6.1-10.0 (Not iOS)
Author: Jeff Clayton
@media screen and (min-color-index:0) { _:-webkit-full-screen, .selector {(; property:value; );} }
Safari 6.1-7.0 (Not iOS)
Author: Jeff Clayton

By Version


- Safari-Only CSS -


@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (display:flow-root) { .selector { property:value; } } }
Safari 13-15 up to Monterey (not iOS yet)
Author: Jeff Clayton
@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (stroke-color:transparent) { .selector { property:value; } } }
Safari 11-15 up to Monterey
Author: Jeff Clayton
html >> * .selector { property:value; }
Safari 11.0
Author: Jeff Clayton & WebMechanic
@media not all and (min-resolution:.001dpcm) { @media { .selector { property:value; } } }
Safari 10.1-15 up to Monterey
Author: Jeff Clayton
@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { .selector { property:value; } } }
Safari 10.1-15 up to Monterey
Author: Jeff Clayton
@media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) { .selector { property:value; } } }
Safari 10.1
Author: Jeff Clayton
_::-webkit-:host:not(:root:root), .selector { property:value; }
Safari 10.0
Author: Jeff Clayton
@supports (-webkit-hyphens:none) { .selector { property:value; } }
Safari 9+
Author: Jeff Clayton
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) { .selector { property:value; } }
Safari 9+, < 13.1
Author: Jeff Clayton
_:not(a,b), .selector { property:value; }
Safari 9+
Author: Jeff Clayton
_:default:not(:root:root), .selector { property:value; }
Safari 9+
Author: Jeff Clayton
_::-webkit-:not(:root:root), .selector { property:value; }
Safari 9.0-10.0
Author: Jeff Clayton
@supports (overflow:-webkit-marquee) and (justify-content:inherit) { .selector { property:value; } }
Safari 9
Author: Jeff Clayton
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .selector { property:value; } } }
Safari 6.1-10.0
The Safari 6.1+ Hack - Author: Jeff Clayton
_::-webkit-full-page-media, _:future, :root .selector { property:value; }
Safari 6.2,7.1+
The Safari 7.1+ Hack - Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0) { .selector {(; property:value; );} }
Safari 6.1-7.0
The Safari 6.1-7.0 Hack - Author: Jeff Clayton
@media only screen and (-webkit-min-device-pixel-ratio:1) { ::i-block-chrome, .selector { property:value; } }
Safari 5.1-6.0 (& old Chrome versions 10-24)
a version of an old css hack found all over the net
_::-moz-svg-foreign-content, :root .selector { property:value; }
Safari 5.1-6.0 (& old Chrome versions 10-24)
Author: Jeff Clayton

- Chrome-Only CSS -


With the UserAgent changes in recent browsers it has become harder to detect the computer platform. Google Chrome 95+ and MS Edge 94+ have an official way to Detect and Differentiate between Windows 10 and Windows 11. It is possible to inject CSS classes based on this code method. Check Here for a Google Chrome on Win11 Test Page. Also in Google Chrome & Firefox, it has been found that one can check for an Apple M1 GPU to Detect and Differentiate Apple Intel Macs and M1 based Macs. You can view this Test Page for Google Chrome & Firefox on an M1 Mac.
@supports (not (-webkit-hyphens:none)) and (not (-moz-appearance:none)) and (list-style-type:"*") { .selector { property:value; } }
Chrome 79+ (MS Edge-Chromium))
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-variant-caps:normal) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)) { .selector { property:value; } }
Chrome 52+ (and Opera 39+)
Author: Jeff Clayton
@supports (-webkit-tap-highlight-color:currentcolor) and (not (-webkit-background-composite:clear)) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)) { .selector { property:value; } }
Chrome 51+ (and Opera 38+)
Author: Jeff Clayton
@supports (-webkit-tap-highlight-color:currentcolor) and (not (-webkit-background-composite:clear)) and (not (font-variant-caps:normal)) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)) { .selector { property:value; } }
Chrome 51 (and Opera 38)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (column-fill:auto) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) and (not (-moz-appearance:none)) { .selector { property:value; } }
Chrome 50+ (and Opera 37+)
Author: Jeff Clayton
@supports (-webkit-background-composite:clear) and (column-fill:auto) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 50 (and Opera 37)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (motion-path:path('M0,0')) and (will-change:auto) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 49+ (to 59) (and Opera 36+)
Author: Jeff Clayton
*[browser="C49UP" i] _:not(*:root):unresolved, .selector { property:value; }
Chrome 49+ (to 79) (and Opera 36+) Case-Insenstive Attribute Combo - Use attribute: <div class="selector" browser="c49up">Stuff Here</div>
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (motion-path:path('M0,0')) and (will-change:auto) and (not (column-fill:auto)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 49 (and Opera 36)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-feature-settings:normal) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 48+ (and Opera 35+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (-ms-accelerator:true)) and (motion-path:path('M0,0')) and ((not (will-change:auto)) and (font-feature-settings:normal)) { .selector { property:value; } }
Chrome 48 (and Opera 35)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (text-align-last:auto) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 47+ (and Opera 34+)
Author: Jeff Clayton
_:placeholder-shown, _:-internal-list-box, :root .selector { property:value; }
Chrome 47+ (to 60) (and Opera 34+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (text-align-last:auto) and (not (font-feature-settings:normal)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 47 (and Opera 34)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (motion-path:path('M0,0')) { .selector { property:value; } }
Chrome 46+ (to 59) (and Opera 33+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (motion-path:path('M0,0')) and (not (text-align-last:auto)) { .selector { property:value; } }
Chrome 46 (and Opera 33)
Author: Jeff Clayton
@supports (-webkit-tap-highlight-color:currentcolor) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 45+ (and Opera 32+)
Author: Jeff Clayton
@supports (-webkit-tap-highlight-color:currentcolor) and (not (motion-path:path('M0,0'))) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 45 (and Opera 32)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (word-break:keep-all) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 44+ (and Opera 31+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (word-break:keep-all) and (not (-webkit-tap-highlight-color:currentcolor)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 44 (and Opera 31)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (R:0) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 43+ (and Opera 30+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (R:0) and (not (word-break:keep-all)) { .selector { property:value; } }
Chrome 43 (and Opera 30)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (x:0) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 42+ (and Opera 29+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (x:0) and (not (R:0)) { .selector { property:value; } }
Chrome 42 (and Opera 29)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (color:unset) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 41+ (and Opera 28+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (color:unset) and (not (x:0)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 41 (and Opera 28)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (-webkit-aspect-ratio:none)) and (not (-ms-accelerator:true)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 40+ (and Opera 27+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (-webkit-aspect-ratio:none)) and (not (color:unset)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 40 (and Opera 27) SpPrev
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (((shape-outside:none) and (not (will-change:auto))) or (motion-path:path('M0,0'))) { .selector { property:value; } }
Chrome 39+ (to 59) (and Opera 26+)
Author: Jeff Clayton
@supports (-webkit-aspect-ratio:none) and (shape-outside:none) and (not (will-change:auto)) { .selector { property:value; } }
Chrome 39 (and Opera 26)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-stretch:normal) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 38+ (and Opera 25+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-stretch:normal) and (will-change:auto) and (not (color:unset)) { .selector { property:value; } }
Chrome 38 (and Opera 25)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (shape-outside:none) { .selector { property:value; } }
Chrome 37+ (and Opera 24+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (shape-outside:none) and (not (font-stretch:normal)) { .selector { property:value; } }
Chrome 37 (and Opera 24)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (touch-action:auto) and (not (overflow:-webkit-marquee)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 36+ (and Opera 23+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (touch-action:auto) and (not (shape-outside:none)) and (not (overflow:-webkit-marquee)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 36 (and Opera 23)
Author: Jeff Clayton
_::content, _:future, _:not(*:root), .selector { property:value; }
Chrome 35+ (and Opera 22+)
Author: Jeff Clayton
_:-webkit-any-link, _:host, :root .selector { property:value; }
Chrome 35+ (and Opera 22+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (background-blend-mode:difference,normal) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 35+ (and Opera 22+)
Authors: Guillaume Simons & Jeff Clayton
@supports (-webkit-appearance:none) and (background-blend-mode:difference,normal) and (not (touch-action:auto)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 35 (and Opera 22)
Author: Jeff Clayton
_::-webkit-seamless-document, _:unresolved, :root .selector { property:value; }
Chrome 34+ (to 79) (and Opera 21+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-variant-ligatures:normal) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 34+ (and Opera 21+)
Authors: Guillaume Simons & Jeff Clayton
@supports (-webkit-appearance:none) and (font-variant-ligatures:normal) and (not (background-blend-mode:difference,normal)) { .selector { property:value; } }
Chrome 34 (and Opera 21)
Authors: Guillaume Simons & Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { @supports (font-kerning:auto) { .selector { property:value; } } }
Chrome 33+ (and Opera 20+)
Authors: Guillaume Simons & Jeff Clayton
@supports (-webkit-appearance:none) and (font-kerning:auto) and (not (font-variant-ligatures:normal)) { .selector { property:value; } }
Chrome 33 (and Opera 20)
Authors: Guillaume Simons & Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { @supports (object-fit:none) { .selector { property:value; } } }
Chrome 32+ (and Opera 19+)
Author: Jeff Clayton
_:not(*:root), _:unresolved, .selector { property:value; }
Chrome 32+ (to 79) (and Opera 19+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (object-fit:none) and (not (font-kerning:auto)) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 32 (and Opera 19)
Authors: Guillaume Simons & Jeff Clayton
@supports (-webkit-appearance:none) and (not (-webkit-marquee-repetition:infinite)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 31+ (and Opera 18+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (-webkit-marquee-repetition:infinite)) and (not (object-fit:none)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 31 (and Opera 18)
Author: Jeff Clayton
_::backdrop, _:future, _:not(*:root), .selector { property:value; }
Chrome 30+ (and Opera 17+)
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (justify-content:inherit) and (not (-webkit-hyphens:auto)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 30+ (and Opera 17+)
Author: Jeff Clayton
@supports (-webkit-marquee-repetition:infinite) and (not (-webkit-hyphens:auto)) { .selector { property:value; } }
Chrome 30 (and Opera 17)
Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .selector { property:value; } }
Chrome 29+ (and Opera 16+)
Author: Jeff Clayton
@supports (-webkit-hyphens:auto) and (justify-content:inherit) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 29 (and Opera 16)
Author: Jeff Clayton
@supports ((overflow:-webkit-marquee) and (not (justify-content:inherit))) or ((-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-accelerator:true))) { .selector { property:value; } }
Chrome 28+ (and Opera 14+)
Author: Jeff Clayton
@supports (overflow:-webkit-marquee) and (not (justify-content:inherit)) { .selector { property:value; } }
Chrome 28 (and Opera 14-15)
Author: Jeff Clayton
@media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} }
Chrome 22-28 (and Opera 14-15)
Author: Jeff Clayton

A Few Others


@supports (-webkit-appearance:none) { .selector { property:value; } }
Chrome 28+ (and Opera 14+) [Now MS Edge 12+, Safari 9+, Firefox 63+]
Author: Jeff Clayton
@supports (-webkit-font-smoothing:antialiased) { .selector { property:value; } }
Chrome 28+ (and Opera 14+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (shape-outside:none) and (not (will-change:auto)) { _::cue-region, .selector { property:value; } }
Chrome 39 (and Opera 26)
Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (orientation) { .selector {-chrome-:only(; property:value; );} }
Chrome 24-28 (and Opera 14-15)
Author: Jeff Clayton
@media screen and(-webkit-min-device-pixel-ratio:0) { _:scope, _:future, .selector {-chrome-:only(; property:value; );} }
Chrome 27-28 (and Opera 14-15)
Author: Jeff Clayton
@media screen and(-webkit-min-device-pixel-ratio:0) { _:future, .selector {-chrome-:only(; property:value; );} }
Chrome 26-28 (and Opera 14-15)
Author: Jeff Clayton
@media screen and(min--moz-device-pixel-ratio:0) { .selector { property:value; } }
Chrome 22-25
Author: Jeff Clayton
@media screen and (orientation) { ::webkit, .selector { property:value; } }
Chrome 24
Author: Jeff Clayton
@media screen and(-webkit-min-device-pixel-ratio:0) { ::webkit, .selector { property:value; } }
Chrome 22-24
Author: Jeff Clayton
@media screen and(-webkit-min-device-pixel-ratio:0) { _::-moz-svg-foreign-content, _:scope, .selector { property:value; } }
Chrome 22-23
Author: Jeff Clayton

- Chrome & Safari Combined CSS -


@supports (-webkit-appearance:none) and (word-break:keep-all) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 44+ (and Opera 31+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (R:0) { .selector { property:value; } }
Chrome 43+ (and Opera 30+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (x:0) { .selector { property:value; } }
Chrome 42+ (and Opera 29+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (-webkit-aspect-ratio:none)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 40+ (and Opera 27+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (background-blend-mode:difference,normal) { .selector { property:value; } }
Chrome 35+ (and Opera 22+), Safari 9+
Authors: Guillaume Simons & Jeff Clayton
_::-webkit-seamless-document, _:future, :root .selector { property:value; }
Chrome 34+ (and Opera 21+), Safari 6.1+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (font-kerning:auto) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 33+ (and Opera 20+), now also Safari
Authors: Guillaume Simons & Jeff Clayton
@supports (-webkit-appearance:none) and (object-fit:none) { .selector { property:value; } }
Chrome 32+ (and Opera 19+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (object-fit:none) and (not (overflow:-webkit-marquee)) { .selector { property:value; } }
Chrome 32+ (and Opera 19+), now also Safari
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (justify-content:inherit) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 29+ (and Opera 16+), Safari 9+
Author: Jeff Clayton
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-accelerator:true)) { .selector { property:value; } }
Chrome 29+ (and Opera 16+), now also Safari
Author: Jeff Clayton
_:scope, _:future, _:not(*:root), .selector { property:value; }
Chrome 27+, Safari 6.1+ (and Opera 14+)
Author: Jeff Clayton
_:future, _:not(*:root), .selector { property:value; }
Chrome 26+, Safari 6.1+ (and Opera 14+)
Author: Jeff Clayton
@media screen and (orientation) and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm), screen and(-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Chrome 24+, Safari 6.1-10.0 (and Opera 14+)
Author: Jeff Clayton
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm), screen and(-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Chrome 22+, Safari 6.1-10.0 (and Opera 14+)
Author: Jeff Clayton
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Chrome 22-25, Safari 6.1-10.0
Author: Jeff Clayton
_::-moz-svg-foreign-content, _:scope, :root .selector { property:value; }
Safari 6.0, Chrome 19-23
Author: Jeff Clayton
@media screen and (min-width:-100px) and (-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Safari 6.0-, Chrome 23-
Author: Jeff Clayton
_:-webkit-full-screen-ancestor, :root .selector { property:value; }
Safari 5.1+, Chrome 15+ (and Opera 14+), Android Browser 4+, Android OS 4.0+, iOS Blocker!
Author: Jeff Clayton
_:-webkit-full-screen, _:in-range:not(*:root), .selector { property:value; }
Safari 5.1+, Chrome 11, 15+ (and Opera 14+), Android Browser 4+, Android OS 4.0+, iOS Blocker! SpPrev
Author: Jeff Clayton
_:nth-last-child(n), _:-webkit-any(x), .selector { property:value; }
Safari 5.1+, Chrome 13+ (and Opera 14+)
Author: Jeff Clayton
_:-webkit-any(x), .selector { property:value; }
Safari 5.1+, Chrome 12+ (and Opera 14+)
Author: Jeff Clayton
_:in-range, _:not(*:root), .selector { property:value; }
Safari 5.1+, Chrome 10+ (and Opera 14+)
Author: Jeff Clayton
_::-webkit-input-speech-button, :root .selector { property:value; }
Safari 5.1+, Chrome 7+ (and Opera 14+)
Author: Jeff Clayton
_::-webkit-progress-bar-value, :root .selector { property:value; }
Safari 5.1+, Chrome 6+ (and Opera 14+)
Author: Jeff Clayton
_::-webkit-inner-spin-button, :root .selector { property:value; }
Safari 5.0+, Chrome 5+ (and Opera 14+)
Author: Jeff Clayton
@media not all and (min-resolution:.001dpcm) { _::-webkit-inner-spin-button, .selector { property:value; } }
Safari 5.0, 10.1+, Chrome 5
Author: Jeff Clayton
@media screen and (min-width:0\-) { _::-webkit-inner-spin-button, .selector { property:value; } }
Chrome 5
Author: Jeff Clayton
@media not all and (min-resolution:.001dpcm) { .selector { property:value; } }
Safari 5.0-, Chrome 5-
Author: Jeff Clayton
_:default, _:not(*:root), .selector { property:value; }
Safari 4.1+, Chrome 4+ (and Opera 14+)
Author: Jeff Clayton
@media screen and (min-width:0\-) { .selector { property:value; } }
Safari 4.1-, Chrome 5-
Author: Andy Kirk
@media screen and (min-width:0\0) { _:window-inactive, .selector { property:value; } }
Safari 4.x, Chrome 2-5
Author: Jeff Clayton
_:increment, _:not(*:root), .selector { property:value; }
Safari 4.0+, Chrome 2+ (and Opera 14+)
Author: Jeff Clayton
_:only-of-type, _:not(*:root), .selector { property:value; }
Safari 3.1+, Chrome 1+ (any) (and Opera 14+)
Author: Jeff Clayton
@media screen and (min-width:0\-) { _:window-inactive:not(:root:root), .selector { property:value; } }
Safari 3.x, Chrome 1
Source: My own combination
.classname[class="CLASSNAME"] { property:value; }
Safari 3.0 (Only)
Source: Safari 3.0 Bracket Class/ID Hack
_:-webkit-any-link, :root .selector { property:value; }
Safari 3.0+, Chrome 1+ (any) (and Opera 14+)
Author: Jeff Clayton
_:not(*:root), .selector { property:value; }
Safari 3.0+, Chrome 1+ (any) (and Opera 14+)
Source: My rewrite of a known hack

A Few Others


@media screen and (-webkit-min-device-pixel-ratio:0) and (orientation) { .selector { property:value; } }
Chrome 24+, Safari 6.1+ (and Opera 14+), Firefox 63+, MS Edge
Author: Jeff Clayton
_:-webkit-full-screen, :root .selector { property:value; }
Safari 5.1+, Chrome 11, 15+ (and Opera 14+), Android Browser 4+, Android OS 4.0+, MS Edge, iOS Blocker! SpPrev
Author: Jeff Clayton
_::-webkit-input-speech-button, body:nth-last-child(n0) .selector { property:value; }
Chrome 7-9 (& old versions of Chrome 10 before 10.0.64)
Author: Jeff Clayton
body:nth-child(n0) .selector { property:value; }
Safari 3.1-5.0, Chrome 9- (& old versions of Chrome 10 before 10.0.64)
Source: Derived from Old Hacks
@media not all and (min-resolution:.001dpcm) { _:default, .selector { property:value; } }
Safari 4.1-5.0 & 10.1+, Chrome 4-5
Author: Jeff Clayton
_:default, body:nth-last-child(n0) .selector { property:value; }
Safari 4.1-5.0, Chrome 4-9 (& old versions of Chrome 10 before 10.0.64)
Author: Jeff Clayton
_:window-inactive, body:nth-last-child(n0) .selector { property:value; }
Safari 4.0-5.0, Chrome 2-9 (& old versions of Chrome 10 before 10.0.64)
Author: Jeff Clayton

Experiments


@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media (min-width:0px) { .selector { property:value; } } }
Safari 6.1-10.0 (not 10.1+)
Author: Jeff Clayton
<script language=JavaScript> if (navigator.platform.indexOf('Win')==-1 && navigator.userAgent.indexOf('Win')!=-1) { document.write("<style type=text/css> _:-webkit-any-link, .selector { property:value; }</style>"); } </script>
Special Purpose (Other) - Javascript
Author: Jeff Clayton

-: Opera Mini :-


Old Opera hacks still affect Opera Mini. Here is one of my combos that works... (A slightly simpler version of the one from browserhacks that I updated for them to rule out Internet Explorer 7) and an old media query that still works as well.
_:-o-prefocus, :root .selector { property:value; }
Opera 9.5-12, Opera Mini 7.x (Opera 9.80)
Source: BrowserHacks.com (Modified)
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .selector { property:value; } }
Opera 11-, Opera Mini 7.x (Opera 9.80)
Source: BrowserHacks.com
 
[Index] [Edge-HTML] [Internet Explorer] [Firefox] [Safari] [Chrome] [Chrome+Safari] [Opera Mini]

Source Control Testing

Copyright ©2011- by Jeff Clayton