Manuel-Bieh.de – Web-Development & Consulting

Der CSS2.1-Standard steht offiziell vor seiner Verabschiedung. Im Moment läuft der sogenannte „Last Call“, bei dem man bis zum 15. Juli Zeit hat Kommentare abzugeben. Fein, dann fehlt jetzt nur noch die vollständige, browserweite Unterstützung und korrekte Interpretation, dann sind wir schon mal ein ganzes Stück weiter. Da CSS2.1 nun dann wohl offiziell da ist, können wir, weil experimentierfreudig und neugierig, schon einmal einen ersten Blick darauf werfen, was uns zukünftig in CSS3 erwartet, wenn die großen Browserhersteller diesen Standard irgendwann in einigen Jahren (Jahrzehnten?) mal vollständig unterstützen sollten.

Daher hier nun eine kleine Zusammenfassung dessen, was mir an neuen Features persönlich positiv ins Auge fiel. Eine genaue Syntax oder Funktionsbeschreibung werde ich mit diesem Text jedoch bewusst nicht wiedergeben, da bisher, wie erwähnt, noch lange kein Browser den kompletten CSS3 Umfang unterstützt, und ich, ohne es testen zu können, keinen möglicherweise falschen Code beschreiben möchte. Ausführlicher und „richtiger“ kann man es sich beim W3C direkt durchlesen, allerdings nur auf Englisch. Die Links dazu gebe ich mit auf den Weg. Hier vorhandene Codebeispiele sind in der Regel aus dem englischen Text des W3C übernommen.

Ok, genug Gesabbel. Fangen wir an.

Erzeugter und ersetzter Content

Als erstes einmal dürfte in CSS3 zum Beispiel der große Umfang von erzeugten und ersetzten Content interessant werden. Hiermit soll es beispielsweise möglich sein mehrere ::before und ::after-Elemente verschachtelt oder hintereinander auf einen Selektor anzuwenden. Ein Code wie

div { content: "A"; }
div::before {content: "B";}
div::before::before {content: "C";}

würde also im Browser so erscheinen:

