Wenn Sie eine brandneue Website codieren, denke ich, dass dies ein ziemlich effizienter Workflow für den Umgang mit CSS Sprites ist.
- Ignorieren Sie Sprites vollständig. Machen Sie jedes Hintergrundbild zu einem eigenen separaten Bild und referenzieren Sie es im CSS.
- Wenn Sie relativ sicher sind, dass das Design "fertig" ist, verwenden Sie das SpriteMe Bookmarklet, um den Sprite zu erstellen. UPDATE: Die SpriteMe-Seite ist tot, aber ich habe hier eine funktionierende Version davon archiviert.
- Kommentieren Sie die alten Hintergrund-Eigenschaften im CSS aus (nicht löschen) und fügen Sie die neue, auf Sprites basierende Version hinzu.
#logo { /* background: url(images/logo.png) no-repeat; */ background: url(images/sprite.png) -10px -579px no-repeat; } - Machen Sie sich keine Sorgen, dass die Kommentare Ihr CSS aufblähen, Sie sollten Ihr CSS ohnehin komprimieren, bevor Sie es auf Live-Websites ausliefern, was diese entfernt.
Wenn Sie nun feststellen, dass Sie die Bilder innerhalb des Sprites aktualisieren müssen, kann der Prozess so aussehen:
- Aktualisieren Sie einzelne Bilder.
- Kommentieren Sie gespritetete CSS-Hintergrundbilder aus und kommentieren Sie normale Hintergrundbilder wieder ein.
- Erstellen Sie den Sprite mit SpriteMe neu, ersetzen Sie ihn.
- Tauschen Sie die Kommentare erneut.
Eine der Beschwerden über die Arbeit mit Sprites ist, dass sie die Aktualisierung von Bildern erschwert. Ich denke, dieser Prozess macht es viel einfacher. Ich schätze, ein noch einfacherer Prozess wäre, eine PSD-Datei Ihres Sprites zu haben, damit Sie diese direkt aktualisieren können, ohne das CSS anzufassen. Wenn Sie das schaffen, großartig. Ich persönlich fühle mich organisierter, wenn ich individuelle Grafiken habe. SpriteMe gibt Ihnen auch CSS mit den Speicherorten aller Sprites, sodass Sie, wenn Sie die Größe von Bildern ändern oder sie hinzufügen/löschen müssen, diese neuen Zahlen automatisch erhalten.
Wenn Sie Ihren eigenen Workflow für die Arbeit mit Sprites haben, teilen Sie ihn bitte mit!
Ähnliches: Das Anordnen von Sprites diagonal ist ziemlich clever. Die Idee ist, dass Sie den Sprite als Hintergrundbild einer größeren Box verwenden können, ohne befürchten zu müssen, dass andere Grafiken im Sprite angezeigt werden. Dies geht auf Kosten einer größeren Sprite-Dateigröße aufgrund des zusätzlichen weißen Raums.
Re: Bearbeiten der Sprites. Wenn Sie ohnehin die separaten Hintergrundbilder haben, können Sie diese leicht bearbeiten und über die alte Version in den Sprite einfügen und neu speichern. Es sei denn, Sie ändern die Größen.
„…Sie sollten Ihr CSS ohnehin komprimieren, bevor Sie es auf Live-Websites ausliefern.“
Meiner Meinung nach sollten die Leute das nicht tun. Liefern Sie stattdessen gZipped-Dateien aus und bleiben Sie lesbar. Das gefällt mir aus Entwicklersicht viel besser.
Warum nicht beides? Oder haben Sie Beweise, die Sie teilen können, dass das unwirksam ist? Ich stimmte früher zu, dass ich gerne lesbares CSS auslieferte. Diese Seite hier fand ich passend. Aber dann stellte ich fest, dass CSS viel häufiger durch Tools wie Firebug oder Web Inspector betrachtet wird, wo die Formatierung der tatsächlichen CSS-Datei einfach keine Rolle spielt.
Dem stimme ich zu!
Das Erste, was ich tue, ist Rechtsklick auf "Seitenquelltext anzeigen"…
Gibt es eine Möglichkeit, eine HTML/CSS-Datei zu dekomprimieren, damit sie lesbar ist?
@Tom
Sie können hier kopieren & einfügen
http://www.codebeautifier.com/
Sie könnten Ihre Datei auch in etwas wie style-min.css minifizieren und style.css trotzdem live behalten.
Komprimieren und ggf. gzipen. Der Erfolg der Website ist weitaus wichtiger, als anderen Leuten ein lesbares Erlebnis im Quelltext zu ermöglichen.
Web Inspector würde es lesbar machen, wenn der Benutzer den Code wirklich lesen muss.
Ich stimme zu, es komprimiert und gzippt auszuliefern.
Danke Chris!
Wie Sie wissen, ist es besser, diagonale Sprites anstelle der von SpriteMe generierten Sprites zu verwenden?
Diagonale Sprites würden nur verwendet, wenn Sie sich in der Situation befinden, Hintergrundbilder auf Bereiche anwenden zu müssen, die größer als das Bild selbst sind. Wenn Sie diese Situation oft haben, probieren Sie es aus. Und lesen Sie unbedingt den verlinkten Artikel für die Details dazu.
Was ich an diagonalen Sprites nicht verstehe:
1. Container zu hoch? Ja, löst das. Aber ein horizontaler Sprite auch.
2. Container zu breit? Ja, löst das. Aber ein vertikaler Sprite auch.
3. Container zu hoch oder zu breit? Ja, löst das.
4. Container zu hoch und zu breit? Löst das nicht.
Wenn Sie das Problem, das auf Sie zukommen wird, bereits kennen, können Sie das Problem lösen (und Dateigröße sparen), indem Sie einen anderen Weg gehen. Persönlich stoße ich nicht oft auf das "zu hoch oder zu breit"-Problem – wenn etwas keine feste Abmessung hat, weiß ich nicht unbedingt, welche Abmessung es sein wird: es kann zu hoch und/oder zu breit sein, in diesem Fall würde dies nicht viel helfen.
Was ist also los?
Ich denke schon, dass es das löst. Wenn sich die Sprite-Position z.B. in der oberen linken Ecke einer Box befindet, kann diese Box unendlich breit und unendlich hoch sein (nach rechts und unten), ohne einen anderen Teil eines Bildes in diesem Sprite anzuzeigen. Natürlich hängt das von der Position in der Box und der gewählten Diagonale ab. Wenn Sie den Sprite in der oberen rechten Ecke platzieren möchten, müssten Sie den Winkel des Sprite-Layouts umkehren.
mmm... verstehe.
Ich habe nicht unbedingt daran gedacht, das Bild in einer Ecke zu platzieren, obwohl (jetzt, wo Sie es erwähnen) das wahrscheinlich der häufigste Ort ist, an dem Sprites verwendet werden.
Okay, alles ist jetzt gut in meiner Welt. : )
danke
Diagonale Sprites sind interessant, aber es ist nicht nur die Dateigröße, die Sie erhöhen, sondern auch die Speichernutzung.
http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/
„Das größte Problem mit CSS Sprites ist der Speicherverbrauch. Wenn das Sprite-Bild nicht sorgfältig konstruiert ist, enden Sie mit unglaublichen Mengen an verschwendetem Speicherplatz. Mein Lieblingsbeispiel stammt von der Website von WHIT TV, wo dieses Bild als Sprite verwendet wird. Beachten Sie, dass es sich um ein 1299×15.000 PNG handelt. Es komprimiert sich gut – die tatsächliche Downloadgröße beträgt etwa 26 K, aber Browser rendern keine komprimierten Bilddaten. Wenn dieses Bild heruntergeladen und dekomprimiert wird, wird es fast 75 MB Speicherplatz beanspruchen (1299 * 15000 * 4). Wenn das Bild keine Alpha-Transparenz hätte, könnte dies vielleicht auf 1299 * 15000 * 3 optimiert werden, wenn auch oft auf Kosten der Rendergeschwindigkeit. Selbst dann sprächen wir von 55 MB. Der größte Teil dieses Bildes ist leer; es gibt nichts, keinen nützlichen Inhalt überhaupt. Allein das Laden der Hauptseite von WHIT führt dazu, dass der Speicherverbrauch Ihres Browsers um mindestens 75 MB steigt, nur wegen dieses einen Bildes.“
Zugegeben, die Sprite-Seite ist ziemlich obszön, aber sie illustriert den Punkt.
Sehr interessante Sache, besonders über das 26K-Bild, das 75 MB Speicher verbraucht.
Was ist mit Data URIs? Probiert das schon jemand aus? Ich denke darüber nach, möchte aber mehr Informationen.
Ich habe hier einige Informationen dazu.
Hey, ich lese immer wieder von den Vorteilen der Verwendung von Data URIs für Bilder. Gedanken? Wenn sie so viel besser sind, werde ich auf jeden Fall wechseln, aber ich liebe Sprites und würde sie ungern aufgeben.
Nicholas Zakas hat einige großartige Informationen zu Data URIs.
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
http://www.nczonline.net/blog/2009/10/27/data-uris-explained/
@Albert,
data:uris sind im Durchschnitt eine viel bessere Lösung. Die beiden Artikel, die Nicholas Zakas erwähnt hat, sind lesenswert (ich glaube, er hat auch ein Projekt, das die Data URIs für Sie kompiliert).
Es gibt keinen Fall, der mir einfällt, in dem Sprites besser sind als data:uris. Dies gilt insbesondere, wenn signifikanter Verkehr über den Ozean fließt.
Speichern Sie eine.
jQuerys ThemeRoller liefert das Gegenbeispiel. Sie generieren Bilder für Icons und Disclosure-Dreiecke. Sie können 5 oder 6 verschiedene Icon-Farben haben. Indem Sie die Icons für eine einzelne Farbe in einem einzigen Sprite zusammenfassen, erhalten Sie sehr effizientes CSS.
Die Sache ist, dass ThemeRoller *dafür entwickelt* ist, Sprites für Icons zu verwenden. Wenn Sie nur Chris' Workflow befolgen, sind data URIs *wahrscheinlich* die bessere Wahl.
Meiner Meinung nach
Das ähnelt meinem eigenen Sprite-Workflow, aber ich finde, der zeitaufwändigste Teil ist der Umgang mit dem neu erstellten Sprite. Anstatt einfach CSS für die neuen Bilder hinzuzufügen, muss ich das CSS für jedes Bild im Sprite anpassen.
Ich bin versucht, die Photoshop-Technik auszuprobieren, aber während ich beim Aktualisieren des Sprites Zeit sparen würde, würde ich sicherlich die vielen Stunden verlieren, die SpriteMe bei der Erstellung des Sprites spart.
Wenn Sie alle Sprite-Quellbilder in ein einziges PSD legen, warum nicht einfach Smart Objects verwenden? Die Bearbeitung würde in den einzelnen Dateien bleiben, aber das endgültige Layout für den Sprite wäre erhalten.
Natürlich gilt all dies nicht, wenn sich die Größe ändert.
Ich würde zu #1 hinzufügen:
Jedes dieser separaten Bilder sollte als 24-Bit-PNG in voller Qualität gespeichert werden, um eine "Doppelkomprimierung" durch den Sprite-Generator zu vermeiden.
Ich verwende Sprites nicht so oft, aber wenn ich es tue, werde ich einen Workflow wie diesen verwenden. Habe vorher noch nichts von dem SpriteMe Bookmarklet gehört. Danke fürs Teilen!
Ich habe angefangen, http://lib.coderizer.ee/spritemaker/ für meine Sprites zu verwenden… wirklich gut.
Wenn Sie Sprites für viele Elemente verwenden, könnten Sie auch in Betracht ziehen, das Sprite-Bild für alle Elemente, die es verwenden, in einem Block zu deklarieren. Zum Beispiel –
Und dann einfach später background-position für jedes Element verwenden. Das könnte Bytes sparen und die Verwaltung von gespriteten Elementen etwas erleichtern.
Ich bin mir nicht sicher, ob jemand es erwähnt hat, aber schauen Sie sich dieses Skript an: http://codecanyon.net/item/css-auto-sprites/85409 es macht "spriting" viel einfacher. Sehr cool.
Hallo Chris,
Fügt dieses Sprite-Tool nicht eine Menge unnötigen Weißraum zum Sprite hinzu? Es sieht ziemlich ineffizient aus.
Ich denke, es fügt etwa 10 Pixel Abstand zwischen jedem Sprite hinzu, was sowieso eine gute Praxis ist. Es tut dies vertikal, also wenn Sie eine Zillion davon haben, könnten Sie Ihre eigene Rasterung besser gestalten. "Geschwindigkeit" ist jedoch ein großer Teil des Workflows, daher muss die Verwendung eines automatisierten Tools, das etwa 30 Sekunden dauert, oder das manuelle Erstellen von Dingen, die Stunden dauern können, berücksichtigt werden.
Berücksichtigen Sie den diagonalen Sprite-Maker, der im oben genannten verwandten Artikel verfügbar ist. Er reduziert die Höhe des Sprites erheblich, indem er die Bilder diagonal platziert.
Ich erstelle meine eigenen *sprite.psd, da die meisten Projekte, an denen ich arbeite, viele Änderungen/Revisionen durchlaufen, bevor sie überhaupt in Produktion gehen.
Außerdem kann ich auf diese Weise, wenn der Kunde *alle* meine Slices verlangt (was ich historisch schlecht im Griff habe), einfach die Quelldatei übergeben, und alle sind glücklich und voller Freude.
Außerdem habe ich immer gehört, dass horizontale Sprites schneller laden, daher arrangiere ich sie normalerweise mit nebeneinander platzierten, unterscheidbaren Bildern, während verwandte Bilder (Button-Zustände, benutzerdefinierte Formular-Input-Hintergründe usw.) vertikal platziert werden.
Ich neige auch dazu, spezielle Sprites für repeat-x und repeat-y Bilder zu erstellen.
Ich weiß nicht, ob das das Beste ist, es ist einfach meine Art, yo.
Für die Generierung von Sprites verwende ich SmartSprites (http://csssprites.org/). Es generiert ein Sprite-Bild basierend auf Kommentaren im CSS, die angeben, welche Bilder in Sprites umgewandelt werden sollen, und gibt ein neues Stylesheet aus (mit den verwendeten Sprites). Viel besser als SpriteMe oder Ähnliches, meiner Meinung nach. :)
DRÄNGEN SIE IHREN LIEBLINGSSUCHMASCHINEN-ENTWICKLER, -MOZ-IMAGE-RECT IMPLEMENTIEREN!!!!!!!!!!!!!!!!!
Seien Sie vorsichtig mit dem verlinkten CSS-Kompressor. Er löscht CSS3-Verläufe!
Ich benutze SpriteMe ziemlich oft, das einzige Problem ist, dass es background-position-Änderungen für Pseudo-Klassen wie hover und active völlig vergisst...
Wie handhaben Sie das?
Wir behalten eine Fireworks PNG mit allen separaten Elementen und Gitterlinien in einem img/source-Ordner im Quellcodeverwaltungssystem. Ein vertikaler Sprite für Icons und andere Elemente, die horizontal angezeigt werden, mit sicherem Abstand, und ein horizontaler, falls für Elemente mit flexibler Höhe benötigt. So kann jeder die Sprites sicher modifizieren und Sie können die genauen Positionsinformationen aus der FW-Datei erhalten.