Jan 29 2009

“\v”==”v” – 9 Zeichen für IE-Erkennung in Javascript

Tag: JavascriptPatrick @ 11:16 am

Auf der Seite Web Reflections wurde kürzlich ein Wettbewerb ausgerufen mit dem Ziel, den von der Zeichenanzahl kürzesten Weg zu finden, den Internet Explorer in Javascript zu identifizieren.

Solche Weichen werden im Alltag immer wieder gebraucht, um speziellen Browser Extraanweisungen mitzugeben.

Als kürzeste Variante setzte sich der nachfolgender Code durch, der nur im IE (einschließlich 8) “true” zurückliefert, in allen anderen Browsern “false” zurückgibt.

IE="\v"=="v" // true only in IE

Damit zog diese Variante an dem zuvor favorisierten, nachfolgenden Code vorbei:

try{IE=window=!1}catch(e){IE=!0}

Jan 28 2009

YAF4AJN jetzt auch auf Sourceforge

Tag: JSON,PrototypeTobi @ 11:51 pm

Fast 1 Jahr ist es her, als die Deutsche Telekom ihre JSON-Bibliothek YAF4AJN präsentierte. Nun gibt es auch eine offizielle Projektseite bei Sourceforge.net, auf der die Bibliothek unter der LGPL Lizenz veröffentlicht ist. YAF4AJN (ausgesprochen: “ja fein”) ist die Abkürzung für “Yet Another Frontendcontroller for Ajax-Json-Networks”.

Die Bibliothek basiert zwar auf Prototype, ermöglicht aber eine sehr viel striktere Trennung von statischen HTML-Inhalten und dynamischer Werteberechnung, indem die Webseite dem Nutzer sofort angezeigt wird und dann einzubettende Werte asynchron von der Server-Applikation geholt werden. Eine Werte berechnenden Applikation muss also keine HTML-Seiten mehr als Output liefern. Seitenspezifisches Javascript entfällt ebenfalls. Dies ermöglicht u.a. eine frei redaktionelle Bearbeitung und vollständige Verwaltung der Seiten in einem Web Content Managment System.

Auf der Demo-Seite zum Projekt demonstriert die Telekom dieses Verfahren.

Neben der Sourceforge-Projektseite existiert natürlich weiterhin das Developer Portal der Telekom, auf diesem YAF4AJN inklusive einer einfachen “Hello World”-Applikation ebenfalls herunter geladen werden kann.


Jan 26 2009

Viele Wege führen zu runden Ecken

Tag: Allgemeines,Canvas,Javascript,jQueryPatrick @ 7:23 pm

Nachdem ich vor etlichen Wochen mit Liquid Canvas ein Lösung vorgestellt habe, wie man auf einfache Weise im nachhinein seinen Elementen runde Ecken verpassen kann, ließ mich das Thema seitdem nicht mehr los.

Bei der Suche noch dem besten und ultimativen Ansatz habe ich etliche interessante Projekte ausprobiert.

Vier Lösungsansätze möchte ich hier genauer vorstellen und auf den Einbau und deren Funktionsweise eingehen. Zusätzliche werde ich noch ein paar Alternativen nennen.

jQuery Round Corner

Avinoam Henig stellte auf seiner Homepage mit jQuery Round Corners ein insgesamt ziemlich ausgereiftes jQuery-Plugin zur Verfügung.

Um es nutzen zu können, benötigt man eine jQuery-Version ( die aktuelle Version 1.3(.1)  funktioniert auch! ) und Explorer-Canvas. Beide Skripte müssen zusammen mit dem roundCorner-Skript in den Dateikopf eingebunden werden.

