Appell an Firefox und Chrome: Nativer LESS/Sass-Compiler im Browser

Seit einiger Zeit arbeite ich verstärkt mit CSS Preprozessoren wie LESS und Sass. Diese Compiler erweitern CSS um nützliche Sprachkonstrukte wie Variablen, Nesting (Verschachtelung von Befehlen) oder Mixins (Funktionen). Das bringt nicht nur Übersichtlichkeit in den Code, sondern erleichtert auch die Wartung und gibt Entwicklern die Möglichkeit ihren Code wiederverwendbar zu programmieren.

Der große Nachteil bei der Nutzung ist allerdings die Tatsache, dass es sich um Preprozessoren handelt. Das heißt der LESS- bzw. Sass-Code wird, vor der Auslieferung an den Browser, in natives CSS umgewandelt. Damit der Deployment-Prozess für den Entwickler nicht zu aufwendig wird, läuft auf dem Server meist eine eigene Instanz des Compilers, der automatisch ausgeführt wird, wenn sich an den LESS-/Sass-Dateien etwas geändert hat.

Inzwischen frage ich mich aber, warum man sich als Entwickler die ganze Arbeit mit einem Preprozessor machen muss. Warum werden diese doch sehr nützlichen Sprachkonstrukte für CSS nicht einfach nativ in den Browser übernommen? Daher mein Appell an den W3C und die Macher von Firefox, Chrome und Co: Übernehmt doch bitte die Funktionen von LESS und Sass in die neue CSS 4.0. Ihr würdet damit viele Webdesigner und HTML-Entwickler glücklich machen und – ganz nebenbei – die Qualität des Webs enorm steigern.

Mit CSS Radio-Buttons stylen

Es ist relativ kompliziert einen Radio-Button bzw. eine Checkbox mit CSS zu stylen, aber mit Hilfe von JavaScript trotzdem kein Problem.
Das folgende Beispiel lässt sich dennoch gut einbauen und benötigt lediglich die Standard jQuery-Library.

Zuerst das HTML:

View Code XML
<form action="css-radio-demo.html" method="post">
	<div>
		<label for="foo">
			<span class="styled"><input type="radio" name="radiotest" id="foo" value="Foo" checked/></span>
			Foo
		</label>
		<label for="bar">
			<span class="styled"><input type="radio" name="radiotest" id="bar" value="Bar"/></span>
			Bar
		</label>
	</div>
	<br/>
	<button type="submit">Absenden</button>
</form>

Um den Radio-Button kommt noch ein span-Tag mit der Klasse styled. Auf Grundlage dieser Klasse wird das folgende CSS und JavaScript aufgebaut.
Ebenfalls sehr wichtig ist der Label-Tag, damit der Browser den später versteckten original Radio-Button immer noch anwählen kann. Bitte beachten: Wenn das Label-Feld nicht um das input-Feld gelegt wurde, müssen das for-Attribut und die ID des Input-Elements identisch sein.

Der CSS-Code:

View Code CSS
.styled {
	background: url(radio-sprite.png) 0 0 no-repeat scroll transparent;
	display: inline-block;
	vertical-align: middle;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.styled.checked {
	background-position: 0 -32px;
}
.styled input {
	position: absolute;
	z-index: -1;
}

Das span mit der Klasse styled bekommt ein austauschbares Hintergrundbild (dies sollte der gestylte Radio-Button sein) und das eigentliche input-Element wird versteckt. Mit absoluter Positionierung und einem negativen z-index wird das input-Element einfach unter dem übergeordneten Elementen platziert. Damit ist der Radio-Button zwar noch da, wird aber nicht mehr angezeigt und genau das ist wichtig, damit die Funktion des Elements für das Formular weiterhin gegeben ist.
Dazu kommt noch eine checked-Klasse mit der das Hintergrundbild bei einem angewählten Radio-Button geändert wird.

Der JavaScript-Code:

View Code JAVASCRIPT
$(document).ready(function() {
	$(".styled input:checked").parent().addClass("checked");
	$(document).on("change", ".styled input", function() {
		var $this = $(this);
		var form = $this.closest("form");
		form.find("input[name='"+$this.attr("name")+"']").parent().removeClass("checked");
		$this.parent().addClass("checked");
	});
});

Mit dem ersten Befehl (Zeile 2), wird die checked-Klasse hinzugefügt, wenn der Radio-Button bereits vorausgewählt wurde. In dem darauffolgenden Codeblock wird ein neues onchange-Event auf das Input-Element gelegt, das die checked-Klassen entfernt bzw. bei dem neu ausgewählten Element hinzufügt.

Und hier geht’s zur Demo:
CSS Radio-Button Demo

Die Demo funktioniert übrigens in allen Browsern (sogar im IE6, wenn man gif-Bilder statt PNG verwendet).