JavaScript und CSS

[Felix Riesterer]

Lieber Matthias,

einige Formulierungsideen, die aus dem Stammtisch klarer geworden sind.

1. JavaScript und CSS/CSS-Eigenschaften setzen

Thema ist das schnelle Ändern von style mit JS und warum man da eigentlich Klassen setzen oder ändern sollte.

Jein. Das Thema ist in Wirklichkeit, dass eine gewisse Art der Darstellung unter (un)gewissen Umständen erreicht werden soll. Es stellt sich grundsätzlich in diesen Fällen die Frage, wie man die Darstellung zurecht zupft. Also die Frage „nehme ich JavaScript und messe etwas aus“, oder „verwende ich einen CSS-Mechanismus mit media query“, oder vielleicht eine per JS gesteuerte custom property?

Es kommt wie so oft darauf an, wie die Umstände sind, unter denen man sich genötigt sieht, in das Rendering vom Browser einzugreifen, weil ein Umstand eingetreten ist, der die bisherige Darstellung nicht mehr zufriedenstellend macht.

Eine solche Überlegung am Anfang des Kapitels halte ich für wichtig, weil im weiteren Verlauf des Kapitels nur noch anhand von (arche-)typischen Beispielen aufgezeigt werden kann, was es gibt und was man damit machen kann. Dass das Grenzen hinsichtlich der Sinnhaftigkeit hat, ist dann mit der anfänglichen Überlegung schon vorbereitet.

Deshalb kommt das noch vor das vermeintlich einfachere style.color = 'red';

Es fällt heute schwer, einen genau dafür wirklich passenden Anwendungsfall zu finden. Da lohnt eher die Verwendung von passenden Klassen, deren Darstellung dann noch mehr kann, als nur eine CSS-Eigenschaft zu verändern - Transitions inklusive. Will man z.B. einen Suchtreffer im Inhalt auf der Seite visuell hervorheben, könnte man das so tun, aber auch hier erscheint mir das Verwenden einer Klasse sinnvoller.

Das ist die grundsätzliche Frage bei diesem Thema: Welche Methoden sollen wir noch empfehlen, wann ist es einfacher, auf Custom properties zu setzen?

Wenn man auf ein resize-Event reagieren möchte, dann umständlich irgendwelche Proportionen ausmisst, um dann width und/oder height zu ändern, sind andere Mechanismen wie media queries definitiv ratsamer, weil sie zum Einen übersichtlicher notiert werden können, und weil „umständlich“ in aller Regel auch zu „weniger zuverlässig in der Funktion“ führt.

Will man in einem Spiel etwas animieren oder eine Kollisionsabfrage implementieren, wird man vielleicht auf Pixelbasis operieren wollen und dann in der Tat pixelgenau messen und entsprechend Positionseigenschaften anpassen. Es sei denn man verwendet SVG und ... Es kommt mal wieder auf den Einzelfall an.

Dem style-Objekt entsprechende Werte zuzuweisen ist eine sehr alte Technik, die aber sehr simpel funktioniert. Das würde ich definitiv an den Anfang stellen wollen. Das Zuweisen einer Klasse ist dann das nächst-komplexere Vorgehen, weil man hier etwas impliziert, das nicht im JS-Code steht, nämlich die Layout-Regeln im CSS, die zu dieser Klasse gehören. Und dann gibt es da className und classList.(add|remove), wobei letzteres neuer ist.

Die Idee mit den custom properties ist das Neueste und sollte ans Ende, weil es noch eine Komplexitätsstufe höher liegt. Es gibt da zusätzlich noch die Kaskade zu beachten, weil auch diese custom Eigenschaften der Kaskade gemäß vererbt werden. Und hier ist das Eingreifen mit JS deswegen eben deutlich komplexer, auch wenn es verzwickte Anwendungsfälle von der Notation her wesentlich vereinfacht und sehr zuverlässige Funktionalität bietet.

Liebe Grüße

Felix Riesterer