Frage zu CSS-Sprites

[Alice]

Hallo.

Ich würde gerne eine Webseite von mir optimieren durch CSS-Sprites.

Meine Fragen dazu:

1. Ist es Sinnvoll möglichst alle Grafiken auf der Startseite in eine Größere Grafik einzubinden und dann mit CSS-Sprites zu laden? Oder sollte man die Grafiken kategorisieren? Sprich: Button normal und Button hover in eine Grafik. Und Smilies in eine Grafik.

2. Ist es Sinnvoll auch die Header-Grafik (3 Teilig) mit CSS-Sprites einzubinden?

3. Können alle Browser mit CSS-Sprites umgehen?

Danke.

 

[hela]

1. Ist es Sinnvoll möglichst alle Grafiken auf der Startseite in eine Größere Grafik einzubinden und dann mit CSS-Sprites zu laden?

Einfache Antwort: Ja.

2. Ist es Sinnvoll auch die Header-Grafik (3 Teilig) mit CSS-Sprites einzubinden?

Auch ja.

3. Können alle Browser mit CSS-Sprites umgehen?

Was verstehst du unter "alle"? Beim MOSAIC angefangen?

Du musst eigentlich nur aus allen (Teil-)Bildern, die im Dokument vorkommen, ein großes Gesamtbild machen und dabei unbedingt die Anfangs- und die Endposition (z.B. Ecke links oben, Ecke rechts unten) des Teilbildes merken. Diese Werte werden dann im CSS als Hintergrundposition und zum anderen für die Größe des Elements mit diesem Hintergrund verwendet.

Die Größe eines Elements mit "sprite"-Hintergrund muss unter CSS2-Bedingungen absolut (px-Maßeinheit) bemessen werden, da der Hintergrund unter CSS2 nicht skalierbar ist.
Das wäre m.E. die einzige Einschränkung, die für diese Methode beachtet werden muss.

• CSS Sprites einfach erklärt
• CSS-Sprite-Generator

 

[mgraf]

Vorsicht - es wäre ja auch fad wenn es keine Hürden gäbe:
für alle iOS Systeme dürfen die Sprites eine bestimmte Größe nicht überschreiten,
http://stackoverflow.com/questions/4359029/maximum-image-dimensions-in-a-browser-css-spec

 

[Alice]

Vielen Dank für die Antworten.

Ich meine mit "alle Browser" alle gängen Browser. Aber nicht unbedingt die aktuellelsten, denn die Erfarung zeigt (zumindest meine) das noch sehr viele User mit dem IE5 und IE6 unterwegs sind.

IE5, IE6, IE7, IE8 und IE9.
Firefox ab Version wie IE5/6.
Opera ab Version wie IE5/6.

Also: IE, FF, Opera, Google Chrome und Safari.

Hab einfach keine Lust die Webseite mit CSS-Sprits zu optimieren und am ende beschweren sich die User wegen Darstellungsfehlern.

Hab da noch eine Frage:
Der Header, die Sidebar und der Footer Bereich meiner Webseite ist immer gleich. Also egal in welcher Unterseite man auch ist.
Wäre es Ratsam alle Grafiken von den 3 Bereichen zu einem großer Grafik zusammenzustellen?

Buttons Normal/Hover, diverse Hintergrundgrafiken, Header Grafik (3 Teilig), Navigationsgrafiken.

Ich denke nicht das ich die zulässige Max. Grösse von CSS-Sprits erreichen würde, aber gut zu wissen das es so etwas gibt.

 

[SpiceLab]

Ich meine mit "alle Browser" alle gängen Browser. Aber nicht unbedingt die aktuellelsten, denn die Erfarung zeigt (zumindest meine) das noch sehr viele User mit dem IE5 und IE6 unterwegs sind.

[...]

Hab einfach keine Lust die Webseite mit CSS-Sprits zu optimieren und am ende beschweren sich die User wegen Darstellungsfehlern.

Meines Wissens beherrschen selbst die antiquierten IE-Versionen aus'm letzten Jahrhundert "CSS Sprites".

Hab da noch eine Frage:

Wäre es Ratsam alle Grafiken von den 3 Bereichen zu einem großer Grafik zusammenzustellen?

Buttons Normal/Hover, diverse Hintergrundgrafiken, Header Grafik (3 Teilig), Navigationsgrafiken.

In meinem Sprites-File ist darüber hinaus noch mehr an Grafikschnippseln enthalten ^^

Allein der CSS-Selektor (selector { }) zum Einbinden des Hintergrundbildes umfasst derzeit über 160 namentlich gruppierte Elemente, Objekte - zuzüglich ihrer individuellen background-repeat- und background-position-Regeln ;-)