Internet Explorer 10 mit CSS3 linear-gradient Support

Microsoft ist aufgewacht und arbeitet kontinuierlich an der Weiterentwicklung des Internet Explorer. Gestern stellten Sie auf der MIX11 Konferenz in Las Vegas die neue Preview des IE10 vor. Umfangreiche Neuerungen sind bereits integriert.
Internet Explorer 10 mit CSS3 linear-gradient Support weiterlesen

IE9 mit CSS3 border-radius und linear-gradient Problemen

Nach Einführung des IE9 ist es nicht nur Fritz Weisshart aufgefallen, dass der IE9 zwar die propritären CSS-Eigenschaft „filter“ zum Erstellen von Verläufen, wie im IE6-8 zwar weiterhin unterstützt, aber diese nicht so funktionieren wie erhofft.
IE9 mit CSS3 border-radius und linear-gradient Problemen weiterlesen

WebKit ändert CSS3 Gradient Support und orientiert sich am Mozilla Syntax

Letzte Woche änderte das Webkit-Team die Syntax für CSS3 linear-gradient und radial-gradient und orientiert sich jetzt an der vom W3C favourisierten Syntax von Mozilla. Die Integration ist bereits in die Nightly Builds eingeflossen und wird sicherlich demnächst auch in die Webkit-basierenden Browser, wie Chrome oder Safari integriert.

Bisher hatte man recht viel Schreibarbeit, wenn man CSS3 Verläufe browserübergreifend einsetzen wollte. Im CSS3 Adventskalender Tag3 kann man die derzeitige Anweisungen cross-browser-fähig nachlesen. Zukünftig wird Webkit als Übergang auch weiterhin die bestehende Syntax unterstützen.

Man kann also die Eigenschaften für CSS3 Gradient wie folgt angeben:

.linear-top {
/* Für WebKit alt (Safari, Chrome, etc.) */
background: -webkit-gradient(linear, left top, left bottom, ⏎
from(#c8482c), to(#fff));

/* NEU NEU NEU - WebKit (Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #c8482c, #fff);

/* Für Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #c8482c, #fff);

/* aktueller W3C working draft */
background: linear-gradient(top, #c8482c, #fff);
}

Ein richtiger Schritt und auch ein Ereignis, bei dem man sieht, dass CSS3 noch in der Entwicklung ist. Trotzdem empfehle ich heute schon CSS3 einzusetzen, wo es geht.

Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23

Am vorletztem Tag des CSS3 Adventskalender will ich nochmal ein paar interessante Einsatzmöglichkeiten von border-radius zeigen. Nicht zuletzt auch durch das Gewinnspiel „Gewinne ein Jahres-Abo des Webstandards Magazin“ hat sich border-radius als das CSS3-Feature herauskristalisiert, auch die Zugriffszahlen zeigen das.

Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23 weiterlesen

CSS3 transitions – CSS Animation – CSS3 Adventskalender Tag 21

CSS3 Transitions und CSS3 Animations sind ein sehr umfassendes Thema, mit dem man glatt noch einen Monat füllen könnte. Gleichzeitig revolutiert es CSS, da zukünftig Animationen und Elementveränderungen ohne Javascript möglich sind. Zum Einstieg werde ich ein kleines Beispiel für CSS3 Transitions zeigen.

CSS3 transitions – CSS Animation – CSS3 Adventskalender Tag 21 weiterlesen

selectivizr – CSS3 selectors for IE – CSS3 Adventskalender Tag 19

Heute ein kurzer Tipp am Sonntag: selectivizr – CSS3 selectors for IE – ist das hilfreichste, was ich zum Thema CSS3 & Internet Explorer 6-8 empfehlen kann. Selectivizr ist eine Javascript-Bibliothek, die CSS3-Selektoren erkennt und für IE6-8 übersetzt. Als Basis muss eine andere JS-Bibliothek wie jQuery, MooTools, Dojo, Prototype, etc. eingesetzt werden.

selectivizr – CSS3 selectors for IE – CSS3 Adventskalender Tag 19 weiterlesen