CSS-Browser Hacks, Meinung, irgendwie frustriert

[berdn]

Hallo Forum,

ich bin ja noch ein ziehmlicher neuling was CSS angeht.
Wobei mir ja doch die ersten Unterschiede zwischen den Browsern aufgefallen sind. Und im Netz findet man ja allerlei Hacks ...
Nur habe ich das Gefühl das man oft damit den Teufel mit den Belzebub austreibt, ob denn nicht die nächste Version des Browser das nicht schon wieder ganz anders interpretiert ...

Ich glaube ...
a.) ersteinmal mit dem CSS selber rumspielen (kleine Änerungen haben da doch schnell große Auswirkungen und weniger ist mehr)
b.) der IE (PC) überzeugt mich ziehmlich mit seinen conditional comments, das scheint ja recht sicher zu sein.
c.) ansonsten ist zur Zeit meine Messlatte der aktuelle Gecko
d.) Auf dem Mac laufen die Schriften immer etwas anders
e.) Eigentlich bieten sich doch Hacks Nur bei NS 4.x, und IE 5.x (Mac) an, weil die eh nicht mehr weiterentwickelt werden.

d.h Auf dem IE 6.x, ggf. IE 5.5, und Gecko sitzt das Layout Pixelgenau, auf den anderen fast, oder ?

Leider muß bei mir immer alles auch auf Safari passen, ich könnte heulen, oder auf Safari 2.0 warten aber der kommt wohl erst mit dem "Tiger".

... und dann habe ich heut in einen anderen Forum gelesen, muß ja nicht Valide sein ... hauptsache schaut gut aus.

Wie händelt Ihr das denn ? Bzw. bin ich nur ein frustrierter Newbie ?

Allen schöne Grüße aus Berlin,

Bernd

[Cheatah]

Hi,

Nur habe ich das Gefühl das man oft damit den Teufel mit den Belzebub austreibt, ob denn nicht die nächste Version des Browser das nicht schon wieder ganz anders interpretiert ...

mit CSS-Hacks muss man vorsichtig sein, das ist richtig. Man nutzt aber Browser-Bugs aus, um Browser-Bugs zu umgehen, ist also insofern auf einer halbwegs sicheren Seite, als die erstgenannten Browser-Bugs in der nächsten Version des Programms entweder nicht mehr zu erwarten sind, oder aber die letztgenannten Browser-Bugs wahrscheinlich ebenfalls vorhanden sein werden.

a.) ersteinmal mit dem CSS selber rumspielen (kleine Änerungen haben da doch schnell große Auswirkungen und weniger ist mehr)

Ja.

b.) der IE (PC) überzeugt mich ziehmlich mit seinen conditional comments, das scheint ja recht sicher zu sein.

Nein. Zumindest kann man da ruck zuck sehr viel falsch machen, z.B. wenn man mit "gt" bzw. "gte" vergleicht.

c.) ansonsten ist zur Zeit meine Messlatte der aktuelle Gecko

Ja, definitiv.

d.) Auf dem Mac laufen die Schriften immer etwas anders

Schriften sind immer und überall anders. Plane dies für jedes System mit ein.

e.) Eigentlich bieten sich doch Hacks Nur bei NS 4.x, und IE 5.x (Mac) an, weil die eh nicht mehr weiterentwickelt werden.

Netscape 4 sollte man i.d.R. vollständig vom CSS ausschließen. Den IE sollte man für Mac _und_ PC mit Hacks versehen; es bietet sich vor allem StarHTML an.

d.h Auf dem IE 6.x, ggf. IE 5.5, und Gecko sitzt das Layout Pixelgenau, auf den anderen fast, oder ?

Pixelgenauigkeit ist niemals verlässlich - Du befindest Dich im Internet, nicht im Druckbereich. Bei IE < 6 hast Du zudem das Problem, dass der Box-Model-Bug nicht durch Verlassen des Quirks-Mode umgangen werden kann.

