CSS3: Vorschau und aktueller Stand

4 | 15 Kommentare | 48609 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS3: Vorschau und aktueller Stand" mit Ihrem Wissen!

Anzeige Hier werben

CSS3 ist die schon seit einiger Zeit in Entwicklung befindliche neue Version des Webstandards CSS. Nachdem mittlerweile fast alle aktuellen Browser CSS2.1 problemlos unterstützten, kommt die Implementierung von CSS3-Funktionen langsam auch ins Rollen.

Viele tolle Effekte mit gleichzeitig weniger Code können durch die neuen CSS-Eigenschaften erreicht werden.

Diese Seite soll eine Übersicht über die interessantesten Eigenschaften, die schon in einem Browsern implementiert wurden, zeigen.

  • Kompatibilitäten aktualisieren (mit CSS-Referenz im Einklang)
  • Artikel in CSS-Referenz verlinken

Rahmen

Abgerundete Ecken

Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Fast
Safari3Unterstützt4Unterstützt
border-radius

Mit border-radius ist es endlich möglich, Elemente einfach mit abgerundeten Ecken auszustatten.

Für Mozilla- und Safari-Browser gibt es bereits die anbieterspezifischen CSS-Eigenschaften -moz-border-radius und -khtml-border-radius um den Effekt zu erzielen.

Um den Radius für bestimmte Ecken zu definieren, können die Suffixe -topleft, -topright, -bottomright und -bottomleft verwendet werden. Bei Safari wird die Angabe der Ecke eingeschoben: -khtml-border-top-left-radius

Rahmen-Bilder

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Unterstützt4Unterstützt
border-image

Die Eigenschaft border-image können für Rahmen Hintergrundbilder festgelegt werden. Die neue Eigenschaft kann die Angabe von bis zu drei URLs aufnehmen, um die Bilder einzubauen.

Außerdem können mit den Eigenschaften border-top-image, border-bottom-image, border-left-image und border-right-image für alle Kanten eigene Grafiken definiert werden.

Die Definitionen der CSS-Eigenschaft border-style werden bei einem Einsatz von border-image überschrieben.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unbekannt4Unbekannt
border-corner-image(-*)

Last but not least wird mit border-corner-image die Zuweisung von Bildern für alle 4 Ecken möglich sein. Wie von anderen border-Eigenschaften bekannt auch einzeln mit border-top-left-image, border-top-right-image, border-bottom-right-image und border-bottom-left-image.

Schatten

Firefox2Nein3Nein3.5Unbekannt3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Nein10Unterstützt
Safari3Unterstützt4Unterstützt
box-shadow
Firefox2Nein3Nein3.5Unterstützt3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
text-shadow

Mit box-shadow kann einem Kasten ein Schatten einfach und ohne Bilder gegeben werden.

Dagegen bietet text-shadow die Möglichkeit Text mit sogar mehreren Schatten (im Opera) zu versehen. Damit können schöne Effekte wie Leuchten usw. erzielt werden. Schöne Beispiel kann man im Opera 9.5 auf dieser Seite finden.

Hintergrund

Bessere Steuerung von Hintergrundbildern

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Unbekannt
Safari3Unterstützt4Unterstützt
background-origin, -clip

Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)

background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)

Größe von Hintergrundbildern

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
background-size

Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.

Mehrere Hintergrundbilder

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Nein10Unbekannt
Safari3Unterstützt4Unterstützt
Mehrere Hintergrundbilder

In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.

Deckkraft/Transparenz von Elementen

Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unterstützt
IE6Fast7Fast8Fast
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
opacity

Mit der opacity Eigenschaft kann die Deckkraft/Transparenz von Elementen gesteuert werden. Diese Eigenschaft wird zwar so nicht im Internet Explorer unterstützt, es gibt aber eine ebenbürtige Eigenschaft (filter), wodurch in allen Browsern Transparenz genutzt werden kann.

Beliebige Schriften herunterladen ("WebFonts")

Firefox2Nein3Nein3.5Unterstützt3.6Unbekannt
IE6Fast7Fast8Fast
Opera9.5Unterstützt10Unterstützt
Safari3Nein4Unterstützt
@font-face

Mit @font-face kann eine beliebige Schriftdatei auf einem Server angegeben werden, die dann heruntergeladen und vom Browser verwendet wird.

Dies war eigentlich schon seit sehr langer Zeit in der CSS2 Spezifikation, wurde aber mangels Browserunterstützung in CSS 2.1 wieder entfernt.

Neuste WebKit-Entwicklerversionen enthalten diese Funktion, Schriften dynamisch nachzuladen. Der Internet Explorer unterstützt seit Version 4 das nachladen von Schriftarten im eigenen .eot-Format.

