Ist es möglich, CSS @ media-Regeln inline zu setzen?

293

Ich muss Bannerbilder dynamisch in eine HTML5-App laden und möchte ein paar verschiedene Versionen, die den Bildschirmbreiten entsprechen. Ich kann die Bildschirmbreite des Telefons nicht richtig bestimmen. Daher kann ich mir nur vorstellen, Hintergrundbilder eines div hinzuzufügen und mit @media die Bildschirmbreite zu bestimmen und das richtige Bild anzuzeigen.

Beispielsweise:

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

Ist das möglich oder hat jemand andere Vorschläge?

html css media-queries Tänzer
quelle

3

Enttäuscht von den Antworten? Siehe diesen Kommentar . Es kann helfen.

Rinogo

284

Nein, @mediaRegeln und Medienabfragen können nicht in Inline-Stilattributen vorhanden sein, da sie nur property: valueDeklarationen enthalten können . Wie die Spezifikation es ausdrückt:

Der Wert des style-Attributs muss mit der Syntax des Inhalts eines CSS- Deklarationsblocks übereinstimmen

Die einzige Möglichkeit, Stile nur in bestimmten Medien auf ein Element anzuwenden, besteht in einer separaten Regel in Ihrem Stylesheet. Dies bedeutet, dass Sie einen Selektor dafür erstellen müssen.

Ein Dummy- spanSelektor würde so aussehen, aber wenn Sie auf ein ganz bestimmtes Element abzielen, benötigen Sie einen spezifischeren Selektor:

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}

BoltClock
quelle

70

Sie können auch einfach ein <style>Tag in Ihr HTML einfügen. Dies ist ein notwendiger Ansatz für den Fall, dass das background-imagedynamisch aus einer Datenbank abgerufen wird. Offensichtlich ist das externe Stylesheet dafür nicht der richtige Ort.

Jake Wilson

1

@Jakobud: Ja, es spielt keine Rolle, wo sich das Stylesheet befindet, aber der Punkt ist, dass Sie dies nur in CSS tun können, nicht in einem Inline-Style-Attribut.

BoltClock

3

Hinweis für zukünftige Entdecker: Das <script>Tag wird häufig von E-Mail-Clients entfernt, wenn eine E-Mail weitergeleitet wird. Daher tendieren die Benutzer dazu, Inline-Stile für E-Mails zu verwenden. Und das bedeutet keine Medienabfragen. Ich bin derzeit auf der Suche nach den besten Praktiken für diese Situation, aber nur nach einem freundlichen Heads-up.

TCannadySF

3

Bitte stellen Sie die maximale Breite in ems ein, nicht in px. Auf diese Weise funktioniert es beim Zoomen immer noch sinnvoll.

Silas S. Brown

2

@ Silas S. Brown: Das ist nicht mein Problem. Ich denke nur darüber nach, was in der Frage verwendet wird.

BoltClock

137

Problem

Nein, Medienabfragen können auf diese Weise nicht verwendet werden

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

Lösung

Wenn Sie jedoch ein bestimmtes Verhalten bereitstellen möchten, das im laufenden Betrieb verwendet werden kann UND reagiert, können Sie das styleMarkup und nicht das Attribut verwenden.

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>

Sehen Sie sich den Code live in CodePen an

In meinem Blog füge ich beispielsweise direkt nach der Deklaration für CSS ein <style>Markup ein , das den Inhalt eines Textbereichs enthält, der neben dem Textbereich für echten Inhalt bereitgestellt wird, um beim Schreiben eines Artikels im Handumdrehen eine zusätzliche Klasse zu erstellen.<head><link>

Hinweis: Das scopedAttribut ist Teil der HTML5-Spezifikation. Wenn Sie es nicht verwenden, wird der Validator Sie beschuldigen, aber Browser unterstützen derzeit nicht den eigentlichen Zweck: den Inhalt <style>nur auf das unmittelbar übergeordnete Element und die untergeordneten Elemente dieses Elements zu beschränken. Der Gültigkeitsbereich ist nicht obligatorisch, wenn sich das <style>Element im <head>Markup befindet.

UPDATE: Ich rate, Regeln immer zuerst auf dem Handy zu verwenden, daher sollte der vorherige Code lauten:

<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
quelle

10

Dies ist eine bessere Antwort als die akzeptierte Antwort, da Sie damit das Laden background-imageder Seite dynamisch ändern können.

Jake Wilson

7

Obwohl der Umfang im Prinzip großartig erscheint, hat Chrome die vorläufige Unterstützung vor einigen Versionen entfernt, und jetzt hat nur Firefox überhaupt Unterstützung.

Anthony McLin

1

Scoped wird nur verwendet, um .on-the-fly-behaviordie Verwendung nicht zuzulassen , aber wenn das Wort von einem Navigator «ignorieren» lautet, ist dies kein Problem. <style> kann in <body> in allen Navigatoren verwendet werden, es funktioniert. Es ist nur eine w3c-Validierungsanforderung.

Bruno Lesieur

4

Obwohl scopedes sich um eine brillante Lösung handelt, wird sie von keinem Browser offiziell unterstützt. Hoffentlich ändert sich das bald.

Ken Sharp

1

Dies ist eine andere Frage, denn das Hauptziel einer E - Mail ist von einem Client - E - Mail und viele Client - E - Mail Einbetten nicht zu lesen unterstützen <style>, oder media queriesoder alle HTML / CSS - Funktion. Das Problem ist also tatsächlich größer. Ich weiß nur, dass Sie E-Mails erstellen können, die in allen Client-E-Mails (einschließlich Google Mail) auf dieselbe Weise angezeigt werden, und zwar nur mit HTML4- und CSS2-Funktionen (mit einigen Outlook-Hacks). In diesem Fall gibt es jedoch keine Medienabfragen.

