nicht angemeldet
CSS Sprites ?!?!
Rolf B
CSS Sprites ?!?!
Rolf B
Matthias Scharwies
Gunnar Bittersmann
AugeHallo alle,
man findet an diversen Stellen im Web Beschreibungen zu „CSS Sprites“, also die Technik, einem Element einen Hintergrund zu geben, der deutlich größer ist als das Element und eine Sammlung der unterschiedlichen Bilder darstellt, die auf dem Element erscheinen sollen. Durch geschicktes Setzen der background-position wird der gewünschte Bereich sichtbar gemacht.
Dave Shea erzählte 2004 in einem Artikel in A List Apart davon.
Aber bin ich denn der einzige, dem diese Terminologie aufstößt? Dave hat es noch halbwegs richtig gemacht, ist dann aber auch abgedriftet.
Ein Sprite ist in meiner Begriffswelt der Name für ein frei bewegliches Objekt in einem Spiel. Das Männlein, das ich steuere, das Monster, das mir gegenübersteht, ein Spieß, der heimtückisch aus dem Boden schießt oder ein Maul, dass sich öffnet. Manche Computer hatten noch spezielle Hardware, wie der GTIA im Atari 800 oder der Blitter im Commodore Amiga, um Sprites über eine 2D-Grafik zu legen. Heute kann es die Grafikkarte mittels Texturen auf einem 3D-Objekt.
Wenn ein Sprite Bewegung zeigen soll, braucht es typischerweise mehr als ein Bild, und um die Bilder effizient zu speichern, hat man sie in einem Sammelbild abgelegt und überträgt den gewünschten Ausschnitt in den Videospeicher.
Irgendwie ist es nun passiert, dass dieses Sammelbild, das Dave zu Beginn seines Artikels noch als Sprite Map bezeichnete, zum Sprite geworden ist. Der MDN-Artikel zu background-position tut es. Unser Wiki tut es. Für mich ist das wie die Verwechlsung von Element und Tag. Fast schon wie Java und Javascript. Lohnt es sich, auf dieser Unterscheidung herumzureiten?
Rolf
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi
-
Servus!
Hallo alle,
man findet an diversen Stellen im Web Beschreibungen zu „CSS Sprites“, also die Technik, einem Element einen Hintergrund zu geben, der deutlich größer ist als das Element und eine Sammlung der unterschiedlichen Bilder darstellt, die auf dem Element erscheinen sollen. Durch geschicktes Setzen der background-position wird der gewünschte Bereich sichtbar gemacht.
Dave Shea erzählte 2004 in einem Artikel in A List Apart davon.
Aber bin ich denn der einzige, dem diese Terminologie aufstößt? Dave hat es noch halbwegs richtig gemacht, ist dann aber auch abgedriftet.
Ein Sprite ist in meiner Begriffswelt der Name für ein frei bewegliches Objekt in einem Spiel. Das Männlein, das ich steuere, das Monster, das mir gegenübersteht, ein Spieß, der heimtückisch aus dem Boden schießt oder ein Maul, dass sich öffnet. Manche Computer hatten noch spezielle Hardware, wie der GTIA im Atari 800 oder der Blitter im Commodore Amiga, um Sprites über eine 2D-Grafik zu legen. Heute kann es die Grafikkarte mittels Texturen auf einem 3D-Objekt.
Wenn ein Sprite Bewegung zeigen soll, braucht es typischerweise mehr als ein Bild, und um die Bilder effizient zu speichern, hat man sie in einem Sammelbild abgelegt und überträgt den gewünschten Ausschnitt in den Videospeicher.
Irgendwie ist es nun passiert, dass dieses Sammelbild, das Dave zu Beginn seines Artikels noch als Sprite Map bezeichnete, zum Sprite geworden ist. Der MDN-Artikel zu background-position tut es. Unser Wiki tut es. Für mich ist das wie die Verwechlsung von Element und Tag. Fast schon wie Java und Javascript. Lohnt es sich, auf dieser Unterscheidung herumzureiten?
Manchmal gibt es eine Bedeutungsverschiebung.
In Tutorials sollte die Herkunft zumindest erwähnt, besser noch erklärt werden.
Es ist die Frage, ob man die Begriffsklärungsseite durch eine WL auf eines der Tutorials ersetzt:
Natürlich müssten die auch untereinander verlinkt werden.
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo Matthias,
das SVG-Sprites Tutorial formuliert es richtig, wenn auch mit einer unnötigen Einschränkung: „Sprites sind kleine Grafiken,[1] die als Icons Webseiten visuell bereichern…“
Man kann Sprites als Icon nutzen, es ist darauf aber nicht beschränkt. Ein Browser-Spiel könnte Sprites als Spielfiguren verwenden.
Und die Hintergrundpositionierungstechnik ist nicht auf Sprites beschränkt. Ein Button-Hintergrund, der sich beim :hover oder :focus durch Repositionieren des Hintergrundes austauscht, ist kein Sprite.
Es wäre also schön, wenn es einen neutralen Begriff für diese Bildsammeltechnik gäbe. Egal ob in einer SVG- oder in einer Bitmap-Datei. Wenn das nicht möglich ist und der Begriff sich schon eingefräst hat, na gut, dann lern ich halt mit knirschenden Hirnwindungen um 😉
Rolf
--
sumpsi - posui - obstruxi
-
-
Lieber Rolf,
Für mich ist das wie die Verwechlsung von Element und Tag. Fast schon wie Java und Javascript. Lohnt es sich, auf dieser Unterscheidung herumzureiten?
warum soll ich es essen, wenn ich es trinken kann?
Liebe Grüße
Felix Riesterer
-
@@Rolf B
man findet an diversen Stellen im Web Beschreibungen zu „CSS Sprites“, also die Technik, einem Element einen Hintergrund zu geben, der deutlich größer ist als das Element und eine Sammlung der unterschiedlichen Bilder darstellt, die auf dem Element erscheinen sollen. Durch geschicktes Setzen der background-position wird der gewünschte Bereich sichtbar gemacht.
[…] Lohnt es sich, auf dieser Unterscheidung herumzureiten?
Nein. Das Einzige, was zu „CSS-Sprites“ zu sagen wäre, ist, sie nicht mehr zu verwenden.
Dafür gibt es schließlich Icon-Fonts!!1elf. OK, schlechter Scherz.
Dafür gibt es SVG.
😷 LLAP
--
“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon-
Hallo Gunnar,
Dafür gibt es SVG.
Ich habe den Thread von vor einem Jahr nicht verfolgt, oder vergessen.
Bei Vektorgrafiken mag das sinnvoll sein.
Aber wie sieht das aus, wenn ich Bitmap-Grafiken verwende? Eine SVG-Datei mit einem Schwarm an <image> Elementen, jedes mit einem href, die dann alle einzeln geladen werden? Es sei denn, ich konvertiere sie vorher in eine Data-URL?
Klingt nicht sehr effizient.
Rolf
--
sumpsi - posui - obstruxi-
Hallo
wie sieht das aus, wenn ich Bitmap-Grafiken verwende? Eine SVG-Datei mit einem Schwarm an <image> Elementen, jedes mit einem href, die dann alle einzeln geladen werden? Es sei denn, ich konvertiere sie vorher in eine Data-URL?
Klingt nicht sehr effizient.
Klingt es überhaupt effizient, für solch einen Zweck Rastergrafiken in einem SVG zu verpacken/zu verknüpfen? Ich würde entweder ein Spriteset aus Rastergrafiken, gespeichert als Rastergrafik bauen oder ein „echtes“ SVG generieren, das dann keine Rastergrafik (mehr) enthält.
Tschö, Auge
--
Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
Hohle Köpfe von Terry Pratchett-
Hallo Auge,
ja, ich auch. Aber Gunnar meinte ja, man bräuchte nur noch SVG-Spritemaps, und da wollte ich ein Beispiel bringen wo mir das nicht sinnvoll scheint.
Rolf
--
sumpsi - posui - obstruxi-
Tach!
Aber Gunnar meinte ja, man bräuchte nur noch SVG-Spritemaps, und da wollte ich ein Beispiel bringen wo mir das nicht sinnvoll scheint.
Die Meinung hatte er vor einem Jahr auch schon und konnte mich in meinem Fall jedenfalls nicht überzeugen oder eine brauchbare Alternative nennen. Er geht wohl davon aus, dass man solche Bildchen nur an wenigen Stellen einer Website für die Benutzerführung braucht und nicht in größeren Mengen.
dedlfix.
-
Hallo dedlfix,
ich will ja nicht sagen, dass die Idee grundsätzlich nichts taugt. Für Icons als Vektorgrafiken ist das sicherlich praktisch und vor allem deutlich eleganter als die Fummelei mit background-position.
Rolf
--
sumpsi - posui - obstruxi-
Tach!
Für Icons als Vektorgrafiken ist das sicherlich praktisch und vor allem deutlich eleganter als die Fummelei mit background-position.
Ja, da stimme ich zu, für eine überschaubare Anzahl an Strichgrafiken, die sich vektorisieren lassen, bringt SVG Vorteile, nicht zuletzt in der Skalierbarkeit. Und man kann semantisch über Bezeichner verweisen, statt mit nichtssagenden Positionsangaben. Aber es gibt auch noch andere Anwendungsfälle, bei denen solch eine Pauschalempfehlung Fragen aufwirft.
Die Icon-Font-Technik fände ich prinzipiell auch nicht verwerflich. Es ist nur leider eine auf Fonts spezialisierte Geschichte. (Abgesehen davon haben mittlerweile jede Menge Emojis den Weg in die Fontsysteme gefunden.) Wenn das stattdessen eine generische Lösung wäre, bei der Bilder in ein Archiv zusammengefasst und darin einzeln angesprochen werden könnten, würde sie vermutlich weniger auf Ablehnung stoßen. Aber sowas scheint es nicht zu geben, und "CSS-Sprites" ist anscheinend noch der beste Kompromiss bei größeren Mengen (an Pixelgrafiken). SVG als Container zu verwenden, erscheint mir selbst bei Vektorgrafiken auch eher eine "alternative Lösung" zu sein.
dedlfix.
-
-
-
-
-
-