Leider muß bei mir immer alles auch auf Safari passen, ich könnte heulen, oder auf Safari 2.0 warten aber der kommt wohl erst mit dem "Tiger".

Safari, Konqueror und Opera setzen eine ähnlich hohe Messlatte an wie Gecko. Empfehlung: Beachte vor allem die jeweils neuesten Versionen; die Wahrscheinlichkeit ist hoch, dass Nutzer dieser Browser relativ häufig aktualisieren.

... und dann habe ich heut in einen anderen Forum gelesen, muß ja nicht Valide sein ... hauptsache schaut gut aus.

Das ist Quatsch. Validität ist die _Grundlage_ guter Ergebnisse - niemand weiß, wie ein zukünftiger Browser mit falschem Code umgeht.

Wie händelt Ihr das denn ? Bzw. bin ich nur ein frustrierter Newbie ?

Du gehst gerade den Weg, den jeder gehen muss, der sich ernsthaft mit der Materie beschäftigt. Im Laufe der Zeit wirst Du die üblichen Probleme erlernen, die die einzelnen Browser mit sich bringen, und Dir ein Set "ordentlicher" Hacks zulegen. Meiner Erfahrung nach kommen Conditional Comments darin eher selten vor, weil sie unhandlich sind. Die meisten Hacks sind in den Selektoren begründet, einige wenige in den Eigenschaften.

Ach, übrigens: Wer nämlich, ziemlich, dämlich mit "h" schreibt, ist nämlich ziemlich dämlich ;-)

Cheatah

[Ingo Turski]

Hi,

Meiner Erfahrung nach kommen Conditional Comments darin eher selten vor, weil sie unhandlich sind. Die meisten Hacks sind in den Selektoren begründet, einige wenige in den Eigenschaften.

Ich finde eher Conditional Comments am sinnvollsten. Andere Browser machen mir meist wenig bis keine Probleme (kleine Ausnahme ist manchmal Opera) und ich benötige alternative CSS-Definitionen i.d.R. nur für den IE - manchmal auch nicht gerade wenige. Da finde ich es viel praktischer, alles in ein IE-Stylesheet zu packen (inkl. der Scrollbalken-Definitionen;-) und das normale CSS "sauber" zu halten.

Hacks, die auf Nicht-Unterstützung setzen, sind ebenso gefährlich wie Hacks, die auf falsche Interpretation setzen - beides kann in der nächsten Browserversion gefixt sein - die hierdurch ausgebügelten Bugs aber nicht. Bei einem Conditional Comment reicht eine Änderung bzw. Einfügung der Versionsnummer...

freundliche Grüße
Ingo

[Cheatah]

Hi,

Ich finde eher Conditional Comments am sinnvollsten. Andere Browser machen mir meist wenig bis keine Probleme (kleine Ausnahme ist manchmal Opera) und ich benötige alternative CSS-Definitionen i.d.R. nur für den IE - manchmal auch nicht gerade wenige. Da finde ich es viel praktischer, alles in ein IE-Stylesheet zu packen (inkl. der Scrollbalken-Definitionen;-) und das normale CSS "sauber" zu halten.

Du hast zusätzliche Dateien, eine definierte Reihenfolge (oder noch mehr Dateien), keinen Zusammenhang zwischen "echtem" Code und Hack, kaum die Möglichkeit einer feinen Dosierung, ... Meiner Erfahrung nach reichen letztlich einige wenige Hacks an geeigneten Stellen vorhandener Ressourcen, da ggf. sogar leicht generiert werden können.

Hacks, die auf Nicht-Unterstützung setzen, sind ebenso gefährlich wie Hacks, die auf falsche Interpretation setzen - beides kann in der nächsten Browserversion gefixt sein - die hierdurch ausgebügelten Bugs aber nicht.

