Hoe browser-specifieke stylesheets gebruiken?

[Levi Strauss]

Ik ben bezig aan een website, en daar in zit een drop-down menu. Alleen in Internet Explore ziet het er natuurlijk als verwacht weer anders uit dan in Firefox. Nu is het zo dat ik graag wil dat de pagina in Firefox en Internet Explore goed te zien is.

Nu heb ik dus 2 verschillende CSS bestanden, 1 met de CSS die het goed doet in Firefox en 1 die het goed doet in IE. Nu wilde ik via het volgende script dat er word gekeken welke browser word gebruikt, zodat vervolgens de website goed wordt weergegeven.

Ik heb al van alles geprobeerd, en het script heb ik van Handleiding HTML afgehaald. Maar ik kom er niet uit om dit goed voor elkaar te krijgen. Hoe kan ik het zorgen dat als hij in IE word geopend het bestand 'standard_ie.css' word geladen, en anders 'standard.css'?

Dit is het basis script, maar ik weet nu alleen niet hoe ik het moet aanpassen zodat het werkt zoals ik wil.

JavaScript:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var OP   = (navigator.userAgent.indexOf("Opera") != -1);
var M4   = (navigator.userAgent.indexOf("Mozilla/4") != -1);
var NN4  = (navigator.appName == "Netscape") && M4 && !OP;

var MAC  = navigator.userAgent.indexOf("Mac") != -1;
var NN4m = NN4 && MAC;

link1    = '<LINK REL="stylesheet" HREF="';
link2    = '" TYPE="text\/css">';

cssnn4   = 'nn4.css';
cssnn4m  = 'nn4m.css';

if (nn4) {
if (nn4m) {
document.write(link1 + cssnn4m + link2);
}
else {
document.write(link1 + cssnn4 + link2);
}
}

//-->
</SCRIPT>

[BtM909]

Zijn ze qua classes en id's voor de rest gelijk?

[Rowanov]

Je pakt het imho verkeerd aan. Als je zorgt dat alles in firefox werkt en je hebt wat aanpassingen voor IE om het daar werkend te krijgen, kan je met een conditional comment de extra of IE-specifieke code toepassen. Dit is overigens de gebruikelijke manier en er zijn vast veel dingen waarbij er een andere oplossing gevraagd is.

[ Voor 11% gewijzigd door Rowanov op 13-01-2007 15:28 ]

[sjaakaq]

Wat je wel kan doen (geen valid CSS) is alle rules 2x in je CSS zetten, en voor alle IE dingen * zetten. Dus:

Cascading Stylesheet:

#eendiv {
width: 199px;
*width: 200px;
font-weight: bold;
*font-weight: normal;
}

etc.

Alles browsers negeren regels met * behalve IE. Dus wel alle IE regels al laatste, anders pakt 'ie alsnog de andere

Maar goed; dat is dus geen valid CSS.

[ Voor 18% gewijzigd door sjaakaq op 13-01-2007 15:51 ]

[Rowanov]

leokennis schreef op zaterdag 13 januari 2007 @ 15:50:
Alles browsers negeren regels met * behalve IE. Dus wel alle IE regels al laatste, anders pakt 'ie alsnog de andere

Maar goed; dat is dus geen valid CSS.

Daarom geef ik ook aan dat conditional comments handig zijn. Ze bereiken hetzelfde als jouw hack, alleen dan op een correcte manier.

[Levi Strauss]

Rowanov schreef op zaterdag 13 januari 2007 @ 15:27:
Je pakt het imho verkeerd aan. Als je zorgt dat alles in firefox werkt en je hebt wat aanpassingen voor IE om het daar werkend te krijgen, kan je met een conditional comment de extra of IE-specifieke code toepassen. Dit is overigens de gebruikelijke manier en er zijn vast veel dingen waarbij er een andere oplossing gevraagd is.

Het is gelukt! Hij doet het zoals ik wil, en dat ook nog is op een correcte manier! En ook nog zonder javascript! Thnx!

HTML:

<link rel="StyleSheet" href="standard.css" title="standard" type="text/css" >
<link rel="StyleSheet" href="menucss.css" title="standard" type="text/css" >

<!--[if IE]>
<link rel="StyleSheet" href="standard_ie.css" title="standard" type="text/css" >
<link rel="StyleSheet" href="menucss_ie.css" title="standard" type="text/css" >
<![endif]-->

[ Voor 22% gewijzigd door Levi Strauss op 14-01-2007 12:06 . Reden: HTML code toegevoegd. ]

[SchizoDuckie]

offtopic:
Even off-topic... Wil je alsjeblieft meehelpen om het verschrikkelijke vernederlandste woord 'stijlbladen' van het internet te verbannen en hier zoals de rest van de wereld het woord stylesheets voor gebruiken?

[bRight]

