Einsteigerguide: Was sind CSS-Sprites und wofür werden Sie verwendet?

In diesem Beitrag bieten wir eine kleine Einführung zu CSS-Sprites. Im Kern werden wir die beiden folgenden Fragen beantworten:

• Was sind CSS-Sprites?
• Wofür werden Sie verwendet?

Das ergibt insgesamt 14.38 Kb, um die drei Bilder zu laden. Die drei Bilder in eine einzige Datei zu packen verlangt 16.1 Kb. Das Sprite ist am Ende 1.72 Kb größer als die drei einzelnen Bilder. Das ist kein großer Unterschied, aber es muss einen guten Grund geben, diese größere Datei zu akzeptieren… und es gibt sie.

Während die gesamte Bildgröße mit Sprites steigt, werden mehrere Bilder mit einem einzigen HTTP-Request geladen. Browser begrenzen die Anzahl der gleichzeitigen Anfragen einer Website und HTTP-Anfragen erfordern ein wenig Handshaking.

Das sind Sprites aus den gleichen Gründen wichtig wie das Verkleinern und Konkatinieren von CSS und JavaScript.

Wie nutzt man CSS Sprites?

Hier ist ein Beispiel-Sprite mit drei verschiedenen Länderflaggen in einem einzigen Bild:

Sie setzen das gleiche Hintergrundbild auf mehrere CSS-Klassen und legen die Hintergrundposition und die Abmessungen der einzelnen Klassen fest, um einen einzelnen Teil des Sprites anzuzeigen. Hier ist ein Code, welches das Konzept demonstriert:

Mit hoher Wahrscheinlichkeit denkst du momentan darüber nach, dass es einen Weg geben muss, dies zu automatisieren, damit du diese Sprites nicht manuell erstellen und anschließend dein Stylesheet anpassen musst. Diesen Weg gibt es zum Glück.

Erzeugen von Sprites mit Grunt / Gulp / Note.

Wenn du Grunt, Gulp oder Node im Allgemeinen verwendest, ist css-sprite (auch sprity genannt) ein wunderbares Node-Package, das Sprites aus einem Globus von Bildern erzeugt. Sprity hat viele großartige Funktionen, einschließlich der Formatierung der Ausgabe als PNG, JPG (oder Daten-URIs davon) und der Stylesheet-Generierung in CSS, LESS, Sass und Stylus.

Um Sprites über die Kommandozeile zu kompilieren, installiere css-sprite global mit:

Um Sprites und entsprechende Stylesheets zu erzeugen, führen Sie es anschließend aus:

Weitere Informationen zur Verwendung von css-sprite mit Grunt oder Gulp (odern vielen anderen Umgebungen) finden Sie im Repository-Projekt auf GitHub.

Sprites mit Compass generieren.

Das Generieren von Sprites mit Compass erfordert einige zusätzliche Einstellungen und Wartung, aber wenn Sie Compass bereits verwenden, fügt es sich gut in ihren bestehenden Workflow ein.

Beginnen Sie damit, ein Verzeichnis in ihrem „images“-Verzeichnis zu erstellen mit einem Namen, der den Sprites entspricht, welches Sie erstellen möchten. Stellen Sie sicher, dass die Bilder, die Sie in Sprites konvertieren, PNGs sind und legen Sie sie in ihrem neuen Verzeichnis ab. Erstellen Sie z.B. Flaggen-Sprites, könnten Sie ein Flaggen-Verzeichnis erstellen und alle drei PNGs in das Verzeichnis stellen.

In einer neuen SCSS-Datei, die ich „flags-scss“ genannt habe, werden die folgenden drei Zeilen, um Compass Sprite-Tools zu importieren, glob die PNGs importieren, die in Sprites umgewandelt werden sollen und dann das CSS für die Sprites generieren. Beachten Sie, dass das mittlere Wort der @include-Anweisung mit dem Verzeichnis in der Zeile davor übereinstimmen muss.

Dies ist ein relativ einfacher Prozess zur Erzeugung von Sprites, hat aber einige Nachteile:

• Das generierte CSS enthält weder Breiten noch Höhen für die Sprites.
• Es gibt keine gemeinsame Klasse zwischen den Sprites, das Hintergrundbild wird auf jede Klasse angewendet.

Generieren von Sprites mit ImageMagick.

ImageMagick kann verwendet werden, um ein Spritesheet von der Kommandozeile aus mit den folgenden Befehlen zu erstellen:

