/home/antu » Webgestaltung

CSS: DIV-Element mit 100% Höhe

Antu — Thu, 22 Oct 2009 06:00:32 +0000

Manchmal ist es gewollt, dass ein HTML-Element (meistens ein DIV) 100% der Höhe des Browser-Fensters einnehmen soll. Mit einem einfachen height:100%; ist es aber nicht getan. Wie man ein DIV-Element erstellt, dass 100% der Höhe des Browser-Fensters hat aber bei längerem Inhalt mitwächst, und was dabei zu beachten ist, erkläre ich in diesem Artikel.

Der Aufbau: HTML

Der HTML-Quelltext hierzu ist einfach, es wird ein DIV-Element erstellt, welches alle weiteren Inhalte umfasst. Dieses bekommt eine Klasse, oder besser eine ID zugewiesen, damit es leichter per CSS gestaltet werden kann.

    <body>
        <div id="wrapper">
            [...]
        </div>
    </body>

HTML und BODY

Damit, dem DIV nun einfach eine Höhe von 100% zuzuweisen, ist es noch nicht getan. Die 100% beziehen sich ja auf die Größe des Eltern-Elements, dem BODY, dieser braucht also auch eine Höhe von 100%. Das HTML-Element bekommt ebenfalls eine Höhe von 100%, schließlich ist es ja das Eltern-Element von BODY.

html, body {
    height:100%
}

Viele Browser geben dem HTML oder dem BODY-Element standardmäßig noch einen kleinen Innenabstand, so dass die Inhalte nicht direkt am Rand kleben. In diesem Fall ist das aber unerwünscht, denn einerseits soll das DIV-Element ja die ganze Höhe ausfüllen (ohne andersfarbige Ränder), und andererseits gäbe es sonst Scrollbalken (100% + 5px Innenabstand oben = mehr als 100% -> Scrollbalken).

html, body {
    margin:0;
    padding:0;
    height:100%
}

DIV-Element auf 100% der Höhe von BODY

Jetzt wo das BODY- und das HTML-Element auf 100% Höhe sind, muss nur noch das DIV-Element auf 100% Höhe gebracht werden:

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer 6 */
    height:auto !important;
    height:100%
}

Das Element soll eine Mindesthöhe von 100% haben, bei längeren Inhalten soll es sich von selbst vergrößern. Eine Mindesthöhe kann mit der CSS-Eigenschaft min-height angegeben werden, würde man hier height verwenden, würden moderne Browser nicht zulassen, dass das DIV-Element mit längeren Inhalten mitwächst, es wäre immer genau 100% hoch. Der Internet Explorer 6 hingegen versteht die height-Eigenschaft als Mindesthöhe, min-height kennt der IE 6 nicht.

Hier kann man sich die Tatsache zu Nutze machen, das der IE 6 !important etwas anders interpretiert als andere Browser. Zuerst legt man fest, dass die Höhe des Elements sich dem Inhalt anpassen soll (auto), und das diese Angabe alle anderen Angaben zur Höhe überschreibt (!important). Dann wird dem Element eine Höhe von 100% zugewiesen, was der IE 6 als Mindesthöhe interpretiert. Da der IE 6 das !important in diesem Fall ignoriert, verwendet er die zweite Angabe, und stellt eine Mindesthöhe von 100% ein. Alle anderen Browser beachten das !important, und ignorieren die zweite height-Angabe.

In Aktion sieht das dann so aus: Beispiel

Eine Fußzeile?

Wie erstellt man jetzt eine Fußzeile? Dazu wird ein DIV-Element mit der ID footer erstellt, dieses wird mit CSS wie folgt gestaltet:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:2em
 }

Mittels position:absolute; wird festgelegt, dass das Element relativ zum nächsthöheren positionierten Element ausgerichtet wird. Mit bottom:0; bestimmt man, dass das Fußzeilen-Element ganz am unteren Rand vom wrapper-Element positioniert wird.

Nun muss dem wrapper-Element allerdings noch eine relative Positionierung zugewiesen werden, damit das Fußzeilen-Element sich darauf beziehen kann.

#wrapper {
    /* Für moderne Browser */
    min-height:100%;
 
    /* Für den Internet Explorer */
    height:auto !important;
    height:100%;
 
    position:relative
}

Der Inhalt selbst bekommt auch ein eigenes DIV-Element, welches einen Innenabstand so hoch wie die Fußzeile bekommt, so dass die Inhalte nicht unter der Fußzeile angezeigt werden.

    <body>
        <div id="wrapper">
            <div id="content">
                [Inhalte]
            </div>
            <div id="footer">
                [Inhalte der Fußzeile]
            </div>
        </div>
    </body>

Das CSS für das content-DIV sieht so aus:

#content {
    padding-bottom:2em;
}

Fertig sieht das dann so aus: Beispiel.

Fortschrittsbalken mit CSS/JavaScript

Antu — Mon, 27 Jul 2009 20:48:28 +0000

Fortschrittsbalken werden vor allem bei Webanwendungen gebraucht, die mit dem Benutzer interagieren, beispielsweise beim Hochladen von Dateien oder um den Fortschritt in einem Formular anzuzeigen. Aber auch bei anderen Webanwendungen können Fortschrittsbalken sinnvoll sein, beispielsweise um den aktuellen Stand eines noch nicht fertiggestellten Projektes anzuzeigen oder den noch verfügbaren Speicherplatz, o.Ä.

In dieser Anleitung erkläre ich wie man einfache Fortschrittsbalken mit CSS erstellen kann, und stelle 4 JavaScript-Skripte vor mit denen sich “bewegliche” Fortschrittsbalken erstellen lassen.

Einfache Fortschrittsbalken

Fortschrittsbalken mittels CSS zu erstellen ist nicht weiter schwer, man braucht im Grunde nur zwei Elemente, die übereinander gelegt werden.

Ohne Bilder

Man erstellt ein Element, gibt ihm eine Hintergrundfarbe und weist ihm eine Breite/Höhe zu. In diesem Element erstellt man nun ein zweites Element, dem man ebenfalls eine Hintergrundfarbe (möglichst eine andere, als die vom ersten Element) und die gleiche Höhe wie dem ersten Element zu. Die Breite des zweiten Elements gibt dann an, welchen Wert der Fortschrittsbalken anzeigen soll.

<style type="text/css">
  div.fsb {
    border:1px solid #000;
    background-color:white;
    width:200px;
    height:28px;
    padding:1px;
  }
 
  div.fortschritt {
    background-color:#000;
    height:28px;
    width:50%; /* Fortschritt */
  }
