Usare @media per nascondere i CSS3 ai vecchi broswer

Di solito per gestire le varie versioni dei CSS per i vari broswer si utilizza, un approccio come d’esempio:

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
 
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
 
<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
 
<!--[if IE 5.5000]>
        <link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Ovvero si va a definire dei fogli di stile che vadano a mettere una pezza alle mancanze. Con un enorme mole di lavoro aggiunta. Una soluzione alternativa può consistere nell’utilizzare il tag CSS3 @media con l’opzione only come leggiamo dalla specifica di Media Queries

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Quindi solo i broswer che riescono leggere l’opzione only riusciranno a interpretare il blocco di codice, gli altri invece lo ignoreranno.

Ecco un esempio di come funziona:

@media only screen {
    /* codice CSS2 non supportato o CSS3 */
    h1
    {
       text-shadow: 5px 5px 5px #0099FF;
    }
}

Forse questo non ci libererà completamente dal dover sistemare i problemi di incompatibilità usando l’if sulla versione, ma almeno qualche rogna ce la toglie!

Taggato con: , , , , , , , , ,
2 comments on “Usare @media per nascondere i CSS3 ai vecchi broswer
  1. non sono molto bravo in questo ambito ma latua guida è molto chiara complimenti

1 Pings/Trackbacks per "Usare @media per nascondere i CSS3 ai vecchi broswer"
  1. […] CSS3 */ h1 { text-shadow: 5px 5px 5px #0099FF; } } Per ulteriori dettagli vi linko un mio tutorial: http://francescopasetto.com/2012/07/…scondere-css3/ Rispondi […]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*