media in html - „Gottlob“ geht das nicht

[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“.