forum.ahadesign.eu

[NetMind]

Hallo zusammen,

ich habe mal etwas als "Denksportaufgabe"
Wir leiden ja alle noch unter dem tollen IE (und tw. auch unter dem PNG Problem vom IE7).
Auf meiner Site wöllte ich einen Hintergrund und dementspechend Transparenz für die Content- und Menüareas. Mit etwas Fleißarbeit, Hilfe von Gerhard und neuen Grafiken war das auch möglich. Leider macht der IE häßliche Dinge (viel Schwarz, wenig zu sehen).
Das habe ich, auf eine unbefriedigende Weise gelöst: ich habe aus den PNG Grafiken GIFs gemacht. Jetzt passt zwar der IE6, aber von der Farbanzahl her schaut es nicht zum aus der Hose springen aus, das Firmenlogo hat seinen Verlauf opfern müssen etc.
Jetzt viel mir ein, man konnte doch irgendwie abfragen, mit welchem Browser sich der geneigte Zuschauer auf der Site herumtreibt? Gibt es dann nicht eine Möglichkeit das ich einem Besucher mit dem IE6 die GIF Grafiken zuweise und der Rest bekommt etwas Vernünftiges, also die PNG Grafiken?
Ich denke, das Problem kennt und hat jeder (auf jeden Fall wenn er sich mal etwas mit der Thematik beschäftigt hat), vielleicht hat sogar jemand ein paar gute Ideen wie man das lösen kann!
Freue mich über Eure Ideen und Anregungen,

Gruß

Guido

[Gerhard]

Hallo Guido,

dann versuche ich mal meinen Senf dazu zu geben.

Also die derzeit wichtigsten Formate für das Web sind sicher JPEG, PNG und GIF. Jedes Format hat seine Vor- und Nachteile. Also JPEG ist gut für Bilder mit vielen Farben, also auch Fotos. Es kann 16.7 Millionen Farben darstellen. Das ist auch gut für Verläufe. Allerdings ist das Format nichts für Transparenz. Dafür kann man GIF nehmen. Aber wie Du selbst sagst, werden damit vielfarbige Grafiken eher schrecklich dargestellt. GIF kann nur 256 Farben. Es kann aber Transparenz. Allerdings keine Teiltransparenz. Also entweder komplett durchscheinend oder eben nicht. Zumindest kann der IE 6 damit umgehen. Ach ja, auch Animationen sind damit möglich. Also nix für Bilder mit vielen Farben zb. komplexe Verläufe. Hier ist das PNG-Format schon sehr viel besser aufgestellt. Es gibt PNG-8 und PNG-24, sowie PNG-32. PNG 8 ist ähnlich wie GIF, komprimiert aber wesentlich besser. Interessant für Dich dürfte das PNG 24 sein. Damit lassen sich 256 Transparenzstufen (Alpha Transparenz) verwirklichen und es kann 16.7 Millionen Farben darstellen. Natürlich kostet das Speicherplatz. Sogar der IE 7 versteht sich damit.
Natürlich kann der IE 6 und älter nichts mit PNG anfangen, sobald Transparenz mit im Spiel ist. War klar oder?
Man kann sich aber trotzdem behelfen. Es gibt den sogenannten PNG Fix. Dieser ist auch in den meisten Aha Templates eingebunden. Damit geht Transparenz auch in den Browserähnlichen IE´s.
Den IE PNG Fix von TwinHelix kann man bekommen unter http://www.twinhelix.com/css/iepngfix/
Auch von Microsoft selber gibt es einen Fix. Der macht aber auch nichts anderes.
Wie man den Fix im Template einbaut, sieht man bei fast allen Aha Templates. Es gibt da meistens einen Ordner js. Dort ist die Datei iepngfix.htc drin. Dort muss nur in Zeile 14 der Pfad zum blank.gif des Templates stimmen. Das blank.gif muss natürlich dann auch am besten im Ordner images vorhanden sein. In der index.php ist ein Bereich wie folgender zu finden:

Code: Alles auswählen

<style type="text/css">
#logo, .increase, .revert, .decrease { behavior: url(<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/iepngfix.htc); }
</style>

Man sieht schon, hier wird der Fix auf das Logo und mit Komma getrennt, auf weitere Elemente angewandt. Damit das nur für den IE 6 und noch ältere IE´s gemacht wird, wird das ganze von folgendem Code eingerahmt:

Code: Alles auswählen

<!--[if lte IE 6]>
.........
<![endif]-->

Also less than equal IE 6 oder auf Deutsch, kleiner als gleich IE 6.
Das ganze nennt man Conditional Comments (Bedingte Kommentare). Damit können gezielt die alten IE´s angesprochen werden. Es geht also auch folgendes:

Code: Alles auswählen

<!--[if IE 7]>
.....
<![endif]-->

Hier wird also absolut nur der IE 7 angesprochen.
Du kannst also in so einem Block auch gezielt ein CSS-Stylesheet oder sonstiges Javascript nur für die Microsoft-Dinger laden lassen. Das sieht man auch in meinen Templates immer wieder. Also einfach abschauen.

Also dem IE Gifs zu verpassen und den anderen PNG, ist irgendwie nicht sinnvoll. Dann kann man gleich nur PNG verwenden und die IE Nutzer in die Röhre schauen lassen, oder den PNG-Fix verwenden. Das geht halt nicht für jedes Vorhaben. Hier muss man immer abwägen und auch die finale Dateigröße berücksichtigen. Wenn es die vermaledeiten IEs nicht gäbe, wäre vieles einfacher. Zum Beispiel abgerundete Ecken nur mit CSS usw.

Bestimmt hab ich eine Menge vergessen. Vielleicht weiß ja noch einer was zu dem interessanten Thema. Ich hoffe, damit kannst erstmal etwas anfangen.