Qual è la differenza tra "schermo" e "solo schermo" nelle query multimediali?

487

Qual è la differenza tra screene only screennelle media query?

<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" />

Perché dobbiamo usare only screen? Non screenfornisce di per sé informazioni sufficienti per il rendering solo per lo schermo?

Ho visto molti siti Web reattivi utilizzando uno di questi tre modi diversi:

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

@media (max-width:632px)

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

css media-queries

— Jitendra Vyas
fonte

543

Analizziamo i tuoi esempi uno per uno.

@media (max-width:632px)

Questo sta dicendo per una finestra con un max-width632px che si desidera applicare questi stili. A quella dimensione parleresti di qualcosa di più piccolo di uno schermo desktop nella maggior parte dei casi.

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

Questo sta dicendo per un dispositivo con una screene una finestra max-widthdi 632px applicare lo stile. Questo è quasi identico a quanto sopra, tranne per il fatto che stai specificando, screena differenza degli altri tipi di media disponibili, l' altro più comune print.

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

Ecco una citazione direttamente dal W3C per spiegare questo.

La parola chiave "solo" può essere utilizzata anche per nascondere i fogli di stile dai programmi utente precedenti. Gli interpreti devono elaborare le query multimediali che iniziano con "only" come se la parola chiave "only" non fosse presente.

Poiché non esiste un tipo di supporto "solo", il foglio di stile dovrebbe essere ignorato dai browser meno recenti.

Ecco il link a quella citazione che è mostrato nell'esempio 9 in quella pagina.

Speriamo che questo faccia luce sulle domande dei media.

MODIFICARE:

Assicurati di dare un'occhiata alla risposta eccellente di @hybrids su come onlyviene realmente gestita la parola chiave.

— Matthew Green
fonte

24

Per chiunque stia cercando una spiegazione migliore del perché la onlyparola chiave nasconderà i fogli di stile dai browser più vecchi, vedere la risposta di @hybrid di seguito. Lo spiega molto bene.

— JMTyler,

1

La risposta dell'ibrido è buona, ma mi piace anche questa risposta perché si rivolge alle query multimediali all'interno dei CSS anziché indirizzare solo l' mediaattributo linkdell'elemento.

— Chharvey,

2

quale dispositivo non ha uno schermo?

— Kokodoko,

3

@Kokodoko quelli che non ne hanno bisogno. Ma seriamente, le stampanti e gli screen reader non hanno necessariamente schermi. Inoltre, qualsiasi altra cosa, attualmente o in futuro, non identificata come screentale, come qualsiasi cosa elencata negli altri tipi di media.

— Matthew Green,

1

@Kokodoko CSS esiste per creare una separazione delle preoccupazioni tra contenuto e presentazione. La presentazione copre molto più di ciò che può essere visto su uno schermo. È una distinzione importante da tenere a mente indipendentemente da ciò per cui si potrebbe progettare.

— Matthew Green,

231

Quanto segue proviene dai documenti Adobe .

La specifica delle query multimediali fornisce anche la parola chiave only, che ha lo scopo di nascondere le query multimediali dai browser meno recenti. Ad esempio not, la parola chiave deve arrivare all'inizio della dichiarazione. Per esempio:

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

I browser che non riconoscono le query multimediali si aspettano un elenco di tipi di media separati da virgola e la specifica dice che dovrebbero troncare ogni valore immediatamente prima del primo carattere non alfanumerico che non è un trattino. Quindi, un vecchio browser dovrebbe interpretare l'esempio precedente come questo:

media="only"

Poiché non esiste un tipo di supporto come solo, il foglio di stile viene ignorato. Allo stesso modo, un vecchio browser dovrebbe interpretare

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

come

media="screen"

In altre parole, dovrebbe applicare le regole di stile a tutti i dispositivi dello schermo, anche se non sa cosa significano le query multimediali.

Sfortunatamente, IE 6–8 non ha implementato correttamente le specifiche.

Invece di applicare gli stili a tutti i dispositivi dello schermo, ignora del tutto il foglio di stile.

