CSS-Sprites - Kompatibilität - Skalierbarkeit

[Jonathan F]

Hallo Selfer,

ich bin gerade dabei mir zu überlegen aus meinem bisherigen Design, dass bisher vollkommen ohne Grafiken auskommt, etwas mehr zu machen.

In diesem Zuge bin ich am Überlegen nette Grafik-Schaltflächen mit Hover-Effekten via CSS-Sprites zu basteln.

Die erste Frage, die sich mir dazu auftut, ist die Browserkompatibilität von CSS-Sprites? Ich konnte leider keine ausführliche Übersicht darüber finden?

Die zweite Frage beschäftigt sich mit der Skalierbarkeit solcher Grafik-Schaltflächen - dürfte also streng genommen kein CSS-Sprites-spezifiches Problem sein. Die Schlatflächengrafiken haben eine gewisse Größe in px. SVG wird mir zur Zeit noch zu wenig unterstützt, sodass dies also eine feste Größe ist. Mit meinem bisherigen Design, dass auf Text, Linien und runden Ecken via CSS beruhte hatte ich keinerlei Probleme damit, wenn man die Seite vergrößert (naja gut der Border-radius hat sich nicht entsprechend vergrößert). Aber mit den CSS-Sprites bekomme ich doch dann verpixelte Schaltflächen, oder?
Sollte man die Grafiken in der Größe 200% anlegen und dann auf die Hälfte verkleinern per CSS, wenn dann jemand zoomed bleibt die Grafik bei den ersten Zoomstufen noch scharf?
Bin danbkabr für Tipps.

Grüße
Jonathan F

[Steel]

MOin!

ich bin gerade dabei mir zu überlegen aus meinem bisherigen Design, dass bisher vollkommen ohne Grafiken auskommt, etwas mehr zu machen.

In diesem Zuge bin ich am Überlegen nette Grafik-Schaltflächen mit Hover-Effekten via CSS-Sprites zu basteln.

Spricht ja nix dagegen.

Die erste Frage, die sich mir dazu auftut, ist die Browserkompatibilität von CSS-Sprites? Ich konnte leider keine ausführliche Übersicht darüber finden?

Was soll daraninkompatibel sein? Dabei wird keine Technik benutzt mit der ein aktueller Browser nciht klarkäme.

Die zweite Frage beschäftigt sich mit der Skalierbarkeit solcher Grafik-Schaltflächen - dürfte also streng genommen kein CSS-Sprites-spezifiches Problem sein. Die Schlatflächengrafiken haben eine gewisse Größe in px. SVG wird mir zur Zeit noch zu wenig unterstützt, sodass dies also eine feste Größe ist. Mit meinem bisherigen Design, dass auf Text, Linien und runden Ecken via CSS beruhte hatte ich keinerlei Probleme damit, wenn man die Seite vergrößert (naja gut der Border-radius hat sich nicht entsprechend vergrößert). Aber mit den CSS-Sprites bekomme ich doch dann verpixelte Schaltflächen, oder?
Sollte man die Grafiken in der Größe 200% anlegen und dann auf die Hälfte verkleinern per CSS, wenn dann jemand zoomed bleibt die Grafik bei den ersten Zoomstufen noch scharf?
Bin danbkabr für Tipps.

Spricht ja doch was dagegen. Die Schaltfläche skaliert lustig mit. Aber die Grafik nicht. Hast du CSS-Sprites verstanden? Hier werden Hintergrundgrafiken eingesetzt und positioniert. Sind die skalierbar? Ein Tipp: nicht ja, 4 Buchstaben, der erste ein N.

[Jonathan F]

Hallo,

Was soll daraninkompatibel sein? Dabei wird keine Technik benutzt mit der ein aktueller Browser nciht klarkäme.

Bei jeder Technik ergibt sich die Frage der Kompatibilität.
Kommt auch der IE als aktuell noch weit verbreiteter "Browser" damit zurecht?

Spricht ja doch was dagegen. Die Schaltfläche skaliert lustig mit. Aber die Grafik nicht.

Also in Chromium skalieren Hintergrundbilder mit, wenn man die Seite vergrößert. Demnach würden Schaltfläche und Grafik skalieren.
Dennoch, wie bei jeder Grafik ergibt sich das Problem, dass die Grafiken verpixelter werden je größer sie werden. Darum meine Frage mit den 200% - jedoch lassen sich Hinergrundbilder ja nicht skaliert mit CSS einbinden?

Wie löst man das "zoomen macht Grafiken pixelig"-Problem denn unabhängig von CSS-Sprites? Ist ja alles schön und gut mit fluidem, liquidem Design, wenn die Grafiken halt pixeln hilft das auch nichts.

Gruß

Jonathan F

[Cheatah]

Hi,

Bei jeder Technik ergibt sich die Frage der Kompatibilität.

CSS-Sprites sind keine Technik, sondern eine Anwendung. Die Technik lautet background-image und background-position, und damit kommen ziiiemlich viele Browser klar.

Kommt auch der IE als aktuell noch weit verbreiteter "Browser" damit zurecht?

Nicht mal der IE ist blöd genug, das nicht zu beherrschen. Sein Problem ist allerdings das Caching, unter Umständen lädt er die Grafik bei jeder Positionsänderung neu. Dies wäre nicht anders, wenn Du auf Sprites verzichten würdest.