</style>

<div class="fsb">
  <div class="fortschritt"></div>
</div>

In Aktion sieht das dann so aus: Demo.

Mit Bildern

Möchte man den Fortschrittsbalken etwas schöner gestalten, kann man natürlich auch Bilder verwenden, die Methode funktioniert eigentlich genau so. Der einzige Unterschied ist, das anstatt von Hintergrundfarben Bilder verwendet werden.

div.fsb {
    background:url('normal.png') no-repeat left center;
    width:300px;
    height:30px;
}
 
div.fortschritt {
    background:url('farbig.png') no-repeat left center;
    height:30px;
    width:50%;
}

In Aktion sieht das dann so aus: Demo.

JavaScript-Fortschrittsbalken

Mit JavaScript kann man den Fortschrittsbalken auch Leben einhauchen, bzw. den angezeigten Wert verändern. Ein einfaches JS-Skript, welches die Breite des inneren Elements ändert ist schnell geschrieben. Im folgenden stelle ich allerdings 4 Skripte/Klassen vor, die noch etwas mehr können als nur das. Das erste Skript basiert auf jQuery/jQuery UI, das zweite benötigt nur jQuery, das dritte ist für Prototype und das vierte verwendet mootools.

Ich habe für jedes Skript eine Demo erstellt: Fortschrittsbalken-Demo

jQueryUI – ProgressBar

Die JS-Bibliothek jQuery UI stellt diverse Werkzeuge und Benutzeroberflächen-Elemente bereit. Unter anderem bietet sie auch eine Klasse zur Erstellung von Fortschrittsbalken. Praktischerweise kann man auf der Download-Seite von jQuery UI direkt die Elemente angeben, die man benötigt, so braucht man nicht die ganze Bibliothek runterzuladen/einzubinden (wenn man nur den Fortschrittsbalken braucht), und spart so einiges an Speicherplatz/Datentransfer. Die Bibliothek basiert auf jQuery, dieses muss also auch eingebunden werden.

Eine Besonderheit von jQuery UI: Das Aussehen der Benutzeroberfläche (und somit des Fortschrittsbalkens) wird durch Themen festgelegt. Auf der Webseite von jQuery UI findet sich (unter Gallery) bereits eine kleine Auswahl von fertigen Themen, natürlich ist es auch möglich eigene Themen zu erstellen. Das Thema wird über eine css-Datei definiert, diese muss ebenfalls in die Seite eingebunden werden.

Einbinden

Benötigt werden: jQuery, jQuery UI (Progressbar), und ein jQuery UI Thema.

<link rel="stylesheet" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css">
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

(Die Pfade müssen eventuell angepasst werden.)

HTML

Man erstellt einfach ein div-Element, den Rest erledigt das Skript. Dem Element kann man noch eine ID geben, das macht es leichter es anzusprechen.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Um den Balken zu erstellen, selektiert man das Ziel-Element mit der $()-Funktion, und ruft die Methode progressbar() auf. Mittels dem Parameter value kann man den Ausgangswert des Fortschrittsbalkens angeben. Außerdem kann man, wenn man möchte, mit dem Parameter change auch gleich eine Funktion festlegen, welche aufgerufen wird, wenn der Wert sich ändert. Beide Parameter sind optional.

