Was ist ein CSS-Sprite
Ein CSS-Sprite ist eine Bilddatei, in der grafische Elemente einer Webseite, also quasi viele einzelnen Bilddateien, zusammengefasst werden. Die einzelnen Elemete werden dabei quasi gekachelt in dem großen Bild angeordnet. Um diese auf der Webseite anzuzeigen, wird das Sprite als CSS-Hintergrundbild eingebunden und mit den Angaben zu background-position jeweils an die richtige Stelle geschoben.
Mehr Informationen (auf Englisch) bei Alistapart
Warum CSS-Sprites?
Hauptsächlicher Grund ist das “Flackern” beim :hover oder mouseover-Effekten. Einige Browser, vor allem mal wieder der Internet Explorer, laden das Bild für den mouseover-Status nach und die dabei entstehende Verzögerung führt zu dem unschönen Flackern.
Anders als man im ersten Moment meinen könnte spart man sogar Ladezeit und Traffic durch die Kombination der Bilder.
Siehe hierzu Yahoos Best Practices for Speeding Up Your Web Site und den Blogeintrag im Yahoo! Developer Network Blog
Beispiele
Zu Beachten:
Natürlich muss das große Bild erstmal geladen sein bevor überhaupt irgendein Element daraus angezeigt werden kann. Die Seite rendert also erstmal ohne die Bilder und dann tauchen quasi alle gleichzeitig auf.
Bilder, vor allem PNGs sollten umbedingt optimieren werden. Vor allem auch mal mit einem Nicht-Adobe-Tool. smush.it ist ein Online-Dienst, der alle Bilder (PNG/JPEG/GIF) optimiert (lossless).
Man sollte schon beim erstellen der CSS-Sprites daran denken, dass man möglicherweise später was verändern muss oder neue Elemente hinzugefügt werden wollen. Darum ruhig etwas Platz für Vergrößerungen lassen.
Bugs
Opera
Opera (bis zur Version 9.0) kann keine Hintergrundposition von über 2024 Pixel oder weniger als -2024 Pixel verarbeiten und rundet diese auf diesen Wert auf oder ab. Dieses Werkzeug umgeht das Problem indem es alle 2024 pixels eine neue Spalte erzeugt.
(Opera6 zeigt keine Backgroundimage on hover)
Safari 2
Safari hat ein Problem das Hintergrundbilder mehrfach angezeigt werden. Man kann das Problem umgehen indem man zwischen den Bildern ausreichend Freiraum beibehält bzw. nur senkrecht anordnet. Behoben in Safari 3+.
InternetExplorer
Der Internet Explorer 6 lädt bei einer bestimmten Einstellung des Caches auch bei einem CSS-Sprite das Bild erneut nach. Wir konnten das jedoch nicht reproduzieren.
iPhone
Grosse Sprites kosten viel Speicher und bremsen möglicherweise das iPhone aus!
Tools
Online-Tools:
Offline-Tools:
Smartsprites in Java
Smartsprites in PHP
Links
- Dave Sheas Alistapart-Artikel über CSS Sprites
- Yahoo (http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html)
- Gerrit von Aaken
- Stefan Davids Artikel bei den Webkrauts
“Alternative”
CSS Cache von Base64-Kodierung als Alternative (aber nur in Firefox, Webkit und neueren Operas)
Reduzierung von HTTP-Requests ist auch für JS und CSS interessant !
Termine
Flash Plattform Konferenz FFK09:http://ffk09.flashforum.de/ in Köln von Marc Thiele, Sascha Wolte und dem Flashforum. Lt. eigenen Angaben grötße deutschsprachige Konferenz rund um Webtechnologien und -Anwendungen.
Konferenz am 28. und 29. April mit über 20 je einstündigen Vorträgen zu Technik, Design und Inspiration. Dazu zwei Workshoptage mit jeweils fünf ganztägigen Workshops am 27. April und am 30. April 2009.
Fokus liegt auf RIAs für das Consumer- und Enterprise-Segment auf Basis der Flash-Plattform, Flex-Produktfamilie, AIR und Silverlight.
