Hier gleich ein paar Anwendungsbeispiele:

//Variablen
@main_color: #2266bb;

h1 {
 color: @main_color;
}

// erweiterte Klassen
.rounded_corners (@radius: 5px) {
 -moz-border-radius: @radius;
 -webkit-border-radius: @radius;
 border-radius: @radius;
}

#header {
 .rounded_corners;
}

.main_table {
 .rounded_corners(10px);
}

// eingebettete Regeln
#header {
 color: red;
 a {
 font-weight: bold;
 text-decoration: none;
 }
}

// Funktionen
@border-width: 1px;
@base-color: #333333;

#header {
 color: @base-color * 3;
 border-left: @border-width;
 border-right: @border-width * 2;
}

.main_table {
 color: (@base-color + #111) * 1.5;
}

Um LESS zu nutzen bedarf es einer Anwendung, die den LESS-Code in normales CSS umwandelt. Dies kann man beispielsweise über die PHP-Klasse lessphp tun, die ich persönlich auch einsetze. Dies sieht dann in etwa so aus:

require 'lessc.inc.php';

try {
lessc::ccompile('input.less', 'out.css');
} catch (exception $ex) {
exit('lessc fatal error:<br />'.$ex->getMessage());
}

Doch Alexis, der Entwickler von LESS, hat noch etwas viel genialeres vor. Derzeit arbeitet er an einer Javascript-Implementierung von LESS, die LESS-Code zur Laufzeit im Browser im normales CSS konvertiert – und dies in beeindruckender Geschwindigkeit. Damit entfällt das vorherige Parsen weg. Der Browser generiert selbst den CSS-Code. Dabei nutzt Alexis alle Möglichkeiten moderner Browser wie HTML5 und Local Storage voll aus.

Noch befindet sich LESS.js in Arbeit und wurde noch nicht freigegeben. Einen Eindruck der Arbeit kann man sich aber bereits jetzt beim Testen der Entwicklerversion holen.

Zum Einbinden von LESS.js ist folgender HTML-Code nötig (main.less stellt die LESS-Datei da):

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Etliche der Neuerungen im Überblick:

• jQuery UI 1.7 ist die erste Version der Schnittstelle, die auf jQuery 1.3 als Untersatz baut. Dadurch profitiert auch jQuery UI in vielen Bereichen erheblich von den Geschwindigkeitsverbesserungen und Erweiterungen der neuen Bibliothekenversion.
• Neben dem Beheben einer Vielzahl von Fehlern und dem Einpflegen unzähliger Verbesserungen, wurde jedes einzelne, verfügbare Plugin dahingehend überarbeitet und optimiert möglichst sauberen HTML-Code zu verwenden. Dabei wurde jedoch auch darauf geachtet, dass Web-Entwickler einfache aber dennoch vielfältige Möglichkeiten haben, die Plugins den eigenen Vorstellungen entsprechend zu erweitern und zu optimieren.
• jQuery UI 1.7 basiert zudem auf dem brandneuen und mächtigen CSS-Framework, das so entwickelt wurde, dass es nicht nur die jQuery UI-eigenen, sondern auch nutzerspezifische Plugins unterstützt. Damit ist jeder Web-Entwickler in der Lage seine eigenen Plugins auf einfache Weise ThemeRoller-kompartibel zu machen. Das Framework bietet CSS-Klassen für die meisten UI-Elemente, Zustände, Container und Icons.
• ThemeRoller, der jetzt nun vollständig überarbeitet in Version 2 vorliegt, ist ein CSS-Framework, das sich ganz speziell der Entwicklung von Benutzerschnittstellen widmet. Mittels  ThemeRoller können die CSS-Framework-Klassen verändert und angepasst werden.

Auf der jQuery UI-Seite finden sich eine Reihe von Beispielen und Anwendungsmöglichkeiten. Wenn es euch interessiert, schauts euch an und macht was geniales daraus – falls berichten wir dann darüber.

In dieser Version beschleunigten die jQuery-Macher die Perfomance nochmals deutlich, vor allem im Internet Explorer. So verarbeitet der IE jetzt Selektoren im Schnitt um 25% schneller.

Desweiteren wurde die Geschwindigkeit des :hidden/:visible-Selektors in allen Browsers extrem verbessert und erkennt zudem nun auch Elemente korrekt als “nicht sichtbar”, wenn dieses sich innerhalb eines verdeckten Elements befindet.

Sämtliche Höhen- und Breitenangaben werden von den verschiedenen Browsern nun ebenfalls nur noch in einem Bruchteil der Zeit berechnet.

Weitere Änderungen:

Funktionen zum Einfügen von Elementen in die HTML-Struktur geben nun anstatt des Elternelements die eingfügten Elemente zurück.

<div></div>
<div></div>
<script>
$('<p/>')
.appendTo('div')
.addClass('test');
</script>
// Ergebnis jQuery 1.3.1 (and älter)
<div><p class="test"></p></div>
<div><p></p></div>
// Ergebnis jQuery 1.3.2
<div><p class="test"></p></div>
<div><p class="test"></p></div>

Zudem wurde die Reihenfolge der zurückgegeben Elemente – wie in der Selektor-API vorgesehen – nun dahin gehend geändert, dass diese in entsprechend dem Vorkommen im Dokument zurückgeliefert werden.

// jQuery 1.3.1 (and älter)
$("h1, h2, h3");
Reihenfolge: h1, h1, h2, h2, h3, h3
// jQuery 1.3.2
$("h1, h2, h3");
Reihenfolge: h1, h2, h3, h3, h1, h2

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:

• jQuery Curvy Corners
• jQuery BackgroundCanvas
• jQuery Corners
• CSS Multiple Backgrounds

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.

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!

Was ist neu in jQuery 1.3?

• Die CSS Selector-Engine wurde komplett überarbeitet. jQuery setzt jetzt auf die Selector-Engine “Sizzle“, die von John Resign entwickelt wurde. Diese Engine ist nur 3kb groß und soll viel schneller sein. Außerdem ist sie von keiner anderen Bibliothek abhängig.
• Weiterhin wurde die DOM-Manipulation (append/prepend/before/after) überarbeitet.
• Die offset() Methode wurde komplett neu geschrieben.
• Die Logik für den Handhabung von namenraumbasierten Ereignissen wurde komplett umgeschrieben.

Es gibt noch eine Menge weiterer neuer Features, aber darauf möchten die Entwickler später eingehen. Die finale Version wird für den 14. Januar 2009 angepeilt. Für Feedback und die Meldung von Fehlern sind die Entwickler sehr dankbar.

Die ganze Anwendung nutzt einzig die Programmiertechniken Javascript (inbesondere jQuery), HTML und CSS. Das Hintergrundbild ist die einzige vorhandene Grafik. Das restliche Aussehen wurde per Stylesheets erstellt.

Folgende Funktionen wurden bisher von Luterek umgesetzt:

• Start-Button
• Taskleiste – Anzeigen geöffneter Fenster und Hervorheben/Minimieren
• Fenster – Erstellen, Bewegen, Vollbild, Minimieren, Größe verändern, usw.
• Desktop anzeigen mittels Rechtsklick
• Eigenschaften/Aussehen (bestimmen von Textfarbe, Hintergrundfarbe und -grafik)
• Speichern der Einstellungen in Cookies für den nächsten Besuch

Obwohl Firefox das bessere Ergebnis liefert, funktioniert JSOS vollständig im IE ab Version 7. Firefox wird ab der 2. Generation unterstützt. In der aktuellen Opera-10-Alpha läufts es – wenn auch stockend -, im Safari (3.2.1) gab es etliche Darstellungsfehler.

Die Rundungen werden zur Laufzeit über Canvas generiert und automatisch in den HTML-Code eingebettet. Der Einsatz von herkömmlichen Bildbearbeitungsprogrammen wie Gimp, Inkscape oder Photoshop entfällt völlig.

Die Features im Einzelnen:

• automatisches Erzeugen von HTML-Canvas-Elementen, die sich der Größe des HTML-Elements anpassen
• Canvas-Abstraktion – jedes HTML-Element erhält eine paint-Methode
• Plugins zum Rendern können verwendet werden
• etliche Plugins existieren bereits, eigene können ebenso eingebunden werden
• vereinfachte Render-Sprache für Plugin basiertes Rendern
• an CSS angelehnte Syntax der Render-Sprache für die plugin-Formatierung
• nutzt nur HTML, Canvas, jQuery und exCanvas
• funktioniert mit Firefox (2+), Internet Explorer (6+), Safari (3+), Chrome

Sizzle ist eine neue, Framework unabhängige Selektor-Engine, die nach Fertigstellung auf allen üblichen Browsern funktionieren soll und dabei einen erheblichen Geschwindigkeitsvorteil gegenüber bisherigen Lösungen bietet.

Die komprimiert gerade einmal 4 Kilobyte große Engine soll in Firefox 3 4x, in Opera 9 3x und in Safari 1,5 mal schneller zu Werke gehen.

Das bisherige Code-Release enthält noch etliche kleinere Fehler in den standardkonformen Browsern und einige schwerwiegendere im Internet Explorer.

Die Arbeiten an Sizzle halten also noch an. Es wird dringend abgeraten die jetzige Version zu verwenden.

Akribisch haben die Entwickler ihren bestehenden Code und dessen Verwendung in der Praxis analysiert und nach Schwachstellen und Bremsen gesucht. Anschließend wurden gezielt die Abschnitte beschleunigt und optimiert, die am häufigsten aufgerufen werden. Das Ergebnis kann sich sehen lassen.

Die Performancegewinne sehen im Detail wie folgt aus:

• Event-Handling – 103% schneller (vor allem spürbar bei besonderen Events wie Drag’n'Drop)
• CSS-Selektoren – 13% schneller
• offset()-Methode – 21% schneller
• css()-Methode – 25% schneller

Das bisherige dimensions-Plugin ist in 1.2.6er Version in den jQuery-Kern gewandert. Dadurch stehen standardmäßig einheitliche, browserübergreifende Methoden zur Bestimmung von der Elementposition, der inneren Breite und Höhe sowie der äußeren Breite und Höhe eines Elements zur Verfügung.

Besonders möchte ich noch die Änderung hervorheben, dass die toggle-Funktion es nun erlaubt, zwischen mehr als 2 Funktionsaufrufen beim Klicken durchzuschalten.

Ein Code-Beispiel mit drei nacheinanderfolgenden Aufrufen:

$("div").toggle(function(){
$(this).removeClass("three").addClass("one");
}, function(){
$(this).removeClass("one").addClass("two");
}, function(){
$(this).removeClass("two").addClass("three");
});

jQuery 1.2.6 steht in den gewohnten Varianten unkomprimiert, gepackt und minified zum Download bereit.