Ein weiteres Problem ergibt sich im IE, wenn Du anstatt einer Hintergrundgrafik einen Filter einsetzt, um alphatransparente PNG-Grafiken einzubinden. Diese sind dann kein Hintergrund mehr, sondern eine Veränderung des Elements, so dass background-position wirkungsfrei bleibt. Lösung: Exkrementiere drauf.

Dennoch, wie bei jeder Grafik ergibt sich das Problem, dass die Grafiken verpixelter werden je größer sie werden. Darum meine Frage mit den 200% - jedoch lassen sich Hinergrundbilder ja nicht skaliert mit CSS einbinden?

Korrekt.

Wie löst man das "zoomen macht Grafiken pixelig"-Problem denn unabhängig von CSS-Sprites?

Durch Ignorieren des Themas. Der Browser hat die Aufgabe, dieses Browser-Feature vernünftig zu implementieren. Firefox beispielsweise führt ein Anti-Aliasing durch, was die Grafiken verwaschen anstatt pixelig macht.

Cheatah

[Jonathan F]

Hallo,

also auf IE 6 exkrementieren und vom Browser ein sinnvolle Zoom-Feature fordern, das mich nichts weiter angeht?

Der Webdesigner ist nur dafür verantwortlich, dass das Layout fluide ist, aber nicht, dass die Grafiken unendlich skalierbar sind?

Grüße

Jonathan F

[Steel]

Hallo,

also auf IE 6 exkrementieren und vom Browser ein sinnvolle Zoom-Feature fordern, das mich nichts weiter angeht?

Der Webdesigner ist nur dafür verantwortlich, dass das Layout fluide ist, aber nicht, dass die Grafiken unendlich skalierbar sind?

Kommt drauf an, was Dein Auftraggeber will. Es wäre die Aufgabe auf die quasi Unmöglichkeit des letzten Punktes hinzuweisen, bevor dieser vereinbart wird.

[Cheatah]

Hi,

also auf IE 6 exkrementieren und vom Browser ein sinnvolle Zoom-Feature fordern, das mich nichts weiter angeht?

ja:

• Der IE 6 ist vom Aussterben bedroht. Wenn auch laut Genfer Konvention nicht bedroht genug.

• Zoom-Features sind als Browser-Feature in den aktuellen Browsern bereits implementiert. Es kann nicht klar erkannt werden, ob bzw. wie weit der Zoom verwendet wird, und es gibt keine Möglilchkeit, dieses Feature zu beeinflussen. Außer in der Form, dass diverse Browser als Open Source zur Verfügung stehen und es Dir frei steht, das entsprechende Feature Deinen Wünschen anzupassen und der Community zur Hand zu geben.

Der Webdesigner ist nur dafür verantwortlich, dass das Layout fluide ist, aber nicht, dass die Grafiken unendlich skalierbar sind?

Der Web-Entwickler ist für vieles verantwortlich, nicht jedoch für alles. Manche Dinge darf er auch einfach als gegeben akzeptieren.

Cheatah

[Steel]

Täch!

Dennoch, wie bei jeder Grafik ergibt sich das Problem, dass die Grafiken verpixelter werden je größer sie werden. Darum meine Frage mit den 200% - jedoch lassen sich Hinergrundbilder ja nicht skaliert mit CSS einbinden?

Korrekt.

Psst. Lass das Gunnar nicht hören. Er hat schon wieder die CSS3 Keule ausgepackt.

[Cheatah]

Hi,

Psst. Lass das Gunnar nicht hören. Er hat schon wieder die CSS3 Keule ausgepackt.

er soll sie in den Implementierungssack packen, dann können wir gerne drüber reden.

Cheatah

[Detlef G.]

Hallo Jonathan

Wie löst man das "zoomen macht Grafiken pixelig"-Problem denn unabhängig von CSS-Sprites? Ist ja alles schön und gut mit fluidem, liquidem Design, wenn die Grafiken halt pixeln hilft das auch nichts.

Falls du nicht gerade fliegendreckgroße (oder besser -kleine) Schrift auf der Seite verwendest, stellt sich dieses Problem nicht wirklich.
Die Seitenbesucher werden die Seite kaum zoomen, wenn sie alles gut erkennen können.
Solange du ausreichend große Schrift verwendest, werden nur diejenigen zoomen, deren Sehschärfe nicht gut ist, und die werden auch die einzelnen Pixel dann nicht erkennen.

Es käme auch kein vernünftiger Mensch auf den Gedanken, Bilder auf der Seite in 5facher Größe auszuliefern, und dann verkleinert anzuzeigen, nur für den Fall, dass jemand die Grafik im Browser selbst vergrößern könnte.

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

@@Steel:

nuqneH

eHier werden Hintergrundgrafiken eingesetzt und positioniert. Sind die skalierbar? Ein Tipp: nicht ja, 4 Buchstaben, der erste ein N.

Falsch. Der erste ist ein C. Und das vierte Zeichen ist kein Buchstabe, sondern eine Ziffer.

Brauchst du noch mehr Tips?

Qapla'

[Meinzlein]

Mit CSS3 löst er sein Problem aber zwecks mangelnder Browserunterstützung - auch bei dem von ihm genannten IE6 - auch nicht umfassender und handelt sich Probleme ein, bei Browsern, die CSS3 nicht unterstützen - oder will er da dann 200% große Bilder..

Fraglich ist ohnehin, ob es sinn macht jeden Betrachter der Seite mit dem zusätzlichen Datenmüll für eventuelle Vergrößerungen zu belasten.