Die neuen Browser kommen … und bringen etwas CSS3 mit #1

Der Browsermarkt ist in Bewegung. Kaum zu einer anderen Zeit des Internets, war die Entwicklung der Browser so aktiv wie zurzeit. Der Grund dahinter ist die derzeit sehr hohe Konkurrenz auf dem Bereich. Internet Explorer 6 und 7 verschwinden so langsam vom Markt und halten den Fortschritt nicht weiter auf.

In den nächsten Monaten werden mehrere Browserhersteller neue Versionen veröffentlichen. Mit Spannung erwartet wird der Internet Explorer 9, der Mitte März des Jahres kommen soll. Weiters soll Ende März Firefox 4 entscheiden. Für Chrome 10 ist seit heute eine Beta-Version verfügbar. Wie immer, wird die nächste Chrome-Version nicht lange auf sich warten lassen.

CSS3 kommt näher …

Auch wenn die Fertigstellung des CSS3-Standards noch etwas auf sich warten lassen wird, bzw. es derzeit noch keinen endgültigen Termin gibt, werden einige CSS3-Elemente schon bald produktiv eingesetzt werden können. Die kommenden Browser-Versionen werden diese dann unterstützen. Vor allem die „eye-candy“-Elemente können bald mal verwendet werden. Denn falls ein Browser diese nicht unterstützt, werden sie einfach nicht dargestellt, was aber kein Problem ist, da die Seite trotzdem ordentlich funktioniert. Ein paar dieser Elemente werde ich hier vorstellen.

Ein paar Informationen vorweg

Da derzeit noch nicht viel Browser alle drei vorgestellten Elemente interpretieren, wundert euch nicht, wenn das Beschriebene nicht mit dem Sichtbaren zusammenpasst. Von den derzeit in stabilen Versionen vorliegenden Browsern unterstützt nur Opera alle drei CSS-Attribute. Den Browser Safari konnte ich leider nicht testen.

Text-Schatten mit text-shadow

Ein CSS-Element, das mittlerweile in allen aktuellen Browsern bereits enthalten ist, ist „text-shadow“. Damit lassen sich Schatten für Textpassagen erzeugen.

Beispiel

Das ist ein Text mit Schatten

font-size: 18px; padding: 5px; 
text-shadow: 2px 2px 4px #acacac;

Erklärung zum Code
Die beiden ersten Werte legen den vertikalen bzw. horizontalen Versatz des Schattens fest. Der Dritte Wert beschreibt die Größe des Schattens (blur). Der Farbwert hinten natürlich die Farbe des Schattens.

Schatten für Boxen mit box-shadow

Mit box-shadow lassen sich Boxen (<div>,<p>, usw.) mit einem Schatten verzieren. Derzeit unterstützt von den von mir getesteten Browsern nur Opera das Attribut. Firefox 4 wird box-shadow ebenso unterstützen wie der Internet Explorer 9. Ob Chrome 10 den Schatten für Boxen auch unterstützen wird, weiß ich nicht, früher aber später wird die Funktion aber sicher auch in Chrome/Chromium integriert werden.

Beispiel

Das ist eine Box mit Schatten

font-size: 18px; padding: 5px; border: 1px solid #000; color: #fff;
box-shadow: 2px 2px 4px #acacac;

Erklärung zum Code
Funktioniert im Prinzip gleich, wie das Element text-shadow. Die beiden ersten Werte legen den vertikalen bzw. horizontalen Versatz des Schattens fest. Der Dritte Wert beschreibt die Größe des Schattens (blur). Der Farbwert zum Schluss die Farbe des Schattens.

Abgerundete Ecken mit border-radius

Diese Attribut wird ab Firefox 4 offiziell unterstützt werden, Chrome 9 kann es bereits heute. Der Internet Explorer wird mit Version 9 folgen. Opera kann es, wie Chrome, bereits heute.

Beispiel

Das ist eine Box mit abgerundeten Ecken

font-size: 18px; padding: 5px; border: 1px solid #000; background-color: #acacac;
border-radius: 8px;

Erklärung zum Code
Hier gibt es nicht viel zu erklären. Je höher der Pixelwert, desto abgerundeter ist die Box. Man kann die einzelnen Ecken auch unterschiedlich stark abrunden. Dazu muss man ganz einfach vier Pixelwerte angeben (angefangen von links oben im Uhrzeigersinn).