Drucken und CSS Sprites

Page Speed und ySlow legen jedem Webentwickler die Nutzung von CSS Sprites nahe und auch in der Web- und Blogwelt werden immer wieder CSS Sprites und dazugehörige Generatoren erwähnt.

Googles CSS Sprite Grafik
Googles CSS Sprite Grafik

Für alle die noch nichts davon gehört haben: Mit CSS Sprites kombiniert man mehrere Hintergrundgrafiken in einer, die Grafik links ist direkt von Google geliehen.

Diese Grafik wird an vielen verschiedenen Stellen in Googles HTML Dokumenten genutzt und der Vorteil ist einerseits, dass der Browser diese Grafik nur einmal laden muss und andererseits ist die Dateigröße der Spritegrafik oft auch kleiner als die Summe aller einzelnen Grafiken.

Wieso lädt der Browser diese Datei nur einmal auch wenn sie öfter im Dokument genutzt wird?
Moderne Browser speichern alle Dateien die sie von einer Webseite laden selbst nochmal zwischen. Wenn der Browser dann sieht dass er eine Datei einbetten soll, schaut er erst ob er sie schon heruntergeladen hat und bettet dann die eigene Kopie ein, oder er lädt sie vom Server herunter und bettet sie dann ein. Diese Technik ergibt erst den Mehrwert von der Sprite Technik.

Normalerweise nutzt man bei der Verwendung von Sprites folgende CSS Definitionen:

.meinLink {
    background: 
            url("../img/spriteHome.png") 
            no-repeat scroll 
            0 
            -176px 
            transparent;
    color: #FFFFFF;
    display: block;
    height: 4.1666em;
    text-align: center;
    width: 6.6666em;
}

Die interessanten Werte sind in dieser Definition die Zeilen 5, 6 und 10 und 12. In Zeile 5 steht „0″ und in Zeile 6 steht“-176px„, sowie die Höhenangabe (Zeile 10) und die Breitenangabe (Zeile 12) des Elements. Der Browser positioniert das Hintergrundbild durch die oben definierten Angaben o Pixel von links und -176 Pixel nach oben verschoben, die obere linke Ecke hat die Koordinaten „0“ „0“. Würde man einen positiven Wert anstatt „-176px“ eingeben, würde die Sprite Grafik nach unten rutschen, aber somit nichts mehr anzeigen.
Durch die definierte Höhe und Breite wird dann nur noch der Teil der Sprite-Grafik angezeigt der in dieses Rechteck passt. Die gezeigte Grafik erspart einem Webserver mehr als 60 Einzelabrufe, in dieser gesparten Zeit kann der Webserver schon 10 (oder mehr, oder weniger) andere Besucher bedienen.

Wie anfangs erwähnt legen die Seiten-Optimierungstool der beiden großen Suchmaschinen jedem Webentwickler diese Methode nahe.

Nur sollte man diese Technik nicht übertreiben, da Hintergrundgrafiken standardmäßig nicht ausgedruckt werden. Wenn man nun mit der oben beschriebenen Technik eine Ausgabe realisiert die semantisch zum Inhalt passt (zum Beispiel Artikel Bewertungen mit Sternen, oder ähnliches), muss man auf diese Information in der Druckversion verzichten. Bei Elementen die in keinem Zusammenhang mit dem Seiteninhalt haben (Login Icons, Soziale Netzwerk Icons etc. pp.) kann man getrost zu CSS Sprites greifen.

 

Wenn man zum Beispiel die Google Startseite ausdruckt fehlt das Google Logo, da dieses als Hintergrundgrafik eingebettet ist. Gut, der Ausdruck der Google Startseite hat wenig Nutzen, aber eine Suchergebnisseite könnte man ja schonmal ausdrucken (z. B. als Zeitdokument, zur Bestätigung das SEO Maßnahmen funktioniert haben). Und aus diesem Grund habe ich die oben dargestellte Grafik gewählt, weil Google genau diese Grafik auf seinen Ergebnisseiten ausspielt und diese im Ausdruck erscheinen!

Damit das funktioniert nutzt Google einerseits CSS aber auch eine spezielle HTML Struktur:

und folgendes CSS:

