media in html

[Paul1]

Moin, mit "media" kann man in CSS sehr schön z.B. Elemente ausblenden wenn beispielsweise eine bestimmte Breite unter-/überschritten ist.

css-Beispiel:

@media only screen and (max-width: 800px) {
  #containerDiv {
    display:none;
  }
}

Nun möchte ich diese Anweisung nicht in css sondern im style Attribut des HTML tags schreiben. Leider funktioniert das dort nicht:

<div id="containerDiv"
     media="only screen and (max-width: 800px): 'display:none';">
   test
</div>

Mir fehlt die richtige Syntax... Kann mir jemand helfen?

Gruß, Paul

Edit Rolf B: Beispielcode als Code markiert und lesbar gemacht

[PrinceMaisle]

Moin, mit "media" kann man in CSS sehr schön z.B. Elemente ausblenden wenn beispielsweise eine bestimmte Breite unter-/überschritten ist.

css-Beispiel: @media only screen and (max-width: 800px) { #containerDiv { display:none; } }

Kann man. Muss man nicht zwingend, da auch dank grid, flex-box viel möglich ist. Manchmal kommt man aber nicht drum herum noch eine mediaquery zu bauen. Und im css ist diese auch an der richtigen Stelle.

Nun möchte ich diese Anweisung nicht in css sondern im style Attribut des HTML tags schreiben. Leider funktioniert das dort nicht: <div id="containerDiv" media="only screen and (max-width: 800px): 'display:none';">test</div>

Warum möchtest du das? Das doch das tolle an css. Du kannst dein ganzes styling auslagern.

Mir fehlt die richtige Syntax...

Die @media gibts zum Glück nicht inline

Kann mir jemand helfen?

Vielleicht. Ich leider nicht

Next

[Rolf B]

Hallo PrinceMaisle,

Warum möchtest du das?

eventuell weil er das dynamisch per Script (auf Client oder Server) dem Element zuordnen möchte.

Was der Idee von Media-Queries widerspricht, deswegen müsste man herausfinden, welches Problem er eigentlich lösen will.

Paul? Liest Du noch mit und magst uns verraten, für welches Problem wir Dir gerade die angedachte Lösung geschreddert haben? @media geht wirklich nur im Stylesheet.

Es gibt allerdings noch Medienabfragen an anderer Stelle, z.B. das media-Attribut am source Element, wenn es in einem picture-Element steckt, und das media-Attribut des style-Elements, um Stylesheets nur einzubinden wenn eine bestimmte Medienabfrage erfüllt ist.

Rolf

[PrinceMaisle]

Hi Rolf

eventuell weil er das dynamisch per Script (auf Client oder Server) dem Element zuordnen möchte.

Wenn er etwas dynamisch zuordnen möchte reicht doch die Id oder eine Klasse. Die @media stört ja nicht im css. Und inline ist immer so unübersichtlich, in meinen Augen

Was der Idee von Media-Queries widerspricht, deswegen müsste man herausfinden, welches Problem er eigentlich lösen will.

Genau. Komme allerdings auch auf keinen Anwendungsfall. Daher auch die Frage nach dem Warum. Da kommt meist dann das eigentliche Ziel. Wenn nicht, dann wars auch nicht so wichtig.

[Gunnar Bittersmann]

@@Paul1

mit "media" kann man in CSS sehr schön z.B. Elemente ausblenden wenn beispielsweise eine bestimmte Breite unter-/überschritten ist.

Welchen Sinn soll das machen?

Nun möchte ich diese Anweisung nicht in css sondern im style Attribut des HTML tags schreiben.

Geht nicht.

🖖 Живіть довго і процвітайте

[Paul1]

Alles klar. Danke

[Raketenwilli]

css-Beispiel:

Lesbar gemacht:

@media only screen and (max-width: 800px) { 
     #containerDiv {
          display:none;
     }
}

Nun möchte ich diese Anweisung nicht in css sondern im style Attribut des HTML tags schreiben. Leider funktioniert das dort nicht: <div id="containerDiv" media="only screen and (max-width: 800px): 'display:none';">test</div>

