molily: Welcher Browser unterstützt transform-style: preserve-3d?

Beitrag lesen

Schon der CamelCaseHelper dürfte viele überfordern. Ich verstehe zwar den Code (wahrscheinlich nur, weil ich weiß,  was als Ergebnis geliefert werden soll), wäre aber nie auf diese Idee gekommen.

Für die Feature-Abfrage ist der Helper nur ein Implementierungsdetail, ich kann ihn aber gerne beschreiben.

CSS-Eigenschaften verwenden Bindestriche, die zugehörigen JavaScript-Objekteigenschaften hingegen camelCase. Beispiel: background-color > backgroundColor. Die camelize-Funktion wandelt die Eigenschaft entsprechend um.

Dazu könnte man einen kleinen Parser schreiben: Eine Schleife durchläuft den String und fügt das aktuelle Zeichen an einen neuen String. Findet man einen Bindestrich, wird dieser ignoriert und mithilfe eines Flags das nächste eingelesene Zeichen in einen Großbuchstaben umgewandelt.

Einfacher geht es mittels Suchen/Ersetzen mit einem regulären Ausdruck. Finde beliebige Zeichen, die auf einen Bindestrich folgen:

/-./

Diese Zeichenfolge wollen wir nun durch das gefundene Zeichen ersetzen, nachdem es mit http://de.selfhtml.org/javascript/objekte/string.htm#to_upper_case@title=toUpperCase behandelt wurde.

Die replace-Methode erlaubt es, als zweiten Parameter anstelle eines festen Strings eine Callback-Funktion anzugeben. Schema:

[String].replace([RegExp], [Function])

Diese Funktion wird für jeden Treffer ausgeführt. Sie bekommt den gesamten Treffer sowie die Teiltreffer in Klammern (Submatches) als Parameter übergeben und kann einen String zurückgeben, der den Treffer ersetzt. Damit lässt sich ein individueller Ersatz für jeden Treffer erzeugen. Erster Versuch:

"foo-bar-qux".replace(/-./g, function(match) {  
  return match.toUpperCase();  
});

Ergebnis: "foo-Bar-Qux"

Jetzt müssen wir noch den Bindestrich ignorieren. Dafür können wir mit Submatches arbeiten (ginge auch anders, z.B. mit http://de.selfhtml.org/javascript/objekte/string.htm#substring@title=substring(1)). Wir klammern einfach den ».«-Platzhalter:

"foo-bar-qux".replace(/-(.)/g, function(match, submatch) {  
  return submatch.toUpperCase();  
});

Den gesamten Match ignorieren wir, sondern benutzen nur Submatch und rufen toUpperCase auf.

Ergebnis: "fooBarQux"

Das ist eigentlich alles. Die Funktion, die ich gepostet habe, ist noch etwas flexibler, aber für den hiesigen Anwendungsbereich würde obiges ausreichen.

Mathias