#logo img {
    border: 0 none;
    left: 0;
    position: absolute;
    top: -165px;
}
#logo {
    color: #FFFFFF;
    display: block;
    height: 56px;
    margin: 7px 0 0 -3px;
    overflow: hidden;
    position: relative;
    width: 160px;
}
#logocount {
    margin-top: -8px; 
    position: absolute; 
    left: 0px; 
    padding: 0pt 12px; 
    visibility: visible;
}

Ich habe den Inline Stil von #logocount als eigene Definition geschrieben, zur besseren Lesbarkeit

Versuch der Beschreibung wie Googles Druck Sprite funktioniert
Googles Druck Sprite Analyse

Schaut man sich es genauer an, so sieht man in der Definition von #logo img eine „sprite ähnliche“ Definition. Das Bild ist absolut positioniert, hat im HML sogar seine echten Größenangaben, aber es wird nur das „Google“ Logo ausgespielt. Soweit würde der Browser die Spritegrafik komplett anzeigen. Da kommt dann #logo ins Spiel. Durch die Definition von position: relative; legt man den Geltungsbereich aller Kind-Elemente die position:absolute; haben, auf seine eigenen Koordinaten. Somit verschiebt sich #logo img also innerhalb des #link Element um -165 Pixel. Desweiteren wird #logo als Blocklevel Element deklariert, wodurch die Höhen- und Weitenangabe greifen, die Grafik links soll dies verdeutlichen.

Die Sprite Grafik ist 178px breit und 289px hoch, wie auch im HTML Quelltext des <img> angegeben. Die CSS Regel für #logo img ist mit dem cyan-farbenen Balken markiert, also top: -165px; Der violette Teil wird schlussendlich im Browser angezeigt, da hier über position: relative; die Koordinaten des Bildes auf dieses Element „angewendet“ werden und im CSS die Höhe und Breite des anzuzeigenden Bildes festgelegt wird.

 

Damit das #logo Element an seiner richtigen Stelle sitzt wird das umschliessende <div> wieder auf position:absolute; gesetzt.

 

Im Endeffekt erreicht man mit dieser Methode einerseits die Vorteile der Sprite Technik (Server-Entlastung, vielleicht eine kleinere Datei als die Summe aller Einzeldateien) und anderseits ist dieser Vorteil nun auch druckbar! Dazu bläht man den Quelltext mit überflüssigen Elementen auf (Verlust von Semantik?) und das jonglieren von position:absolute; Elementen kann bei Erweiterungen manchmal ganz schön anstrengend werden.

Der Einsatz von CSS Sprites hat nicht ignorierbare Vorteile und ist als Hintergrundgrafik relativ einfach und effektiv zu realisieren. Man sollte hier aber wirklich nur Elemente nutzen die mit dem Inhalt einer Seite nichts zu tun haben, also generische Icons für seitenübegreifende Aktionen (Login, Logout, Einstellungen, Editieren, Löschen, Neu, Soziale Netzwerke, etc…).

Der Einsatz von CSS Sprites innerhalb des <img>-Tag ist wie oben beschrieben möglich, aber weitaus kniffliger als der ursprüngliche Ansatz. Hierzu muss der HTML Quelltext erweitert werden, ohne das dies dem Inhalt zugute kommt und man schreibt eine Menge mehr CSS, das auch noch in Browsertests und bei Erweiterungen seine „bösen“ Schatten voraus wirft. Aber die Seite hält alle relevanten Informationen für alle Besucher (Bildschirmleser, Suchmaschinen, Menschen, etc.) erreichbar vor, Google weiß wohl was sie tun.

Wenn man von dem „Informationsgehalt“-Aspekt absieht und man auch den ein und den anderen Browser ausschliessen kann (zum Beispiel Internet Explorers < Version 8), dann kann man auf das CSS Pseudo Element :after zurückgreifen und im Print CSS die Bilder einfach über CSS generierten Inhalt eingefügt werden.  Hat man zum Beispiel 5 CSS Regeln für die Darstellung von Bewertungen, kann man im Print CSS folgende Definition einfügen:

.rating1:after { content:url(/images/print/rating1.gif); }
.rating2:after { content:url(/images/print/rating2.gif); }
...

Man muss also alle Sprite Grafiken nochmal als Einzelstück vorliegen haben und natürlich fürs web optimiert. Dieser Ansatz misfällt aber aus dem Grund das man Inhaltsbezogene Informationen in Hintergrundgrafiken versteckt und das man den ein und den anderen Browser aussen vor lässt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.