Das Risiko ist natürlich vorhanden - aber eher in Browsern wie Konqueror (s. Christians Posting weiter oben), die stetig weiter entwickelt werden. Beim IE - also dort, wo man Hacks _wirklich_ braucht - stehen die Versionen fest; der nächste IE wird auf einer neuen(twickelten) Engine basieren. Änderungen des CSS-Verhaltens der bestehenden Versionen über z.B. Service Packs halte ich für unwahrscheinlich.

Bei einem Conditional Comment reicht eine Änderung bzw. Einfügung der Versionsnummer...

Ja. Auf jeder einzelnen verdammten Seite.[1]

Cheatah

[1] ;-)

[berdn]

Danke für's Mut machen !

Bei einem Conditional Comment reicht eine Änderung bzw. Einfügung der Versionsnummer...

Ja. Auf jeder einzelnen verdammten Seite.[1]

Stimt das ist ein Argument was dagegen stimmt.

Ich hatte mein letztes Layout aber versucht den IE 5.0 anzupassen, und sah darin meienn letzte Hoffnung. Der kann ja nischt der 5.0 er.

Bei dem projekt war zwar vieles in px, aber als dann das Menue in 11px gesetzt werden mußte gab es doch schon größere Abweichungen zwischen Mac und PC Darstellunge. 12 px war fast gleich.

Ich versuche unsere Grafiker so laaaangsam weg von den px eln zukommen.
Gibt es eigentlich irgendwo im web eine Seite die fast frei skallierbar ist ?

Oft ändert sich nur die Schriftgröße die farbflächen oder ähnliches aber eher nicht. So wirkt dann eine Seite schnell unproportional.

Wir überlegen deshalb auch als alternative einen Styleswitcher.

Grüße,

Bernd

[Ingo Turski]

Hi,

Gibt es eigentlich irgendwo im web eine Seite die fast frei skallierbar ist ?

Sieh Dir mal die Gewinnerseiten auf http://www.einfach-fuer-alle.de/award2004/ an. Da sind recht interessante und auch völlig unterschiedliche Lösungen dabei.

freundliche Grüße
Ingo

[Cheatah]

Hi,

Ich hatte mein letztes Layout aber versucht den IE 5.0 anzupassen, und sah darin meienn letzte Hoffnung. Der kann ja nischt der 5.0 er.

ja, und was er kann, kann er falsch ... Wenn Du mit "IE 5.0" auch den IE 5.5 meinst, könnte der Tantek- oder der Simplified-Box-Model-Hack helfen.

Bei dem projekt war zwar vieles in px, aber als dann das Menue in 11px gesetzt werden mußte gab es doch schon größere Abweichungen zwischen Mac und PC Darstellunge. 12 px war fast gleich.

Schriftgrößen sind potenziell _immer_ anders als erwünscht. In modernen Browsern lässt sich oft eine Mindestgröße festlegen, die, wenn dieses Feature genutzt wird, in aller Regel größer als 11 Pixel ist. Etwas von einer Schriftgröße abhängig zu machen ist ein schwerwiegender Konzeptfehler.

Cheatah

[Ingo Turski]

Hi,

Du hast zusätzliche Dateien, eine definierte Reihenfolge (oder noch mehr Dateien), keinen Zusammenhang zwischen "echtem" Code und Hack, kaum die Möglichkeit einer feinen Dosierung, ...

eine zusätzliche Datei (die ich wegen der Scrollbalken ohnehin habe) - Reihenfolge, klar, IE-Hacks kommen zuletzt - Zusammenhang, stimmt, aber ich brauche andererseits die Hacks nicht erst zu suchen - feine Dosierung? Mir reichte bisher immer eine Version für alle IEs.

Bei einem Conditional Comment reicht eine Änderung bzw. Einfügung der Versionsnummer...

Ja. Auf jeder einzelnen verdammten Seite.[1]

zugegeben. Aber auch das ist mit dateiübergreifendem suchen&ersetzen kein großer Aufand. Und, zum von Andreas angesprochenem Traffic: Falls überhaupt einmal eine Änderung des Conditional Comments erforderlich werden sollte, dann wäre das doch äußerst selten.
Und schließlich gäbe es immer noch die Möglichkeit, im IE-CSS bestimmte Korrekturen für bestimmte Versionen zu setzen oder vor ihnen verbergen; meintest Du das mit Dosierung?

