26 Mrz 2009

Technikwürze 130 (S03/E03) CSS-Sprites total

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.

Höre Technikwürze auf SoundCloud: Diese Folge | Alle Folgen

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”:http://www.alistapart.com/articles/sprites/

Warum CSS-Sprites?

Hauptsächlicher Grund ist das “Flackern” beim :hover oder mouseoverEffekten. Einige Browser, vor allem mal wieder der Internet Explorer, laden das Bild für den mouseoverStatus 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

“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.

Dieser Beitrag wurde am Donnerstag, 26. März 2009 um 00:01 Uhr in der Kategorie Podcast, Technikwürze Total veröffentlicht.
Kommentare sind im Moment nicht erlaubt, du kannst aber einen Trackback von deiner Seite aus senden.

Kommentare

  • 1.
    Benni
    am 26. März 2009, 07:00 Uhr

    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?

  • 2.
    André
    am 26. März 2009, 08:00 Uhr

    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.

  • 3.
    Stefan David
    am 26. März 2009, 09:56 Uhr

    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.

  • 4.
    alexander farkas
    am 26. März 2009, 18:16 Uhr

    das flackern im ie läßt sich sehr einfach mit js beheben:
    if(document.execCommand){
    try {

    document.execCommand(‘BackgroundImageCache’, false, true);
    } catch(e){}
    }

  • 5.
    Janek
    am 28. März 2009, 11:58 Uhr

    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”. ;-)

  • 6.
    Daniel Jagzent
    am 29. März 2009, 22:35 Uhr

    @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.

  • 7.
    Bogus
    am 4. April 2009, 08:08 Uhr

    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

  • 8.
    Zid
    am 6. April 2009, 12:24 Uhr

    @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.

  • 9.
    Chris Jung
    am 9. April 2009, 07:02 Uhr

    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…

Dein eigener Kommentar

Die Kommentarfunktion für diesen Beitrag wurde deaktiviert.