CSS3 Media Query per applicare gli stili a Internet Explorer (da IE6 a IE11+), Firefox, Chrome, Safari e/o Edge

Ryan

7 anni fa

CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge

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

* html .ie6 { property: value; }

1	* html .ie6 { property: value; }

oppure

.ie6 { _property: value; }

1	.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

1	*+html .ie7 { property: value; }

oppure

*:first-child+html .ie7 { property: value; }

1	*:first-child+html .ie7 { property: value; }

IE 6 e 7

@media screen\9 { 
    .ie67 {
        property: value; 
    }
}

@media screen\9 {

.ie67 {

property: value;

}

oppure

.ie67 { *property: value; }

1	.ie67 { *property: value; }

oppure

.ie67 { #property: value; }

1	.ie67 { #property: value; }

IE 6, 7 e 8

@media \0screen\,screen\9 {
    .ie678 {
        property: value;
    }
}

@media \0screen\,screen\9 {

.ie678 {

property: value;

}

IE 8

html>/**/body .ie8 { property: value; }

1	html>/**/body .ie8 { property: value; }

oppure

@media \0screen {
    .ie8 {
        property: value;
    }
}

@media \0screen {

.ie8 {

property: value;

}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

1	.ie8 { property /\*/: value\9 }

IE 8,9 e 10

@media screen\0 {
    .ie8910 {
        property: value;
    }
}

@media screen\0 {

.ie8910 {

property: value;

}

IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
    // IE9 CSS
    .ie9{
        property: value;
    }
}

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {

// IE9 CSS

.ie9{

property: value;

}

IE 9 e versioni successive

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up { 
        property: value; 
    }
}

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {

// IE9+ CSS

.ie9up {

property: value;

}

IE 9 e 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

@media screen and (min-width:0\0) {

.ie910 {

property: value\9;

} /* backslash-9 removes ie11+ & old Safari 4 */

}

IE 10

_:-ms-lang(x), .ie10 { property: value\9; }

1	_:-ms-lang(x), .ie10 { property: value\9; }

IE 10 e versioni successive

_:-ms-lang(x), .ie10up { property: value; }

1	_:-ms-lang(x), .ie10up { property: value; }

oppure

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        property:value;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.ie10up {

property:value;

}

IE 11 e versioni successive

_:-ms-fullscreen, :root .ie11up { property: value; }

1	_:-ms-fullscreen, :root .ie11up { property: value; }

Microsoft Edge

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

@supports (-ms-ime-align:auto) {

.selector {

property: value;

}

Firefox

Tutte le versioni (Gecko)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

@-moz-document url-prefix() {

.ff {

color: red;

}

Quantum (Stylo)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

@-moz-document url-prefix() {

@supports (animation: calc(0s)) {

/* Stylo */

.ffStylo {

property: value;

}

Legacy (pre-Stylo)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

@-moz-document url-prefix() {

@supports not (animation: calc(0s)) {

/* Gecko */

.ffGecko {

property: value;

}

Webkit

Chrome e Safari (tutte le versioni)

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    property: value;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

property: value;

}

Chrome 29+

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {

.chrome {

property: value;

}

Safari (7.1+)

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

_::-webkit-full-page-media, _:future, :root .safari_only {

property: value;

}

Safari (dalla versione 6.1 alla 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { 
    @media {
        .safari6 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {

@media {

.safari6 {

color:#0000FF;

background-color:#CCCCCC;

}

Safari (10.1+)

@media not all and (min-resolution:.001dpcm) { 
    @media {
        .safari10 { 
            color:#0000FF; 
            background-color:#CCCCCC; 
        }
    }
}

@media not all and (min-resolution:.001dpcm) {

@media {

.safari10 {

color:#0000FF;

background-color:#CCCCCC;

}

Per il momento è tutto: se avete da suggerire altre tecniche basate su CSS3, o se avete altre necessità non presenti tra gli scenari indicati, sentitevi liberi di dare il vostro contributo e/o di chiedere un consiglio utilizzando i commenti in fondo a questo articolo.

Per ulteriori informazioni relativamente alle Media Query CSS3 consigliamo inoltre di visitare il fantastico sito web browserhacks.com!

Print Friendly & PDF Download