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

487

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)
Jitendra Vyas
la source

Réponses:

543

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é.

Matthew Green
la source
24
Pour ceux qui recherchaient une meilleure explication de la raison pour laquelle le onlymot clé masquera les feuilles de style des anciens navigateurs, consultez la réponse de @hybrid ci-dessous. Il l'explique très bien.
JMTyler
1
La réponse de l'hybride est bonne, mais j'aime aussi cette réponse car elle traite les requêtes multimédias à l' intérieur de CSS au lieu de ne traiter que l' mediaattribut de l' linkélément.
chharvey
2
quel appareil n'a pas d'écran?
Kokodoko
3
@Kokodoko ceux qui n'en ont pas besoin. Mais sérieusement, les imprimantes et les lecteurs d'écran n'ont pas nécessairement d'écrans. Plus tout autre élément actuellement ou à venir qui ne s'identifie pas en tant que screentel dans les autres types de médias.
Matthew Green
1
@Kokodoko CSS existe pour créer une séparation des préoccupations entre le contenu et la présentation. La présentation couvre bien plus que ce qui peut être vu sur un écran. C'est une distinction importante à garder à l'esprit indépendamment de ce que vous pourriez concevoir.
Matthew Green
231

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.

hybride
la source
3
Donc, si nous parlons de requêtes multimédias dans des fichiers CSS, nous pouvons supprimer "uniquement", car les navigateurs plus anciens ne comprennent absolument pas les requêtes multimédias, n'est-ce pas?
1234ru
Bonne réponse, très lucide. Merci!
Alexander Suraphel
Le lien partagé était vraiment utile. Merci
Raphael
D'après mon expérience, "seul" fonctionne comme prévu sur Symbian OS (anciens téléphones tactiles Nokia). Je l'ai beaucoup utilisé parce que ce navigateur était vraiment mauvais dans le support CSS3, mais il était toujours capable de gérer "uniquement" et "largeur min / max" dans les requêtes multimédias.
Peter Knut
@PeterKnut Pourquoi supportez-vous même de tels anciens appareils? Vraiment curieux.
Prométhée
41

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

sandeep
la source
3
Je ne suis toujours pas très clair là-dessus. J'ai aussi mis à jour ma question. Pouvez-vous donner un exemple?
Jitendra Vyas
4
Et si vous utilisez l'approche Mobile First? Donc, nous avons d'abord le css mobile, puis utilisons min-width pour cibler des sites plus importants. Nous ne devrions pas utiliser le onlymot - clé dans ce contexte, non?
Ashitaka
Cette réponse était bien facile à comprendre! :) La seule consiste à empêcher les anciennes versions telles que IE 6 ou opéra 5 ou 6 de charger les données qui doivent être présentées pour Android ou Chrome 30 ou IE 10..Exellent réponse sandeep :) mérite un +1
Afzaal Ahmad Zeeshan
16

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.

Diablo Geto
la source
1
@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.

Itolima esther
la source