JavaScript und CSS

[Matthias Scharwies]

Guten Morgen,

ich möchte gemeinsam mit euch Nr. 5 unserer Baustellen diskutieren:

5. 🛠  JavaScript und CSS
   • alles rund um das Thema „CSS durch JS Ändern“. Vieles ist mittlerweile durch den Einsatz von custom properties überholt - der Rest müsste sortiert und aktualisiert werden.

Ich habe angefangen das Tutorial von @molily , das aus dem Jahre 2006-07 stammt, in Einzeltutorials zu zerlegen und zu aktualisieren:

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.

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

Mir ist z.B. aufgefallen, dass in der Seite nennen wir sie mal CSS-Manipulation durch JavaScript, nicht angegeben wurde, dass man mit der Methode add mehrere Klassen gleichzeitig hinzufügen kann.

Das ist gefixt!

Zum Schluss gibt es einen Abschnitt, der das Setzen von Custom propertys mit setProperty, bzw. das Auslesen mit getPropertyValue() vorstellt.

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

Könntet ihr den Artikel bitte gegenlesen / redigieren?

2. JavaScript und CSS/CSS-Eigenschaften auslesen

Dieses Kapitel vergleicht das legacy getComputedStyle mit getBoundingClientRect und computedStyleMap und stellt dann die imho „praktischeren“ Technologien resizeObserverund matchMedia vor.

Vorhandene Seiten der Elementreferenz sollen natürlich bleiben; von Seiten wie clientWidth, clientHeight, offsetWidth und offsetHeight muss eine Verlinkung erfolgen!

Exkurs: Wiki-Struktur

Da ist mir einfach aufgefallen, wie sich der JavaScript-Bereich in alle Richtungen entwickelt hat.

Stefan Münz hatte in der Doku alle Eigenschaften und Methoden auf einer langen Seite angeordnet. → wird irgendwann zu lang

Dogma des Wiki war die Auftrennung in einzelne Seiten. Manche der „unwichtigeren“ Eigenschaften wie JavaScript/DOM/Element/clientWidth sind Stubs, von denen auch kein Link zu „ergiebigeren“ Seiten führte. → man findet bei euch nix!

2015 trennte @Orlok Node- und Element-Schnittstellen, weil das „ja was ganz anderes sei“. Mittlerweile ist die style-Eigenschaft über HTMLElement zur JavaScript/DOM/ElementCSSInlineStyle-Schnittstelle gewandert - Unbedarfte würden das aber wohl doch bei Element suchen und nicht finden. Eine Übersichtsseite mit nur einer Methode sorgt für keine Übersicht.

(Auch das bestehende Tutorial JavaScript/Tutorials/JavaScript und CSS war zwar bei JS, aber nicht bei CSS gelistet - das ist jetzt mein Ziel, das alles sichtbar und vorzeigbar zu präsentieren.)

computedStylemap

Ich finde, dass die Methode hier hin gehört - aber eben auch zu CSS Typed OM.

Wo soll CSSStyleValue hinführen - zu diesem Beispiel oder einem Grundlagen-Tutorial?

Da müsste man noch diskutieren, wie der Übergang aussieht.

ResizeObserver

Da mach' ich noch ein Beispiel!

Könntet ihr den Artikel bitte gegenlesen / redigieren?

3. JavaScript und CSS/Stylesheets dynamisch wechseln

Eigentlich eher ein legacy-Artikel, andererseits verwenden wir diese Technologie in unseren fertigen Beispielen, wie der neue Siehe auch-Abschnitt zeigt.

4. JavaScript_und_CSS/Stylesheets_dynamisch_ändern

Das ist ein Stub. Neues Thema sollte ein Tutorial über CSSOM und evtl. auch CSS Typed OM sein. In der Spec ist dann gleich CSS.escape() mit drin, 7.5. The CSS namespace, and the supports() function aber woanders.

Inwieweit man das zusammen erklären kann oder sollte, weiß ich nicht! Da würde ich gerne intensiv diskutieren, auch inwieweit wir etwas wie CSS Typed OM, das vom Firefox in den letzten 3 Jahren nicht aufgenommen wurde, behandeln müssen. (Komisches Gefühl, das ein Beispiel im MDN Fehler wirft, weil es die Methode nicht kennt - ich sollte den Browser wechseln!)

