Die Zukunft wird für alle Webdesigner sehr rosig aussehen, zumindest wenn es um das Verwenden von CSS geht. CSS 3 wird mit neuen sehr hilfreichen Features aufwarten. Welche das sind erfahrt Ihr hier.
Man braucht keine Wahrsager-Hotline um zu wissen, dass für viele Webdesigner die tägliche Arbeit sehr viel einfacher wird, wenn erstmal CSS 3 draußen ist und von den meisten Browsern richtig interpretiert wird. Wahrhaft glorreiche Neuerungen erwarten jenen, der mit CSS 3 Internetseiten erstellen möchte.
Nie mehr Probleme mit Padding & Margin
Ich würde mein letztes Hemd darauf verwetten, dass jeder Webdesigner schon damit zu kämpfen hatte, das der Internet Explorer Padding und Margin anders handhabt als Firefox und Co. Das wird dank einem neuen Boxmodell in CSS 3 nicht mehr der Fall sein.
Taschenrechner im CSS
Klingt seltsam, ist aber so: In CSS 3 wird es möglich sein Berechnungen durchzuführen.
width: calc(100%/3 + 10px*2);
Transparenz
Der Mozilla Firefox kann es heute schon, der Internet Explorer leider nicht, die Rede ist von "Opacity" oder auch Transparenz. Wäre schon schön, die Durchsichtigkeit eines Objektes bestimmen zu können. Naja, ab dann kein Problem mehr.
Runde Ecken ohne Bilder
Auch kein Problem ist es dann abgerundete Ecken darzustellen. Heute schafft man das nur mit Bildern, die man z.B. in den Hintergrund legt, später gibt man über den Wert border-radius einfach an, wie groß die Rundung sein soll.
Neue Eigenschaft: Target und neuer Wert: Tab
Target kennen wir als Eigenschaft im Link-Tag innerhalb von HTML. Da verwenden wir das zum Beispiel so:
<a href="index.htm" target="_blank">Link</a>
Tja aber das wird dann hinfällig, weil das Target über CSS gesteuert wird. Und nicht nur das ändert sich, auch bekommt das Target einen neuen Wert und zwar target: tab; Damit kann dann eine neue Seite in einem Tab geöffnet werden, vorausgesetzt natürlich, dass der Anwender einen Browser verwendet der überhaupt Tabs kennt.
Mehrere Hintergrundbilder in einem Objekt
Geht nicht. Zumindest heute noch nicht. Mit CSS 3, kein Thema.
body {
background-image: url(bild1.gif), url(bild2.gif);
}
Es gibt schon Situationen, wo ich diese Funktion gerne heute schon genutzt hätte.
Für verschiedene Werte, verschiedene Designs
Das ist mit Abstand eines der coolsten Features. Man kann anhand der Inhalte von Elementen das Aussehen verändern. Also z.B. sollen alle Bilder die ein GIF-Bild haben andere Formatierungen haben wie ein JPG-Bild. Oder Links, die auf fremde Webseiten verlinken sollen anders aussehen als interne Links. Bisher war das nur über die Zuweisung von Klassen möglich. Bald geht das automatisch über CSS und sieht dann so aus:
img[src$='.gif'] {
border:1px solid red;
}
img[src$='.jpg'] {
border:1px solid blue;
}
Diese Features sind nur ein Auszug aus dem, was in CSS 3 alles kommen wird und es wird auch noch etwas dauern, bis CSS 3 Standard geworden ist und uns den Alltag erleichtern wird.
Kommentare (2)
Tipps & Tricks 