$(function () {
    $('#fsb').progressbar({
        value:50,
        change: function () { 
            alert($('#fsb').progressbar('option', 'value') + '%');
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet Methoden zum Abfragen und Ändern des angezeigten Werts, sowie ein Ereignis welches ausgelöst wird, wenn der Wert sich ändert.

// Wert aendern
$('#fsb').progressbar('option', 'value', 50);
// Wert abfragen
var wert = $('#fsb').progressbar('option', 'value');

Weitere Informationen zu der Klasse und ihren Methoden finden sich in der offiziellen Dokumentation.

jQuery – ProgressBar

Das Skript jQuery Progress Bar basiert auf jQuery und bietet einige nützliche Funktionen, die die jQuery UI-Variante nicht hat. Es ist möglich verschiedene Bilder zur Anzeige des Fortschritts zu verwenden, so kann man beispielsweise für die ersten 10-20% einen roten Hintergrund, für die nächsten 10-20% dann einen orangen, dann einen gelben und zum Schluss einen grünen Hintergrund verwenden. Es lässt sich auch festlegen ob neben dem Balken auch der Fortschritt noch einmal als Prozentzahl angezeigt werden soll, und auch eine Anzeige des genauen Wertes (123/465) ist möglich. Außerdem ist die Bewegung des Fortschrittsbalkens animiert, es lässt sich sogar die Geschwindigkeit der Animation festlegen.

Einbinden

Benötigt werden jQuery und das Skript selbst.

<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.progressbar/js/jquery.progressbar.js" type="text/javascript"></script>

HTML

Auch bei diesem Skript wird nur ein div-Element benötigt, den Rest erstellt das Skript selbst.

<div id="fsb"></div>

Fortschrittsbalken erstellen

Erstellt wird der Fortschrittsbalken mittels der Funktion progressBar(). Dabei gibt es einige Parameter, mittels derer das Aussehen und Verhalten des Fortschrittsbalkens beeinflusst werden können:

steps und step_duration: Geben an, wie viele Schritte beim Ändern des Anzeigewertes gegangen werden sollen, und wie lange ein Schritt dauert. (Standard: 20/20)
max: Der max. Wert, bis zu dem der Fortschrittsbalken geht. (Standard: 100)
showText und textFormat: Ob neben dem Balken noch der Fortschritt in Textform angezeigt werden soll, und ob dieser als Prozentzahl ('percentage' = 50%) oder als Anteil ('fraction' = 50/100) angezeigt werden soll. (Standard: true, 'percentage')
width und height: Breite und Höhe des Fortschrittsbalkens bzw. der verwendeten Bilder.
callback: Legt eine Funktion fest, welche aufgerufen wird, wenn sich der Balken bewegt. Die Funktion bekommt ein Argument mitgeliefert, welches das config-Feld, erweitert um die Werte increment (um wie viele Pixel hat sich der Balken bewegt), running_value (aktueller Wert) sowie value (Ziel-Wert).
boxImage: Pfad zum Bild welches den Balken umschließt.
barImage: Pfad zum inneren Bild des Balkens. Hier kann auch ein Feld übergeben werden, falls verschiedene Bilder verwendet werden sollen (siehe Beispiel).

$(function () {
    $('#fsb').progressBar(20, {
        boxImage: 'jquery.progressbar/images/progressbar.gif',
        barImage: {
            0: 'jquery.progressbar/images/progressbg_red.gif',
            30: 'jquery.progressbar/images/progressbg_orange.gif',
            50: 'jquery.progressbar/images/progressbg_yellow.gif',
            70: 'jquery.progressbar/images/progressbg_green.gif'
        }
    });
});

Methoden und Ereignisse

Die Klasse bietet ein Ereignis (callback) und keine Methode. Will man den angezeigten Wert ändern, ruft man die Klasse einfach wieder wie folgt auf:

// Aendere Wert auf 50%.
$('#fsb').progressBar(50);

Prototype – jsProgressBarHandler

Die jsProgressBarHandler-Klasse basiert auf Prototype und steht unter der Creative Commons Attribution-Share Alike 2.5 Lizenz. Das tolle an dieser Klasse ist: Sie kann auch automatisch Fortschrittsbalken erstellen, alle span-Elemente mit der CSS-Klasse progressBar, die einen Prozentwert enthalten, werden automatisch zu Fortschrittsbalken umgewandelt. Der herkömmliche Weg über JavaScript funktioniert natürlich auch.

Einbinden der Klasse

Neben der Klasse selbst, muss auch die JavaScript-Bibliothek Prototype eingebunden werden.

<script src="js/prototype/prototype.js" type="text/javascript"></script>
<script src="js/bramus/jsProgressBarHandler.js" type="text/javascript"></script>

HTML

Die Klasse wandelt alle span-Elemente mit der CSS-Klasse progressBar automatisch in Fortschrittsbalken um.

<span class="progressBar" id="fsb">50%</span>

Möchte man den Balken selbst mittels JavaScript erstellen, benötigt man ein div-Element mit einer ID.

<div id="fsb">[Lade Fortschrittsbalken]</div>

Fortschrittsbalken erstellen

Um den Balken selbst mittels JavaScript zu erstellen, muss man nur ein Objekt der Klasse JS_BRAMUS.jsProgressBar erstellen.

var fsb = new JS_BRAMUS.jsProgressBar(
    'fsb', // ID des div-Elements
    50, // Ausgangswert (Prozent)
    {
        showText : true,
        animate : true,
        barImage : 'jsprogressbarhandler/images/bramus/percentImage_back1.png'
    }
);

Der dritte Parameter kann zur Konfiguration verwendet werden, und ist optional. Folgende Optionen gibt es:

animate: Ob der Fortschrittsbalken animiert sein soll. (Standard: ja)
showText: Ob der Wert neben dem Balken angezeigt werden soll (Standard: ja)
width: Breite des Balkens. Nicht vergessen: Das Bild muss ebenfalls angepasst werden. (Standard: 120)
boxImage: Das Bild um den Balken.
barImage: Der Hintergrund des Balkens. Hier kann auch ein Feld mit mehreren Bildern angegeben werden, dann ändert sich der Hintergrund, wenn der Balken weiter fortschreitet.
height: Die Höhe des Balkens. (Standard: 12)
onTick: Funktion die bei jeder Änderung am Wert des Balkens aufgerufen wird.

Die Standardwerte sind am Anfang der jsProgressBarHandler.js definiert. Dort findet sich auch die Variable autoHook, diese kann man auf false setzen, wenn man nicht möchte, das alle span.progressBar-Elemente automatisch umgewandelt werden. Die Pfade zu den Bildern bzw. die Breite/Höhe will/muss man wahrscheinlich eh ändern.

Methoden und Ereignisse

Die Klasse hat zwei Funktionen und ein Ereignis, welches bei jeder Änderung am Wert aufgerufen wird (onTick). Mit der Funktion getPercentage() kann der aktuelle Wert abgefragt werden, mit setPercentage() kann der Wert verändert werden. Letztere Funktion akzeptiert zwei Parameter, der erste gibt den neuen Wert an, der zweite gibt an ob der Balken direkt zum neuen Wert gehen soll. Wenn man den Wert ändert, während der Balken sich noch bewegt, macht er normalerweise zuerst seine Bewegung zu Ende, bevor er zum neuen Wert geht, ist der zweite Parameter true, verwirft er alle anderen Bewegungen und bewegt sich direkt zum neuen Wert.

// Wert abfragen
var aktuellerWert = fsb.getPercentage();
// Wert aendern
fsb.setPercentage(100);

mootools – dwProgressBar

Die dwProgressBar-Klasse verfolgt einen etwas anderen Ansatz, als die vorigen beiden Klassen. Mit der Klasse können Fortschrittsbalken erstellt, und der angezeigte Wert geändert werden. Um die Animation kümmert sich die Klasse. Ansonsten können (müssen) die Fortschrittsbalken komplett selbst mittels CSS gestaltet werden.

Einbinden der Klasse

Die JavaScript-Bibliothek mootools wird vorausgesetzt. Außerdem muss natürlich die Klasse selbst eingebunden werden.

<script src="mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="dwprogressbar.js" type="text/javascript"></script>

HTML und CSS

Es wird nur ein div-Element benötigt.

<div id="fsb"></div>

Die Gestaltung des Fortschrittsbalkens übernimmt die Klasse nicht, das muss man selber machen. Es gibt drei Elemente, die gestaltet werden können: Der Rahmen, der Balken, und der Text (optional). Beim Erstellen des Fortschrittsbalkens kann angegeben werden, welche ID die Elemente bekommen sollen, über die ID können die Elemente dann mittels CSS gestaltet werden.

Ohne Bilder

Die CSS-Selektoren für einen Fortschrittsbalken ohne Bilder (aber mit Text) könnten z.B. so aussehen:

#rahmen {
	border:1px solid #8C2229;
	width:200px;
	height:20px;
	padding:1px;
	display:inline-block;
}
 
#balken {
	background:#8C2229;
	height:20px;
}
 
#text {
	font-size:16px;
	line-height:20px;
	vertical-align:top;
	padding-left:10px;
	display:inline-block;
}

Mit Bildern

Wenn man den Fortschrittsbalken mit Bildern gestalten möchte, kann man folgende CSS-Selektoren verwenden. Die Höhen- und Breitenangaben müssen natürlich angepasst werden.

#rahmen {
	background:url('rahmen.png') right center no-repeat;
	width:300px;
	height:30px;
}
 
#balken {
	background:url('balken.png') left center no-repeat;
	height:30px;
}

Den Fortschrittsbalken erstellen

Zum Erstellen des Fortschrittsbalkens wird einfach ein neues dwProgressBar-Objekt erstellt.