Bruno Lesieur

15

Inline-Stile dürfen derzeit nur Deklarationen ( property: valuePaare) enthalten.

Sie können styleElemente mit entsprechenden mediaAttributen im headAbschnitt Ihres Dokuments verwenden.

Marat Tanalin
quelle

13

Ja, Sie können eine Medienabfrage in Inline-CSS schreiben, wenn Sie ein Bild-Tag verwenden. Für verschiedene Gerätegrößen können Sie unterschiedliche Bilder erhalten.

<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
quelle

Dies gilt nicht für CSS-Hintergrundbild: url ()

Jonas Eberle

10

Wenn Sie Bootstrap Responsive Utilities oder eine ähnliche Alternative verwenden, mit der Divs abhängig von den Haltepunkten ausgeblendet / angezeigt werden können, können möglicherweise mehrere Elemente verwendet und die am besten geeigneten angezeigt werden. dh

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>

Pavel
quelle

3

Schöne Problemumgehung - div ausblenden, div basierend auf Medienabfrage anzeigen - der einzige Nachteil, den ich sehe, ist, dass weiterhin beide Bilder geladen werden, sodass Sie beide an den Client senden würden.

Michael C. Gates

4

Doppelte Inhalte sind keine gute Sache für Wartung oder SEO.

Bruno Lesieur

1

Leider ist das ein falscher Freund! Ich habe auch über diese Lösung nachgedacht, aber wir möchten, dass kleinere Bilder für kleine Geräte bereitgestellt werden und Bytes zum Herunterladen gespeichert werden. Diese Technik macht genau das Gegenteil

A. D'Alfonso

8

Medienabfragen in Stilattributen sind derzeit nicht möglich. Aber wenn Sie dies dynamisch über Javascript einstellen müssen. Sie können diese Regel auch über JS einfügen.

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

Dies ist, als ob der Stil im Stylesheet vorhanden wäre. Seien Sie sich also der Spezifität bewusst.

Typ-Stil
quelle

Irgendwelche Ideen, wann es möglich sein wird?

SuperUberDuper

1

Ich glaube nicht, dass es so sein wird. Aber ich bin mir nicht all der Dinge bewusst, die die Arbeitsgruppen tun.

Typ-Stil

8

Hey, ich habe es gerade geschrieben.

Jetzt können Sie <div style="color: red; @media (max-width: 200px) { color: green }">oder so verwenden.

Genießen.

Даниил Пронин
quelle

Ich habe dafür gestimmt, da es damals zu funktionieren schien, aber es ist nicht so. #sad

honk31

@ honk31 es Welt nur für eine at-Regel

Даниил Пронин

7

Ich habe versucht, dies zu testen, und es schien nicht zu funktionieren, aber ich bin gespannt, warum Apple es verwendet. Ich war gerade auf https://linkmaker.itunes.apple.com/us/ und habe im generierten Code festgestellt, dass bei Verwendung des Optionsfelds "Großer Button" eine Inline-Medienabfrage verwendet wird.

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

Hinweis: Zur besseren Lesbarkeit wurden Zeilenumbrüche hinzugefügt. Der ursprünglich generierte Code wird minimiert

Davidcondrey
quelle

3

Ich würde gerne wissen, warum / wie Apple das auch nutzt

Douglas.Sesar

1

Der angegebene Code ist unter dem angegebenen Link nicht mehr vorhanden (zumindest für mich; möglicherweise erhalte ich andere Inhalte, weil ich mich außerhalb der USA befinde). Außerdem scheint dies eher eine separate Frage als eine Antwort zu sein.

Mark Amery

1

Ich habe einen Fehlerbericht eingereicht und glaube, dass sie ihn inzwischen entfernt haben. itunesaffiliate.phgsupport.com/hc/en-us/requests/14201

Davidcondrey

4

Sie können image-set () verwenden

<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
quelle

2

Beachten Sie, dass dies derzeit nur in Webkit-basierten Browsern unterstützt wird .

Qqwy

Dies funktioniert nicht basierend auf der Größe (wie in der Frage beschrieben), sondern auf dem Zoomfaktor, sodass Sie möglicherweise das Bild für kleine Bildschirme auf einem 27-Zoll-Bildschirm (2560 x 1440) erhalten. Das könnte sein, was Sie wollen - oder vielleicht auch nicht.

Jan Bühler

4

Ja, Sie können mit Javascript über window.matchMedia arbeiten

Desktop für roten Text
Tablette für grünen Text
Handy für blauen Farbtext

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

Erweitern Sie das Snippet

ßãlãjî
quelle

3

Inline-Medienabfragen sind mit Breakpoint for Sass möglich

In diesem Blog-Beitrag wird gut erklärt, wie Inline-Medienabfragen besser verwaltet werden können als separate Blöcke: Es gibt keinen Haltepunkt

Im Zusammenhang mit Inline-Medienabfragen steht die Idee der "Elementabfragen", einige interessante Lesarten sind:

Rafael Lüder
quelle

1

Wenn Sie die Regel zur Datei print.css hinzufügen, müssen Sie @media nicht verwenden.

Ich habe es in dem Smarty Foreach ausgeschlossen, mit dem ich einigen Elementen eine Hintergrundfarbe gebe.

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

Erweitern Sie das Snippet

Paul Wolbers
quelle

Ist es möglich, CSS @ media-Regeln inline zu setzen?

Antworten: