Individuelles CCS für IE und NS

[Crusader]

Hallo Leute,

und es funktioniert doch. :D
Nach längeren Grabungsarbeiten habe ich endlich CSS-Varianten gefunden, die sowohl sehr umfassend inhaltlicher Natur sind, als auch 4 Browser-Generationen berücksichtigen (IE4, IE6, NS4, NS6).

Ich habe anschließend alle Sheets in separaten Spalten nebeneinander angeordnet, damit man die Unterschiede besser erkennen kann.
In vielen Ansätzen habe ich selbst bisher so gearbeitet, jedoch gerade bei den Fontgrößen und Zeilenabständen muss man sich auf einiges gefasst machen. :o

Zur besseren Unterscheidung sind die Bereiche mit jeweils abweichenden CSS-Beschreibungen farblich gekennzeichnet.
Jemand, der also vorhat eine hohe Browser-Kompatibilität bei nahezu identischem Look-and-Feel zu erzielen, sollte sich das:
http://easy2u.de/css-vergleich.zip (15KB)
näher ansehen.

Aber auch ausschnittsweise sind die CSSheets zu gebrauchen. Wer hat sich noch nicht über die total unterschiedliche Darstellung von Formularfeldern bei IE und beim NS gewundert/geärgert. Eine funktionierende Lösung wird geboten.

Heute Abend werde ich dann noch testen, wie sich das Ganze mit einem Opera und einem Mozilla verträgt, aber ich bin zuversichtlich.
Viel Spaß

CU
Crusader

[Thomas Roessing]

Uff, äh:
:what: :what:
Ich nehme an, Deine Tabelle ist für die Profis unter uns, richtig? Für mich sieht das aus wie eine Statistik über Böhmische Dörfer :) .

Was sagen denn die Profis dazu, die hier mitlesen?

Viel Gruß
Thomas

[frank.reissmann]

Hm, ... ich auch nix Profi ... wollte CSS aber immer schon einsetzen, drum interessiert! Wenn ich's richtig verstehe, kann man die nicht rot markierten Anweisungen problemlos einsetzen, um bei allen vier Browsern das gleiche Aussehen zu erzielen. (Nur welche Variante soll ich bei den roten, abweichenden Stylesheets bevorzugen?) Seems to me, that we need a Gebrauchanweisung from you, Crusader... oder ich muss doch noch mehr nachlesen bei:
http://www.mediaevent.de/css2/index.html
http://www.w3.org/Style/CSS/ und
http://www.webreview.com/style/css1/glossary.shtml

Grüße von

[Crusader]

Ok, ok...

Also die Sache kann man kompliziert und einfach angehen.
Ich versuche es mal mit der einfachen Variante.
Vorab: Es gibt zwei Kriterien. Man kann die Browserfamilien (IE, NS) und/oder die Browsergenerationen (z.B. IE4, IE6) betrachten. Dementsprechend sollte man auch die Wichtigkeit für sich selbst festlegen.
Bei nur 5% Seitenzugriffen für alle NS-Browser, ist eine Anpassung sehr zu überlegen.
Bei 50/50 alten und neuen IE-Browsern, kann man schon eher Handlungsbedarf sehen.

Und nun konkret:
(1)
Alle nicht markierten Bereiche bedeuten, dass man mit den jeweiligen Definitionen bei den vier Browsertypen das nahezu gleiche Ergebnis erhält.
(2)
Alle markierten Bereiche bedeuten, dass sich die Ausgabe je nach Browser unterscheiden würde und man deshalb individuelle Anpassungen vornimmt. Das ist z.B. die font-size, line-height... und ganz wichtig sind die Anpassungen run um input-Tags. Gerade dort unterscheiden sich NS und IE gewaltig.
(3)
Alle leeren Bereiche neben den Markierungen bedeuten, dass nur bei einigen Browsern dieses Attribut unterstützt wird. Hier sind z.B. der "hover" für Links und die "farbigen Scrollbalken" zun nennen. Diese funktionieren nur bei neuen Browsern.

Hat man also Probleme beim Design seiner bisherigen Seiten, so sind in den Sheets entweder Abhilfen zu finden
oder Ursachen zu suchen (markierte Bereiche), die man dann als CSS browserabhängig umsetzen oder mit herkömmlichem HTML umgehen kann (z.B. geringere Breite für Formularfelder im IE, damit sie im NS auch noch draufpassen).

