css-hack

How to write a CSS hack for IE 11? [duplicate]

Use a combination of Microsoft specific CSS rules to filter IE11: <!doctype html> <html> <head> <title>IE10/11 Media Query Test</title> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <style> @media all and (-ms-high-contrast:none) { .foo { color: green } /* IE10 */ *::-ms-backdrop, .foo { color: red } /* IE11 */ } </style> </head> <body> <div class=”foo”>Hi There!!!</div> </body> … Read more

How to apply specific CSS rules to Chrome only?

CSS Solution from https://jeffclayton.wordpress.com/2015/08/10/1279/ /* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) { div{top:10;} } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { div{top:0;} } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} } JavaScript Solution if (navigator.appVersion.indexOf(“Chrome/”) != -1) … Read more

CSS \9 in width property

\9 is a “CSS hack” specific to Internet Explorer 7, 8, & 9. This simply means that the one specific line of CSS ending with a \9; in place of the ; is only valid in IE 7, 8, & 9. In your example, width: 500px\9; means that a width of 500 pixels (same result … Read more

Targeting only Firefox with CSS

OK, I’ve found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on. @-moz-document url-prefix() { h1 { color: red; } } <h1>This should be red in FF</h1> It’s based on yet another Mozilla specific CSS extension. There’s a whole list for these CSS extensions … Read more