Anschließend bettet man beispielsweise solchen Code wie $(‘#roundCorners’).roundCorners(“25px”); ein. RoundCorners erzeugt daraus um (beziehungsweise “hinter”) das Element eine Canvas-Grafik mit runden Ecken.

Der Rahmenradius lässt sich für jede Ecke individuell angeben, zum Beispiel .roundCorners(“25px”, 0, “25px”, 0); . Die erste Angabe steht für die linke obere Ecke, weiter folgen rechts oben, rechts unten und links unten.

Angaben zu Rahmenfarbe und – dicke werden entsprechend der CSS-Formatierung des betreffenden Elements angewendet.

Das Ergebnis kann sich insgesamt in allen gängigen Browsern sehen lassen.

Was ich an dieser Umsetzung merkwürdig finde, ist die Veränderung der Element- / Rahmengröße beim Überfahren mit der Maus.

LiquidCanvas

LiquidCanvas von Steffen Rusitschka ist von der Funktionsweise her dem oben genannten RoundCorners sehr ähnlich. Auch hier wird eine Canvas-Grafik verwendet, die das betreffende Element umfasst.

Ebenfalls benötigt LC jQuery und ExCanvas als eingebundene Header-Files. Zusätzlich müssen beide LC-Dateien (liquid-canvas.js und liquid-canvas-plugins.js) eingebunden sein.

Im Gegensatz zu anderen Implementieren lässt sich der Radius der runden Ecken hier nur für alle Ecken allgemein angeben. Dafür bietet LiquidCanvas die Möglichkeit, linieare Farbverläufe als Hintergrund-Füllfarbe zu nutzen.

Ein typischer Aufruf sieht so aus: $(“#liquidCanvas”).liquidCanvas( “[fill{color:#000000} border{color:#dd0000; width:5}] => roundedRect{radius:25}” );.

Die Farbe und Dicke der Rahmen wird hierbei in dem Aufruf selbst definiert. Das bedeutet aber wiederum, dass man etwaige vorherige Rahmenformatierungen aufheben muss. Dies geht zum Beispiel mit dem Code $(“#liquidCanvas”).css(“border-style”,”none”).

Bei LiquidCanvas fiel mir auf, dass das Skript die padding-Abstände nicht korrekt übernimmt. Hier muss im nachhinein noch Hand an die Elemente gelegt werden, um die Abstände zu korrigieren.

scale9grid

Einen gänzlich anderen Weg geht “Gordon” mit scale9grid. Dieses orientiert sich an der traditionellen Methode zum Erstellen individueller Rahmen mittels div-Verschachtelungen.

Um scale9grid zu nutzen, benötigt man zum einen jQuery, das Plugin scale9grid und eine (größere) Rahmengrafik, die das Aussehen des zukünftigen Elementrahmens beinhaltet.

Um das betreffende Element werden acht div’s angehangen – für jede Richtung eins – und mit einem Ausschnitt der Rahmengrafikdatei beklebt.

Besonders interessant finde ich die Möglichkeit mit jQuery die Hintergrundgrafik erst kurz vor dem scale9grid-Aufruf hinzu zufügen.

Dies sieht dann beispielsweise so aus: $(‘#scale9grid’).css(“background-image”,”url(schwarzrot.png)”).scale9Grid({top:30,bottom:30,left:30,right:30});

Die vier Parameter der Methode bestimmen die Schnittpunkte der Grafik. Der Reihe nach: Abstand von oben, von unten, von links und von rechts.

Was mich an dieser Lösung frustriert, sind die Abweichungen von Breite und padding-Angabe. Diese kann man in der Demo gut nachvollziehen.

dd_roundies

Drew Millers Projekt dd_roundies richtet sich speziell an den Internet Explorer (Version 6). Hierbei nutzt die IE-Vektoren-Auszeichnungssprache VML genutzt, um Vektorgrafiken für den IE zu erzeugen, die runde Ecken darstellen (Anmerkung: Explorer Canvas tut das selbe).

dd_roundies benötigt keine anderen (fremden) Skript-Dateien außer die eigene DD_roundies.js.

Mit der Anweisung DD_roundies.addRule(‘#dd_roundies’, ’25px’, true); kann beispielsweise ein 25 Pixel breiter Rahmenradius erzeugt werden. Auch hierbei können 4 verschiedene Werte (wie "10px 5px 3px 0" als zweiten Parameter) angegeben werden, um jeder Ecke einen indiviuellen Rahmenradius zuzuweisen.

Millers Skript kann jedoch nicht mit table-Elementen und textarea’s umgehen. Desweiteren gibt es aktuell noch etliche Probleme mit der Beta der 8. IE-Generation.

Für Browser, die von Haus aus Rahmenradius-Eigenschaften css-seitig ( -moz-border-radius, -webkit-border-radius oder das W3C-konforme border-radius ) unterstützen, gibt es den optionalen dritten Parameter, der diese nativen Eigenschaft nutzt.

Opera bleibt bei dieser Lösung jedoch außen vor. Zudem sehen die nativen runden Ecken im Firefox 2 sehr dürftig aus, so dass man hier andere Techniken wählen sollte.

Ansonsten erzeugt dd_roundies eine pixelgenaue Übereinstimmung zwischen Firefox 3, Webkit/Safari 3 und IE6 /7.

Auf meiner eingerichteten Demo-Seite kann jeder sich selbst ein Bild über die erzielten Ergebnisse der einzelnen Lösungen machen.

Alternative (jQuery-) Projekte, die sich auch mit runden Ecken beschäftigen:

Fazit

Die perfekte Lösung gibt es noch nicht.

Grundsätzliche bevorzuge ich, soweit es möglich ist, die nativen CSS-Eigenschaften runde Rahmen um Elemente zu erzeugen.

Für IE und Opera bietet es sich, die Projekte, die mit Canvas arbeiten, genauer anzuschauen und eines davon zu nutzen.


Jan 23 2009

Microsoft präsentiert ersten ReleaseCandidate vom IE8

Tag: TrendsPatrick @ 9:56 pm

Der Betriebssystemriese Microsoft veröffentlichte nach zwei Betas eine erste mögliche finale Version der achten Generation des Internet Explorers.

Der ReleaseCandidate lässt sich auf folgenden Windows-Versionen installieren:

  • Windows XP ab ServiePack2
  • Windows Server 2003 ab SericePack2
  • Windows Vista
  • Windows Server 2008

Wie man das Liste entnehmen kann – und wie es auch die Redmonder Entwickler selbst bestätigten – lässt sich der IE8RC1 nicht auf der vor kurzem vorgestellten öffentlichen Windows 7-Beta installieren.

Die Testversion des Vista-Nachfolgers wird von Haus aus mit der zweiten Vorabversion des IE8 ausgeliefert.

Wie bereits bekannt ist, wird der kommende Redmonder Browser vollständige CSS2.1-Unterstützung bieten. Als einziges CSS3-Modul wird die Eigenschaft writing-mode zum Anzeigen vertikalen Schriftverlaufs unterstützt werden.

Vermissen wird man die Unterstützung nativer runder Ecken mittels border-radius, genauso wie die Unterstützung von Canvas und SVG.

All dies soll dann mit dem Nachfolger IE9 geboten werden. Wann auch immer der kommen mag… wohl etliche Jahre zu spät.

Ein Erscheinungstermin der finalen 8er-Version steht noch nicht fest. Man darf aber spekulieren, dass Microsoft diesen an das Veröffentlichen von Windows 7 koppeln wird.

Das neue Betriebssystem wird – so vermutet man – Ende Herbst, spätenstens Anfang Dezember, in den Händlerregalen stehen, und so wird auch der IE8 im selben Zeitraum auf die Festplatten wandern.


Jan 18 2009

jQuery 1.3 greift die Konkurrenz an

Tag: jQueryPatrick @ 10:34 pm

Die jQuery-Entwicker präsentierten vor wenigen Tagen mit Version 1.3 ihrer Javascript-Bibliothek ein sehr auf Performance und Programmiererfreundlichkeit getrimmtes größeres Release.

Kernstück ist die neue CSS-Selector-Engine Sizzle. Sizzle wurde als eigenständiges Projekt von jQuery entwickelt und steht jedem zur Verwendung frei zur Verfügung. Mit allen gängigen Selektoren und Browsern bietet die von John Resig entwickelte Engine die beste Performance.

Mit den neu eingeführten “Live Events” haben JS-Entwickler nun eine sehr einfache (und coole) Methode zur Verfügung, die Ereignisse sowohl an bestehende als auch an zukünftige Elemente bindet.

Folgendes Code-Beispiel soll das Vorgehen verdeutlichen:

$("p").live("click", function() {
$(this).after("Another paragraph!");
});

An ein p-Element wird ein Klick-Ereignis gebunden, das bei Aktivierung einen weiteren Paragraphen erzeugt, dem sofort ebenfalls das Klick-Event zugewiesen wird.

Möglich wurde dies durch den 30 mal schnelleren Auswahlfilter (in englisch: Delegation Filter) in Sizzle, der in anderen Implementierungen seinesgleichen sucht.

Komplett überarbeitet wurde auch das jQuery.event-Objekt. Es verhält sich nun in allen moderen Browser nach den Vorgaben des W3C.

Sämtliche HTML-Einfügemethoden wie append(), prepend(), before() und after() wurden einer Generalüberholung unterzogen. Vom einstige Flaschenhals ist nicht mehr viel zu merken. Das Code einfügen geht nun im Schnitt mehr als 6 mal schneller von statten.

Die offset()-Methode wurde auch grundlegend überarbeitet. Browserunterschiede wurden auch hier einfacher beseitigt und die Ausführungsgeschwindigkeit verdreifacht.

Achtung! Aufpassen sollten all diejenigen, die mit Attributfiltern gearbeitet haben. Die ehemalige Syntax [@attribute] werde entfernt. Einfach das @ im Code entfernen und schon funktionierts.

Ingesamt hielten über etliche Hundert Überarbeitungen und Neuerungen Einzug in jQuery 1.3. Daher lautet mein Fazit:  Sehr empfehlenswert!


Jan 10 2009

CSS-Stylesheets zur Laufzeit mit Javascript erzeugen

Tag: Canvas,JavascriptPatrick @ 6:50 pm

An dieser Stelle möchte ich eine relative unbekannte Möglichkeit zur Manipulation des Aussehens von Webseiten vorstellen, über die ich selbst erst vor wenigen Tagen gestolpert bin. Die Rede ist von DOM CSS.

In den meisten Anwendungsfällen ändert man das Erscheinungsbild von Elementen, indem man diese direkt anspricht (zum Beispiel mit getElementById(id) ) und mittels style-Attribut beeinflusst.

Mit DOM CSS ist es möglich, solche Änderungen in CSS-Regeln wie div.menu { color: black } durchzuführen. Dazu bieten alle modernen Browser Funktionen zum Entfernen bestehender und zum Erstellen neuer CSS-Regeln.

Dabei halten sich die meisten Browser-Entwickler an die W3C-Vorgaben, nur Microsofts Internet Explorer – wie so oft – nicht. Dennoch bietet der IE ähnliche Funktionen.

Grundsätzlich adressiert man zuerst das Stylesheet, das man mit Javascript beeinflussen will. Dies kann man zum Beispiel über die getElement-Methoden tun.

Das document-Object stellt mit document.styleSheets[index] eine weitere Möglichkeit zum Ansprechen von Stylesheets zur Verfügung, womit sowohl alle internen style-Elemente als auch alle externen, mit link erzeugten CSS-Definitionen erreicht werden können.

In standardkonformen Browsern greift man mit cssRules[index] auf bestehende CSS-Regeln zu, der IE reagiert nur auf die MS-eigene Methode rules[index].

Anschließend kann man mit dem style-Attribut wie gewohnt die Eigenschaftswerte verändern. Zum Beispiel:

document.styleSheets[0].cssRules[0].style.backgroundColor = "yellow";

Außerdem gibt es die Möglichkeit mittels der selectorText-Methode den Selector eines CSS-Regel auszulesen. Damit lässt eine Schleife konstruieren, die alle CSS-Regeln nach einem bestimmten Eintrag durchsucht, wie nachfolgend demonstriert:

if( document.styleSheets[0].cssRules ) {
	var myrules = document.styleSheets[0].cssRules;
} else {
	if ( document.styleSheets[0].rules ) {
		var myrules = document.styleSheets[0].rules;
	}
}

if( myrules ) {
	for( i = 0; myrules[i]; i++ ){
		if( myrules[i].selectorText == "p"){
			myrule = myrules[i];
			break;
		}
	}
}

Um neue Regeln hinzuzufügen, verwendet man in standardkonformen Browsern die insertRule[definition, index]-Methode, für den Explorer heißt die Funktion addRule[selector, style, index (optional)].

Vorhandene CSS-Definitionen löscht man mittels deleteRule[index] beziehungsweise removeRule[index (optional)] im IE.

Nachfolgend ist der komplette Code eines Mini-Beispiel zu finden. Dabei wird zuerst ein neues style-Elemente zur Laufzeit erstellt, in das HTML-Gerüst eingebettet und abschließend mittels DOM CSS eine Regel für das body-Element festgelegt, die Hintergrund- und Schriftfarbe verändert.

<br />
if( document.styleSheets ) {
	var myStyle = document.createElement("style");
	myStyle.setAttribute( "type", "text/css" );
	document.getElementsByTagName("head")[0].appendChild(myStyle);

	var styles = document.styleSheets.length;
	myStyle = document.styleSheets[styles-1];

	if( document.styleSheets[0].cssRules ) {
		myStyle.insertRule("body { color: red; background-color: black; }", 0);
	} else {
		if ( document.styleSheets[0].rules ) {
			myStyle.addRule("body", "color: red; background-color: black;");
		}
	}
}

Ich favorisiere den Weg über das Hinzufügen eines neuen style-Elements anstatt dem Bearbeiten vorhandener Definitionen, da mir dies übersichtlicher und logischer vorkommt. Zumal – in den meisten Fällen – die zuletzt festgelegte CSS-Regel bei Überschneidungen zur Darstellung vom Browser genutzt wird.

Der Vorteil gegenüber dem traditionellen Ändern von style-Attributen über das direkte Ansprechen liegt vor allem in der Geschwindigkeit bei einer großen Anzahl von Elementen, die verändert werden sollen.

Ein Browser kann erheblich schneller 1.000 Elementen eine neue Schriftfarbe über eine CSS-Regel zuweisen als in einer Schleife eben diese Elemente direkt zu adressieren und jedem die neue Schriftfarbe zuzuweisen.

Interessant ist DOM CSS daher bei Javascript-Anwendungen, die neue HTML-Elemente (für runde Ecken beispielsweise) in den Code einbinden.