|
||||
Autonome CSS3-Ersetzungs-Bibliothek
Hallo allerseits,
Ich unterhalte nebenher ein HTML5 und CSS3 Präsentationsframework namens "webslide.me" (Portal | webslide.me | Online HTML5 Slides Presentation Framework). Zur Zeit versuche ich, eine CSS3-Detection Bibliothek zu basteln, die in der Lage ist, den Vendor-Support der einzelnen Browser zu erkennen und dementsprechend die Stylesheets anzupassen. Die einzige Möglichkeit, in allen Browsern die Stylesheets anzupassen, ist, ein <style>-Element zu verwenden. Also müssen die <link> Elemente in <style> Elemente gewandelt werden. Hier ist eine Quick 'n Dirty Demo um zu zeigen, was ich meine: (Ich habe hier auf JSON Struktur verzichtet, um Fehler besser ausfindig zu machen, zwecks Scoping etc.) Autonomous replacing of CSS3 vendors in Stylesheets Erklärungen zu der Datei: Es wird console.log aufgerufen - Firebug, WebKit oder IE Dev Tools. Zuletzt wird http://webslide.me/css/_testsheet.css heruntergeladen und die Datei mit den Vendors des jeweiligen Browsers ersetzt. Beispielsweise müsste dann im DOM in Firefox 3.6 -moz-transform anstelle von transform stehen. Alles schön und gut, das ganze funktioniert einwandfrei, wenn die get_stylesheet Funktion einzeln aufgerufen wird. Wenn ich nun aber die get_stylesheet Funktion in einer Schleife aufrufen möchte, bleibt der Browser zufällig bei irgendeinem Stylesheet hängen. Auch wenn diese Schleife nach "DOMContentLoaded" aufgerufen wird besteht das gleiche Problem. Der Browser läuft in einer Endlosschleife ab, ohne irgendeinen Grund. Anscheinend läuft hier irgendwas im XHR falsch, aber ich komm' nicht drauf, was es sein könnte. Der DOM wird nicht modifiziert, also kann's nicht an der _links.length oder anderen Schleifen-Bedingungs-Fehlern liegen. Vielleicht hat ja jemand von euch eine Idee? Das Problem-Kind (ACHTUNG, Browser schmiert wahrscheinlich ab!) ist hier: Autonomous replacing of CSS3 vendors in Stylesheets Das Seltsame hier ist, dass die Schleife falsch läuft! von 0 auf 2, und dann läuft das Ding unendlich. Obwohl ich nirgends die Schleifenvariable i beeinflusse!?!?!? Hoffe ihr habt eine Idee und Danke schonmal |
Sponsored Links |
|
||||
Getestet in Chrome 9.0.597.16 dev
Ich habe auf der funktionierenden Seite (Autonomous replacing of CSS3 vendors in Stylesheets) folgenden Code in die Console eingetippt und als Ausgabe alle Stylesheets bekommen. Code:
for(var cc = 0; cc < _links.length; cc++) { console.log(get_stylesheet(_links[cc].href)); } In meinem Testcode habe ich erstens den Iterator umbenannt und ihn auch lokal gemacht, deswegen funktioniert es bei mir. Wie vermeidest und findest du solche Fehler in Zukunft? 1) Benütze JSLint um deinen Sourcecode zu checken. Du hast ein paar grobe Schnitzer drinnen.. ala "a = b" anstatt "a == " bei Vergleichsoperationen. 2) Schau dir die Debug Funktionen von WebInspector und Firebug an, so habe ich zum Beispiel diesen Fehler gefunden / verifiziert. Schritt für Schritt durch das Programm gehen. 3) Vermeide Globale Variablen. Schönen Abend noch
__________________
David Strauß - stravid.com |
Sponsored Links |
|
||||
Habe grade zufällig die alte fehlerbehaftete Variante mit Firefox 3.6.13 geöffnet. Hier funktioniert sie einwandfrei (mit der globalen i) - in Firefox 3.6.12 (Windows VM) funktioniert es nicht. Auch nicht mit der aktuellen Firefox beta (Ubuntu).
Sehr konfus. Anscheinend wird da einiges im Code seitens Firefox umgestellt =) Die benutzen bestimmt selbst eine globale i dafür. In Chromium hingegen ist der Bug anscheinend nur in Varianten vor Version 8, ab dem 9er Branch läuft es einwandfrei. Werde aber in meinen Scripten jetzt mehr auf das Scoping achten, um solche Fehler auszuschließen. Wollte diese Erkenntnis nur hier anhängen.
__________________
Ich bin keine Signatur, ich putz hier nur |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS3 auch bei alten IEs: "CSS3 PIE". Wie bewertet ihr das? | AndreasB | CSS | 9 | 17.11.2010 18:52 |
CSS3 Tutorial – Navigation mit Slide-Effekt ohne JavaScript | Webstandard | Ressourcen | 2 | 01.03.2010 19:26 |
Progressive Enhancement: Euer bereits jetzt eingesetztes CSS3 | AndreasB | CSS | 5 | 20.04.2009 09:56 |
CSS3 - Rückkehr der tabellen-basierten Layouts? | accessoire | CSS | 2 | 16.05.2008 09:49 |
CSS3: Multi-column layout | Safari ? | ulle | CSS | 13 | 07.01.2006 14:07 |