> css-Beispiel: > Lesbar gemacht: ~~~CSS @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): ~~~HTML,bad <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:** ~~~html <div class="unnecessaryStuff">test</div> ~~~ **2\. Und im CSS bestimmst Du, was damit geschehe:** ~~~CSS @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 ~~~JS element.classList.add("name"); ~~~ bzw. ~~~JS element.classList.remove("name"); ~~~ Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen. Ich finde, damit kann man alles „erschlagen“.

> css-Beispiel: > Lesbar gemacht: ~~~CSS @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: ~~~HTML,bad <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:** ~~~html <div class="unnecessaryStuff">test</div> ~~~ **2\. Und im CSS bestimmst Du, was damit geschehe:** ~~~CSS @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 ~~~JS element.classList.add("name"); ~~~ bzw. ~~~JS element.classList.remove("name"); ~~~ Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen. Ich finde, damit kann man alles „erschlagen“.

> css-Beispiel: > Lesbar gemacht: ~~~CSS @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: ~~~HTML,bad <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:** ~~~html <div class="unnecessaryStuff">test</div> ~~~ **2\. Und im CSS bestimmst Du, was damit geschehe:** ~~~CSS @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 ~~~JS element.classList.add("name"); ~~~ bzw. ~~~JS element.classList.add("name"); ~~~ Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen. Ich finde, damit kann man alles „erschlagen“.

> css-Beispiel: > Lesbar gemacht: ~~~CSS @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: ~~~HTML,bad <div id="containerDiv" media="only screen and (max-width: 800px): 'display:none';" >test</div> ~~~ (**Kommentar:** Jeden „Formatierungsscheiß“ ins HTML zu schreiben, dass musste man im vorigen Jahrtausend tun. „Gottlob“ ist das vorbei und jemand, der heute DAMIT anfängt, hat wohl den mit dieser Vorgehensweise verbundenden 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:** ~~~html <div class="unnecessaryStuff">test</div> ~~~ **2\. Und im CSS bestimmst Du, was damit geschehe:** ~~~CSS @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 ~~~JS element.classList.add("name"); ~~~ bzw. ~~~JS element.classList.add("name"); ~~~ Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen. Ich finde, damit kann man alles „erschlagen“.

> css-Beispiel: > Lesbar gemacht: ~~~CSS @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: ~~~HTML,bad <div id="containerDiv" media="only screen and (max-width: 800px): 'display:none';" >test</div> ~~~ (**Kommentar:** Jeden „Formatierungsscheiß“ ins HTML zu schreiben, dass musste man im vorigen Jahrtausend tun. Gottlob ist das vorbei und jemand, der heute DAMIT anfängt, hat wohl den mit dieser Vorgehensweise verbundendenen 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:** ~~~html <div class="unnecessaryStuff">test</div> ~~~ **2\. Und im CSS bestimmst Du, was damit geschehe:** ~~~CSS @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 ~~~JS element.classList.add("name"); ~~~ bzw. ~~~JS element.classList.add("name"); ~~~ Klassen (und damit anzuwendende CSS-Regeln) hinzufügen und entfernen. Ich finde, damit kann man alles „erschlagen“.