freundliche Grüße
Ingo

[Cheatah]

Hi,

eine zusätzliche Datei (die ich wegen der Scrollbalken ohnehin habe)

naja, ich arbeite gewöhnlich mit mehreren CSS-Dateien, quasi hierarchisch aufgebaut (Firma, Dienst, Bereich, Unterbereich, Seite, ...). Wenn es bei Dir nur eine ist, kann ich verstehen, dass Dir Conditional Comments zusagen.

• Reihenfolge, klar, IE-Hacks kommen zuletzt

Hin und wieder ist es sinnvoller, es umgekehrt zu machen.

• Zusammenhang, stimmt, aber ich brauche andererseits die Hacks nicht erst zu suchen

Auch wahr. Aber: Wie oft sucht man einen Hack? ;-)

• feine Dosierung? Mir reichte bisher immer eine Version für alle IEs.

Das ist bei uns seltener der Fall. Oft genug kommen auch Kombinationen vor, die browserübergreifend sind und mit CCs natürlich dann nicht mehr lösbar sind.

Ja. Auf jeder einzelnen verdammten Seite.[1]
zugegeben. Aber auch das ist mit dateiübergreifendem suchen&ersetzen kein großer Aufand.

Daher auch der Smiley :-) Wie gesagt sind die Systeme in meiner Erfahrungswelt aber auch komplexer, so dass eine solche Pauschallösung nicht klappen würde. (Zudem geht es bei uns auch nicht unbedingt um _Dateien_.)

Und, zum von Andreas angesprochenem Traffic: Falls überhaupt einmal eine Änderung des Conditional Comments erforderlich werden sollte, dann wäre das doch äußerst selten.

Das sehe ich ähnlich.

Und schließlich gäbe es immer noch die Möglichkeit, im IE-CSS bestimmte Korrekturen für bestimmte Versionen zu setzen oder vor ihnen verbergen; meintest Du das mit Dosierung?

Auch. Letztlich sind Hacks oft auf einzelne bzw. einige wenige Browserversionen anzuwenden, die auch nicht immer ein "IE" im Namen tragen. Da ist dann ein Präzisionsschuss anzusetzen, während mir CCs eher wie das Abwerfen einer Splittergranate erscheinen ... :-)

Cheatah

[Ingo Turski]

Hi,

naja, ich arbeite gewöhnlich mit mehreren CSS-Dateien, quasi hierarchisch aufgebaut (Firma, Dienst, Bereich, Unterbereich, Seite, ...). Wenn es bei Dir nur eine ist, kann ich verstehen, dass Dir Conditional Comments zusagen.

Zwar nicht eine (außer der für den IE), aber ich kann mir die Aufteilung in Bereiche sparen, d.h. eine einfache auch für den NN4, eine fortschrittlichere und natürlich eine für den Druck reichen mir meist.

• Reihenfolge, klar, IE-Hacks kommen zuletzt
  Hin und wieder ist es sinnvoller, es umgekehrt zu machen.

inwiefern? Ich kann mir jetzt keinen Fall vorstellen.

Auch wahr. Aber: Wie oft sucht man einen Hack? ;-)

Naja, greifen wir das Thema mal 2006 wieder auf...

Da ist dann ein Präzisionsschuss anzusetzen, während mir CCs eher wie das Abwerfen einer Splittergranate erscheinen ... :-)

nettes Bild - und dem IE angemessen :-)

freundliche Grüße
Ingo

[Cheatah]

Hi,

naja, ich arbeite gewöhnlich mit mehreren CSS-Dateien, [...]
Zwar nicht eine (außer der für den IE), aber ich kann mir die Aufteilung in Bereiche sparen, d.h. eine einfache auch für den NN4, eine fortschrittlichere und natürlich eine für den Druck reichen mir meist.

