Quelle est la différence entre "écran" et "écran seul" dans les requêtes des médias?
Quelle est la différence entre screen et only screen dans les requêtes multimé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? Est-ce que screen ne fournit pas suffisamment d'informations pour être rendu niquement pour l'écran?
J'ai vu de nombreux sites Web réactifs utilisant l'une de ces trois manières 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-width de 632px que vous souhaitez appliquer ces styles. À cette taille, on parle de tout ce qui est plus petit qu'un écran de bureau dans la plupart des cas.
@media screen and (max-width:632px)
Celui-ci dit que pour un périphérique avec un screen et une fenêtre avec max-width de 632px, appliquer le style. Ceci est presque identique à ce qui précède, sauf que vous spécifiez screen par opposition à autres types de supports disponibles , le plus courant étant print.
@media only screen and (max-width:632px)
Voici une citation tout droit du W3C pour expliquer celle-ci.
Le mot clé "uniquement" peut également être utilisé pour masquer les feuilles de style des anciens agents utilisateurs. Les agents utilisateurs doivent traiter les requêtes de média commençant par "seulement" comme si le mot clé "seulement" n'était pas présent.
Comme il n’existe pas de type de média "seulement", la feuille de style devrait être ignorée par les anciens navigateurs.
Voici le lien vers cette citation indiqué dans l'exemple 9 de cette page.
Espérons que cela jette un peu de lumière sur les requêtes des médias.
MODIFIER:
Assurez-vous de vérifier @ hybrides excellente réponse sur la façon dont le mot-clé only est vraiment traité.
Ce qui suit provient de Adobe docs .
La spécification des requêtes multimédias fournit également le mot clé only, destiné à masquer les requêtes multimédias des navigateurs plus anciens. Comme not, le mot-clé doit être placé 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 des virgules et la spécification indique qu'ils doivent tronquer chaque valeur immédiatement avant la première valeur non alphanumérique. caractère qui n'est pas un trait d'union. Ainsi, un ancien navigateur devrait interpréter l'exemple précédent comme suit:
media="only"
Comme 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 convient d'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édia.
Malheureusement, IE 6–8 n'a pas réussi à mettre en œuvre 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 prenant en charge les requêtes de média CSS3, les deux versions chargeront les styles si la largeur de la fenêtre de visualisation est supérieure à 401px et si le type de média est screen.
Je ne suis pas tout à fait sûr que les navigateurs qui ne prennent pas en charge les requêtes de média CSS3 auront besoin de la version only
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 une personne 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 un iPhone ou une feuille de style de téléphone Android, vous pouvez écrire:
@media only screen and (max-width: 480px;) { … }
Lisez cet article pour plus http://webdesign.about.com/od/css3/a/css3-media-queries.htm
La réponse de @hybrid est assez informative, mais elle n’explique pas l’objet mentionné par @ashitaka. "Et si vous utilisiez l’approche Mobile First? Nous avons d’abord le CSS mobile, puis l’utilisation de min-width pour cibler des sites plus vastes. Nous ne devrions pas utiliser le seul mot-clé dans ce contexte, non?
Voulez-vous ajouter ici que le but est simplement d'empêcher les navigateurs non compatibles d'utiliser ce style Autre périphérique comme s'il partait de "écran" sans que cela prenne pour un écran où, comme s'il commençait par "seulement", le style était ignoré.
En répondant à 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 "uniquement", cela fonctionnera toujours, car le style de bureau sera également utilisé pour les styles Android, mais avec une surcharge inutile. Dans ce cas, SI un navigateur ne prend pas en charge, il se repliera sur la deuxième feuille de style en ignorant la première.