Browserkompatibilität

[HighTec]

Sorry dass ich diese alte nervige Frage stelle.
Ich hatte in der SuFo nichts gefunden. Ich habe ja immer wieder das alt bewährte Problem, das eine HP nicht in einigen Browsern funktioniert.
Jetzt hatte ich eine art Tutorial oder Tipps gesucht wo ich genau nachlesen kann worauf ich jetzt im groben achten muss, damit die HP´s in allen Browsern so aussehen wie sie aussehen.

Würde mich freuen wenn mir dort jemand ein Link zu einem Tutorial oder ähnlichen geben würde oder eigene Tipps posten würde.

 

[krizzelfix]

Hallo HighTec,

erstell einfach deine Seite, und wenn du CSS Eigenschaften oder HTML Elemente bnutzt die du nicht kennst, dann guck einfach bei http://de.selfhtml.org oder www.css4you.de nach der kompatibilität.

Und wenn irgendetwas nicht so aussieht wie es soll, ebenfalls nachgucken.

Grüße

tewes

 

[HighTec]

Ok diese seite habe ich mir bereits heruntergeladen.

Was ich meine ist, wenn ich zum Beispiel das CSS atribut :after be´nutzen möchte. Dieses funktioniert ja nicht im IE wie kann ich den selben Effekt dann auch im IE möglich machen. So als kleines Beispiel.

 

[krizzelfix]

Oke :after und :before kannte ich nicht und würde ich auch nicht benutzen. Da man ja Layout von Content trennen soll Gut rausgeredet
Aber prinzipell lässt sich alles irgendwie realisieren. Müsste man nur vorher gucken ob sich der Aufwand lohnt.

Grüße

tewes

 

[HighTec]

Naja alles klar ich werd mich mal dranmachen...wird schon schiefgehen.

 

[Zweipunktnull]

>> Jetzt hatte ich eine art Tutorial oder Tipps gesucht wo ich genau nachlesen kann worauf ich jetzt im groben achten muss, damit die HP´s in allen Browsern so aussehen wie sie aussehen.

So etwas gibt es (meines Wissens) nicht. Bekannte Bugs wie das falsche Boxmodell werden ja häufig behandelt. Aber eine komplette Liste wäre mir neu. Ich habe so etwas früher auch immer wieder gesucht, aber irgendwann aufgegeben. Ich denke das ist wirklich etwas , dass man nur durch Erfahrung lernt. Viele Bugs treten ja noch nicht mal immer auf, sondern nur in einer bestimmten Kombinationen von Eigenschaften. Vondaher ists auch schwer eine Liste zu machen.

 

[Crizzo]

Sowas?: http://www.positioniseverything.net/explorer.html

 

[HighTec]

Eher nicht so das richtige

 

[Crizzo]

Immer hin eine Auflistung von IE Bugs. :> In der Referenz zu CSS auf http://www.thestyleworks.de/ steht auch immer dabei, welche Browser Probleme mit der Eigenschaft hat.
Im Buch CSS-Praxis von Kai Laborenz liegt eine Karte bei, die alle Eigentschaften von CSS 2.1 aufführt und markiert hat, welche Browser sie (nicht) unterstützen.

 

[Prypjat]

Es gibt einige IE-Bugs, bei denen ich jedes Mal wieder den Drecksplorer am liebsten in den Papierkorb verschieben würde (aber ich hab den Papierkorb ja deaktiviert):

1. Wie bereits von Computer Freak erwähnt: Das Box-Modell. Normalerweile legt man mit den CSS-Attributen width und height die Größe des tatsächlichen Elementinhaltes fest. padding und margin sind demnach noch hinzu zu addieren. Den IE kümmert das wenig: er meint, dass padding bereits in width und height enthalten sei und fügt eben die padding-Größe nicht extra außen an den Elementinhalt an. Das führt bei mir regelmäßig zu unschönen Layouts. Irgendwann hab ich's dann aufgegeben und gesagt: dann haben IE-Benutzer einfach Pech!

2. Tabellenbreite 100%: Ebenfalls dem mangelhaften Box-Modell geschuldet, misst der Drecksplorer die Breite einer Tabelle (width:100%) nicht nur an der width des Elternelements, sondern an dessen Breite inklusive dem padding-Anteil. Demnach sind Tabellen innerhalb von Elementen mit padding stets zu breit und stehen über den Rand hinaus. Sehr ärgerlich.