okay, da ist unsere Praxis bereits verschieden.

• Reihenfolge, klar, IE-Hacks kommen zuletzt
  Hin und wieder ist es sinnvoller, es umgekehrt zu machen.
  inwiefern? Ich kann mir jetzt keinen Fall vorstellen.

#element {
  position: absolute;
  position: fixed;
}

Stell Dir noch ein bisschen Drumherum vor, und schon hast Du erst eine Definition für den IE, dann für fähigere Browser.

Auch wahr. Aber: Wie oft sucht man einen Hack? ;-)
Naja, greifen wir das Thema mal 2006 wieder auf...

Einverstanden :-) Es kommt IMHO aber dennoch häufiger vor, dass man die (=alle) Deklarationen zu einem Element sucht, als die Hacks für einen Browser.

Da ist dann ein Präzisionsschuss anzusetzen, während mir CCs eher wie das Abwerfen einer Splittergranate erscheinen ... :-)
nettes Bild - und dem IE angemessen :-)

*g*

Cheatah

[Ingo Turski]

Hi,

Hin und wieder ist es sinnvoller, es umgekehrt zu machen.
inwiefern? Ich kann mir jetzt keinen Fall vorstellen.

#element {
  position: absolute;
  position: fixed;
}

Schechtes Beispiel...

#IDdesElements { position fixed; }
*html #IDdesElements { position:absolute; }

bzw. das zweite ohne *html über Conditional Comment im späteren IE-Stylesheet eingebunden geht auch bzw. funktioniert im Gegensatz zu Deinem Beispiel. ;-)

freundliche Grüße
Ingo

[Cheatah]

Hi,

#element {
  position: absolute;
  position: fixed;
}
Schechtes Beispiel...

dann ändere es in verschiedene border-Unter- und Sammeleigenschaften o.ä. Dort ist die Reihenfolge _definitiv_ von Belang.

#IDdesElements { position fixed; }
*html #IDdesElements { position:absolute; }

Die Spezifität zu ändern kann bisweilen fatal sein ...

Cheatah

[MudGuard]

Hi,

Hacks, die auf Nicht-Unterstützung setzen, sind ebenso gefährlich wie Hacks, die auf falsche Interpretation setzen - beides kann in der nächsten Browserversion gefixt sein - die hierdurch ausgebügelten Bugs aber nicht. Bei einem Conditional Comment reicht eine Änderung bzw. Einfügung der Versionsnummer...

Conditional Comments ändern die Struktur der Dokumente (wenn auch nur geringfügig).
Insbes. muß jedes einzelne Dokument angefaßt werden, wenn die Versionsnummer irgendwann mal geändert werden muß.

Bei CSS-Hacks dagegen führt man die Änderungen im Fall eines neuen IE - sofern sie überhaupt nötig sind (könnte ja sein, daß der neue IE dann einerseits die alten Fehler nicht mehr macht und gleichzeitig auch * html dann endlich richtig interpretiert) an einer einzigen zentralen Stelle durch.

Das bedeutet, daß durch die Änderung nur im CSS massenweise Traffic gespart werden kann - es muß bei Wiederbesuchern nur das CSS neu ausgeliefert werden, die unveränderten Dokumente können bei Wiederbesuchern mit 304 not modified ausgeliefert werden.
Von z.B. meinen Webseiten wurde etwa 1/3 der Anfragen für HTML-Dokumente mit 304 beantwortet, etwa 2/3 mit 200 - die anderen Codes sind im 0,0x-Prozentbereich (das Verhältnis 200/304 ist natürlich individuell unterschiedlich).

cu,
Andreas

[molily]

Hallo,

Bei CSS-Hacks dagegen führt man die Änderungen im Fall eines neuen IE - sofern sie überhaupt nötig sind (könnte ja sein, daß der neue IE dann einerseits die alten Fehler nicht mehr macht und gleichzeitig auch * html dann endlich richtig interpretiert) an einer einzigen zentralen Stelle durch.

