Skalierbare Buttons mit CSS

Gehen so:

Ich bin ein Button

Soweit so easy, nich wahr?

Gerade bin ich aber über mehrere Artikel gestolpert, wo skalierbare Buttons via CSS mit runden Ecken angepriesen werden.
Das ist alles soweit ganz doof dufte, aber der Reihe nach:

  • Korsti (korsti.uttx.net) schreibt in seiner Anpreisung zum drölfundypzigsten die gern und vielgelesene aber trotzdem falsche Feststellung:

    Doch ein Problem namens Internet Explorer besteht immer noch. Die Version 6 des Browsers unterstützt bekanntlich keine transparenten PNG-Grafiken.

    Spitzending, Top-recherche, Hut ab.

  • Von Manuela Hoffman (csshilfe.de) ist Ähnliches dazu zu lesen, wenn’s auch da nicht direkt falsch ist (Hervorhebung von mir):

    Leider unterstützt ja der Internet Explorer 6 die Darstellung dieser PNGs nicht.
    Nutzer dieses Browsers sehen alternativ dank der Verwendung des [class]-Selektors die Buttons eben nur ohne die entsprechenden PNG-Verschönerungen.

    Das ist missverständlich.

    „Die Verschönerungen“ beziehen sich hierbei nur auf diese durchscheinenden Hintergrundgrafiken und Farben. Es wäre trotzdem möglich, selben Effekt für den IE – und ja – mit PNG zu basteln.

Nun zur eigentlichen Seite und Technik, auf die sich da bezogen wird.
Auf David’s Kitchen gibt es da den Artikel „Scalable CSS Buttons Using PNG and Background Colors“, wo mir gleich mehrere Dinge sauer aufstossen.

  • Mitnichten handelt es sich hier um „Skalierbare buttons via PNG und Hintergrundfarben“, sondern um Skalierbare buttons via Javascript, PNG und Hintergrundfarben.
    Ich weiss nicht Recht, aber ich finde das frech, das ist ja fast wie bei SpOn, wo es schonmal vorkommt, dass im Artikel genau das Gegenteil der Überschrift steht.
  • Soweit ich da durchschaue, hätte man sich das Javascript auch fein in die Haare schmieren können. Das Javascript macht nichts anderes, als Behelfs-spans um die Links zu basteln, die dann mittels CSS angesprochen werden.
    Is nich wahr, nee?
  • Wo man schon beim Javascript-geschmier war, hätte man auch noch an der Opacity für IE feilen können, ein Fallback mit nicht-alpha-transparenten PNG (ohne Javascript) ist hier leider imho nicht möglich, da die eigentliche Innovation der Buttons die ist, dass nur 2 Standardgrafiken verwendet werden, die farblich neutral sind.

Was bleibt da bei den angeblichen CSS-Buttons? Viel Lärm um wenig, das mit den neutralen Grafiken ist sehr nett, das war’s.
Oder hab ich ein Brett vor‘m Kopf?

Technorati Tags: ,