Lesbar (aber trotzdem kein gültiges HTML):

<div
    id="containerDiv"
    media="only screen and (max-width: 800px): 'display:none';"

>test</div>

(Kommentar: Jeden „Formatierungsscheiß“ ins HTML zu schreiben, SOWAS musste man im vorigen Jahrtausend tun. „Gottlob“ ist das vorbei und jemand, der heute DAMIT anfängt, hat wohl den mit dieser Vorgehensweise verbundenen Horror nicht ausreichend verinnerlicht…)

Mir fehlt die richtige Syntax... Kann mir jemand helfen?

Nicht mit DER Syntax aber ganz klar mit einer tauglichen Idee.

1. Du vergibst eine Klasse:

<div class="unnecessaryStuff">test</div>

2. Und im CSS bestimmst Du, was damit geschehe:

@media only screen and ( max-width: 800px ) { 
     .unnecessaryStuff {
          display:none;
     }
}

3. „Dynamisch“:

• Du kannst einem HTML-Element mehrere Klassennamen vergeben.
• Du kannst sogar in JS, mit

element.classList.add("name");

bzw.

element.classList.remove("name");

Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen.

Ich finde, damit kann man alles „erschlagen“.

[Rolf B]

Hallo Raketenwilli,

<div media="...">...</div>

Ich glaube, da editier ich noch was dazu. Ich hab tatsächlich für eine Weile geglaubt, du wolltest das als reguläre Syntax verkaufen (weil ich nämlich aus dem OP fälschlich im Kopf hatte, dass dort style verwendet worden sei).

Die Lesbarkeit hab ich dann auch mal im OP hergestellt.

Rolf

[Gunnar Bittersmann]

@@Raketenwilli

@media only screen and ( max-width: 800px ) { 
     .unnecessaryStuff {
          display:none;
     }
}

Nö, es sollte so sein:

     .unnecessaryStuff {
          display:none;
     }

Ohne Media-Query. Unnötiges Zeugs sollte bei keiner Bildschirmgröße angezeigt werden. (Dann solle es auch gar nicht erst im HTML stehen.)

Und nötiges Zeug sollte auf jeder Bildschirmgröße angezeigt werden.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

dann eben "decorative-bloatage"…

Rolf

[Raketenwilli]

Ohne Media-Query. Unnötiges Zeugs sollte bei keiner Bildschirmgröße angezeigt werden. (Dann solle es auch gar nicht erst im HTML stehen.)

Und nötiges Zeug sollte auf jeder Bildschirmgröße angezeigt werden.

Ich mach grad sowas.

Login mit Benutzername und Passwort, „Passwort vergessen“-Link. Hinweis, dass dieses ein technisch notwendiges Cookie setzen wird.

Auf ausreichend großen Bildschirmen wird das hier angezeigt:

Hinweis zum Datenschutz:

• Wenn Sie sich anmelden wird ein technisch notwendiges Cookie gesetzt, welches lediglich dem Zweck dient, Ihre Anmeldung zu beweisen.
• Dieses Cookie wird gelöscht, sobald Sie Ihre Browsersitzung beenden oder sich wieder abmelden.
• Es gilt nur für diese Domain, nur für diese Anwendung.
• Dieses Cookie ist weder dafür geeignet noch dafür bestimmt, Ihr Surfverhalten zu verfolgen.
• Dritte können dieses Cookie nicht sehen, es ist nicht für Werbezwecke bestimmt.

Auf kleinen Bildschirmen eben nur der Hinweis, dass ein Cookie gesetzt wird und ein Link zur Datenschutzerklärung mit dem selben Inhalt.

Nicht alles, was man sich nicht vorstellen kann oder wofür es schöne, (es folgt also eine starke Beschönigung:) praxisunabhängige Theorien gibt, ist falsch oder verwerflich. Übrigens: Obiger, „unnötiger“ Text hat mit HTML ein Datenvolumen ca. 600 Bytes. Nicht weinen: Diese ungeheure Verschwendung ist „zumutbar“.