Dadurch werden alle vom Glob ausgewählten PNG-Dateien zu einer einzigen Datei zusammengefügt, aber nicht das entsprechende Stylesheet erstellt. Wenn Sie ImageMagick verwenden, um ihre Sprites zu erstellen, sollten Sie den folgenden Abschnitt über die Verwendung von Sprite Cow lesen.

Verwenden von Sprite Cow mit ihren Sprites.

Sprite Cow ist ein gehostetes Tool zum Erzeugen eines Stylesheets, das ihren Sprites entspricht. Es macht das Sprite nicht für dich, es hilft dir nur Zahlen zu bekommen, die du benötigst, um das Sprite zu benutzen (die Breite, Höhe und Hintergrundposition der einzelnen Teilde des Sprites). Es verfügt über 2 x Bildkompatibilität und eine einfache Schnittstelle, um schnell zu bestimmen, aus welchen Bereichen des Sprites jedes Bild besteht, für das CSS erstellt werden soll. Sie klicken einfach auf das Teil, das Sie benötigen und es gibt ihnen das CSS, das Sie benötigen.

Sprites mit Spritepad generieren.

Spritepad ist eine weitere gehostete Lösung zur Erstellung von Sprites. Mit Spritepad laden Sie einzelne Bilder hoch, positionieren sie, wie sie möchten und das CSS wird in Echtzeit aktualisiert. Wenn Sie fertig sind, laden Sie das Bild herunter und kopieren Sie das CSS in ihr Projekt.

Sprites mit SpriteMe erzeugen.

SpriteMe ist ein Bookmarklet, das ein Sprite basierend auf dem, was es auf der aktuellen Seite findet, erzeugt. Im Grunde genommen würdest du also ohne Sprites entwickeln, dann benutze dies, um die Dinge am Ende zusammen zu spriten.

Sollten meine Sprites horizontal oder vertikal sein?

Eine Möglichkeit ist beides nicht. Verdichten Sie sie zu einem Raster, so dass die kleinste Größe dimensionieren. Die dimensionale Größe eines Bildes spielt eine Rolle, wie viel Speicherplatz das Bild bei der Verwendung beansprucht, als je weniger, desto besser. Wenn du am Ende dein eigenes Sprite auslegst, ist Sprite Cow ein gutes Werkzeug, um bei der CSS-Generierung zu helfen.

Wenn Sie der Einfachheit halber den einen oder anderen Weg wählen, ist es eine Möglichkeit, sich die größte Breite und die größte Höhe ihrer Bilddateien anzusehen. Ist die größte Breite größer als die größte Höhe, sollte das Spritesheet horizontal angeordnet werden. Wenn die größte Hürde größer ist als die größte Breite, vertikal. Wenn Sie ein Generierungswerkzeug verwenden, treffen sie diese Wahl in der Regel für sich selber.

In manchen Situationen kann es sogar sinnvoll sein, ein Sprite diagonal auszulegen. Dies kann es ermöglichen, ein Sprite in einem Bereich von unbekannter Breite und Höhe zu verwenden, was ziemlich genial ist.

Eine andere Möglichkeit, das zu umgehen, ist die Verwendung eines Pseudo-Elements.

Alternativen.

Es gibt ein paar Alternativen zu CSS-Sprites, die ihre Vor- und Nachteile haben.

Data URIs.

Data URIs ermöglichen es ihnen, die Bilddaten direkt in ein Stylesheet einzubetten. Dies vermeidet zusätzliche HTTP-Anfragen für Bilder, so dass es im Wesentlichen dasselbe ist wie ein Sprite, ohne die ausgefallene Positionierung.

Icon-Fonts.

Icon-Fonts sind ähnlich wie Sprites, da sie mehrere Bilder zu einer einzigen Anfrage kombinieren und damit im Grund dasselbe erreichen.

SVGs.

SVG Bilder können auch zu einem Sprite kombiniert und als Icon-System verwendet werden. Es ist jedoch ein etwas anderer Ansatz, der die Syntax und die Stärken von SVG nutzt. Möglicherweise müssen Sie jedoch über ein Fallback-System nachdenken, da SVG nicht so tief in der Browser-Unterstützung steckt wie CSS-Hintergrundbild (das im Wesentlichen keine Probleme mit der Browser-Unterstützung hat).

Grunticon und Iconizr sind Möglichkeiten, mit SVG-Sprites zu arbeiten, die bei den Fallbacks helfen.

Vielen Dank für ihren Besuch.

… enthalten wir auch den Bewegungscode mit einem einfachen Check:

Anbei der komplette Code:

Wir hoffen, dass das hilft, Lerp ein wenig besser zu erklären, als es in den Docs der Fall ist.

Vielen Dank für ihren Besuch.