Indice dei contenuti
Qualsiasi sviluppatore HTML si è trovato almeno una volta nella condizione di dover applicare selettivamente alcuni stili a un browser specifico o a una versione / build specifica di un browser. Quando si verificano tali scenari, esistono un numero di tecniche basate su CSS e / o JS per ottenere tale risultato.
Ecco una raccolta di query multimediali che consentono di conseguire questo risultato in puro codice CSS3, senza una riga di codice JavaScript: la maggior parte degli hack proviene dal sito web browserhacks.com, un'eccellente risorsa di tecniche basate su CSS e JavaScript per questo tipo di attività.
Internet Explorer
IE 6
|
1 |
* html .ie6 { property: value; } |
|
1 |
.ie6 { _property: value; } |
IE 7
|
1 |
*+html .ie7 { property: value; } |
|
1 |
*:first-child+html .ie7 { property: value; } |
IE 6 e 7
|
1 2 3 4 5 |
@media screen\9 { .ie67 { property: value; } } |
|
1 |
.ie67 { *property: value; } |
|
1 |
.ie67 { #property: value; } |
IE 6, 7 e 8
|
1 2 3 4 5 |
@media \0screen\,screen\9 { .ie678 { property: value; } } |
IE 8
|
1 |
html>/**/body .ie8 { property: value; } |
|
1 2 3 4 5 |
@media \0screen { .ie8 { property: value; } } |
IE 8 Standards Mode Only
|
1 |
.ie8 { property /*\**/: value\9 } |
IE 8,9 e 10
|
1 2 3 4 5 |
@media screen\0 { .ie8910 { property: value; } } |
IE 9
|
1 2 3 4 5 6 |
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { // IE9 CSS .ie9{ property: value; } } |
IE 9 e versioni successive
|
1 2 3 4 5 6 |
@media screen and (min-width:0\0) and (min-resolution: +72dpi) { // IE9+ CSS .ie9up { property: value; } } |
IE 9 e 10
|
1 2 3 4 5 |
@media screen and (min-width:0\0) { .ie910 { property: value\9; } /* backslash-9 removes ie11+ & old Safari 4 */ } |
IE 10
|
1 |
_:-ms-lang(x), .ie10 { property: value\9; } |
IE 10 e versioni successive
|
1 |
_:-ms-lang(x), .ie10up { property: value; } |
|
1 2 3 4 5 |
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up { property:value; } } |
IE 11 e versioni successive
|
1 |
_:-ms-fullscreen, :root .ie11up { property: value; } |
Microsoft Edge
|
1 2 3 4 5 |
@supports (-ms-ime-align:auto) { .selector { property: value; } } |
Firefox
Tutte le versioni (Gecko)
|
1 2 3 4 5 |
@-moz-document url-prefix() { .ff { color: red; } } |
Quantum (Stylo)
|
1 2 3 4 5 6 7 8 |
@-moz-document url-prefix() { @supports (animation: calc(0s)) { /* Stylo */ .ffStylo { property: value; } } } |
Legacy (pre-Stylo)
|
1 2 3 4 5 6 7 8 |
@-moz-document url-prefix() { @supports not (animation: calc(0s)) { /* Gecko */ .ffGecko { property: value; } } } |
Webkit
Chrome e Safari (tutte le versioni)
|
1 2 3 |
@media screen and (-webkit-min-device-pixel-ratio:0) { property: value; } |
Chrome 29+
|
1 2 3 4 5 |
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .chrome { property: value; } } |
Safari (7.1+)
|
1 2 3 |
_::-webkit-full-page-media, _:future, :root .safari_only { property: value; } |
Safari (dalla versione 6.1 alla 10.0)
|
1 2 3 4 5 6 7 8 |
@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 |
@media not all and (min-resolution:.001dpcm) { @media { .safari10 { color:#0000FF; background-color:#CCCCCC; } } } |
Per ulteriori informazioni relativamente alle Media Query CSS3 consigliamo inoltre di visitare il fantastico sito web browserhacks.com!