12 Kommentare to “Skalierbare Buttons mit CSS”

  1.  Marcel schrieb am 14. Jul 2007 um 10:41

    Moin,

    gemeint war, dass der IE standardmäßig und ohne Workarounds keine transparenten PNGs unterstützt. Sprich: Ich binde per HTML eine transparente PNG-Grafik ein und sie wird ohne Transparenz ausgegeben. Dass es verschiedene (umständliche) Workarounds gibt, die auch im IE 6 transparente PNGs möglich machen bestreite ich nicht 😉

    Gruß
    Marcel

  2.  Mike® schrieb am 14. Jul 2007 um 14:14

    Und eben genau das ist falsch, der IE stellt sehr wohl Transparenzen in PNG ohne Workaround _richtig_ dar, so lang es keine alphatransparenten (Halbtransparenz) sind.

  3.  Flo schrieb am 14. Jul 2007 um 15:16

    Fein zu wissen. War mir bis gerade eben auch neu, daß der IE überhaupt irgendeine Transparenz bei PNGs verstünde. *mir selbst auf die Schulter klopf*

    Wegen sowas dann mit Workarounds anfangen? Hm. Käme schwer auf den Fall an. Dann halt ohne PNG, auch wenn es verdammt schade um gerade diese fließende Transparenz ist.

  4.  Greg schrieb am 14. Jul 2007 um 17:06

    Auch Mikes Beschreibung ist imho nicht ganz richtig. Transparenz bei PNG 8 kann er darstellen, bei PNG 24 nicht. Oder umgekehrt. Alphatranzsparenz allgemein nicht.

    Edit: Der IE7 kann übrigens beides und auch Alphatransparenz.

  5.  Mike® schrieb am 14. Jul 2007 um 20:37

    [quote post="600"]Transparenz bei PNG 8 kann er darstellen, bei PNG 24 nicht.[/quote]
    Oh, ich mag da nicht direkt widersprechen, meine aber mich ganz blass zu erinnern, mal irgendwo gelesen zu haben, wie man ohne JS dem IE selbst PNG24 mit (normalen) Transparenzen beibringt.
    Imho musste man da irgendwas an den Kanälen rumpfuschen, hab mir das nicht genau angeschaut, weil’s mir zu hoch war 😉

  6.  Flo schrieb am 15. Jul 2007 um 9:43

    Ich will ja jetzt nicht Deinen kompletten Beitrag quoten, aber wie war das nochmal mit der Top-Recherche? :p

    Ich geh es später einfach ausprobieren. Bei PNG24 bin ich mir aber eigentlich fast 100% sicher, daß er es weder in der einen, noch in der anderen Version kann, weil ich das gerade bei einer Seite so machen wollte und mir jetzt deswegen mein schöner Effekt versaut wird. Hey, das war jetzt immerhin Semi-Top-Recherche. 😉

  7.  Marcel schrieb am 15. Jul 2007 um 11:37

    Hey, aber ist nicht gerade die Alphatransparenz das Argument überhaupt für PNG statt GIF (sieht man vom Farbraum ab).

  8.  Mike® schrieb am 15. Jul 2007 um 17:39

    Flo, hätte ja ausgereicht, nur die relevanten Stellen zu quoten:
    [quote post="600"]… nicht direkt widersprechen, meine aber mich ganz blass zu erinnern, mal irgendwo gelesen zu haben[/quote]
    😀
    Ist schon noch etwas anderes, als „XYZ geht nicht.“
    Die Recherche dazu hab ich mir gespart, weil ich es zum Thema nicht so wichtig fand, einen Hack für PNG24 zu finden.

  9.  Flo schrieb am 15. Jul 2007 um 23:26

    Also, natürlich ohne rumstreiten zu wollen, aber da kommt dann noch dazu:
    [quote comment="6742"](…) mal irgendwo gelesen zu haben, wie man ohne JS dem IE selbst PNG24 mit (normalen) Transparenzen beibringt.
    Imho musste man da irgendwas an den Kanälen rumpfuschen, hab mir das nicht genau angeschaut, weil’s mir zu hoch war ;)[/quote]
    Aha, also nichtmal mehr klar, ob die Quelle seriös war, keine Ahnung wie genau, aber auf normalem Wege eben nicht und verstanden hat er es auch nicht, weil es ihm zu hoch war… so kam das rüber. 😀 😉

  10.  Mike® schrieb am 16. Jul 2007 um 0:14

    Flo, das mit dem Rumstreiten find ich schade 😉
    Zum Thema: das hab ich vor geschätzt einem Jahr mal auf ner Seite gelesen, die im Gulli-board von imho „Antichrist“ zum Thema verlinkt wurde.
    Suchen danach ist zwecklos, von PNG und Transparenz wird man erschlagen und bei Google dann erst Recht.

    [quote comment="6748"]Hey, aber ist nicht gerade die Alphatransparenz das Argument überhaupt für PNG statt GIF (sieht man vom Farbraum ab).[/quote]
    Ja, das ist richtig, ich zieh mich nur gern immer wieder an der falschen Behauptung, der IE könne kein PNG, hoch.
    Der IE kann nicht nur nicht kein PNG, er kann auch nicht kein PNG24 nicht nicht.
    Richtig ist einzig: Der IE kann nativ keine Alphatransparenzen in PNG24 darstellen.
    Alle Klarheiten nun beseitigt? 😉

  11.  Flo schrieb am 16. Jul 2007 um 1:56

    Glauben wir es halt mal… 😉

  12.  Marcel schrieb am 16. Jul 2007 um 19:11

    [quote comment="6758"]Alle Klarheiten nun beseitigt? ;)[/quote]

    Okay 🙂

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>