Trick 17: CSS-Transparenz für alle Browsertypen

26 Sep

von ManuelGraf am 26.Sep 2009, in der Kategorie Design

Transparenz ist für viele Designer ein sehr wichtiges Gestaltungsmittel. Nur wie stellt man das im Browser an ohne Bilder benutzen zu müssen? Apfelkuh zeigt wie.

Für gute Browser gibt es da eine Einheitliche Lösung: opacity. Unser aller guter Freund, der Internet Explorer, hat hierfür seit version 5.0 – eigentlich recht praktische – Filter Implementiert (z.B. Monochrom, Transparenz, Spiegel-Filter).

Folgende CSS- Klasse gibt der jeweiligen Box mit der Klasse "opaque50" eine Transparenz von 50%.

Getestet in:

Firefox 3.0

Safari 4.0

Opera 9.64 + 10

Internet Explorer 6, 7 und 8

Über ManuelGraf

Manuel Graf ist Mediengestalter für Digital- und Printmedien bei iBusiness.de. Er arbeitet seit 6 Jahren mit Photoshop, HTML und CSS und hat sich seit 2 Jahren Kentnisse in Sprachen wie Javascript, Actionscript 3.0, BOIL, PHP, Ruby oder Python angeeignet.

Kommentare

2 Comments for this entry

wsteckmann
Oktober 5th, 2009 on 06:32
Netter, wenn auch nicht ganz neuer Ansatz.

Leider schmeißt das oben genannte Stück Code gleich 5 Fehler im CSS-Validator (http://jigsaw.w3.org/css-validator/validator)

Kennt jemand eine valide Methode?

Gruß, Werner
Manuel Graf
Oktober 5th, 2009 on 10:07
Hallo Werner,

es ist ganz klar, dass der normale css 2 Validator ALLES in diesem Snippet anmeckert. ich habe bereits erwähnt, dass es keien Einheitliche Lösung gibt, weil jeder Browser sein eigenes Süppchen kocht.

Nicht valides CSS wird nicht interpretiert und das ist, wie diese Klasse funktioniert.

opacity: ist eine CSS3-Eigenschaft, wird aber von Modernen Browsern wie Opera, Safari und Firefox unterstützt, da diese CSS3 beherrschen.

-moz-opacity: deprecated. Vorläufer im Firefox für Unterstützung von CSS3

-ms-filter und filter: der Internet Explorer beherrscht bis heute kein CSS3, hat dafür aber schon sehr lange die praktischen Filter besessen. Standard ist das jedoch nicht, sondern das eigene Süppchen des Internet Explorers

-khtml: deprecated. Vorläufer im Safari für Unterstützung von CSS3

Damit hast du alle gängigen Browser-engines abgedeckt. Valide ist es laut W3c natürlich nicht, aber dazu muss man wissen, dass viele Browser nicht W3C-Konform arbeiten.

opacity ist W3C-CSS3-Konform, nicht jedoch für CSS 2.1 (Fehler Nummer 1 des Validators). Somit gehen die modernen Browser einher mit der Norm.

Jedoch ist das alten Browsern ziemlich Wurscht. Jemand der den Internet Explorer 6 benutzt wird deswegen entweder ohne opacity auskommen müssen, oder man opfert seine Validität um einen nicht W3C-Konformen Filter einzubauen.

Validität oder Userzufriedenheit… Diese Wahl obliegt in der Tat dem Developer