Neue Farbangaben

Firefox2Nein3Unterstützt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
hsl()

Neben RGB ist es in CSS3 auch möglich seine Farbangaben in HSL anzugeben. Das heißt, dass die Werte nicht in additiver Farbmischung sondern in Farbton durch Grad und Sättigung und relative Helligkeit in Prozent angegeben werden.

HSL im Einsatz  
HTML
1
<div style="background-color: hsl(0,100%,50%);"></div>

CSS 3 Farbangaben mit Transparenz

Firefox2Nein3Unterstützt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
rgba(), hsla()

Daneben ist es auch möglich RGB und HSL mit Transparenz-Angaben zu versehen: Die beiden Farbsysteme nehmen hierbei die Form RGBA und HSLA ein. "A" steht für den Alpha-Kanal. Die Werte liegen zwischen 0 und 1, wobei 0 0% Transparenz und 1 100% Transparenz hat. RGBA verhält sich hierbei genauso wie HSLA.

RGBA im Einsatz  
HTML
1
<div style="background: rgba(255, 0, 0, 0.2);"></div>

Schrift und Satz

Textumbruch

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Unbekannt7Unbekannt8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unbekannt4Unbekannt
text-wrap

Bessere Steuerung von Zeilenumbrüchen: Mit text-wrap können Zeilen an Interpunktionszeichen umgebrochen werden.

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unbekannt10Unbekannt
Safari3Unterstützt4Unterstützt
word-wrap

Mit word-wrap legt man fest wie Wörder umgebrochen werden dürfen. hyphenate bricht Wörter um, indem an die vorangehende Silbe ein "-" angehängt wird.

Firefox2Unbekannt3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Unbekannt7Unbekannt8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unterstützt4Unterstützt
word-break

Die word-break-Eigenschaft legt fest, welche Zeilenumbruch-Beschränkungen für ein Element gelten. Diese Eigenschaft ist nur für asiatische Schriftarten interessant.

Textfluss

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Fast4Unbekannt
text-overflow

Was mit überfließendem Text geschehen soll, kann mit text-overflow gesteuert werden. Hier kann man z.B. automatisch bei zu langem Text Pünktchen "..." anhängen lassen. (Opera:-o-text-overflow )

Blöcke

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unbekannt4Unbekannt
text-align-last

Die Eigenschaft text-align-last gibt (falls text-align:justify; gesetzt ist) an, wie die letzte Zeile des Blocksatzes gehandhabt werden soll.

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Nein7Unbekannt8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unbekannt4Unbekannt
text-justify

Genauso verhält sich auch text-justify zu text-align. Diese Eigenschaft gibt an wie stark der Blocksatz erzeugt werden soll. Zum Beispiel nur durch die Zwischenräume der Wörter oder auch durch die Zwischenräume der Buchstaben.

Sonstige

Mit white-space-collapse kann, wie der Name schon sagt, die Handhabung von Leerzeichen gesteuert werden.

Die Eingeschaften text-align, letter-spacing und word-spacing erhalten weitere Werte.

text-kashida-space ist eine Eigenschaft die noch undefiniert ist. Unter Umständen kommt diese auch gar nicht im CSS3 zum Einsatz.

Userinterface

Firefox2Nein3Unterstützt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unbekannt10Nein
Safari3Unterstützt4Unterstützt
resize
Firefox2Unterstützt3Unterstützt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
outline

Der Benutzer kann Elemente mit resize in der Größe verändern.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herumgelegt werden, der aber nicht die Box breiter macht.

Selektoren

Firefox2Nein3Fast3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unterstützt10Unbekannt
Safari3Fast4Unterstützt
CSS 3 Selektoren

Mit neuen Selektoren kann man Elemente noch genauer auswählen.

Beispiele: first-of-type und first-letter

Boxmodel

Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unbekannt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
overflow-x, overflow-y

Mit overflow-x und overflow-y kann der Überfluss eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

Firefox2Unterstützt3Unterstützt3.5Unterstützt3.6Unbekannt
IE6Nein7Nein8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

Firefox2Nein3Nein3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Nein4Unbekannt
calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eigenschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.

Beispiel für die Verwendung von calc()  
css
1
2
#left { width: calc( 30% - 2*1em - 10px ); }
#right { width: calc( 50% - 2*1em ); }

Mehrspaltiges Layout

Firefox2Unterstützt3Unterstützt3.5Unbekannt3.6Unterstützt
IE6Nein7Nein8Nein
Opera9.5Nein10Nein
Safari3Unterstützt4Unterstützt
column-*

