Ce qui suit provient d' Adobe docs .
La spécification des requêtes multimédias fournit également le mot clé only
, qui est destiné à masquer les requêtes multimédias des anciens navigateurs. Comme not
, le mot-clé doit venir au début de la déclaration. Par exemple:
media="only screen and (min-width: 401px) and (max-width: 600px)"
Les navigateurs qui ne reconnaissent pas les requêtes multimédias attendent une liste de types de médias séparés par des virgules, et la spécification indique qu'ils doivent tronquer chaque valeur immédiatement avant le premier caractère non alphanumérique qui n'est pas un trait d'union. Ainsi, un ancien navigateur devrait interpréter l'exemple précédent comme ceci:
media="only"
Étant donné qu'il n'existe pas de type de support unique, la feuille de style est ignorée. De même, un ancien navigateur devrait interpréter
media="screen and (min-width: 401px) and (max-width: 600px)"
comme
media="screen"
En d'autres termes, il devrait appliquer les règles de style à tous les périphériques d'écran, même s'il ne sait pas ce que signifient les requêtes multimédias.
Malheureusement, IE 6–8 n'a pas réussi à implémenter la spécification correctement.
Au lieu d'appliquer les styles à tous les périphériques d'écran, il ignore complètement la feuille de style.
Malgré ce comportement, il est toujours recommandé de préfixer les requêtes multimédias uniquement si vous souhaitez masquer les styles d'autres navigateurs moins courants.
Donc, en utilisant
media="only screen and (min-width: 401px)"
et
media="screen and (min-width: 401px)"
aura le même effet dans IE6-8: les deux empêcheront l'utilisation de ces styles. Ils seront cependant toujours téléchargés.
De plus, dans les navigateurs qui prennent en charge les requêtes multimédia CSS3, les deux versions chargeront les styles si la largeur de la fenêtre d' 401px
affichage est supérieure à et que le type de média est screen.
Je ne suis pas tout à fait sûr des navigateurs qui ne prennent pas en charge les requêtes multimédia CSS3 auraient besoin de la only
version
media="only screen and (min-width: 401px)"
par opposition à
media="screen and (min-width: 401px)"
pour vous assurer qu'il n'est pas interprété comme
media="screen"
Ce serait un bon test pour quelqu'un ayant accès à un laboratoire d'appareils.
only
mot clé masquera les feuilles de style des anciens navigateurs, consultez la réponse de @hybrid ci-dessous. Il l'explique très bien.