Neue Version von cssRule()

[Cybaer]

Hi,

ich habe eben eine neue Version von Coding: CSS-Regeln auslesen & ändern auf meinen Server geschoben.

Bisher war es ja möglich,
 - Regeln per Adresse ("1/0" für 2. Sheet, 1. Regel) oder
 - per Selektor (".myClass") anzusprechen und
 - sich das Style-Objekt der Regel zurückgeben zu lassen

Zusätzlich können jetzt die Stylesheets auch nach Medientyp unterschieden werden (".myClass@print") und das Stylesheet-Objekt der Regel ist ermittelbar (z.B. um den URL eines externen Stylesheets mit der gewünschten Regel zu ermitteln). Außerdem werden illegale Zugriffe auf externe Stylesheets von fremden Servern jetzt abgefangen. D.h., man kann bedenkenlos auch Stylesheets von fremden Servern einbinden - sie werden nicht durchsucht.

Eine kleine Doku und eine Testseite gibt es mittlerweile ebenfalls ...

Gruß, Cybaer

[Jeena Paradies]

Hallo,

Ich las mit Interesse deine Beschreibung, vor allem dieser Satz ließ mich aufchorchen:

»Ein hoher Nutzen also für den Webautor, durch die problemlose
   Scriptanwendung dank UJS - eine unschöne wie irritierende
   "Zappelei" für den Besucher ...«

Da ich an diesem Problem schon wirklich lange knabbere und es bischer immer nur Serverseitig lösen konnte, wenn Leute ohne JS auch an die zugeklappten Inhalte kommen sollten und es gleichzeitig nicht zappeln sollte.

Allerdings verstehe ich nicht wie man mit deiner Funktion genau das Verhindern kann?

Grüße
Jeena Paradies

[Cybaer]

Hi,

»Ein hoher Nutzen also für den Webautor, durch die problemlose
   Scriptanwendung dank UJS - eine unschöne wie irritierende
   "Zappelei" für den Besucher ...«
Da ich an diesem Problem schon wirklich lange knabbere und es bischer immer nur Serverseitig lösen konnte, wenn Leute ohne JS auch an die zugeklappten Inhalte kommen sollten und es gleichzeitig nicht zappeln sollte.

Ggf. schalte ich den Inhalt erst im onLoad-Event sichtbar (s. showMore, wo ich das Problem auf eben diese Art gelöst habe).

Ich gestehe allerdings freimütig, daß ich ja zusätzlich zu CSS oft immer noch ein "stabiles, abwärtskompatibles" Tabellenlayout bevorzuge. Und da erscheint der Inhalt ja ohnehin erst, wenn fertig gerendert wurde, wobei die CSS-Manipulationen von mir bereits *vor* dem onLoad-Event vollzogen werden. ;)

