Quelle est la différence entre «écran» et «uniquement écran» dans les requêtes multimédias?

Quelle est la différence entre screenet only screendans les requêtes média?

<link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" />

Pourquoi devons-nous utiliser only screen? Ne screenfournit- il pas lui-même suffisamment d'informations pour être rendu uniquement à l'écran?

J'ai vu de nombreux sites Web réactifs utiliser l'une de ces trois façons différentes:

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

@media (max-width:632px)

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

Décomposons vos exemples un par un.

@media (max-width:632px)

Celui-ci dit pour une fenêtre avec un max-widthde 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 screenet une fenêtre avec max-widthde 632px appliquer le style. Ceci est presque identique à ce qui précède, sauf que vous spécifiez screen, contrairement aux autres types de supports disponibles, l' autre le plus courant print.

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

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

Le mot-clé «uniquement» peut également être utilisé pour masquer les feuilles de style des agents utilisateurs plus anciens. Les agents utilisateurs doivent traiter les requêtes multimédias commençant par «uniquement» comme si le mot clé «uniquement» n'était pas présent.

Comme il n'y a pas de type de média comme "seulement", la feuille de style doit être ignorée par les anciens navigateurs.

Voici le lien vers cette citation qui est montrée dans l'exemple 9 sur cette page.

Espérons que cela jette un peu de lumière sur les requêtes des médias.

ÉDITER:

N'oubliez pas de consulter @hybrids excellente réponse sur la façon dont le onlymot clé est vraiment géré.

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' 401pxaffichage 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 onlyversion

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.

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 assez informative, sauf qu'elle n'explique pas le but mentionné par @ashitaka "Et si vous utilisez l'approche Mobile First? Nous avons donc d'abord le CSS mobile, puis nous utilisons min-width pour cibler des sites plus grands. Nous ne devrions pas utiliser le seul mot-clé dans ce contexte, non? "

Je veux ajouter ici que le but est simplement d'empêcher les navigateurs non compatibles d'utiliser ce style Autre appareil comme s'il commençait à partir de "écran" sans qu'il le prenne pour écran où comme s'il commençait à partir du style "seulement", il serait ignoré.

Répondre à ashitaka considérons cet exemple

<link rel="stylesheet" type="text/css" 
  href="android.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" 
  href="desktop.css" media="screen and (min-width: 481px)" />

Si nous n'utilisons pas "seulement" cela fonctionnera quand même car le style de bureau sera également utilisé avec des styles Android frappants mais avec des frais généraux inutiles. Dans ce cas, si un navigateur ne prend pas en charge, il reviendra à la deuxième feuille de style en ignorant la première.

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

screenici est de définir la taille d'écran de la requête multimédia. Par exemple, la largeur maximale de la zone d'affichage est de 480 pixels. Il s'agit donc de spécifier l'écran par opposition aux autres types de supports disponibles.

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

only screen ici est utilisé pour empêcher les anciens navigateurs qui ne prennent pas en charge les requêtes multimédias avec des fonctionnalités multimédias d'appliquer les styles spécifiés.