Wer glaubt, dass CSS3 keine Neuerungen mehr erfährt, täuscht sich. Sogar das “gute alte” CSS 2.1 ist immer noch in einem Stadium, das als nicht abgeschlossen gilt. Demzufolge ist es sehr wahrscheinlich, dass wir in Sachen CSS3 noch einige Überraschungen erleben dürfen.

Aus gleich zwei Quellen habe ich auch gleich etwas parat – für meinen Teil ist es eine absolute Neuigkeit. Ich hoffe, für euch auch.

Auf ZDNet habe ich erfahren, dass “the Godfather of CSS” Håkon Wium Lie über ein CSS-Layout-Modell nachdenkt, dass mit einfachen Buchstaben-Platzhaltern realisiert werden kann. Vorteil der ganzen Sache wäre, ein Seitenlayout mit einer einzigen Anweisungen festzulegen, anstatt für jeden Kasten eigene Positionierungsregeln zu definieren.

Auf der oben genannten Seite fand sich auch ein Bild, dass meines Erachtens nur eine fixe Idee darstellt, aber unheimlich Potenzial hat. Ich stelle es mal nach:

body {
		font-family: Arial, Helvetica, sans-serif;

		display: 	'a    .    b    .    c '/ 20px
					'd    .    e    .    f' / 100px
					'.    .    .    .    .' / 1em
					'.    .    g    .    h' / 20px
					'50px 2px  90px 4px 40px';

	}

img#logo    { position: a; }
div#teaser  { position: b; color: #333; }
div#date    { position: c; }
div#nav	    { position: d; }
div#main    { position: e; }
div#sidebar { position: f; }
div#footer  { position: g; }
div#notice  { position: h; }

Sieht interessant aus, nicht wahr? Die Syntax ist meines Erachtens sehr gewöhnungsbedürftig, um nicht zu sagen “unelegant”. Mir fällt spontan aber auch keine bessere Lösung ein, mit ASCII-Platzhaltern ein Layout zu formen. Auf jeden Fall darf man gespannt, was sich daraus entwickelt. In diesem Jahr darf man von den Verantwortlichen aber noch keine Hoffnungen machen; das “Template Modul” hat derzeit nur mittlere Priorität.

Auch für die Textgestaltung geht nicht spurlos an CSS3 vorbei. Überarbeitet wird die Handhabung für line-break und word-break, dass in der Vergangenheit oft für Verwirrung sorgte. Auch die Ausrichtung des Textes mittels text-align wird wohl einige Neuerungen zu erwarten haben. Text-Stroke ist zwar nicht die allerneueste CSS3-Spezifität, klingt aber trotzdem nützlich. Schade, dass bisher nur Webkitbasierende Browser von der Eigenschaft profitieren – Mozilla hält sich weiterhin bedeckt.

Zum Thema “border-radius” muss ich ja nichts sagen. Es ist wohl das derzeit beliebteste CSS3-Element. In Tutorials und Quick Tipps sieht man des öfteren eine solche Notation:

-moz-border-radius-bottomright: 25px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-right-radius: 25px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 5px;

(Hinweis: Die Webkit-Variante wird sich aller Voraussicht nach durchsetzen.)

Hier sehen wir, wie für jede “Ecke” eine neue Zeile begonnen wird. Ähnlich der Kurzschreibweise für border können wir aber die runden Ecken auch so notieren:

-moz-border-radius: 0 0 25px 5px;
-webkit-border-radius: 0 0 25px 5px;
border-radius: 0 0 25px 5px;

Schön, nicht wahr? Desweiteren haben wir die Möglichkeit, eine einzelne Ecke unproportional anrunden zu lassen:

   -moz-border-radius-bottomright: 100px 20px;
   -moz-border-radius-bottomleft: 25% 70%;
   -webkit-border-bottom-right-radius: 100px 20px;
   -webkit-border-bottom-left-radius: 25% 70%;
   border-bottom-right-radius: 100px 20px;
   border-bottom-left-radius: 25% 70%;

Wie das aussieht, kann man hier sehen:

Man hat dank border-radius also relativ einfach nahezu alle beliebigen rundlichen Objekte erstellen. Auf negative Werte muss man allerdings nach wie vor verzichten.

Håkon Wium Lie gab übrigens bekannt,  dass das Thema border-radius schon bei der ersten Version von CSS ein Thema war. Es wurde nicht übernommen, weil man davon ausging dass es aufgrund der 70er-Jahre-Optik sowieso nicht genutzt wird.