CSS des DOM zurücksetzen

[Ida Dieda]

Hallo,

...der Vorbeitrag von Felix Riesterer "Mit CSS einen Browser crashen" passt thematisch PERFEKT XD (bin echt abgebrochen, als ich den Beitrag sah)

...ich sitze gerade vor ellenlangem [redundantem?] Javascript Code und kann mir einfach nicht vorstellen, dass diese Art und Weise von Umsetzung wirklich "Best Practice" sein soll ...?

Im Prinzip versetze ich sämtliche CSS Ausformulierungen des DOM via Javascript wieder in ihren Ursprungszustand zurück, daher gemäß extern verlinkten Stylesheets.

Mithilfe querySelectorAll lässt sich natürlich über sämtliche davon betroffene Elemente iterieren; - allerdings beschleicht mich nach mittlerweile > 30 Zeilen Code (reine CSS Anweisungen in Javascript!) immer mehr das dumpfe Gefühl, dass sich Experten (wie eben hier in der Community) von dieser Brachialmethode mit Grauen abwenden würden.

Daher: gibt es für mein Vorhaben eine elegantere Methode? Sowas wie "löse "Ursprungsdatei".css erneut aus? (Man könnte da mit AJAX allerhand basteln, nur unter Gesichtspunkten der Performance erscheint es mir dann doch effektiver, den Code in Javascript auszudrücken als extra eine weitere Serveranfrage zu starten... ...?)

An alle Leute, die Code nicht nur rein nach den Gesichtspunkten seiner Funktionalität bewerten - danke für euren Input.

LG, Ida.

[Felix Riesterer]

Liebe Ida,

ich glaube, ich verstehe nicht so ganz, was Du willst. Aber gut, versuchen will ich es.

Daher: gibt es für mein Vorhaben eine elegantere Methode? Sowas wie "löse "Ursprungsdatei".css erneut aus?

Du kannst jederzeit ein link-Element an das Ende des head Deines Dokuments setzen, welches ein externes Stylesheet referenziert. Aber das sollte nicht nötig sein, wenn es ein solches link-Element bereits dort gibt.

(Man könnte da mit AJAX allerhand basteln, nur unter Gesichtspunkten der Performance erscheint es mir dann doch effektiver, den Code in Javascript auszudrücken als extra eine weitere Serveranfrage zu starten... ...?)

Genau das Gegenteil dürfte der Fall sein. Die Anfragen nach zusätzlichen Dateien werden in HTTP2 nach Möglichkeit zusammengefasst, so dass der frühere Overhead mit dem Nachladen von externen Stylesheets nicht mehr vergleichbar ist. Außerdem gibt es ja noch das Caching des Browsers, denn die CSS-Datei wird sich seit dem letzten Laden nicht verändert haben.

Das Manipulieren des DOM ist dagegen von der Performance deutlich teurer. Auf schnellen Maschinen magst Du vielleicht keinen Unterschied fühlen, aber das bedeutet nicht, dass das unbedingt gegen ein Nachladen spricht!

Es sollte Dein Grundsatz sein und bleiben, dass man mit JavaScript das DOM sehr geschickt manipulieren kann, damit gut geschriebener CSS-Code seine Wirkung entfalten kann. Dazu kannst Du class-Attribute verwenden, die Du mit JavaScript dynamisch setzt (oder entfernst), oder sogar indem Du data-*-Attribute zu diesem Zweck einsetzt. Mit dem style-Objekt von HTML-Elementknoten solltest Du wahrhaftig nicht hantieren.

Was Du aber auch tun kannst, ist das Entfernen eines link-Elements aus dem head des Dokuments, womit alle seine enthaltenen Layout-Anweisungen ebenso verschwinden und ihre Gültigkeit verlieren.

Liebe Grüße,

Felix Riesterer.

[Ida Dieda]

Ok, danke Felix!

