Conditional comments binnen CSS sheet

[Mexxus]

Beste mensen,

Ik ben op zoek naar een maniertje om -binnen een css sheet- aan te geven dat een stukje code alleen voor IE is bedoeld, en niet voor andere browsers. Binnen een HTML document kon dat met "Conditional comments" op de volgende manier:

code:

<!--[if IE]>

  <style>
    blablabla...
  </style>

<![endif]-->

Nu vraag ik me af.. is dit ook binnen het CSS bestand opzich mogelijk?

[DizzyWeb]

Alleen met een aantal hele vieze hacks.

[Mexxus]

Vertel... Ik vraag er niet voor niets om natuurlijk . Het geen ik hierboven had staan is nou ook niet bepaald 'netjes' te noemen, en IE vraagt gewoon af en toe om een hele vieze hack.

[ Voor 55% gewijzigd door Mexxus op 05-05-2005 23:41 ]

[DataGhost]

kan gewoon met javascript lijkt me... verder kan je het zelf wel uitzoeken lijkt me (beeeeeetje eigen inzet )

[Fuzzillogic]

Simpel, gewoon extra <style /> of <link /> blokje in conditional comments gooien, die dan de correcte CSS weer ombuigt in vieze troep die IE snapt.

[Mexxus]

Nexxennium schreef op donderdag 05 mei 2005 @ 23:44:
Simpel, gewoon extra <style /> of <link /> blokje in conditional comments gooien, die dan de correcte CSS weer ombuigt in vieze troep die IE snapt.

Jep, zo heb ik het momenteel al opgelost. Maar op deze manier moet ik dus weer extra style spul in m'n HTML document gooien. Ik vroeg me dus af of dit ook gewoon in het CSS document zelf kan.

[André]

Ik ken wel een trucje waardoor je FF en IE css kunt scheiden:

Cascading Stylesheet:

div.rood {
  /* standaard css zut */
}
div.VoorIE.rood {
  /* IE css zut */
}

[Mexxus]

André schreef op donderdag 05 mei 2005 @ 23:45:
Ik ken wel een trucje waardoor je FF en IE css kunt scheiden:

Cascading Stylesheet:

div.rood {
  /* standaard css zut */
}
div.VoorIE.rood {
  /* IE css zut */
}

Is dit humor of bedoel je dat serieus? .

[Verwijderd]

Probeer het. Je kunt ook een underscore voor een property plaatsen. Dan leest alleen IE hem in.

[André]

Mexxus schreef op donderdag 05 mei 2005 @ 23:50:
[...]


Is dit humor of bedoel je dat serieus? .

Hoezo ik zie de humor niet? Test het maar en je zult zien dat de 2de class alleen in IE verwerkt wordt omdat andere browsers de volledige naam lezen (VoorIE.rood) en IE alleen maar de laatste (rood).

[ Voor 3% gewijzigd door André op 05-05-2005 23:55 ]

[Mexxus]

André schreef op donderdag 05 mei 2005 @ 23:55:
[...]

Hoezo ik zie de humor niet? Test het maar en je zult zien dat de 2de class alleen in IE verwerkt wordt omdat andere browsers de volledige naam lezen (VoorIE.rood) en IE alleen maar de laatste (rood).

Ok! Kijk, dat wist ik dus niet . Dank enzo...

[imp4ct]

LOL, je meent het niet . Wat ik mij afvraag, waarom zo gaan klooien. Kan je het niet op één of andere manier toch proberen het zo in IE te krijgen ??

Allé zo moeilijk kan het nu toch niet zijn om alles een beetje goed te laten werken zowel in IE als in FF, 't kost soms wat tijd en moeite "soms tranen :p". Maar't moet toch te lukken zijn.

PS : André welke opleiding heb jij gevolgd ofzo, want jij weet echt ENORM veel.. thx voor the referer tip, 't werkt perfect !

[ Voor 19% gewijzigd door imp4ct op 06-05-2005 00:03 ]

[Mexxus]

't is helemaal voor elkaar hoor

[André]

I_M_P_A_C_T schreef op vrijdag 06 mei 2005 @ 00:02:
LOL, je meent het niet . Wat ik mij afvraag, waarom zo gaan klooien. Kan je het niet op één of andere manier toch proberen het zo in IE te krijgen ??

Allé zo moeilijk kan het nu toch niet zijn om alles een beetje goed te laten werken zowel in IE als in FF, 't kost soms wat tijd en moeite "soms tranen :p". Maar't moet toch te lukken zijn.

Dat ben ik met je eens, al zul je in sommige gevallen een 'hack' moeten gebruiken om iets in IE ook goed te laten werken.

PS : André welke opleiding heb jij gevolgd ofzo, want jij weet echt ENORM veel.. thx voor the referer tip, 't werkt perfect !

offtopic:
Hier is geen opleiding voor, deze kennis heb ik puur en alleen opgedaan door ervaring

Mexxus schreef op vrijdag 06 mei 2005 @ 00:05:
't is helemaal voor elkaar hoor

Mag ik vragen waarvoor je het hebt gebruikt, want zoals I_M_P_A_C_T het al zegt kan het vaak op een manier dat het in alle browsers gewoon goed werkt. CSS hacks moet je zoveel mogelijk proberen te vermijden

[Mexxus]

Het zit als volgt:

Een aantal buttons staan onder elkaar. Zodra je op een buttom klikt, schuiven er een aantal sub-buttons onder vandaan. Deze staan met een top- en bottom-margin van 2px van elkaar af. Het aantal pixels dat de boel naar beneden moet schuiven, om de subbuttons tevoorschijn te toveren, is meegegeven in een javascript.

Nu komt het...

Volgens mij rendert IE de margins anders dan Mozilla. Hierdoor komt het dus zo dat er, zodra de boel is uitgeklapt, er in IE een grotere opening tussen het submenu komt, dan in Mozilla. Ik heb het als volgt opgelost.

In Mozilla krijgen de subbuttons een top- en bottom-margin van 2px;, en in IE beide 0px, maar wél een line-height van 30px. Dit geeft als resultaat dat zowel in Mozilla als in IE de buttons netjes op gelijke afstand van elkaar staan, en het aantal pixels dat de boel onderuit moet schuiven dus in IE en Mozilla gelijk is.

[Verwijderd]

Mozilla ondersteund de line-height truuk dus niet? Anyway, ik gok erop dat IE een verkeerde implementie heeft van collapsing margins. (Dat weet ik eigenlijk wel zeker, maar niet of het in dit geval ook geldt.)

[Fuzzillogic]

Let wel op met de hacks van hierboven. Wellicht dat ze prima werken in IE6 en zelfs netjes conform de W3C aanbevelingen is (zo niet, FOEI!), maar IE7 komt binnenkort uit en dan is de vraag of die hacks nog steeds werken zoals "bedoeld".

Met conditional comments zit je wat dat betreft veel veiliger en kun je veel fijner afstemmen of voor welke versies van IE je dingen wilt aanpassen. Dat geniet imo toch zeer sterk de voorkeur.

[André]

Nexxennium schreef op vrijdag 06 mei 2005 @ 12:18:
Let wel op met de hacks van hierboven. Wellicht dat ze prima werken in IE6 en zelfs netjes conform de W3C aanbevelingen is (zo niet, FOEI!), maar IE7 komt binnenkort uit en dan is de vraag of die hacks nog steeds werken zoals "bedoeld".

Sowieso zal die hele overgangsfase een kutfase worden voor webdevelopers, we mogen hopen dat binnen een maand iedereen geupgrade heeft

[Mexxus]

Dat laatste is idd een goed punt. Misschien dan toch maar via de conditional comments doen...