È possibile mettere in linea le regole CSS @media?

293

Devo caricare dinamicamente le immagini dei banner in un'app HTML5 e vorrei un paio di versioni diverse per adattarle alle larghezze dello schermo. Non riesco a determinare correttamente la larghezza dello schermo del telefono, quindi l'unico modo in cui riesco a pensare è quello di aggiungere immagini di sfondo di un div e usare @media per determinare la larghezza dello schermo e visualizzare l'immagine corretta.

Per esempio:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

È possibile o qualcuno ha altri suggerimenti?

html  css  media-queries 
— Ballerino
fonte
3
Deluso dalle risposte? Vedere questo commento . Potrebbe essere d'aiuto.
— Rinogo,

Risposte:

285

No, le @mediaregole e le query multimediali non possono esistere negli attributi di stile in linea poiché possono contenere solo property: valuedichiarazioni. Come dice la specifica :

Il valore dell'attributo di stile deve corrispondere alla sintassi del contenuto di un blocco di dichiarazione CSS

L'unico modo per applicare gli stili a un elemento solo in determinati media è con una regola separata nel tuo foglio di stile, il che significa che dovrai trovare un selettore per esso.

Un spanselettore fittizio sarebbe simile a questo, ma se stai prendendo di mira un elemento molto specifico avrai bisogno di un selettore più specifico:

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
— BoltClock
fonte
70
Puoi anche inserire un <style>tag anche nel tuo HTML. Questo è un approccio necessario per il caso in cui background-imageviene estratto dinamicamente da un database. Ovviamente nel foglio di stile esterno non è il posto giusto per quello.
— Jake Wilson,
1
@Jakobud: Sì, non importa dove si trova il foglio di stile, ma il punto è che puoi farlo solo nei CSS, non in un attributo di stile in linea.
— BoltClock
3
Nota ai futuri esploratori che il <script>tag viene spesso rimosso dai client di posta elettronica quando viene inoltrata un'e-mail, quindi le persone tendono ad utilizzare gli stili in linea per le e-mail. E questo significa che nessuna query multimediale. Attualmente sto cercando le migliori pratiche per questa situazione, ma solo un amichevole heads-up.
— TCannadySF,
3
Si prega di impostare la larghezza massima in ems, non in px. In questo modo funzionerà comunque in modo sensato quando si esegue lo zoom.
— Silas S. Brown,
2
@Silas S. Brown: Non è un mio problema. Sto solo riflettendo su ciò che viene utilizzato nella domanda.
— BoltClock
137

Problema

No, le query multimediali non possono essere utilizzate in questo modo 

<span style="@media (...) { ... }"></span>

Soluzione

Ma se si desidera fornire un comportamento specifico utilizzabile al volo E reattivo, è possibile utilizzare il stylemarkup e non l'attributo.

EI

<style scoped>
.on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

Guarda il codice che lavora in diretta su CodePen

Nel mio blog, ad esempio, ho inserito un <style>markup <head>subito dopo<link> dichiarazione per CSS e contiene il contenuto di un'area di testo fornita accanto a textarea di contenuto reale per creare al volo una classe extra quando ho scritto un articolo.

Nota: l' scopedattributo fa parte della specifica HTML5. Se non lo usi, il validatore ti biasimerà, ma i browser attualmente non supportano il vero scopo: mirare il contenuto <style>solo sull'elemento genitore immediatamente e sugli elementi figlio di quell'elemento. L'ambito non è obbligatorio se l' <style>elemento è in <head>markup.

