Hello friends!
Reading the title of this article, you probably understand what this article is about to write about. Perhaps anyone who is a developer will have a lot of headaches with fixing css bugs on different browsers? Actually, not only do you specialize in backend, even fontender like us specializing in UI also have a headache, there is a request that you will test on many browers, especially IE. Even though IE is considered as the root browser, in terms of its size, there is not much need for an introduction.
If before, when I did not know this tip, I used to use the way that is a bit silly : define browser by js then add the corresponding class for each browser into the body and then edit the css for each browser .
For example, how to use the following js to define browser (or it could be another js paragraph)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | function myFunction() { if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) { alert('Opera'); } else if(navigator.userAgent.indexOf("Chrome") != -1 ) { alert('Chrome'); } else if(navigator.userAgent.indexOf("Safari") != -1) { alert('Safari'); } else if(navigator.userAgent.indexOf("Firefox") != -1 ) { alert('Firefox'); } else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10 { alert('IE'); } else { alert('unknown'); } } |
However, up to the present time, I have discovered that the tip is quite convenient and much lighter, can assist you to edit css in browsers via media query . And now let’s go into the details of what this tip includes. Let’s go!
1. Internet Explorer
Regarding IE, of course, until now, no one must be using versions of IE6, IE7 or even IE8, but the listing here should not be redundant.
IE 6
1 2 | * html .ie6 { property: value; } |
Or
1 2 | .ie6 { _property: value; } |
IE 7
1 2 | *+html .ie7 { property: value; } |
Or
1 2 | *:first-child+html .ie7 { property: value; } |
IE 6 and 7
1 2 3 4 5 6 | @media screen9 { .ie67 { property: value; } } |
Or
1 2 | .ie67 { *property: value; } |
Or
1 2 | .ie67 { #property: value; } |
IE 6, 7 and 8
1 2 3 4 5 6 | @media screen,screen9 { .ie678 { property: value; } } |
IE 8
1 2 | html>/**/body .ie8 { property: value; } |
Or
1 2 3 4 5 6 | @media screen { .ie8 { property: value; } } |
IE 8 Standards Mode Only
1 2 | .ie8 { property /***/: value9 } |
IE 8.9 and 10
1 2 3 4 5 6 | @media screen { .ie8910 { property: value; } } |
IE 9 only
1 2 3 4 5 6 7 | @media screen and (min-width:0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{ property: value; } } |
IE 9 and above
1 2 3 4 5 6 7 | @media screen and (min-width:0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up { property: value; } } |
IE 9 and 10
1 2 3 4 5 6 | @media screen and (min-width:0) { .ie910 { property: value9; } /* backslash-9 removes ie11+ & old Safari 4 */ } |
IE 10 only
1 2 | _:-ms-lang(x), .ie10 { property: value9; } |
IE 10 and above
1 2 | _:-ms-lang(x), .ie10up { property: value; } |
Or
1 2 3 4 5 6 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up { property:value; } } |
IE 11 (and above ..)
1 2 | _:-ms-fullscreen, :root .ie11up { property: value; } |
Microsoft Edge
1 2 3 4 5 6 | @supports (-ms-ime-align:auto) { .selector { property: value; } } |
2. Firefox
1 2 3 4 5 6 | @-moz-document url-prefix() { h1 { color: red; } } |
Or
1 2 3 4 | @supports (-moz-appearance:none) { h1 { color:red; } } |
3. Webkit
Perhaps most deloperers are too familiar with browsers built on this -webkit- platform. No stranger to anything, there are two browsers Chrome and Safari . Microsoft Edge now also runs on -webkit- too .
I always code on Chrome, so I will set Chrome as default, taking Chrome as a standard measure, so I rarely use media query browsers to edit css. However, I will still list them here for completeness.
Chrome & Safari (any version)
1 2 3 4 | @media screen and (-webkit-min-device-pixel-ratio:0) { property: value; } |
Chrome 29+
1 2 3 4 5 6 | @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .chrome { property: value; } } |
Safari (7.1+)
1 2 3 4 | _::-webkit-full-page-media, _:future, :root .safari_only { property: value; } |
1 2 3 4 5 6 7 8 9 | @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media { .safari6 { color:#0000FF; background-color:#CCCCCC; } } } |
Safari (10.1+)
1 2 3 4 5 6 7 8 9 | @media not all and (min-resolution:.001dpcm) { @media { .safari10 { color:#0000FF; background-color:#CCCCCC; } } } |
Above is almost everything I have discovered about using media queries to edit css on different browsers. This list is not enough, but it is also extremely long and I have not used all of it. However successfully applied for IE10 & 11 and Firefox. Of course, it cannot be considered as complete because there will be countless other ways, if you know more, please comment below for me to learn more.
Wish you successful application!