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