window.addEvent('domready', function() {
    var fsb = new dwProgressBar({
        // Das Element, in dem der Fortschrittsbalken angezeigt wird
        container: $('fortschrittsbalken'),
        // Startwert (Prozent)
        startPercentage: 50,
        // Geschwindigkeit/Dauer der Animation (in Millisekunden)
        speed: 1000,
        // Die ID des Rahmens
        boxID: 'rahmen',
        // Die ID des Balkens
        percentageID: 'balken',
        // Wieviel Prozent pro Schritt (dwProgressBar.step() geht
        // immer einen Schritt weiter, in diesem Beispiel also 10%.
        step: 10,
        // Erlaube Werte jenseits 100%
        allowMore: false,
        // Prozentwert als Text anzeigen?
        displayText: true,
        // ID für das Textelement
        displayID: 'text',
        // Ereignis, welches aufgerufen wird, wenn der Balken 100%
        // erreicht.
        onComplete: function () {
            alert("Fertig!");
        },
        // Ereignis welches nach jeder abgeschlossenen Änderung am
        // Wert aufgerufen wird. (Wenn man von 10% auf 50% geht,
        // wird es einmal aufgerufen, nämlich wenn 50% erreicht sind.)
        onChange: function () {
            alert("Wert geändert!");
        }
    });
});

Es müssen nur die Optionen container, boxID und percentageID angegeben werden, der Rest ist optional.

Funktionen und Ereignisse

Die Klasse bietet die Funktionen set(neuerwert) und step(), außerdem die Ereignisse onComplete und onChange. Die Ereignisse sind im obigen Beispielquelltext bereits erklärt.

// Wert auf 100% setzen
fsb.set(100);
// Einen Schritt weitergehen (um options.step Prozent)
fsb.step();

Zum Schluss noch einmal die Demo-Seite für die JavaScript-Fortschrittsbalken: Fortschrittsbalken-Demo

Absenden, Zurücksetzen und Verlassen von Formularen

Antu — Mon, 15 Jun 2009 20:48:58 +0000

Manchmal verklickt man sich, oder man überliest in Eile einen Hinweis. Da kann es schon mal passieren, das man ausversehen auf die Zurücksetzen-Schaltfläche anstatt auf die direkt daneben liegende Absenden-Schaltfläche klickt. Oder man schließt versehentlich das falsche Fenster, und alle im Formular eingegebenen Daten müssen noch einmal eingegeben werden. Gerade bei längeren Forenbeiträgen, oder Blog-Artikeln ist das sehr ärgerlich.

Ein paar einfache Java Script-Funktionen schaffen da Abhilfe. Vor dem Absenden oder Zurücksetzen eines Formulars kann der Benutzer noch einmal gefragt werden ob er das wirklich tun will. Auch vor dem Verlassen/Schließen der Seite lässt sich eine solche Abfrage erstellen. Außerdem erkläre ich, wie man eine Schaltfläche erst nach einer bestimmten Zeit aktivieren kann.

Zurücksetzen der Formularfelder

Um dem Benutzer die Möglichkeit zu geben, die Formularfelder wieder auf den Anfangswert zurückzusetzen bzw. sie wieder zu leeren genügt ein input-Element vom Typ reset.

<input type="reset" value="Zurücksetzen" />

Mit Java Script ist es allerdings auch möglich, beim Zurücksetzen des Formulars noch weitere Aktionen auszuführen oder das Zurücksetzen besser zu steuern. So ist es beispielsweise möglich nur bestimmte Felder zurückzusetzen oder den Benutzer zu fragen ob er die Daten wirklich zurücksetzen möchte. Dazu trägt man im onreset-Ereignis des form-Elementes die Funktion ein, die beim Zurücksetzen des Formulars ausgeführt werden soll.

<form action="..." onreset="return wirklichZuruecksetzen();">

Es ist auch möglich die Funktion einen Wert zurückgeben zu lassen, mit dem man steuern kann ob das Formular auch wirklich zurückgesetzt wird. Gibt die aufgerufene Funktion false zurück wird das Formular nicht zurückgesetzt, bei true wird es zurückgesetzt.

function wirklichZuruecksetzen() {
	return confirm('Alle Eingaben loeschen?');
	// Anstatt dessen koennte man hier auch nur bestimmte Felder zuruecksetzen und
	// false zurueckgeben.
}

Abfrage vor dem Absenden

Um eine Abfrage vor dem Absenden zu erstellen, trägt man einfach eine Funktion beim onsubmit-Ereignis des form-Elements ein, auch hier entscheidet wieder der Rückgabewert darüber ob das Formular abgesendet wird.

<form action="..." onsubmit="return confirm('Daten abschicken?');">

Der Vorteil dieser Methode ist, das sie schnell und einfach programmiert ist, der Nachteil das sie nur funktioniert, wenn der Benutzer Java Script aktiviert hat bzw. sein Browser Java Script unterstützt. Bei wichtigen Formularen (beispielsweise einer Bestellung) ist es empfehlenswert, die Daten erst an eine Zwischenseite zu senden, welche noch einmal alle Eingaben auflistet und auf der noch einmal das Absenden bestätigt werden muss.

Im onsubmit-Ereignis lässt sich übrigens nicht nur eine Abfrage einbauen. Man könnte beispielsweise auch überprüfen ob alle Felder (richtig) ausgefüllt sind, und den Benutzer auf eventuelle Fehler hinweisen/auffordern diese zu korrigieren.

Verlassen/Schließen des Formulars: Abfrage bzw. Funktion ausführen

Man kann den Benutzer vor dem Verlassen der aktuellen Seite zu fragen ob er die Seite wirklich verlassen möchte. Dazu kann das onbeforeunload-Ereignis verwendet werden, welches heutzutage von den meisten Browsern unterstützt wird, obwohl es nicht zum Standard gehört.

/* Fragt den Benutzer, ob er die Seite wirklich verlassen moechte.
 */
window.onbeforeunload = function (e) {
	// Hier koennte man noch abfragen ob bereits Eingaben getaetigt wurden,
	// wenn nicht, braucht man in den meisten Faellen wohl auch keine Nachricht
	// anzeigen.
	var nachricht = 'Sie haben das Formular noch nicht abgesendet, möchten Sie das Fenster trotzdem schließen?';
 
	var e = e || window.event;
 
	if (e) {
		e.returnValue = nachricht;
	}
 
	return nachricht;
};
 