Ohne Tabellenlayout mache ich die Manipulationen dann direkt hinter dem HTML-Element (OK, dann hat es sich was mit UJS, aber was soll's).

Allerdings verstehe ich nicht wie man mit deiner Funktion genau das Verhindern kann?

Die Manipulation der Stylesheets hat den großen Vorteil, daß man sie manipulieren kann, *bevor* überhaupt ein BODY existiert (geschweige denn die Elemente in ihm, die man eigentlich beeinflussen möchte). D.h., man kann mit (U)JS *zwischen* STYLE- und BODY-Tag tun, was zu tun ist (Farben setzen, Elemente ausblenden, etc.). Wenn die Elemente dann tatsächlich kommen, ist alles bereits fertig.

S. das (mittlerweile 2.) Beispiel: Dort sind 2 Tabellenspalten, die eingefärbt werden sollen. Ursprungsfarbe ist schwarz. Mit cssRule() wird die Hintergrundfarbe der linken Spalte auf blau gesetzt, mit toggle() die rechte Spalte auf silber und erneut mit cssRule() dann auch die linke Spalte auf silber.

Daraus lassen sich folgende Unterschiede ableiten:
 1. toggle() (also die Bearbeitung aller betreffenden HTML-Elemente in einer Schleife) dauert was die reine JS-Laufdauer angeht länger als cssRule(), sobald mehr als ca. 200 HTML-Elemente zu verändern sind.
 2. Die reine Umsetzung der dynamischen Style dauert in beiden Fällen ähnlich lange (die Rendering-Engine ist *deutlich* langsamer als die reine JS-Ausführung!).
 3. toggle() kann erst eingesetzt werden, nachdem die HTML-Elemente existieren, cssRule() bereits vorher (schön sichtbar am Umstand, daß die linke Spalte schon mit blauem Hintergrund erscheint, während der silberne Hintergrund auf sich warten läßt - der erste cssRule()-Aufruf steht direkt hinter dem STYLE-Tag).
 4. Mit cssRule() lassen sich die HTML-Elemente je nach Ausgabemedium steuern. D.h., wenn der Surfer z.B. einen Text ausblenden möchte, so kann man es so machen, daß nur der Text auf dem Bildschirm versteckt wird, im Ausdruck aber weiterhin erscheint.

Ich habe heute auch noch eine weitere Testseite hochgeladen, die einfach mal diverse Regeln & Stile ausliest, bzw. verändert. Hier werden z.B. auch gezielt die Schriftgrößen für den Ausdruck geändert.

cssRule() hat halt den Vorteil, sich direkt auf die mit STYLE und LINK eingebunden Stylesheets beziehen zu können (schreibend wie lesend). Wenn man das nicht braucht, kann man natürlich im UJS auch ein eigenes Stylesheet einbinden (indem man halt on-the-fly genau die STYLE- und/oder LINK-Elemente erzeugt, die man für seine Manipulationen braucht).

En "Zappel-Problem" bleibt allerdings: Dann nämlich, wenn man, wie z.B. in showMore(), nicht nur die Stile ändert, sondern nachträglich neuen Inhalt hinzufügt (in diesem Fall halt die "mehr"-Links). Allerdings ist diese "Klein-Zappelei" kaum der Rede Wert, im Vergleich zur Masse des verschwindenden Contents.

Man könnte also z.B. mit cssRule() den Content einklappen, und wenn das geklappt (;-)) hat, mit innerHTML & Co. den Link zum Anzeigen reinbauen. Geschickt gemacht dürfte sich die Irritation in Grenzen halten.

Gruß, Cybaer

[Jeena Paradies]

Hallo,

Die Manipulation der Stylesheets hat den großen Vorteil, daß man sie manipulieren kann, *bevor* überhaupt ein BODY existiert (geschweige denn die Elemente in ihm, die man eigentlich beeinflussen möchte). D.h., man kann mit (U)JS *zwischen* STYLE- und BODY-Tag tun, was zu tun ist (Farben setzen, Elemente ausblenden, etc.). Wenn die Elemente dann tatsächlich kommen, ist alles bereits fertig.

Aaaaahh! Jetzt endlich verstehe ich wie das funktioniert. Und jetzt endlich verstehe ich was du mit Sorgenkind Opera meinst. Da funktioniert das ja leider nicht wie ich jetzt auch festgestellt habe.

Das letzte mal das ich es sah war bei Gerrit: http://praegnanz.de er hat da ja auch das Problem, welches er mit hilfe von :hover für die, die JS aus haben zu lösen versuchte (funktioniert dann natürlich nicht mehr im IE).

Vielen Dank für die lange erklärung, jetzt habe ich schon Ideen wo ich so etwas eventuell einsetzen könnte.

Grüße
Jeena Paradies

[Cybaer]

Hi,

Und jetzt endlich verstehe ich was du mit Sorgenkind Opera meinst. Da funktioniert das ja leider nicht wie ich jetzt auch festgestellt habe.

Ja. Aber was DHTML angeht, sind (die ohnehin sehr wenigen) Opera-Surfer, aufgrund dessen JS-Unzulänglichkeiten, bei mir unter der Rubrik "kann, aber muß nicht" einsortiert (gleich neben NN4). Und da DHTML-Seiten ohnehin auch für JS-lose und andere ältere Browser inhaltlich nutzbar sein sollten, sehe ich da auch kein Problem ...

jetzt habe ich schon Ideen wo ich so etwas eventuell einsetzen könnte.

Der Appetit kommt beim Essen ... ;)

Auf der "CR-Agenda" stehen übrigens noch Dinge wie Regeln/Stylesheets erstellen, ersetzen und löschen und ermitteln von Style- & Regel-Collections ...

... sowie vielleicht eine Caller-Library, die die cssRule()-Funktionalität und eher komplexe Syntax mithilfe logischer Einzelaufrufe oder -methoden (a la setRuleBySelector() etc.) verständlicher nutzbar macht.

Gruß, Cybaer