Quelle est la différence entre «screen» et «only screen» dans les requêtes média?

Quelle est la différence entre “screen” et “only screen” dans les requêtes média?

  

Pourquoi devons-nous utiliser ‘ Only ‘? L’ screen lui-même ne fournit-il pas suffisamment d’informations pour être rendu uniquement pour Screen?

J’ai vu beaucoup de sites web réactifs. Certains utilisent

 @media screen and (max-width:632px) 

Certains

 @media (max-width:632px) 

et certaines

 @media only screen and (max-width:632px) 

Décrivons vos exemples un par un.

 @media (max-width:632px) 

Celui-ci dit pour une fenêtre avec une max-width de 632px que vous souhaitez appliquer ces styles. À cette taille, vous parleriez de quelque chose de plus petit qu’un écran de bureau dans la plupart des cas.

 @media screen and (max-width:632px) 

Celui-ci dit pour un appareil avec un screen et une fenêtre avec une max-width de 632px appliquer le style. Ceci est presque identique à ce qui précède, sauf que vous spécifiez l’ screen par opposition aux autres types de support disponibles, l’ autre le plus commun étant en cours d’ print .

 @media only screen and (max-width:632px) 

Voici une citation directement du W3C pour expliquer celle-ci.

Le mot clé ‘only’ peut également être utilisé pour masquer les feuilles de style des agents utilisateurs plus anciens. Les agents utilisateurs doivent traiter les requêtes de média commençant par ‘only’ comme si le mot clé ‘only’ n’était pas présent.

Comme il n’existe pas de type de support tel que “uniquement”, les anciens navigateurs doivent ignorer la feuille de style.

Voici le lien vers cette citation qui est présentée dans l’exemple 9 de cette page.

J’espère que cela apporte un éclairage sur les questions des médias.

MODIFIER:

Assurez-vous de consulter l’ excellente réponse de @hybrids sur la manière dont le only mot clé est géré.

Ce qui suit provient de documents Adobe .


La spécification des requêtes multimédias fournit également le mot-clé only , qui est destiné à masquer les requêtes multimédias provenant de navigateurs plus anciens. Comme not , le mot-clé doit être 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 de média attendent une liste de types de média séparés par une virgule, 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" 

Comme il n’existe pas de type de média tel que seul, 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 média.

Malheureusement, IE 6–8 n’a pas correctement implémenté la spécification.

Au lieu d’appliquer les styles à tous les écrans, il ignore complètement la feuille de style.

Malgré ce comportement, il est toujours recommandé de préfixer les requêtes multimédia uniquement si vous souhaitez masquer les styles des 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.

En outre, 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 est supérieure à 401px et que le type de média est à l’écran.

Je ne suis pas tout à fait sûr que les navigateurs qui ne supportent pas les requêtes CSS3 auraient besoin de la only version

 media="only screen and (min-width: 401px)" 

par opposition à

 media="screen and (min-width: 401px)" 

pour s’assurer qu’il n’est pas interprété comme

 media="screen" 

Ce serait un bon test pour quelqu’un ayant access à un laboratoire d’appareils.

Pour styliser de nombreux smartphones avec des écrans plus petits, vous pouvez écrire:

 @media screen and (max-width:480px) { … } 

Pour empêcher les anciens navigateurs de voir une feuille de style de téléphone iPhone ou Android, vous pouvez écrire:

 @media only screen and (max-width: 480px;) { … } 

Lisez cet article pour en savoir plus http://webdesign.about.com/od/css3/a/css3-media-queries.htm

La réponse de @hybrid est très informative, sauf que je n’explique pas le but mentionné par @ashitaka. Nous ne devrions pas utiliser le seul mot-clé dans ce contexte, non? ”

Voulez-vous append ici que le but est simplement d’empêcher les navigateurs non compatibles d’utiliser ce style d’appareil Autre comme s’il commençait à “écran” sans qu’il le prenne pour l’écran où comme s’il commençait par “seulement” style sera ignoré.

Répondre à ashitaka considère cet exemple

   

Si nous n’utilisons pas “seulement”, cela fonctionnera toujours comme le style de bureau sera également utilisé frappant les styles Android mais avec une surcharge inutile. Dans ce cas, si un navigateur n’est pas supporté, il retournera à la deuxième feuille de style en ignorant la première.