leokennis schreef op zaterdag 13 januari 2007 @ 15:50:
Wat je wel kan doen (geen valid CSS) is alle rules 2x in je CSS zetten, en voor alle IE dingen * zetten. Dus:

Cascading Stylesheet:

#eendiv {
width: 199px;
*width: 200px;
font-weight: bold;
*font-weight: normal;
}

etc.

Alles browsers negeren regels met * behalve IE. Dus wel alle IE regels al laatste, anders pakt 'ie alsnog de andere

Maar goed; dat is dus geen valid CSS.

Volgens mij werkt dat niet meer in IE7..

[Kiphaas7]

bRight schreef op maandag 15 januari 2007 @ 01:01:
[...]


Volgens mij werkt dat niet meer in IE7..

Bij mijn weten is inderdaad de star-hack eruit gehaald in 7. Conditional comments werken echter in 6 en 7. zoals hierboven al gezegd is.:)

[ Voor 4% gewijzigd door Kiphaas7 op 15-01-2007 02:13 ]

[Verwijderd]

Star hacks werken idd niet meer. Gewoon conditional comments gebruiken dus

[ Voor 1% gewijzigd door Verwijderd op 15-01-2007 09:46 . Reden: typo ]

[crisp]

Voor IE7 heb je gelukkig over het algemeen al minder 'hacks' nodig als voor 6.

Sowieso is het wel zaak te zorgen dat IE ook in standards compliant mode rendered (dus volledig DTD gebruiken) anders zit je nog met boxmodel verschillen.

[JKVA]

Kun je het niet gemakkelijker afvangen met losse stylesheets? Dus aparte stylesheets met browser specifieke zaken? Ik had een tijdje geleden wel een probleem met meerdere stylesheets in Firefox, maar goed, dat lijkt voorbij.
Als je het server side afvangt, scheelt het zelfs iets aan bandbreedte.

[crisp]

JKVA schreef op maandag 15 januari 2007 @ 10:00:
Kun je het niet gemakkelijker afvangen met losse stylesheets? Dus aparte stylesheets met browser specifieke zaken? Ik had een tijdje geleden wel een probleem met meerdere stylesheets in Firefox, maar goed, dat lijkt voorbij.
Als je het server side afvangt, scheelt het zelfs iets aan bandbreedte.

Er zijn geen methoden om serverside op een betrouwbare manier te bepalen met wat voor browser je van doen hebt.
Verder is het bij een redelijk eenvoudig ontwerp ook niet moeilijk om ervoor te zorgen dat het er in alle browsers nagenoeg gelijk uitziet zonder dat je naar 'hacks' hoeft te grijpen.

[ Voor 15% gewijzigd door crisp op 15-01-2007 10:08 ]

[Snake]

crisp schreef op maandag 15 januari 2007 @ 10:05:
[...]

Er zijn geen methoden om serverside op een betrouwbare manier te bepalen met wat voor browser je van doen hebt.

Ook niet clientside, aangezien je je browserstring kunt aanpassen.
In IE niet volledig, maar FF wel (Opera en de rest wss ook)

[crisp]

Snakiej schreef op maandag 15 januari 2007 @ 10:07:
[...]

Ook niet clientside, aangezien je je browserstring kunt aanpassen.
In IE niet volledig, maar FF wel (Opera en de rest wss ook)

conditional comments zijn wel betrouwbaar

[OkkE]

Aangezien er ook verschillen zijn in de rendering van IE6 vs. IE7, gebruik ik over het algemeen meestal dit:

HTML:

<link rel="stylesheet" type="text/css" href="css/default.css">
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css"><![endif]-->
<!--[if lt IE 6]><link rel="stylesheet" type="text/css" href="css/ie5.css"><![endif]-->

Ik zou iig geen hacks meer gebruiken, aangezien die gewoon niet betrouwbaar zijn. Misschien nu wel, maar je weet nooit hoe het in een volgende versie van bijv. IE zal zijn.

[Levi Strauss]

OkkE schreef op maandag 15 januari 2007 @ 10:48:
Aangezien er ook verschillen zijn in de rendering van IE6 vs. IE7, gebruik ik over het algemeen meestal dit:

HTML:

<link rel="stylesheet" type="text/css" href="css/default.css">
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css"><![endif]-->
<!--[if lt IE 6]><link rel="stylesheet" type="text/css" href="css/ie5.css"><![endif]-->

Ik zou iig geen hacks meer gebruiken, aangezien die gewoon niet betrouwbaar zijn. Misschien nu wel, maar je weet nooit hoe het in een volgende versie van bijv. IE zal zijn.

Aangezien in mijn geval IE7 het zelfde reageerde als Firefox heb ik alleen voor IE6 een apparte stylesheet. Voor de andere browsers gebruikt hij gewoon de standaard stylesheet. Ik was al bang dat ik nog een andere moest maken voor IE7, maar dat hoefde gelukkig niet!