window.onload = function() {
	// Keine Meldung ausgeben, wenn der Benutzer die Seite ueber die
	// Absenden-Schaltflaeche verlaesst.
	for (var i = 0; i < document.forms.length; i++)
		document.forms[i].onsubmit = function () { window.onbeforeunload = ''; };
};

Die dem onbeforeunload-Ereignis zugewiesene Funktion sorgt dafür das der Benutzer beim Schließen des Fensters bzw. beim Verlassen der Seite gefragt wird ob er die Seite wirklich schließen möchte. Damit das geschieht, muss die Nachricht, die angezeigt werden soll in das returnValue-Element von dem Ereignis geschrieben, und als Rückgabewert zurückgegeben werden. Bleibt returnValue leer bzw. wird nichts zurückgegeben, erscheint auch keine Nachricht.

Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit freigeben

Es ist möglich die Absenden-Schaltfläche erst nach Ablauf einer bestimmten Zeit zu aktivieren, so dass der Benutzer sie vorher nicht anklicken kann. Das ist beispielsweise in einem Forum sinnvoll, wo der Benutzer nur alle 60 Sekunden einen Beitrag schreiben kann. Der Browser des Benutzers stellt die Schaltfläche ausgegraut da, und zeigt auf der Schaltfläche an wie lange es noch dauert bis das Formular abgesendet werden kann. Die Zeit muss selbstverständlich auch serverseitig überprüft werden, diese Funktion ist nur dazu gedacht, es dem Benutzer einfacher zu machen, zu erkennen wann er auf die Absenden-Schaltfläche klicken kann. Durch das Deaktivieren von Java Script kann die Funktion “umgangen” werden, sie stellt also keinen Sicherheitsmechanismus dar!

/* Sorgt dafuer, das eine Schaltflaeche erst nach Ablauf einer bestimmten Zeit
 * klickbar wird, kann aber leicht "umgangen" werden.
 */
function AbsendenENA(sf, zeit) {
	var self = this;
	var intervall = window.setInterval(function() { self.aktualisieren() }, 1000);
	sf.disabled = true;
	var sftext = sf.value;
 
	this.aktualisieren = function() {
		if (zeit > 0) {
			sf.value = sftext + '(' + zeit + ')';
		}
		else {
			sf.value = sftext;
			sf.disabled = false;
			window.clearInterval(intervall);
		}
		zeit--;
	};
 
	this.aktualisieren();
}
 
window.onload = function() {
	// Absenden-Schaltflaeche erst nach einer bestimmten Zeit benutzbar machen
	new AbsendenENA(document.getElementById('abschicken'), 20);
};

Im Beispiel wird eine neue Instanz des AbsendenENA-Objekts erstellt, der erste Parameter ist das Schaltflächen-Objekt (mit der ID abschicken), der zweite die Zeit bis zum Aktivieren, in Sekunden. Die Klasse kann theoretisch an jeder Stelle benutzt werden, im Beispiel wird sie beim onload-Ereignis aufgerufen.

Ich rate dazu, die Funktion nur an Stellen zu verwenden, an denen es dem Benutzer aus technischen (oder auch anderen) Gründen eh nicht möglich wäre das Formular vor Ablauf der Zeit abzuschicken, beispielsweise weil ein Spamschutz das Abschicken serverseitig eh nur alle X Sekunden zulässt. Man kann den Benutzer mit einer solchen Funktion nicht dazu zwingen sich irgendwelche Forenregeln, AGBs, oder sonstwas durchzulesen.

Besucherstatistiken mit Piwik

Antu — Sat, 23 May 2009 19:57:50 +0000

Piwik ist ein umfangreiches Programm zur Besucheranalyse, welches auf dem eigenen Webspace installiert werden kann. Es bietet einem ausführliche Daten über die Anzahl und Entwicklung von Besuchern, Suchbegriffen und Suchmaschinen, den am meisten aufgerufenen Seiten, der Herkunft der Besucher und vielem mehr. Ziel des Piwik-Projekts ist es, eine quelloffene Alternative zu Google Analytics bereitzustellen.

Ausführliche Statistiken

Auf der Übersichtsseite der eigenen Piwik-Installation hat man gleich alle wichtigen Daten auf einem Blick, sie besteht aus einzelnen Komponenten wie Frequenz, Besucher, Länge, Suchbegriffe, etc. Jede Komponente ist frei verschiebbar und kann einzeln konfiguriert werden, und mit wenigen Klicks lassen sich Komponenten hinzufügen oder entfernen.

Es ist auch kein Problem mehrere Seiten in einer Piwik-Installation zu analysieren, außerdem ist es möglich Benutzer anzulegen, sodass auch andere Personen die Statistiken einsehen können.

Über ein kleines Menü oben gelangt man zu den Detail-Seiten, auf denen sich ausführliche Berichte und Statistiken über die entsprechenden Daten finden. Meist ist es auch möglich die Darstellung der Daten zu verändern, je nach dem ob man eine Tabelle, ein Kreisdiagramm, oder eine andere Art der Darstellung bevorzugt. Die erstellten Graphen und Diagramme lassen sich auch abspeichern, oder gleich in die eigene Seite einbinden.

Der Funktionsumfang

Das wichtigste sind natürlich die gesammelten Daten und die Analyse selbiger. Piwik erfasst alle für Webseitenbetreiber nützlichen Informationen über die Besucher:

Die Anzahl der (eindeutigen) Besucher, Aktionen (page views) und Aktionen pro Besucher, sowie der Verweildauer und der Absprungrate der Besucher.
Browser, Auflösung, Betriebssystem und unterstützte Webtechnologien wie Cookies, Flash, PDF, etc.
Besuchszeiten, sowohl nach lokaler Zeit des Besuchers als auch der Zeit auf dem Server.
Frequenz und Loyalität der Besucher, sowie deren Standorte (Land) und Provider.
Welche Seiten wie oft aufgerufen wurden, auf welche Links geklickt wird und welche Dateien am meisten runtergeladen wurden.
Woher die Besucher kommen, welche Suchmaschinen die meisten Besucher bringen, und mit welchen Suchbegriffen die Besucher auf die Seite kommen.

Dabei kann man über den Kalender von Piwik jederzeit die Daten von anderen Tagen, Wochen, Monaten oder Jahren ansehen und hat so auch eine Übersicht darüber wie sich die einzelnen Zahlen entwickeln.

Die Funktionalität von Piwik wird größtenteils von Erweiterungen bereitgestellt, was es einem ermöglicht nicht benötigte Module abzuschalten oder den Funktionsumfang durch eigene Module noch zu erweitern.