Nonostante questo comportamento, si consiglia comunque di aggiungere il prefisso alle query multimediali solo se si desidera nascondere gli stili ad altri browser meno comuni.

Quindi, usando

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

e

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

avrà lo stesso effetto in IE6-8: entrambi impediranno l'utilizzo di quegli stili. Saranno comunque ancora scaricati.

Inoltre, nei browser che supportano le query multimediali CSS3, entrambe le versioni caricheranno gli stili se la larghezza della finestra è maggiore di 401pxe il tipo di supporto è schermo.

Non sono del tutto sicuro di quali browser che non supportano le query multimediali CSS3 avrebbero bisogno della onlyversione

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

al contrario di

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

per assicurarsi che non sia interpretato come

media="screen"

Sarebbe un buon test per qualcuno con accesso a un laboratorio di dispositivi.

— ibrido
fonte

3

Quindi, se stiamo parlando di query multimediali nei file CSS, possiamo rilasciare "solo", perché i browser più vecchi non capiscono le query multimediali, non è vero?

— 1234 al

Buona risposta molto lucida. Grazie!

— Alexander Suraphel,

Il link condiviso è stato davvero utile. Grazie

— Raffaello

Secondo la mia esperienza, "solo" funziona come previsto su Symbian OS (vecchi telefoni touch Nokia). L'ho usato molto perché quei browser erano davvero pessimi nel supporto CSS3, ma era ancora in grado di gestire "solo" e "min / max-width" nelle query multimediali a destra.

— Peter Knut,

@PeterKnut Perché stai persino supportando dispositivi così vecchi? Davvero curioso.

— Prometeo

41

Per dare uno stile a molti smartphone con schermi più piccoli, puoi scrivere:

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

Per impedire ai browser meno recenti di vedere un foglio di stile di un telefono iPhone o Android, puoi scrivere:

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

Leggi questo articolo per ulteriori informazioni http://webdesign.about.com/od/css3/a/css3-media-queries.htm

— Sandeep
fonte

3

Non sono ancora molto chiaro su questo. Ho aggiornato anche la mia domanda. Puoi fare qualche esempio?

— Jitendra Vyas,

4

Cosa succede se si utilizza l'approccio Mobile First? Quindi, abbiamo prima il css mobile e quindi utilizziamo la larghezza minima per indirizzare i siti più grandi. Non dovremmo usare la onlyparola chiave in quel contesto, giusto?

— Ashitaka,

Questa risposta è stata molto facile da capire! :) L'unico è solo per impedire alle versioni precedenti come IE 6 o opera 5 o 6 di caricare i dati che devono essere presentati per Android o Chrome 30 o IE 10 .. Sandeep con risposta eccellente :) merita un +1

— Afzaal Ahmad Zeeshan,

16

La risposta di @hybrid è piuttosto istruttiva, tranne per il fatto che non spiega lo scopo menzionato da @ashitaka "Che cosa succede se si utilizza l'approccio Mobile First? Quindi, abbiamo prima il CSS mobile e quindi utilizziamo la larghezza minima per scegliere come target siti più grandi. Non dovremmo usare l'unica parola chiave in quel contesto, giusto? "

Vogliamo aggiungere qui che lo scopo è semplicemente quello di impedire ai browser non supportati di utilizzare quello stile Altro dispositivo come se partisse da "schermo" senza che lo porterebbe a schermo dove come se partisse da "solo" stile verrà ignorato.

Rispondere ad Ashitaka considera questo esempio

<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)" />

Se non utilizziamo "solo" funzionerà comunque poiché lo stile desktop verrà utilizzato anche per colpire stili Android ma con spese generali non necessarie. In questo caso SE un browser non lo supporta tornerà al secondo foglio di stile ignorando il primo.

— Diablo Geto
fonte

1

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

screenqui è per impostare la dimensione dello schermo della media query. Ad esempio, la larghezza massima dell'area di visualizzazione è di 480 px. Quindi sta specificando lo schermo al contrario degli altri tipi di media disponibili.

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

only screen qui viene utilizzato per impedire ai browser meno recenti che non supportano le query multimediali con funzionalità multimediali di applicare gli stili specificati.

— itolima esther
fonte