Das würde ich gerne am 06.03. am Stammtisch diskutieren.

Herzliche Grüße

Matthias Scharwies

[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

[Matthias Scharwies]

Servus!

Lieber Matthias,

einige Formulierungsideen, die aus dem Stammtisch klarer geworden sind.

1. JavaScript und CSS/CSS-Eigenschaften setzen

danke, das werde ich am Samstag morgen anschauen und einbauen!

@Matthias Scharwies

matchMedia und ResiveObserver umdrehen und dann auf container queries verweisen - heute geht sowas ohne JS!

• Fazit, das auf media queries ohne JS verweist!

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

wie heute besprochen:

CSS-Eigenschaften auslesen

• sollte zu Beginn darauf hinweisen, dass JavaScript+CSS nicht immer der richtige Weg ist. Größenanpassungen können zumeist via CSS Layout erreicht werden. Nicht immer, klar.
• Keine Empfehlung, welches Werkzeug das richtige ist, wir stellen hier nur vor, wie man CSS Werte ausliest.
• inhaltlich
  • Element.style liest nur die Eigenschaften aus, die direkt via style- Attribut zugewiesen sind
  • getComputedStyle() sammelt über die Kaskade alle zugewiesenen Eigenschaften ein, die gerade gelten
  • computedStyleMap() liefert ein ähnliches Objekt, aber im Typed OM
  • Meine Vermutung, dass bspw. width nicht den realen Wert liefert, sondern nur den per Stylesheet gesetzten Wert, der aber vom Layoutmodell nochmal geändert werden kann, ist falsch. Ein Element in einer Flexbox, das von der Flexbox vergrößert wird (flex-grow:1), liefert als width die echte Breite.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

wie heute besprochen:

Das ist schon wieder 2 Wochen her!

Hier die Portalseite mit Cards: JavaScript und CSS

Die Cards müssen morgen einzeln diskutiert und notfalls geändert werden.

• 1. CSS-Eigenschaften_setzen

Zuerst doch Style, als Hinführung ein kleines Beispiel mit hidden.

… dann erst classList und dann setProperty()

Lustig: Beispiel:Klassen_mit_JavaScript_umschalten_und_mit_CSS_nutzen hat Felix gar nicht mehr als seine Arbeit erkannnt! 😀

2. CSS-Eigenschaften auslesen

• sollte zu Beginn darauf hinweisen, dass JavaScript+CSS nicht immer der richtige Weg ist. Größenanpassungen können zumeist via CSS Layout erreicht werden. Nicht immer, klar.

Das haben @Felix Riesterer und ich gemeinsam formuliert. Jetzt müsste es (über)deutlich sein!

• Keine Empfehlung, welches Werkzeug das richtige ist, wir stellen hier nur vor, wie man CSS Werte ausliest.
• inhaltlich
  • Element.style liest nur die Eigenschaften aus, die direkt via style- Attribut zugewiesen sind
  • getComputedStyle() sammelt über die Kaskade alle zugewiesenen Eigenschaften ein, die gerade gelten
  • computedStyleMap() liefert ein ähnliches Objekt, aber im Typed OM
  • Meine Vermutung, dass bspw. width nicht den realen Wert liefert, sondern nur den per Stylesheet gesetzten Wert, der aber vom Layoutmodell nochmal geändert werden kann, ist falsch. Ein Element in einer Flexbox, das von der Flexbox vergrößert wird (flex-grow:1), liefert als width die echte Breite.

Ja, da ist aber nicht viel geändert; das war schon so!

4. CSSOM_und_Typed_OM

Ein Grundlagenartikel.

Beim Typed OM müssen wir überlegen, was mit dem 2. Teil der Blog-Serie zu Houdini passiert. Sie ist im Okt. 21 als Entwurf steckengelieben. Browsermäßig hat sich nicht viel getan. Das müssen wir diskutieren.

Herzliche Grüße

Matthias Scharwies