,-----------------------.
| ,---------.           |
| | ,---.   |           |
| | | C | B | A         |
| | `---'   |           |
| `---------'           |
`-----------------------'

Wobei hier die before-Elemente auf den unteren Ebenen jeweils die Deklarationen der übergeordneten Eltern-Ebene(n) zugewiesen bekommen. Beispiel: das div bekommt einen roten Hintergrund, sowie gelbe Schrift. Dies gilt auch für die Bereiche B und C. Bekommt der Bereich unter B (div::before {content: "B";}) nun statt des roten einen blauen Hintergrund, so gilt dies auch für den Bereich C, logischerweise nicht jedoch auch für A.

Eine andere Möglichkeit soll sein, quasi unabhängige ::before und ::after Pseudoelemente zu benutzen. Diese können quasi „positioniert“ werden. ::before(1) entspricht dabei dann dem einfachen ::before. Möglich ist dann aber auch das Positionieren eines zweiten Elements, vor dem ersten. Beispiel:

div { content: "A" }
div::before { content: "B"; }
div::before(2) { content: "C"; }

ergäbe im Browser die folgende Darstellung:

,-----------------------.
| ,---. ,---.           |
| | C | | B | A         |
| `---' `---'           |
`-----------------------'

Die durch ::before erzeugten Inhalte würden zwar immernoch die Deklarationen des Erzeugers übernehmen, jedoch nurnoch auf der einen Ebene des Erzeugenden Divs selbst. So interpretiere ich die Darstellung auf der Seite des W3C jedenfalls.
http://www.w3.org/TR/css3-content/#inserting

Zwei bisher von keinem der aktuellen Browsern unterstützte Pseudo-Elemente sind ::outside und ::alternate. Mittels ::outside soll es möglich sein Elemente außerhalb des Erzeugerelementes zu steuern, um diesem z.B. einen zweiten Rahmen zu verpassen. Vom Prinzip her wohl ähnlich wie :before und :after, jedoch wie gesagt elementumfassend.
::alternate ist, wie der Name es vermuten lässt, ein Pseudo-Element um alternierenden Inhalt an anderer Stelle im Dokument einzufügen. Dieses Thema erscheint mir beim Lesen allerdings noch etwas zu komplex zum Erläutern, daher besser selbst den entsprechenden Teil in der Working Draft, CSS3-Content, Punkt 4.4 lesen:
http://www.w3.org/TR/css3-content/#inserting1

Dies war nur ein kleiner Auszug zum Thema „generierter Content“ aus der Working Draft, welche laut Roadmap bereits im ersten Quartal 2006 eingeführt werden soll. Weitere, teils sehr komplexe Punkte finden sich im CSS3-Content-Bereich des W3C:
http://www.w3.org/TR/css3-content

Hintergründe und Rahmen

Yeeehaw! … äähm, sorry. Aber irgendwas in der Art dachte ich mir, als ich mir den Entwurf für die background-Eigenschaften von CSS3 zu Gemüte führte, welcher schon bald offiziell verabschiedet werden soll. Künftig soll es dann beispielsweise möglich sein, ein Hintergrundbild zu skalieren (ich weiß, sowas macht man nicht), oder das Bild schon im Border, bzw erst nach dem Padding-Bereich anfangen zu lassen (background-origin: border/padding/content; vgl. Boxmodell).

Die für mich schönste Neuerung was Hintergrundbilder betrifft ist die, dass man nun für ein Element mehrere Hintergründe definieren und positionieren kann:

background-image: url(bild1.png), url(bild2.png), url(bild3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 20% 25%, 40% 10%, 50% 15%;

Auf diese Art hätte ich die Bilder »bild1.png«, »bild2.png« und »bild3.png«, welche sich gar nicht, nur auf der x-Achse und nur auf der y-Achse kacheln.

Auf diese Weise lassen sich, denke ich, unzählige Gestaltungsmöglichkeiten auftun. Wie sehr habe ich eine solche Möglichkeit in Vergangenheit bereits vermisst. Noch dazu wird es mittels background-crop möglich sein, ein komplettes Bild in den Cache zu laden, jedoch nur einen Teilausschnitt dessen im Browser anzuzeigen. Dies, könnte ich mir vorstellen, kann sich gut nutzen lassen, um Thumbnails für interessante und einfache (jedoch Ladeintensive) Bildgalerien zu erzeugen.

Das sind die für mich nennenswerten großen Neuerungen zum Thema Backgrounds. Kommen wir also zu den „fancy Borders“.

Hier stellt sich mir teilweise ernsthaft die Frage stellt: Wer bitte braucht das ??? Na gut, vielleicht ist das bisher auch einfach nur jenseits meiner Vorstellungskraft, aber ich möchte wirklich mal wissen wer einen border-style: wave;, dot-dash, oder dot-dot-dash brauchen wird? (vgl. Fatboy Slim – Slash dot dash)

Spielerei, aber eine vermutlich brauchbarere Neuerung ist die Möglichkeit, als border-style eine URL zu einem Bild anzugeben. So kann man sich, wie bisher nur mit Tricks, seine eigenen selbstgestylten Rahmen zusammenstellen. Könnt zwar meiner Meinung nach in eine wahnsinns Frickelei ausarten, in den Fingern kribbeln tut‘s mir aber jetzt schon, wenn ich mir überlege was man damit für einen Spaß haben könnte. ;)

Was bisher ebenfalls nur mit Tricks zu erreichen war, sind abgerundete Ecken. Diese gehören ab CSS3 zum Standard. Einfach (wie bisher bereits in Mozilla Browsern mittels @-moz-border-radius möglich) einen Radius angeben, und schon hat man auf einfachste Weise ein Element mit abgerundeten Ecken. Endlich weg vom bisherigen Standard-Ecken-Kastenlayout? Coole Sache.

Ebenfalls eine coole Sache könnte die box-shadow-Eigenschaft werden. Mittels box-shadow soll es möglich sein einen Offset, sowie eine Farbe anzugeben um einem Element einen einfachen Schlagschatten anzuhängen. Wobei sich hier ja bereits in der Vergangenheit zahlreiche Varianten auftaten um Schlagschatten egal welcher Art zu erzeugen.

Alles zum Thema Backgrounds & Borders, wie gesagt beim W3C:
http://www.w3.org/TR/2005/WD-css3-background-20050216

Spaltensatz

Auch dies könnte eine ziemlich nützliche, nie da gewesene Errungenschaft sein, wenn man sich in Fachforen einmal anschaut, bei denen in unzähligen Threads gefragt wird, wie man 2 Spalten gleich hoch bekommt. Leider scheint laut Working-Draft bisher keine Möglichkeit vorgesehen zu sein einen Umbruch in eine zweite Spalte zu erzwingen, die zweite Spalte fängt also generell dort an, wo für die Erste kein Platz mehr ist.

Aber ich bin mir sicher auch hierbei wird es einigen findigen Entwicklern gelingen einen Workaround zu basteln. Testen kann man dies übrigens bereits in aktuellen Developer-Versionen des Firefox 1.1 Release. Folgenden Code dafür einfach in ein neues HTML-Dokument kopieren:

<div style="width: 400px; -moz-column-count: 2; 
-moz-column-width: 50%; -moz-column-gap: 26px;">
Hier hinein kommt ein Blindtext</div>

Die column-rule-Angaben werden hier bisher leider wohl noch nicht interpretiert. Dafür soll es später jedoch auch möglich sein, Elemente z.B. auf dem Zwischenraum floaten zu lassen.
http://www.w3.org/TR/css3-multicol/

Float

… super Stichwort. Kannten wir bisher nur float: left; und float: right;, dürfen wir uns nun mit top, bottom, inside, outside, start, end und none rumärgern kreativ auslassen. Welches float dann nun genau wofür benutzt wird, lest es selbst:
http://www.w3.org/TR/css3-box/#the-float

Äquivalent dazu gibt es natürlich auch ein clear für jede dieser Richtungen.

Fazit

Alles in allem sieht die Working Draft für mich schon sehr interessant aus, und ich bin gespannt was es für neue spannende Tipps und Tricks geben wird, wenn dieser Standard endgültig verabschiedet und in einigen Jahren (Jahrzehnten?) in die Browser implementiert ist. Natürlich ist dies hier auch nur ein minimal kleiner Auszug von dem, was in CSS Level 3 vorgesehen ist, um Euch vielleicht ein bisschen den Mund wässerig zu machen, wie es bei mir beim Lesen der Draft auf jeden Fall an einigen Stellen der Fall war. Leider ist dieser Artikel nun doch nicht so ausführlich geworden wie ich es mir gewünscht habe, für mehr fehlt mir jedoch im Moment die Zeit, ich hoffe Ihr habt Verständnis ;)

Wer selbst einmal einen Blick auf die Roadmap und CSS3 werfen möchte, findet diese unter http://www.w3.org/Style/CSS/current-work#table