Ich werde die Elemente wohl einfach über ihre Klasse ansprechen, und so die ursprünglichen CSS Zuweisungen neu auslösen.

[Regina Schaukrug]

Willst Du vielleicht sowas?

• https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet/disabled
• https://stackoverflow.com/questions/10564806/html-link-stylesheet-disabled-attribute

[Rolf B]

Hallo Ida,

ich verstehe das Problem nicht. Eine CSS Datei wird nicht „ausgelöst“. Sie wird geladen, ab dann gelten die in ihr definierten Regeln. Oder auch nicht, wenn andere Regeln Vorrang haben.

Dieser Vorrang kann sich verändern, wenn man das link Element, das eine CSS Datei lädt, per DOM Manipulation entfernt und neu einfügt, weil dann die Ladereihenfolge anders ist. Letztes Kriterium der Vorrangregeln bei CSS ist diese Reihenfolge.

Ein „Wiederherstellen der ursprünglichen CSS Zuweisungen“ kann sich also nur darauf beziehen, eventuelle an Elementen direkt gesetzte Klassen oder Styles zu entfernen. Dafür musst du über das DOM laufen, ja. Aber das ist trotzdem tricky. Um den „ursprünglichen“ Zustand wieder herstellen zu können, musst du ihn erstmal kennen. Das DOM liefert dir das nicht. Du könntest höchstens nach dem Laden der Seite einen Snapshot anfertigen und denn als Vorlage verwenden. Narrensicher ist das auch nicht, das DOM ist schließlich zum Manipulieren gedacht und dein Snapshot passt eventuell nicht mehr.

Welches Problem willst du durch dein „erneutes Auslösen des CSS“ denn lösen? Möglicherweise gibt es einen anderen Weg.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ein „Wiederherstellen der ursprünglichen CSS Zuweisungen“ kann sich also nur darauf beziehen, eventuelle an Elementen direkt gesetzte Klassen oder Styles zu entfernen. Dafür musst du über das DOM laufen, ja.

Nein, musst du nicht. Es gibt die Schlüsselwörter initial und unset.

☞ Guckst du.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

zum einen kannte ich diese Schlüsselwörter nicht und ich kann auch nicht behaupten, dass ich verstehe was sie tun sollen. Was ist der „ursprüngliche Wert“? Es gibt eine Menge Einflussgrößen auf das Styling eines Elements. Meint „ursprünglich“ so viel wie „tue so als gäbe es keine Autoren-Stylesheets, verwende nur Browser- und User-Stylesheets“?

Ich bin nicht sicher, ob es das ist, was Ida braucht. Für mich klingt die Aufgabenstellung nach „mache alles rückgängig, was diverse Javascript-Aufrufe verwurschtelt haben“. Und diese Aufgabenstellung klingt nach einem Workaround. Deswegen hatte ich die Rückfrage nach dem Problem gestellt, das durch diese Funktion gelöst werden soll. Ein „CSS Reset“ ist es sicherlich nicht (den würde man auch anders lösen).

Rolf

[beatovich]

hallo

@@Rolf B

Ein „Wiederherstellen der ursprünglichen CSS Zuweisungen“ kann sich also nur darauf beziehen, eventuelle an Elementen direkt gesetzte Klassen oder Styles zu entfernen. Dafür musst du über das DOM laufen, ja.

Nein, musst du nicht. Es gibt die Schlüsselwörter initial und unset.

☞ Guckst du.

Das Anliegen ist nicht, jegliches Autoren CSS auf den initialen Zustand zurückzusetzen, sondern nur jenes CSS anzuwenden, welches über <link rel="stylesheet"> eingebunden wurde.

In Anbetracht dessen, dass Javascript nur später verfügbar ist (falls überhaupt), können wir das Bereinigen des DOM erst später durchführen.

Bis wir zu diesem Zustand gelangen, kann aber ein via <style> früh im DOM gesetzts CSS helfen

*, *:focus, *:hover, *::after, *::before {all:initial !important}