Weiterführendes

Ralph Segert beschreibt in seinem Blog, wie man Piwik installiert.
Es gibt auch eine Demo-Installation, mit der man Piwik ausprobieren und sich selbst einen Eindruck verschaffen kann, bevor man es installiert.
Roman Hanhart beschreibt in seinem Artikel Piwik verdrängt Google Analytics einige Vorteile von Piwik und erklärt, warum Piwik für ihn besser geeignet ist als Google Analytics. Ich sehe das ähnlich wie er, und setze daher auch seit einigen Monaten Piwik ein.
Es gibt auch eine WordPress-Erweiterung, mit der sich Piwik schnell und einfach in den eigenen Blog einbauen lässt. Das tolle daran ist: Die eigenen Besuche werden nicht mitgezählt, solange man eingeloggt ist, so verfälscht sich die Statistik nicht.

8 Firefox-Erweiterungen für Webentwickler

Antu — Fri, 15 May 2009 14:45:24 +0000

Der Funktionsumfang vom Firefox lässt sich durch Erweiterungen noch weiter vergrößern. Gerade für Webentwickler gibt es einige Erweiterungen mit sehr nützlichen Funktionen. Einige geben einem mehr Kontrolle über das Verhalten des Browsers, andere fügen nützliche Werkzeuge wie Lineale oder Farbpipetten zur Benutzeroberfläche des Browsers hinzu. Andere helfen einem bei der JavaScript- oder PHP-Programmierung, oder sie analysieren die Webseite und machen beispielsweise Vorschläge wie man die Geschwindigkeit der Seite verbessern kann.

Web Developer Toolbar

Die Web Developer Toolbar gibt einem mehr Kontrolle über Cookies, CSS, HTML-Elemente sowie Skripte und deren Ausführung. Über die Toolbar lassen sich außerdem viele hilfreiche Informationen über diverse Elemente, Objekte und Eigenschaften anzeigen. Hilfslinien und Lineale helfen einem beim Anordnen von Elementen.

HTML, CSS, Feeds, Links und andere Teile des Quelltextes einer Webseite können mit ein paar Klicks auf ihre Validität überprüft werden. Das Browserfenster lässt sich bestimmte Größen wie z.B. 800×600 verkleinern/vergrößern um die Webseite auch in anderen gängigen Auflösungen zu überprüfen. Veraltete Elemente oder fehlerhafte Bilder lassen sich besonders hervorheben.

Zur Erweiterung
Webseite der Web Developer Toolbar

Firebug

Firebug ist wohl die umfangreichste Firefox-Erweiterung für Entwickler. HTML, CSS, JavaScript – für fast alles bringt Firebug die notwendigen Werkzeuge mit. Sogar der Ladevorgang von Webseiten lässt sich mit Firebug analysieren.

Der HTML-Quelltext der Seite wird übersichtlich dargestellt, man kann ihn sogar bearbeiten und sieht die Auswirkungen live im Browserfenster. Man muss auch nicht lange nach Elementen suchen, man rechtsklickt einfach im Browserfenster auf ein Element und wählt Element untersuchen aus, schon springt Firebug zur entsprechenden Stelle im Quelltext.

Selbiges gilt für CSS-Quelltexte, auch diese lassen sich durchsuchen und bearbeiten, die Änderungen kann man dann im Browserfenster sofort sehen. Für Farben und Bilder gibt es im Quelltext-Editor eine integrierte Vorschaufunktion, eine Auto-Vervollständigung erleichtert zusätzlich das Bearbeiten des Quelltextes.

Außerdem hebt Firebug im Browserfenster Außen- und Innenabstände sowie Rahmen farblich hervor, ein Layout-Reiter zeigt einem zusätzlich noch einmal die genauen Werte der Abstände an, auch diese können natürlich live bearbeitet werden.

Die Seite lädt langsam? Firebug verrät einem warum. Im Netzwerk-Reiter der Firebug-Erweiterung wird der gesamte Ladevorgang der Seite dargestellt. Für jede einzelne Datei die geladen wird, wird angezeigt wann der Ladevorgang beginnt, und wie lange es gedauert hat die Datei zu laden. Dabei unterscheidet Firebug auch zwischen Daten die aus dem Zwischenspeicher (Cache) geladen werden, und solchen die vom Webserver abgefragt werden müssen. Auch AJAX-Anfragen werden hier angezeigt.

Auch für JavaScript-Programmierer gibt es einige nützliche Funktionen. So kann man zum Beispiel Stellen im Quelltext festlegen, an der die Ausführung angehalten und die Werte aller Variablen angezeigt werden sollen. Es ist auch möglich den Quelltext Zeile für Zeile auszuführen, wobei man sehr gut beobachten kann wie sich die Werte von Variablen verändern. Es ist sogar möglich zu messen welche Funktionen wie lange ausgeführt werden, das ist sehr hilfreich wenn man seine Skripte optimieren möchte bzw. wenn diese zu langsam sind.

Und das ist noch lange nicht alles was Firebug kann!

Zur Erweiterung
Webseite von Firebug

Dust-Me Selectors

Manchmal fügt man neue CSS-Selektoren hinzu, die andere ersetzen, vergisst aber die alten Selektoren zu entfernen, dabei wächst der Quelltext immer weiter, obwohl viele Selektoren gar nicht mehr benötigt werden würden. Diese Erweiterung findet unbenutzte CSS-Selektoren, und hilft einem dabei seine CSS-Dateien klein zu halten.

Artikel über Dust-Me Selectors
Zur Erweiterung
Webseite von Dust-Me Selectors

ColorZilla