Pseudo-Elemente wie :before und :after werden nicht unterstützt. Man sollte hier eher ein entsprechendes Element im HTML-Dokument einfügen, auch wenn das etwas aufwendiger ist.

 

[dummix]

Dean Edwards IE7-Script für IE<=6 behebt viele gravierende Mängel. Damit lässt sich ohne viele CSS Hacks eine Seite auch im IE korrekt darstellen. Eine Bedingung ist jedoch, dass der IE-Nutzer ebenfalls Javascript aktiviert haben muss, was bei den meisten (ich schätze über 99%) der Fall sein wird.

 

[Zweipunktnull]

CSS-Workarounds sind in jedem Fall JavaScript-Workarounds vorzuziehen.

 

[dummix]

Natürlich sind reine CSS-Lösungen in jedem Fall Javascript vorzuziehen, jedoch bedienen sich viele CSS-Hacks syntaktisch unkorrektem Code, sind Zeit aufwendig bzw. komplex in der gewünschten Umsetzung oder können schlicht einige Dinge für bestimmte Browser nicht realisieren, man denke nur an alphatransparente PNG-Bilder.
Der einzige Punkt, der gegen Javascript-Lösungen spricht, ist eine eventuelle Deaktivierung des Scriptes im Browser, was bei IE-Nutzern jedoch sehr selten ist (bzw. bei generell allen Nutzern).

 

[Crizzo]

Natürlich sind reine CSS-Lösungen in jedem Fall Javascript vorzuziehen, jedoch bedienen sich viele CSS-Hacks syntaktisch unkorrektem Code, sind Zeit aufwendig bzw. komplex in der gewünschten Umsetzung oder können schlicht einige Dinge für bestimmte Browser nicht realisieren, man denke nur an alphatransparente PNG-Bilder.
Der einzige Punkt, der gegen Javascript-Lösungen spricht, ist eine eventuelle Deaktivierung des Scriptes im Browser, was bei IE-Nutzern jedoch sehr selten ist (bzw. bei generell allen Nutzern).

Dann schaut der veraltete Browser einfach in die Röhre. Bevor ich mir wegen Kleinigkeiten wie alphatransparente PNG-Bildern große Arbeit mache, bekommt der IE einfach eine Alternativ vorgesetzt und nur die modernen Browser bekommen die Seite in voller Pracht zu sehen.

 

[dummix]

Dean Edwards IE7-Script verlangt aber keine große Arbeit. Man muss lediglich für alle IE<=6 ein Conditional Comment mit einen Veweis zum Script anführen und fertig. Das Script speichert man an einem beliebigen Ort.

 

[Crizzo]

Du kannst aber nicht davon ausgehen, dass dann alle <IE7 Benutzer dieses Script "ausführen" und bist genauso weit wie davor.

 

[dummix]

Das stimmt. Dann kommen wir auf den von dir angesprochenen Punkt zurück. Aber ich denke es ist hinsichtlich der Masse an aktiviertem Javascript ein guter Kompromiss ohne viel Aufwand.

 

[NeoPunk]

Noch ein allgemeiner Tipp zu dem Thema:
Eine Browserweiche einbauen, durch die jeder Browser seine eigene CSS-Datei bekommt (Im Idealfall mit einem Defaultstylesheet, dessen Definitionen dann von den browserspezifischen CSS überschrieben werden können).
Vorteil: Kommt ein neuer Browser mit anderen Eigenschaften lässt sich da leicht nachpfelgen.
Nachteil: Lohnt sich eher für statische Seiten, bei denen das Design nicht ständig geändert werden muss, da die Pflege durch die mehrfache Definition erschwert wird.

Und schon beim Entwickeln ständig auf allen gängigen Browsern testen, das erspart später viel Arbeit beim Debugging.

 

[Crizzo]

Ich für meinen Teil habe eine CSS-Datei, die alle moderne Browser dazu bringt, die Seite richtig anzuzeigen. Der IE bekommt noch eine extra Datei mit Ergänzungen und dann läuft die Sache schon rund.