✔ Ist der Transparenz-Filter sauberer Code?

[wenco]

Hallo,
ich habe eine Frage zum anscheinend beliebten Thema Transparenz. Ich baue meine Seite ohne Tabellen, nur mit CSS und möchte sie fehlerfrei validieren. Der einzige Fehler der aber immer wieder erscheint, bezieht sich auf den Transparenz-Filter und lautet: Einlese-Fehler - opacity=60)

Bedeutet das benutzen des Filters also automatisch unsauberen Code oder mache ich etwas falsch an? Weiß irgendjemand einen Rat, außer dem darübber hinwegzuschauen?
wenco

FOLGENDE FORMEN DES FILTERS HABE ICH PROBIERT:

filter: Alpha(Opacity=50, FinishOpacity=70, Style=1, StartX=1, StartY=1, FinishX=90, FinishY=180);

filter:alpha(opacity=60);

 

[Gumbo]

Validierungs-Applikationen vergleichen ein Objekt immer mit einem bestimmten Standard. In den meisten Fällen sind dies die Empfehlungen des W3C, die allgemein auch als Web-Standards bezeichnet werden.

Da die „filter-Eigenschaft“ jedoch eine proprietäre, von Microsoft eingeführte Pseudo-Eigenschaft ist und nicht Teil einer W3C-Empfehlung ist, wird dies vom Validator als Fehler angezeigt.

Ob dies nun sauber oder unsauber ist, hängt ganz vom Standpunkt ab. Jemand, der auch im Internet Explorer – aber auch in Mozilla-Browsern – eine Transparenz darstellen möchte, muss bisher leider auf proprietäre Lösungen zurückgreifen. Zwar gibt es bereits einen Entwurf für eine standardisierte CSS-Transparenz, allerdings ist diese noch nicht Teil einer W3C-Empfehlung und damit auch nicht Teil eines Web-Standards. Diese proprietären Regeln werden aber glücklicherweise von Browsern, die diese Regeln nicht unterstützen, schlicht weg ignoriert.

 

[Maik]

Bliebe noch anzumerken, dass der MS Filter:

filter: Alpha(Opacity=50, FinishOpacity=70, Style=1, StartX=1, StartY=1, FinishX=90, FinishY=180);

filter:alpha(opacity=60);

von den non-IE Browsers (Firefox, Mozilla, Netscape, Opera, Konqueror, Safari) nicht unterstützt / angezeigt wird.

 

[wenco]

Danke für die Antworten. Ich finde den w3c Standard schon wichtig und wollte ihn möglichst einhalten, aber wie immer sollten Regeln auch nicht Selbstzweck sein. Ich versuche mein Glück jetzt mit einem halbtransparenten PNG und dem Filter:
FILTER: progidXImageTransform.Microsoft.AlphaImageLoader(src='mein.png', sizingMethod='scale')
als Alternative für den IE. Bisher habe ich es aber nicht hinbekommen, den Filter zum funktionieren zu bewegen. Ich bin noch ein bischen am googeln. Notfalls melde ich mich nochmal und hoffe auf weitere Hilfe. Vielen Dank wenco.

 

[wenco]

Transparentes PNG und AlphaImageLoader

Hi, hier bin ich nun nochmal und habe den FILTER: progidXImageTransform.Microsoft.AlphaImageLoader endlich zum funktionieren bekommen. Das heißt, mein halbtransparentes PNG wir jetzt auch im Explorer angezeigt.

Allerdings schaffe ich es nicht das PNG zusätzlich in den anderen Browsern darzustellen. D.h. wenn ich es dem <div> als Hintergrund zuweise, funktioniert es wieder im Explorer nicht, trotz Filter. Wie bekommt man denn so eine Unterscheidung hin? - möglichst in e i n e r CSS Datei, also ohne Browserweiche?

Ich hab mal mein jetziges minimiertes Ergebnis als Zip mit hochgeladen, unter folgendem Link.


Zip mit Dateien

 

[Bubblez]

du möchtest einen tabellenhintergrund transparent darstellen in IE und Mozilla?
ich mache das so:
http://www.css4you.de/trickkiste/tr00018.html

 

[Maik]

Re: Transparentes PNG und AlphaImageLoader

Auch hier gilt: der Filter progid: DXImageTransform.Microsoft.AlphaImageLoader kommt aus dem Hause Microsoft und wird deshalb von den non-IE Browsers (Firefox, Mozilla, Netscape, Opera, Konqueror, Safari) nicht unterstützt / angezeigt.

 

[wenco]

Hallo Bubblez und michaelsinterface,

mit dem Filter von Bubblez funktioniert es bei mir in allen Browsern, außer im Opera. Das ist doch schon mal was. Ich habe aber mal irgendwo gelesen, dass man in der CSS-Datei auch alternativen angeben kann. Allerdings bekomme ich das nicht hin und finde es auch nicht wieder. Es war irgendwie so:

(Der zweite Teil *html für den Explorer funktioniert auch. Der erste Teil, der nur ein ganz normales PNG, was die anderen Browser ja darstellen können, laden soll, funktioniert nicht.) wenco

body>#heading {
background-image: url(/bilder/trans.png);
}


* html #heading {
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='bilder/trans.png');
}

 

[Maik]

mit dem Filter von Bubblez funktioniert es bei mir in allen Browsern, außer im Opera.

Opera unterstützt (noch) nicht den Transparenz-Filter.


Der von bubblez gelinkte Filter lautet für den IE:

filter: alpha(opacity=60);

und für die Gecko-Browsers (FireFox, Mozilla, Nestcape):

-moz-opacity: 0.6;

 

[wenco]

Hey,
ich hab's endlich hinbekommen. War wohl gestern zu müde und habe noch Flüchtigkeitsfehler reingebastelt. Dieses Beispiel funktioniert in allen Browsern.Safarie kann ich nicht testen, wird aber für mich erledigt. Hier das Beispiel:

body>#test {
background-image: url(bilder/trans.png);
}

* html #test {
FILTER: progidXImageTransform.Microsoft.AlphaImageLoader(src='bilder/trans.png', sizingMethod='scale');
}

Danke für Eure Hilfe! wenco