Mit der CSS-Anweisung transitions lassen sich Styleübergänge ohne Javascript bzw. jQuery realisieren. Ein echter Gewinn, da gerade weichere Übergänge mit Javascript in großen Portalen sehr häufig zu doppelten Skripten führt, da immer wieder ein neuer Hovereffekt erfunden wird. Die Gefahr besteht natürlich auch bei CSS, allerdings lassen sich die Elemente besser identifizieren.
Die Browserkompatibilität ist erwartungsgemäß: IE spielt nicht mit. Allerdings gibt es im IE auch keine fehlerhafte Darstellung, die Anweisung wird schlicht ignoriert. Mit transitions zu arbeiten ist also ganz klar progressive Enhancement mit dem hier vorliegenden Vorteil, dass der IE, sollte er je transitions verstehen, diese dann auch darstellt. Glücklicherweise geht der Trend bei Microsoft dazu, die CSS-Implementierung standardkonform nachzurüsten, so dass es hier vermutlich nicht zu Fehlern in der Seite kommen wird.
Die 'guten Browser' hängen der Standardimplementierung auch noch teilweise hinterher, allerdings lässt sich bei allen die Prefixlösung umsetzen. Mit den folgenden Zeilen ist man also auf der sicheren Seite:
-webkit-transition
-moz-transition
-ms-transition
-o-transition
transition
Anwendungsbeispiel:
Will man die Breite von Elementen beim mouseover ändern, notiert man folgende einfache Zeilen:
div {
...
transition: width 2s;
}
div:hover {
width: 300px;
}
Beim mouseover wird jetzt die Breite eines jeden DIV-Elements innerhalb 2s auf die Breite von 300px geändert.
Diese Technik lässt sich hervorragend auf background-position oder font-size anwenden.
Es empfiehlt sich derartige Effekte nur an Elemente mittlerer Prioität einzusetzen. Es wäre fatal bspw. Lesbarkeit und Bearbeitung von Formularen damit zu verminen, da die fehlende Cross-Browser-Kompatibilität den IE unfertig oder noch schlimmer als fehlerhaft erscheinen lassen würde. Bei Elemente hoher Prioisierung sollte man dann doch dezent auf jQuery bzw. Javascript zurückgreifen.