CSS-Sprites total
Technikwürze 130
Meta: S3 · E3 · Typ full · Veröffentlicht · Aktualisiert
Moderation: Daniel Jagzent, Sascha Postner
Zusammenfassung
CSS-Sprites haben längst einen wohlverdienten Platz in dem Werkzeugkoffer eines professionellen Webdesigners erhalten. Höchste Zeit also, dass Technikwürze sich ihrer in einer total-Sendung annimmt. Sascha Postner und Daniel Jagszent erklären, was sie sind, wozu sie verwendet werden und was man bei ihrer Verwendung beachten sollte.
Inhalt
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 neu 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 neu 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:
- Sprite Generator
- CSS-Sprites
Offline-Tools:
Links
- Dave Sheas Alistapart-Artikel über CSS Sprites
- Yahoo (http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html)
- Gerrit von Aaken (auch interessante Kommentare)
- 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 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.
Kommentare (23)
-
Benni
Hört sich nach einem interessanten Thema an. Werde mir die Sendung heute Abend mal anhören.
Der Titel "CSS-Spirtes total" kann aber so nicht stimmen, oder?
-
André
Vielen Dank für die gute Folge.
Der IE8 darf sich nun auch in die Reihe der Browser einreihen, die "Data URIs via base64" unterstützen.
-
Stefan David
Zum Zeitpunkt, als ich den verlinkten Artikel geschrieben hatte, konnte ich den Bug im Internet Explorer nachvollziehen. Um welche Cache-Einstellung es ging, steht auch in den Kommentaren zum Artikel.
Das gehört aber für mich mittlerweile eindeutig in die Klasse Bugs, die nicht behoben werden müssen. Schließlich wird alles korrekt dargestellt, nur IE-Nutzer müssen etwas länger warten bzw. das Flackern in Kauf nehmen. Und auch nur die, die ihren Cache so eingestellt haben. Wir sollten das vergessen.
Nette Sendung ansonsten. Danke euch.
-
das flackern im ie läßt sich sehr einfach mit js beheben:
if(document.execCommand){
try {document.execCommand('BackgroundImageCache', false, true); } catch(e){}}
-
Hi,
vielen Dank für die Sendung. CSS-Sprites werden leider noch viel zu selten (richtig) eingesetzt, sind aber im Kommen.
P.S. hover wird nicht "houwer" oder "huuwer" ausgesprochen, sondern "hawer" (mit kurzem stoßartigem a) und heißt so viel wie "schweben". ;-)
-
Bogus
Hallo ;D
Ich beschäftige mich seit kurzem erst mit CSS, ich suche eine Art lineal, wo man ablesen kann, welche position-kodrs man setzen muss, praktisch gesehen wir ein Raster. Kennt ihr sowas ?
Und zu diesen CSS-Sprites, gibts da auch Programme für oder kann man auch Gimp etc benutzen ?
danke in vorraus ;D
-
@Bogus: in Gimp, Photoshop etc... gibt es Grids die du selber festlegen kannst und diese "Lineal"-Funktion bieten. Die Bilder kann man dort dann auch super dran ausrichten.
-
-
Chris Jung
Interessant ist ja, dass seit Word2003 in Word in den XML-Dateien Bilder b64-codiert abgelegt werden (bzw. bis O(O)XML wurden), die Browser aus gleichem Hause das aber nicht anzeigen konnten...
@Benni: Wieso kann der Titel nicht stimmen?
@André: Danke für den Hinweis, jetzt muss der Internet Explorer 8 nur noch weitere Verbreitung finden, dann kann ich mir vorstellen, dass die "Alternative" eine Alternative wird.
@Alexander: Danke, dieses JavaScript-Fix für IE6 haben wir vergessen zu erwähnen. Dafür muss aber natürlich JavaScript aktiviert sein (was es ja z.B. im Hardened IE standardmäßig nicht ist).
@Janek: Danke für den Hinweis zur Aussprache! PNG haben wir denke ich auch verunstaltet (Wird ausgesprochen wie "ping") aber wir bemühen uns, es beim nächsten mal besser zu machen.