Mit ColorZilla lassen sich alle Farben einer Webseite auslesen und in einer Palette darstellen, außerdem bietet die Erweiterung eine Farbpipette wie man sie aus Bildbearbeitungsprogrammen kennt, damit lassen sich die Farben jedes Pixels einer Webseite bestimmen. Hat man eine Farbe ausgewählt, kann man diese auch mit einem Klick gleich in die Zwischenablage kopieren, wobei einem auch noch mehrere Formate (#RRGGBB, rgb(…), etc.) zur Verfügung stehen. Auch eine Zoom-Funktion, mit der man die Webseite um bis zu 1000% vergrößert ansehen kann, bringt die Erweiterung mit.

Zur Erweiterung
Webseite von ColorZilla

Screengrab

Screengrab ist eine Erweiterung die es einem ermöglicht Bilder von einer Webseite zu machen. Dabei kann man entweder den gesamten sichtbaren Bereich, einen ausgewählten Bereich, den gesamten Fensterinhalt oder ein Bild der kompletten Seite erstellen. Grade letztere Funktion ist sehr praktisch, denn normalerweise müsste man ein Bild machen, dann weiter runterscrollen, wieder ein Bild machen, etc. und die Bilder am Ende zusammenfügen. Screengrab erspart einem diese Arbeit.

Zur Erweiterung
Webseite von Screengrab

MeasureIt

MeasureIt erlaubt es einem, überall auf einer Webseite ein Lineal anzuzeigen, mit dem man Abstände und Größen in Pixeln messen kann. Das ist sehr praktisch, wenn man überprüfen möchte, ob ein Element auch die gewünschte Höhe oder Breite einnimmt.

Zur Erweiterung
Webseite von MeasureIt

FirePHP

Mit FirePHP kann man in PHP Fehlermeldungen, Log-Meldungen, Variablen, Ausnahmen etc. ausgeben, und diese werden dann direkt an die Konsole von Firebug gesendet. Das ist gerade bei der Entwicklung von AJAX-Anwendungen sehr praktisch, da man so Informationen über den Programmablauf erhält ohne dabei die AJAX-Antworten mit irgendwelchen var_dump()-Aufrufen o.Ä. zu zerstören. Um FirePHP zu benutzen werden Firebug und eine kleine PHP-Bibliothek benötigt, die die Funktionen und Klassen zur Ausgabe von Meldungen/Informationen enthält.

Zur Erweiterung
Webseite von FirePHP
Anleitung zur Benutzung von FirePHP (Englisch)

YSlow

YSlow ist eine von Yahoo entwickelte Erweiterung, die eine Webseite analysiert, und anschließend Vorschläge macht, wie man die Geschwindigkeit der Webseite optimieren kann. CSS, Bilder, Cookies, die Auslieferung von Inhalten, der Server, JavaScript – alles wird von YSlow analysiert. Zusätzlich zu den Ergebnissen der Analyse werden dann auch noch Hinweise darauf gegeben was man tun muss um die Seite schneller zu machen. Bei der Analyse hat man die Wahl zwischen verschiedenen vorgegebenen Regeln (je nachdem um was für eine Seite es sich handelt) nach denen YSlow die Seite analysiert, wobei man auch eigene Regeln hinzufügen kann. Außerdem ist es möglich zu überprüfen ob Bilder optimiert werden können oder zum Beispiel fehlerhafte JavaScript-Quelltexte eingebunden werden.

Für YSlow wird ebenfalls Firebug vorausgesetzt.

Zur Erweiterung
Webseite von YSlow

Browser-Update.org – Benutzer über neue Browserversionen informieren

Antu — Sun, 05 Apr 2009 21:05:06 +0000

Viele Benutzer verwenden hoffnungslos veraltete Browser um im Internet zu surfen. Das ist sowohl für die Benutzer selbst als auch für Webdesigner von Nachteil. Neuere Browser sind komfortabler, schneller und vorallem sicherer. Denn veraltete, meist nicht mal mehr vom Hersteller unterstützte Browserversionen enthalten oft Sicherheitslücken und schützen den Benutzer nur mangelhaft vor Viren, Trojanern, Datendiebstahl und anderen Bedrohungen. Auch für Webdesigner ist das ein Problem, denn sie müssen Rücksicht auf solche veralteten Browser nehmen und die von ihnen erstellten Seiten extra an die Fehler dieser Browser anpassen. Viele neue Techniken können sie nicht verwenden weil ein großer Prozentsatz der Benutzer Browser benutzt die diese nicht unterstützen.

Doch viele Benutzer wissen gar nicht das ihr Browser veraltet ist bzw. das man den Browser überhaupt aktualisieren kann. Browser-Update.org ist eine noch relativ neue Initiative mit dem Ziel genau das zu ändern.

Browser-Update.org

Die Seite bietet einen kleinen JavaScript-Quelltext an, den man in die eigene Webseite einbinden kann. Dieser überprüft die Browserversion des Benutzers, und falls er einen veralteten Browser verwendet bekommt er einen kleinen unaufdringlichen Warnhinweis zu sehen, der ihn auf die Nachteile eines veralteten Browsers und die Möglichkeit selbigen zu aktualisieren hinweist. Der Hinweis enthält einen Link auf eine Seite auf der sich eine Liste von Gründen für eine Aktualisierung sowie Hinweise und Links zu aktuellen Browsern findet.

Wenn der Benutzer den Hinweis ignoriert wird selbiger auch erstmal einige Zeit lang nicht mehr angezeigt, der Benutzer wird also nicht dauerhaft von dem Hinweis genervt. Es ist auch möglich einzustellen bei welchen Versionen der Besucher eine Warnung angezeigt bekommen soll, und bei welchen nicht.

Fast 400 Seiten benutzen das Skript bereits

Laut den Statistiken von Browser-Update.org wird das Skript bereits von fast 400 Seiten verwendet und konnte bereits fast 500 Benutzer dazu überreden ihren Browser zu aktualisieren (wobei ich mich frage wie das gemessen wird).

Ich finde diese Initiative sinnvoll, deswegen läuft dieses Skript ab heute auch auf meinem Blog.

Unbenutzte CSS-Selektoren finden mit Dust-Me Selectors

Antu — Sun, 05 Apr 2009 16:47:43 +0000

Wenn man nicht mehr benötigte HTML-Elemente entfernt oder CSS-Selektoren durch andere ersetzt kann es passieren das man vergisst die alten bzw. nicht mehr benötigten Selektoren aus der CSS-Datei zu entfernen. So sammeln sich über die Zeit immer mehr Selektoren an die gar nicht mehr benötigt werden und nur unnötig die CSS-Datei aufblähen. Mit der Firefox-Erweiterung Dust-Me Selectors lassen sich solche unbenutzten Selektoren sehr einfach aufspüren.

Bedienung

Nach der Installation der Erweiterung und dem obligatorischen Firefox-Neustart findet sich in der Statusleiste unten rechts ein kleiner pinker Staubwedel. Klickt man darauf wird die Überprüfung der geöffneten Seite gestartet. Nach ein paar Sekunden öffnet sich ein Ergebnis-Fenster in dem alle unbenutzten CSS-Selektoren inklusive der Zeile in der sie definiert sind angezeigt werden.

Automatische Überprüfung

Meistens werden aber nicht alle Selektoren auf einer Seite benutzt, weswegen man mehrere HTML-Dateien überprüfen will. Hier gibt es zwei Möglichkeiten.

Die eine Möglichkeit besteht darin die automatische Überprüfung einzuschalten (Rechtsklick auf den Staubwedel, Automation->Run automatically) und alle Seiten die man überprüfen will anzusurfen.

Die andere Möglichkeit ist sogar noch einfacher, es wird allerdings eine Sitemap (Seite die Links zu allen zu überprüfenden Seiten enthält) benötigt. Hat man eine solche Sitemap, klickt man einfach auf Automation->Spider Sitemap, gibt dort die Adresse der Sitemap an und klickt auf Go. Dann werden automatisch alle in der Sitemap enthaltenen Links überprüft.

Ist die Überprüfung abgeschlossen öffnet sich ein Fenster welches die Ergebnisse anzeigt.

Anhand der Ergebnisse ist es nun ein leichtes die entsprechenden CSS-Dateien von nicht mehr benötigten Selektoren zu befreien.

Transparente Farben und Elemente mit CSS

Antu — Thu, 19 Mar 2009 17:37:22 +0000

Mit CSS3 bekommen Webdesigner zwei neue Möglichkeiten um Webseiten durch transparente Elemente und Farben interessanter zu gestalten. Wie man Elemente transparent gestaltet und bei Farbangaben zusätzlich auch die Deckkraft angibt erfahrt ihr in diesem Artikel.

Transparente Elemente mit opacity

Die CSS3-Eigenschaft opacity legt die Deckkraft eines Elementes sowie aller seiner Kind-Elemente bzw. Inhalte fest. Diese Eigenschaft wird zwar erst mit CSS3 in den Standard aufgenommen, die meisten aktuellen Browser (außer dem Internet Explorer) unterstützen sie aber bereits.

Sehr alte Mozilla/Webkit-Browser kennen nur die Eigenschaften -moz-opacity und -khtml-opacity, da diese Browser allerdings heutzutage kaum noch verwendet werden, kann man diese auch weglassen. Für den Internet Explorer gibt es die proprietäre Eigenschaft filter: alpha(opacity=XXX) mit dem die Deckkraft eines Elementes verändert werden kann. Ab Version 8 des Internet Explorers unterstützt dieser zusätzlich auch noch die Schreibweise -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=XXX)";, diese kann man aber auch weglassen, da der IE 8 immer noch die alte Schreibweise unterstützt.