AGGIORNAMENTO: Consiglio di utilizzare sempre le regole nel primo modo mobile quindi il codice precedente dovrebbe essere:

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url('particular_ad_small.png'); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url('particular_ad.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>
— Bruno Lesieur
fonte
10
Questa è una risposta migliore della risposta accettata perché ti consente di modificare dinamicamente il background-imagemomento in cui la pagina viene caricata.
— Jake Wilson,
7
Sebbene in linea di principio sembri fantastico, Chrome ha rimosso il suo supporto preliminare alcune versioni precedenti e ora solo Firefox ha alcun supporto.
— Anthony McLin,
1
Scoped è solo usato per non permettere .on-the-fly-behaviordi essere usato comunque, ma se la parola è «ignora» da alcuni navigatori non è un problema. <style> può essere usato in <body> in tutto il navigatore, funziona. È solo un requisito di convalida del w3c.
— Bruno Lesieur,
4
Sebbene scopedsia una soluzione brillante, non è ufficialmente supportata da nessun browser. Spero che presto cambierà.
— Ken Sharp,
1
Questo è un altro problema, perché l'obiettivo principale di un e-mail è quello di essere la lettura da un client di posta elettronica e molti client di posta elettronica non supportano l'incorporamento <style>, o media queriestutto o in funzione di HTML / CSS. Quindi in realtà il problema è più grande di così. So solo che sei in grado di creare e-mail visualizzate allo stesso modo su tutte le e-mail client (Gmail incluso) con solo la funzione HTML4 e CSS2 (con alcuni hack di Outlook), ma in questo caso non ci sono query multimediali.
— Bruno Lesieur,
15

Gli stili in linea al momento non possono contenere altro che dichiarazioni (property: value coppie).

È possibile utilizzare styleelementi con mediaattributi appropriati nella headsezione del documento.

— Marat Tanalin
fonte
13

Sì, puoi scrivere media query in inline-css se stai usando un tag immagine. Per dispositivi di dimensioni diverse è possibile ottenere immagini diverse.

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
— Arif Hussain
fonte
Questo non si applica all'immagine di sfondo CSS: url ()
— Jonas Eberle
10

Se stai utilizzando Bootstrap Responsive Utilities o un'alternativa simile che consente di nascondere / mostrare div in base ai punti di interruzione, potrebbe essere possibile utilizzare diversi elementi e mostrare il più appropriato. vale a dire

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
— Pavel
fonte
3
Bella soluzione alternativa: nascondi div, mostra div in base alla query multimediale: l'unico inconveniente che vedo è che caricherà ancora entrambe le immagini in modo da inviarle entrambe al client.
— Michael C. Gates,
4
Il contenuto duplicato non è una buona cosa per manutenzione o SEO.
— Bruno Lesieur,
1
Purtroppo questo è un falso amico! Ho pensato anche a questa soluzione, ma vogliamo un'immagine più piccola da servire a piccoli dispositivi e salvare byte da scaricare. Questa tecnica fa esattamente il contrario
— A. D'Alfonso,
8

Le query multimediali in attributi di stile non sono al momento possibili. Ma se devi impostarlo dinamicamente tramite Javascript. È possibile inserire tale regola anche tramite JS.

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

È come se lo stile fosse presente nel foglio di stile. Quindi sii consapevole della specificità.

— Type-Style
fonte
qualche idea quando sarà possibile?
— SuperUberDuper,
1
Non penso che lo sarà. Ma non sono a conoscenza di tutte le attività dei gruppi di lavoro.
— Tipo di stile
7

Ho provato a testarlo e non sembra funzionare ma sono curioso di sapere perché Apple lo stia utilizzando. Ero solo su https://linkmaker.itunes.apple.com/us/ e ho notato nel codice generato che fornisce se si seleziona il pulsante di opzione "Pulsante grande", stanno utilizzando una query multimediale in linea.

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

nota: aggiunte interruzioni di riga per la leggibilità, il codice generato originale viene minimizzato

— davidcondrey
fonte
3
Vorrei sapere perché / come anche Apple lo sta usando
— Douglas.Sesar,
1
Il codice tra virgolette non esiste più al link indicato (almeno per me; forse ottengo contenuti diversi a causa del fatto che sono al di fuori degli Stati Uniti). Inoltre, sembra davvero più una domanda separata che una risposta.
— Mark Amery,
1
Ho inviato una segnalazione di bug e credo che da allora l'abbiano rimossa. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201
— davidcondrey
4

Puoi usare image-set ()

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">
— the7oker
fonte
2
Si noti che questo è supportato solo nei browser basati su Webkit in questo momento.
— Qqwy
Questo non funziona in base alle dimensioni (come indicato nella domanda) ma al fattore di zoom, quindi potresti ottenere l'immagine per piccoli schermi su uno schermo da 27 "2560x1440. Potrebbe essere quello che vuoi - o forse no.
— Jan Bühler,
4

sì, puoi farlo con javascript tramite window.matchMedia

  1. desktop per testo di colore rosso

  2. tablet per il testo di colore verde

  3. cellulare per il testo di colore blu

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
Espandi frammento

— ßãlãjî
fonte
3

Le query multimediali incorporate sono possibili utilizzando qualcosa come Breakpoint per Sass

Questo post sul blog fa un buon lavoro spiegando in che modo le query multimediali in linea sono più gestibili rispetto ai blocchi separati: non esiste un punto di interruzione

Relativamente alle query multimediali incorporate è l'idea delle "query element", alcune letture interessanti sono:

  1. Considerazioni su media query per Elements
  2. Le query multimediali sono un hack
  3. Le query multimediali non sono la risposta: Element Query Polyfill
  4. se altrimenti blocca
— Rafael Lüder
fonte
1

se aggiungi la regola al file print.css non devi usare @media.

L'ho escluso nella smarty foreach che uso per dare ad alcuni elementi un colore di sfondo.

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
Espandi frammento

— Paul Wolbers
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.