Um die Erstellung eines mehrspaltigen Seitenlayouts ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden. Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Target

Firefox2Nein3Unbekannt3.5Unbekannt3.6Unbekannt
IE6Nein7Nein8Unbekannt
Opera9.5Unbekannt10Unbekannt
Safari3Unbekannt4Unbekannt
target

Die neue Eigenschaft target ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Anderes

  • Medientypen
  • Sprache
  • Druckausgabe
  • Transforms
  • Animationen
  • Variablen
  • Koordinaten-Modell

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 10 Personen an der Seite "CSS3: Vorschau und aktueller Stand" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS3: Vorschau und aktueller Stand" hier bearbeiten.


Kommentare: CSS3: Vorschau und aktueller Stand

Neuen Kommentar schreiben
CSS target-Eigenschaft
Beantworten

Also was ist denn diese target-Eigenschaft? Ich konnte es erst ja gar nicht glauben, dass es die jetzt gibt! Ich dachte man wäre endlich so weit, dass man den Benutzer selbst entscheiden lässt ob er eine Seite in einem neuen Fenster öffnen lässt. Deshalb wurde doch auch das target HTML-Attribut abgeschafft. Und jetzt das ganze in CSS?

Bei mir entscheide ich das einfach darüber ob ich die mittlerer Maustaste benutzt oder nicht. Und bei mir ist im Browser eingestellt dass keine Seite in neuem Fenster geöffnet sondern automatisch in einem neuen Tab. Hoffentlich kann man das dann auch im Browser abschalten.

Aber mal schauen ob es der target-Vorschlag überhaupt bis zum fertigen Standard schafft.

Thomas H am 09.04.2008 um 17:37
Re: CSS target-Eigenschaft
Beantworten

Die neue target-Eigenschaft soll über die Funktionweise des alten Attributs hinausgehen. Sie soll neben neuen Fenstern auch neue Tabs erzeugt werden sollen. Den Nutzen sehe ich allerdings auch nicht.

Also was ist denn diese target-Eigenschaft? Ich konnte es erst ja gar nicht glauben, dass es die jetzt gibt! Ich dachte man wäre endlich so weit, dass man den Benutzer selbst entscheiden lässt ob er eine Seite in einem neuen Fenster öffnen lässt. Deshalb wurde doch auch das target HTML-Attribut abgeschafft. Und jetzt das ganze in CSS?

Bei mir entscheide ich das einfach darüber ob ich die mittlerer Maustaste benutzt oder nicht. Und bei mir ist im Browser eingestellt dass keine Seite in neuem Fenster geöffnet sondern automatisch in einem neuen Tab. Hoffentlich kann man das dann auch im Browser abschalten.

Aber mal schauen ob es der target-Vorschlag überhaupt bis zum fertigen Standard schafft.

Holger V am 04.06.2008 um 13:16
Re: CSS target-Eigenschaft
Beantworten

ist so dokunmentiert, ja: es gibt als werte soweit ich weiß none, window und tab.

im normalfall ist klar dass man dem nutzer die freiheit lassen sollte. aber ich könnte mir vorstellen dass es sondersituationen gibt und dann braucht man eben nicht den komplizeirten js-weg nehmen

Die neue target-Eigenschaft soll über die Funktionweise des alten Attributs hinausgehen. Sie soll neben neuen Fenstern auch neue Tabs erzeugt werden sollen. Den Nutzen sehe ich allerdings auch nicht.

meggs am 04.06.2008 um 16:40
Re: CSS target-Eigenschaft
Beantworten

[...] dann braucht man eben nicht den komplizeirten js-weg nehmen

So kompliziert ist der auch nicht. Denke das ist in unter 5 Zeilen erledigt...und wenn man ein Framework wie mootools einsetzt kann man trotzdem eine HTML-Klasse für alle Links verwenden, die in einem neuen Fenster aufgehen sollen.

Finds deswegen sinnlos das in einer Layout-Sprache definieren zu können. Ist nunmal etwas, was zum Browser bzw. der Nutzung der Seite gehört. Nicht umsonst lassen sich - laut W3C - ja auch Scrollleisten nicht umformatieren.

Gerade auch weil ich schon allezuoft total überforderte Benutzer gesehen hab ("Wo kommt das Fenster da jetzt her?") bin ich eigentlich dafür die Eigenschaft ganz abzuschaffen. Braucht man es wirklich ist eine JS-Hürde gar nicht schlecht, damit nicht jeder Möchtegern-Webentwickler den Besucher mit neuen Fenstern nerven kann. ;-)