.halbtransparent {
    opacity:0.5; /* CSS3 (Neuere Browser außer Internet Explorer) */
    filter:alpha(opacity=50); /* Internet Explorer 4-7 */
 
    /* Folgende Eigenschaften können auch weggelassen werden, fast alle Browser verstehen
       die beiden obigen Eigenschaften. */
    -moz-opacity:0.5; /* Gecko (Ältere Mozilla-Browser)  */
    -khtml-opacity:0.5; /* Alte Versionen von Konqueror oder Safari */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* Internet Explorer 8 */
}

Die Eigenschaften opacity, -moz-opacity und -khtml-opacity erwarten eine numerische Angabe von 0.00 (komplett durchsichtig) bis 1.00 (keine Transparenz). Die beiden Filter für den Internet Explorer erwarten eine Angabe von 0 (unsichtbar) bis 100 (100% sichtbar).

Falls das Element im Internet Explorer trotz richtiger CSS-Eigenschaften nicht transparent dargestellt wird kann das daran liegen das es nicht die Eigenschaft hasLayout hat. Das lässt sich zum Beispiel durch das hinzufügen von zoom:1; beheben. Mehr Informationen über hasLayout.

Farben mit verringerter Deckkraft: RGBA bzw. HSLA

Mit CSS 1 und 2 hat man 3 Möglichkeiten um Farben anzugeben: Im hexadezimalen Format, z.B. #RRGGBB, als Farbname, z.B. red, oder in der Form rgb(rrr, ggg, bbb). Mit CSS3 kommen noch rgba(rrr, ggg, bbb, a.aa) sowie hsla(hhh, sss%, lll%, a.aa) hinzu. Das A in RGBA bzw. HSLA steht für Alphakanal, und regelt die Deckkraft der Farbe.

Das macht es viel leichter beispielsweise nur den Hintergrund eines Elements durchsichtig zu gestalten während die Inhalte voll sichtbar bleiben.

.transparenter_hg {
    background-color:rgba(255, 0, 0, 0.50);
}

Bei der HSL(A)-Angabe wird die Farbe nicht über die Rot-, Grün-, und Blauanteile der Farbe definiert sondern über den Farbton (Hue), die Farbsättigung (Saturation) und die Helligkeit (Lightness). Der HSL-Farbraum ist für Menschen einfacher zu benutzen als der RGB-Farbraum, da man nur jeweils einen Wert verändern muss um Helligkeit, Sättigung und Farbe zu ändern.

Browserunterstützung

Ich habe mal ausprobiert welcher Browser welche Eigenschaften versteht, hier eine kleine Tabelle:

Browser	opacity	-moz-opacity	-khtml-opacity	filter: alpha	-ms-filter: alpha	RGBA und HSLA
Mozilla Firefox 3.1	Ja	Nein	Nein	Nein	Nein	Ja
Mozilla Firefox 3.0.6	Ja	Ja	Nein	Nein	Nein	Ja
Mozilla Firefox 2.0.0.19	Ja	Ja	Nein	Nein	Nein	Nein
Firefox 0.8	Nein	Ja	Nein	Nein	Nein	Nein
Epiphany 2.22	Ja	Ja	Nein	Nein	Nein	Ja
Opera 8.54	Nein	Nein	Nein	Nein	Nein	Nein
Safari 3.2.1	Ja	Nein	Ja	Nein	Nein	Ja
Opera 9.64	Ja	Nein	Nein	Nein	Nein	Nein
Internet Explorer 7	Nein	Nein	Nein	Ja	Nein	Nein
Chrome 1.0	Ja	Nein	Ja	Nein	Nein	Ja, aber ohne Transparenz
Internet Explorer 5.5	Nein	Nein	Nein	Ja	Nein	Nein
Internet Explorer 8	Nein	Nein	Nein	Ja	Ja	Nein

Mein Fazit ist: Transparente Elemente sind heutzutage kein Problem mehr, es wird aber noch einige Zeit dauern bis man RGBA/HSLA benutzen kann.

Beispielseite

Ich habe eine kleine Beispielseite mit ein paar transparenten Texten und Elementen sowie Farben mit reduzierter Deckkraft erstellt um das ganze mal zu demonstrieren.

Zur Beispielseite