Pseudo Spriting

Sie kennen CSS Sprites, richtig? Sie sind fantastisch, wenn Sie sowohl die Höhe als auch die Breite des Elements kennen, auf das Sie sie anwenden, da Sie dann ein sehr kompakt zusammengeschobenes Sprite-Bild erstellen und sehr genaue Koordinaten verwenden können, um genau den Teil anzuzeigen, den Sie möchten.

Sprites sind auch sehr nützlich, wenn Sie *entweder* die Breite oder die Höhe des Elements kennen. In diesem Fall richten Sie alle Ihre Sprites in dieser bekannten Richtung aus. Angenommen, Sie kennen die Breite – Sie können sie anhand ihrer X-Koordinate und Breite referenzieren, aber sich keine Sorgen machen, dass eine unbekannte/veränderliche Höhe versehentlich andere Bilder enthüllt.

Sprites versagen, wenn Sie sie auf einem Element verwenden möchten, dessen Breite oder Höhe Sie nicht kennen können. Denken Sie an ein Absatz-Element (<p></p>). Möglicherweise haben Sie ein flüssiges Layout, sodass Sie sich nicht auf die Breite verlassen können¹, und Absätze können beliebig viele Wörter enthalten, sodass Sie sich nicht auf die Höhe verlassen können. Aber Sie wünschen sich trotzdem, ein Bild aus Ihrem Sprite darauf verwenden zu können.

In diesem Szenario benötigen Sie ein Element, in das Sie eine Breite/Höhe/beides einfügen können, um den Sprite darauf anzuwenden. Sie könnten denken

<p>
   <span class="star"></span>
   Lorem ipsum...
</p>

Dann könnten wir den span verwenden, um den Stern anzuwenden.

.star {
   /* Size of star within sprite */
   width: 24px;
   height: 24px;

   /* Sprite */
   background: url(sprite.png) -24px 0 no-repeat;
   
   /* Position/Spacing */
  float: left; 
  margin: 0 10px 2px 0; 
}

Aber dieser Stern, den wir anzuwenden versuchen, ist rein ästhetisch und daher wäre es am besten, dafür keine dedizierte Markup zu verwenden. Lassen wir ihn weg und verwenden stattdessen ein Pseudo-Element! Pseudo-Elemente sind die perfekte Antwort, wenn Sie ein Element benötigen, um damit auf der Seite zu arbeiten, aber keine zusätzliche Markup möchten.

Wir geben dem Absatz die Klassenbezeichnung (wahrscheinlich ohnehin semantischer)

<p class="star">
   Lorem ipsum...
</p>

Und verwenden ein CSS-Pseudo-Element (:before), um ein Element mit bekannter Breite und Höhe hinzuzufügen, auf das das Bild angewendet werden kann

.star:before {
   /* Empty content, but required for pseudo element to display */
   content: "";
   
   /* Size of star within sprite */
   width: 24px;
   height: 24px;

   /* Sprite */
   background: url(sprite.png) -24px 0 no-repeat;
   
   /* Position/Spacing */
  float: left; 
  margin: 0 10px 2px 0; 
}

Demo ansehen

Ein anderer Weg?

Eine weitere mögliche Methode, um mit dem Szenario unbekannter Höhe/Breite umzugehen, ist das diagonale Anordnen von Sprites (eine Technik, die ich zuerst von Aaron Barker gesehen habe). Auf diese Weise können Sie einen einzelnen Sprite quasi "herausschneiden", auch wenn das Elternelement unbekannte Breite und Höhe hat.

Das ist clever, hat aber einige ziemlich erhebliche Nachteile.

1. Die Abmessungen (und wahrscheinlich die Dateigröße) des Sprites sind garantiert größer als bei Sprites in einer einzigen Reihe oder besser, zu einem kompakten Quadrat zusammengeschoben.
2. Die oben gezeigte Diagonale funktioniert, wenn Sie das Bild in der oberen linken oder unteren rechten Ecke positionieren möchten, aber nicht in der oberen rechten oder unteren linken (oder irgendwo anders).

Die Pseudo-Element-Methode hat keine dieser Nachteile.

Verwandt

Gleich und gleich gesellt sich gern. Rick Harris hat einen ähnlichen Artikel: Sprites and CSS Pseudo Elements.

---

¹ Selbst wenn Sie sich auf die Breite eines Absatzes verlassen könnten, ist die Verteilung Ihrer Sprites über die gesamte Breite eines Absatzes unpraktisch und widerspricht der Kernidee von Sprites: Effizienz.