JavaScript CSS austauschen mit JS

[Cool Master]

Moin,

ich habe ein kleines problem. Ich möchte gerne wissen, ob es möglich ist per JS ein Script zu schreiben das je nach Browser eine andere CSS Datei nimmt und unterscheiden kann ob Windows oder Mac als OS zum einsatz kommt.

Das Problem ist das Menü das ich nutze wird nicht auf jeden Browser gleich angezeigt obwohl es 100% HTML und CSS valide ist. Einzig der FF stellt es auf Windows und OS X ohne probleme dar.

Wichtig wäre: Chrome und Safari

IE läuft wunderbar mit der Browser abfrage:

<!--[if gte IE 8]>
<linkrel="stylesheet" type="text/css" href="/media/css/normal.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="/media/css/ie8.css" />
<![endif]-->

Und sowas suche ich entweder per JS oder auch per if abfrage wenn das geht.

Wäre nett wenn mir das jmd sagen kann

Sollte ich heute nicht mehr Antworten nicht böse sein da ich es erst wieder am Freitag testen kann.

 

[Crimvel]

http://api.jquery.com/jQuery.browser/

damit ist das möglich.

 

[Cool Master]

Dank dir

 

[ice-breaker]

es ist technisch natürlich möglich, aber höchst bedenklich. Versuch doch einfach mal herauszufinden WARUM Chrome und Safari (und somit jeder Browser auf der Webkit-Engine) es anders darstellt, wenn du das verstanden hast, kannst du deine CSS-Regeln garantiert auch so umschreiben, dass sie sowohl durch die Gecko- als auch Webkit-Engine so dargestellt werden, wie du es dir wünschst.

 

[Cool Master]

Gecko ist Firefox

Chrome und Safari nutzen beide Webkit.

Ich kann nicht sagen warum es bei Webkit nicht richtig angezeigt wird mein CSS und HTML ist 100% Vailde. Jeder Browser stelt es richtig dar zugar der IE 8 mit 2 anpassungen was padding angeht. Der IE9 zugar ohne anpassung.

Na ja Vorgabe war IE und FF sollen laufen wenn die restlichen also nicht 100% gehen nicht schlimm.

 

[ice-breaker]

Gecko ist Firefox

Chrome und Safari nutzen beide Webkit.

nichts anderes habe ich gesagt

 

[Cool Master]

Nur das ich mit dem FF keine Probleme habe

 

[mercsen]

also ich habe ehr die erfahrung gemacht das FF sachen falsch interpretiert. Deswegen bin ich dazu übergangen, abgesehen davon das er eh der bessere browser ist, in chrome zu entwickeln und dann für FF die anpassungen vorzunehmen. Das hat mir einiges an Arbeit erspart.
Aber für FF als auch für Chrome (dort sogar immer dabei) gibt es debugger mit denen man jedes element pixel genau auseinander nehmen kann.

da siehst du wie wo welche regel agewendet wird und kannst dir sogar das box model nach dem die position berechnet wird angucken.

das sieht in chrome etwa so aus, wie im anhang.

da musst du dann mal bei den fraglichen elementen schauen was die browser anders machen und was ehr deinen regeln entspricht.

ich bin mittlerweile auch dazu übergangen mich nicht jahrekang mit CSS rumzuärgern sondern sachen die Diskrepanzen erzeugen über JS zu positionieren, das klappt in 99% der fälle. Teilweise ist es nämlich wirklich nicht nachvollziehbar wieso ausgerechnet FF (mit dem hab ich auch nur ärger) meint sich anders verhalten zu müssen als Opera und sogar der IE.
Ich lass meine CSS datein auch immer validieren, weiß also das es nicht daran liegen kann und auch meine seiten sind zu 100% w3c konform,trotzdem scheint FF häufiger mal anderer ansicht zu sein.

 

[Cool Master]

Moin,

ja ich benutze Firebug. Ich habe nun alles per JS gemacht läuft wunderbar.

Und zwar habe ich diese Seite gefunden:

http://www.tvidesign.co.uk/blog/CSS-Browser-detection-using-jQuery-instead-of-hacks.aspx

Finde ich ehrlich sehr elegant. Da ich genau 3 (bzw 6 mit Chrome) Sachen ändern musste:

.browserSafari #vertikal {left:923px; width: 12px;} /* Safari */
.browserSafari .menu li a {padding: 0 30px;} /* Safari */
.browserSafari .Impressum {left: 854px;} /* Safari */

Aber ja ich habe mir auch schon überlegt mit Chrome zu entwickeln. allerdings fehlen mir ein paar adons die ich nicht mehr missen will, aber das ist ein anderes Thema.