Das bedeutet, daß durch die Änderung nur im CSS massenweise Traffic gespart werden kann - es muß bei Wiederbesuchern nur das CSS neu ausgeliefert werden, die unveränderten Dokumente können bei Wiederbesuchern mit 304 not modified ausgeliefert werden.

Diese Argumentation finde ich ziemlich konstruiert.
Kleine Webseiten verwenden günstigerweise Include- bzw. Template-Systeme, größere sowieso CMS, sodass es selten dazu kommen sollte, dass diese Änderung nicht zentral oder automatisiert und damit unaufwändig durchgeführt werden kann.
Gerade bei »dynamischen« Seiten ändern sich die Dokumente ständig, auch wenn sich der Hauptinhalt nicht ändert. Die wenigsten dieser senden daher Last-Modified-Header und ETags und können gar nicht zu einem traffic-schonenden 200/304-Verhältnis kommen. Bei vergleichsweise statischen Seiten finde ich es ebenfalls nicht allzu tragisch, wenn sich alle paar Monate bzw. in diesem Fall alle paar Jahre, nämlich beim Erscheinen einer neuen IE-Version, der Code geringfügig ändert.

Mathias

[Tobias Müller]

Hallo berdn,

Nur habe ich das Gefühl das man oft damit den Teufel mit den Belzebub austreibt, ob denn nicht die nächste Version des Browser das nicht schon wieder ganz anders interpretiert ...

Da gebe ich dir recht

Ich glaube ...
a.) ersteinmal mit dem CSS selber rumspielen (kleine Änerungen haben da doch schnell große Auswirkungen und weniger ist mehr)

Das ist nie falsch.

b.) der IE (PC) überzeugt mich ziehmlich mit seinen conditional comments, das scheint ja recht sicher zu sein.

Würde er CSS richtig interpretieren, dann bräuchte man dieses "Feature" wahrscheinlich kaum noch.

c.) ansonsten ist zur Zeit meine Messlatte der aktuelle Gecko

Das ist auch absolut richtig.

d.) Auf dem Mac laufen die Schriften immer etwas anders

Hehe, wenn du als Maßeinheit px verwendest wird es diesbezüglich kaum noch Probleme geben. Aber der Einsatz von px ist hier im Forum nicht so gern gesehen.

e.) Eigentlich bieten sich doch Hacks Nur bei NS 4.x, und IE 5.x (Mac) an, weil die eh nicht mehr weiterentwickelt werden.

NS4 berücksichtige ich nicht mehr. Und der IE 5 Mac ist hoffentlich bald auch ausgestorben. Bis dahin ist er der Browser, der sicherlich Hacks am nötigsten hat.

d.h Auf dem IE 6.x, ggf. IE 5.5, und Gecko sitzt das Layout Pixelgenau, auf den anderen fast, oder ?

Das musst du wissen. ;-)

Leider muß bei mir immer alles auch auf Safari passen, ich könnte heulen, oder auf Safari 2.0 warten aber der kommt wohl erst mit dem "Tiger".

Safari/KHTML finde ich gar nicht zum Heulen. Fast alles, was in den Geckos so aussieht wie gewollt, sieht so auch im Safari aus. Der Rest sind Kleinigkeiten, die meist leicht zu beheben sind.

... und dann habe ich heut in einen anderen Forum gelesen, muß ja nicht Valide sein ... hauptsache schaut gut aus.

Was heisst schon müssen? Ich würde es dir aber grundsätzlich empfehlen valide zu schreiben im Hinblick auf Crossbrowserkompabilität, Fehlerminimierung und Barrierefreiheit

Wie händelt Ihr das denn ? Bzw. bin ich nur ein frustrierter Newbie ?

Bezogen auf Hacks? Ich hasse Hacks und vermeide sie so gut ich kann. Und das klappt auch fast immer.

MfG, Mülli