Aber!!!
Individuelle CSS nützen ohne eine aktive Komponente auf der Seite nichts. Irgendwann sollte schließlich der Browser des Users identifiziert werden. PHP/Perl (direkt oder über SSI) zu benutzen, ist sicherer als JavaScript, da letzteres abgeschaltet werden kann.
Das muss aber jeder je nach seiner Zielgruppe entscheiden.
Und...
Der Opera identifiziert sich per default als IE5 :(

Hoffe, dass es für den Einstieg reicht.

CU
Crusader

[frank.reissmann]

Hallo Crusader,

Respekt. Klar und einfach beschrieben, so dass man's versteht. Du hast Talent! Mein Problem ist nur, dass ich zwar vorrangig IE-Besucher habe, aber meine Site mit anderen Monitor-Auflösungen nicht mehr so, wie bei mir, aussieht! Hilft mir da CSS auch weiter? Dein Tipp?

Greetings from

[frank.reissmann]

... Irgendwann sollte schließlich der Browser des Users identifiziert werden. PHP/Perl (direkt oder über SSI) ...

per SSI reicht ja nicht! Wie bekomme ich eine Abfrage damit hin??? :what:

I'm sure You Know it!

[Crusader]

Hallo Frank,

Si, sé la solución :D:

Im <head>-Bereich, wo auch die links zum CSS stehen, kann man soetwas einbauen.



<link rel="stylesheet" type="text/css" href="msie4.css">


Beispiele: HTTP_USER_AGENT
Internet Explorer 6.0 meldet sich
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 4.0)
Netscape 4.73 meldet sich
Mozilla/4.73 [de] (WinNT; U)

Es wird also im Code nach der Stringfolge "MSIE" gesucht!

Das kann man dann beliebig ausbauen und auch verschachteln, hier in Kurzform:

if *MSIE*

if *MSIE 5.*

href=msie5.css

endif

if *MSIE 6.*

href=msie6.css

endif

endif

Als "default" kann man z.B. ein CSS für alte Netscapes laden und nur im Falle eines MSIE wird entsprechendes CSS nachgeladen ("@ import").
Bitte mal bei SelfHTML nachsehen, wie die einzelnen CSS kaskadiert werden müssen, dass es klappt!

Wenn man wissen möchte, wie sich die Browser melden, ist hier eine Browserliste mit Kennungen:
http://www.browserlist.browser.org/browser...s_list_big.html (http://www.browserlist.browser.org/browser_mappings_list_big.html)

Ich hoffe, das war hilfreich.
Mit PHP kann man die Sache natürlich auch lösen, aber SSI ist eben die Dynamik des kleinen Mannes :wink: und wird auch von mir gerne genommen!

CU
Crusader

[Crusader]

Hallo Frank,

jetzt noch zum ersten Problem. Ich habe hier auch solche Fälle, wo man einigen Benutzern neue größere Monitore hingestellt und die Auflösung auf 1280x1024 gestellt hat.
Ergebnis die Schrift viel zu klein - eigentlich auf Dauer unlesbar.
Wie hat die (geniale :cry: ) EDV geholfen?
Nein, man hat nicht 1024x768 eingestellt, sondern die Schriftgröße auf große Schriftart = 120 dpi (statt 96 dpi) geändert.
Genial!
Alles sieht riesengroß und zum k**zen aus!

In solchen Fällen kann man nur mit einem CSS weiterkommen, dass relative Größen verwendet.
(Oder man tritt der EDV in den "A..llerwertesten"! :lol: )

D.h. für Schriftgrößen "em" statt "pt", für Zeilenabstände "%" statt "px" usw. - wie schon teilweise bei meinen Beispiel-CSSs.

Darüber ist allerdings schon ein philosophischer Kampf entbrannt, ob man es tatsächlich so (relativ anstatt absolut) angehen soll.
Arbeit ist es in jedem Fall und ich werde in ein paar "Wochen sowieso ein größeres Projekt mit "relativem CSS" angehen.
Vielleicht lohnt sich das warten! Es reicht ja, wenn sich einer ärgert und graue Haare fallen bei mir (blond) weniger auf :wink:

CU
Crusader

[Crusader]

Hallo Frank,

für ganz Ungeduldige habe ich den Tipp, meine neuen Seiten unter: http://test.easy2u.de anzusehen.
Dort ist ein CSS mit relativen Größen verwendet worden.
Diese Seiten könnte man mal testweise bei den Leuten mit Darstellungsproblemen (alles zu groß) ausprobieren.
Browser werden noch nicht unterschieden, aber ich habe die Seiten kurz mit: IE 5.5/6.0, NS 4.72/4.73, Opera 6.01/6.04/6.05, Mozilla 1.0/1.1 unter Win 98, Win ME, Win NT4 getestet - und es funktioniert überall :-?

Bin mal gespannt, wie es bei anderen aussieht.

CU
Crusader

[frank.reissmann]

Grand merci a toi, Crusader! :D Je ce réalise en HTML bientôt...

Je souhaite une bonne nuit!

[Thomas Roessing]

Moin,
ich weiß zwar nicht, was Frank über mir gesagt hat, aber wenn es ein Lob für http://test.easy2u.de war, dann schließe ich mich an. Das ist ja sehr hübsch gemacht mit dieser Server-Information, Whois- und Ping-Kombination.

Mit dem CSS-Kram werde ich mich mal beschäftigen, wenn ich weng Zeit habe.

Viel Gruß
Thomas

[frank.reissmann]

Das war ne Fortsetzung zu: :D
[list]I'm sure, You know it!
Si, sé la solución
Grand merci a toi![list]
und es gibt noch sooo viel mehr Sprachen... :D Grüße von