David Danier am 04.06.2008 um 16:51
Re: CSS target-Eigenschaft
Beantworten

Also mal als Beispiel:

Der User klickt auf ein Bild, um es zu vergrößern. Daraufhin soll eine Seite im Browser geöffnet werden, wo dieses Bild angezeigt wird.

Frage: Wie realisiere ich das ohne JS(weil immer doof, wenns anders geht, is ja schließlich eine Design-/Usuability-/Accessability-Frage)?

Man sollte bedenken, dass das Fenster wirklich neu sein müsste, weil ein Tab irgendwie doof aussehen würde :S!

Und da das HTML-'target' deprecated ist -> tatata! kommt man (meiner Meinung nach) auf das CSS-Target.

Ich denke es ist nichts fürchterlich wichtiges, aber ganz angebracht von der Logik her.

leoleones209 am 06.07.2009 um 15:33
Re: CSS target-Eigenschaft
Beantworten

Um Bilder vergrößert darzustellen gibt es viel einfachere Möglichkeiten, nennt sich meist irgendwas in Richtung "Lightbox". ;-)

Ohne JS (= weniger als 5% der Besucher) können auch direkt auf das Bild geleitet werden. Vor/Zurück im browser nutzen zu müssen bedeutet IMHO oft mehr Usability als neu geöffnete Fenster. Schon zu oft hier Leute dabei beobachtet sich zu wundern was nun los ist.

David Danier am 06.07.2009 um 15:39
Re: CSS target-Eigenschaft
Beantworten

jetzt wo der internet explorer auch tabs hat ist es irgnedwie nix mehr besonderes - what's next :P

ich fänds zb ganz nett wenn brower native lightboxen einbauen. dh ein link auf eine grafik öffnet ein schlankes fenster ähnlich dem einer lightbox nur eben nativ als hud window oder so. nur mal ein schneller gedanke von mir.

meggs am 12.07.2009 um 18:58
Spannend...
Beantworten

... finde ich ja, dass text-overflow irgendwie von allen außer dem FF unterstützt wrd

Benutzer gelöscht am 06.01.2008 um 02:10
schön aber tippfehler
Beantworten

schöne übersicht. von den neuerungen in css3 war ich vorher noch kaum im bilde... gramatik bzw tippfehler sollteste aber noch verbessern ;-)

meggs am 05.01.2008 um 19:54
Re: schön aber tippfehler
Beantworten

das ist ein wiki-eintrag, den kann theoretisch jeder bearbeiten...

schöne übersicht. von den neuerungen in css3 war ich vorher noch kaum im bilde... gramatik bzw tippfehler sollteste aber noch verbessern ;-)

Moritz Kern am 05.01.2008 um 23:47
Re: schön aber tippfehler
Beantworten

dann wird man als autor aufgeführt obwohl man nur ein paar fehlerchen verbessert hat. =P

meggs am 06.01.2008 um 12:59
Re: schön aber tippfehler
Beantworten

stimmt, aber man hat sich ja auch daran beteiligt.

aber ne Kennzeichnung, wer das Thema begonnen hat, oder wer die Hauptautoren sind, wär nicht schlecht.

dann wird man als autor aufgeführt obwohl man nur ein paar fehlerchen verbessert hat. =P

Moritz Kern am 06.01.2008 um 14:04
Re: schön aber tippfehler
Beantworten

oder der prozentuale Anteile am Text.

stimmt, aber man hat sich ja auch daran beteiligt.

aber ne Kennzeichnung, wer das Thema begonnen hat, oder wer die Hauptautoren sind, wär nicht schlecht.

dann wird man als autor aufgeführt obwohl man nur ein paar fehlerchen verbessert hat. =P

christian am 06.01.2008 um 17:02
Re: schön aber tippfehler
Beantworten

oder der prozentuale Anteile am Text.

stimmt, aber man hat sich ja auch daran beteiligt.

aber ne Kennzeichnung, wer das Thema begonnen hat, oder wer die Hauptautoren sind, wär nicht schlecht.

dann wird man als autor aufgeführt obwohl man nur ein paar fehlerchen verbessert hat. =P

oder so... wie werden die autoren bis jetzt aufgelistet? ist nicht der ersteller immer ganz oben?

meggs am 06.01.2008 um 17:14
Re: schön aber tippfehler
Beantworten

nein, weder der ersteller noch der letzte autor - ich kann keine logik erkennen....

oder so... wie werden die autoren bis jetzt aufgelistet? ist nicht der ersteller immer ganz oben?

Moritz Kern am 06.01.2008 um 17:43