zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Autonome CSS3-Ersetzungs-Bibliothek

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.12.2010, 15:20
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 206
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Frage 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2010, 00:21
Benutzerbild von stravid
Human Compiler
XHTMLforum-Mitglied
 
Registriert seit: 16.01.2008
Ort: Austria
Beiträge: 186
stravid befindet sich auf einem aufstrebenden Ast
Standard

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)); }
Du benützt in deiner nicht funktionierenden Variante (Autonomous replacing of CSS3 vendors in Stylesheets (NOT WORKING)) einen Iterator (i) in deiner for-Schleife der in anderen Bereichen deines Programmes immer auf "0" zurück gesetzt wird. Deswegen bleibt die Schleife auch bei dem Wert 1 hängen.

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2010, 01:59
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 206
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Wow, danke...darauf wäre ich nicht gekommen!

Zu Punkt 1. muss ich aber sagen, dass JSLint den Codeaufbau meiner document.getElementsbyClassName function nicht rafft =/

Danke für die Tipps!
__________________
Ich bin keine Signatur, ich putz hier nur
Mit Zitat antworten
  #4 (permalink)  
Alt 16.12.2010, 11:51
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.01.2006
Beiträge: 206
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:33 Uhr.