Sprites und mobile-Nutzung

Martinus33

Lt. Commander
Registriert
Juni 2011
Beiträge
1.625
Hallo,
in meiner Headernavigation könnte ich noch drei social buttons einbauen, die auf meine Profile verlinken.
In einer Anleitung wird empfohlen, die drei Grafiken zu einem Sprite zu machen.

Danach braucht es mehrere CSS-Stylings, offenbar auch zwingend etwas mit :hover, mit dem Mobilgeräte nicht viel anfangen können?

Die Erstellung eines sprites und dessen Nutzung hat zunächst mal nichts mit hover zu tun. Speziell aber bei Menüpunkten zum Anklicken: Haben (die meisten) mobile-User dann

- einfach nur keinen mouseover-Effekt, z.B. Unterstreichung des Linktextes plus andere Farbe des Menüpunktes, genau wie bei normalen Menüpunkten (keine Grafik) sonst auch oder

- funktionieren anklickbare Menüpunkte, die auf einem Sprite-Bild beruhen, für Mobile-User nicht ordentlich?
 
Zuletzt bearbeitet:
Warum hast du es nicht einfach ausprobiert?
Natürlich hat das keinen Einfluss, CSS ändert NUR die Optik, NICHT die Interaktion oder Semantik.
 
Warum hast du es nicht einfach ausprobiert?
Weil ich weder dieses noch sonst ein Sprite (die Grafik) bislang erstellt habe. Außerdem habe ich kein Mobilgerät, um es lebensnah zu testen.

Natürlich hat das keinen Einfluss, CSS ändert NUR die Optik, NICHT die Interaktion oder Semantik.
Ich hatte die Erklärung auf Wikipedia so verstanden, dass speziell bei sprites deren Funktionsweise auf einem durch hover ausgelösten "Bildwechsel" beruht, siehe http://de.wikipedia.org/wiki/CSS-Sprites (rechts).
 
Martinus33 schrieb:
Weil ich weder dieses noch sonst ein Sprite (die Grafik) bislang erstellt habe. Außerdem habe ich kein Mobilgerät, um es lebensnah zu testen.
Mit den Entwicklertools von Google Chrome kannst du sowas nachstellen.

Martinus33 schrieb:
Ich hatte die Erklärung auf Wikipedia so verstanden, dass speziell bei sprites deren Funktionsweise auf einem durch hover ausgelösten "Bildwechsel" beruht, siehe http://de.wikipedia.org/wiki/CSS-Sprites (rechts).
Der Artikel erklärt es doch eigentlich ganz brauchbar, obwohl das Beispiel dort ein wenig schlecht gewählt ist. Wie bereits gesagt: CSS ändert nur das Aussehen, aber ein Link bleibt weiterhin ein Link - auch für Nutzer von mobilen Geräten. Bezogen auf deine Frage wäre Punkt 1 der richtige.

Im Übrigen muss man Sprites nicht zwingend nur mit einem Hover-Effekt benutzen.
 
Martinus33 schrieb:
Weil ich weder dieses noch sonst ein Sprite (die Grafik) bislang erstellt habe.
...und du hattest keine halbe Minute, um einfach ein paar Pixel zu schubsen?
Eine Sprite ist nix anderes als "mehrere Bilder in einer Datei".
Außerdem habe ich kein Mobilgerät, um es lebensnah zu testen.
Selbst der IE11 kann, in gewissem Rahmen, Mobile Devices emulieren. Spitzenklasse sind natürlich die Chrome Developer Tools. Da hast du sogar ein emuliertes Touch-Interface.
Denkst du etwa, ich würde tatsächlich AN Mobile Devices entwickeln, wenn ich FÜR Mobile Devices entwickel? Klar gibts irgendwann den Härtetest auf einem echten Gerät (sofern vorhanden), aber 99,9% laufen über Emulation.

Ich hatte die Erklärung auf Wikipedia so verstanden, dass speziell bei sprites deren Funktionsweise auf einem durch hover ausgelösten "Bildwechsel" beruht
Quatsch.
Der Trick an CSS Sprites ist, dass du viele kleine Grafiken in einer großen zusammen fasst, um HTTP Requests zu vermeiden.
1.) 10 Grafiken a 1kB ergeben zusammen oftmals nur eine Grafik mit <10kB, da größere Dateien mehr Redundanzen aufweisen und somit bessere Kompression ermöglichen
2.) 10 Grafiken zu laden benötigt 10 HTTP Requests. Jeder Request löst einen riesigen Berg Overhead aus, siehe HTTP - Spezifikation. Dasselbe gilt für JS & CSS Files, aber bei Bildern ist es besonders übel, denn hier hast du oft den "Flash of unstyled content"

Sprites für Hover-Effekte sind natürlich besonders nützlich, da hier der FOUC besonders hart treffen kann. Aber es gibt noch zig andere sinnvolle Anwendungen für Sprites.
1.) statt :hover könnte man andere Pseudo-Selektoren nehmen, z.B. :checked. Die gehen dann garantiert auch Mobile, oder kannst du auf nem Touch Device etwa keine Checkboxen auswählen?
2.) Die Manipulation des Elements könnte per JS erfolgen. Die kleinen animierten Bildchen aus dem Facebook Chat/Messenger sind z.B. keine GIFs sondern PNG Sprites mit etwas JS für den zeitgesteuerten Versatz entlang der Achsen.
10333117_279586358882296_364990644_n.png

3.) Die allereinfachste Variante, die man mit Sprites erreichen kann: Man hat 20-30 Icons für die Webseite, z.B. Social Buttons, ein "visible/invisible"-Auge, einen Edit-Bleistift, ein Delete-Kreuz,... Statt jetzt 30 kleine nervige PNGs zu laden, packt man alle Icons in eine Sprite.
 

Ähnliche Themen

Zurück
Oben