cjohansen.no

Betingede kommentarer

De aller fleste som har prøvd å få CSS og Javascript til å fungere på tvers av nettelsere har støtt på noen av de frustrerende manglende i IE . Betingede kommentarer er en ryddig måte å jobbe rundt problemene når de ikke lar seg løse på en vennlig måte.

Betingede hvafforno?

Joda, det er altså kommentarer det er snakk om. Kommentarer som du kan lage if-tester med, sjekke IE-versjon og litt av hvert. Ikke nok med det, det finnes tilsvarende kode du kan putte i kommentarene i Javascriptene dine også, skulle du ha behov for det.

HTML-kommentarer

<!--[if IE]>
    IE-spesifik kode her
<![endif]-->

<!--[if lt IE 7]>
    Kode spesifik for IE 6 og eldre her
<![endif]-->

<!--[if lt IE]>
    <link href="ie.css" type="text/css" rel="stylesheet" media="screen,projection" />
<![endif]-->

Du kan se alle testene som kan utføres med disse kommentarene hos Microsoft.

Fordelen

Fordelen ved disse kommentarene over andre typiske hacks er at de hviler på helt standard HTML-kommentarer. Det betyr at ingen andre nettlesere noengang vil komme i nærheten av dem. Det betyr også at validatorene ikke får snurten på dette, siden dokumentet fortsatt er gyldig. Siden dette er en feature fra Microsofts side er det også all grunn til å tro at disse vil fortsette å være støttet i fremtiden.

Typisk bruksområde

Bruksområder for dette kan være å inkludere et lite IE-spesifikt stilsett alle de andre som overskriver noen regler for å rette opp for ting som går galt i IE. Man trenger ikke å la seg begrense til CSS selvføgelig, script og vilkårlig HTML kan også inkluderes, selv om jeg selv ihvertfall prøver å praktisere dette litt forsiktig.

Jo større del av koden din som løses på én, og kun én måte, jo lettere å vedlikeholde.

Betinget Javascript-kompilering

Tilsvarende kommentarer finnes også i Javascript, selvom de der i mine er noe mindre elegante. Løsningen for Javascript (egentlig JScript, Microsofts versjon) går under navnet conditional compilation. Følgende er Microsofts enkle eksempel:

/*@cc_on @*/
/*@if (@_jscript_version >= 4)
   alert("JScript version 4 or better");
   @else @*/
   alert("You need a more recent script engine.");
/*@end @*/

Jeg vil i de fleste tilfeller heller anbefale å inkludere et eget script til IE gjennom HTML-kommentarene når dette er nødvendig hvis det er mulig. Det er forsåvidt ingen prinsipiell forskjell, men personlig foretrekker jeg å holde antall hacks til et minimum.

Javascript-kommentarene kan være nyttige for å løse små problemer i Javascript-koden som ikke kan jobbes rundt, men ofte kommer man vel så langt med object detection.

Tenk deg om to ganger

Det er greit å vite at disse mulighetene eksisterer, slik at vi kan komme oss videre i arbeidsdagen, og slippe å sitte dagen lang å debugge absurde IE-feil. Men, ikke undervurdér a/b-testing som en måte å løse nettleser-kompatibilitetsproblemer. Særlig når du skriver CSS er det mye å hente på å prøve å få til samme ting på to måter. Hvis negativ marg gir sinnsvake resultater i én nettleser, prøv med relativ posisjonering mot venstre isteden.

Lær deg også de to triksene som oftest løser problemer i IE: position: relative; og height: 1%; (eller annen eksplisitt høyde). Det er ikke alltid det passer å inkludere disse i hovedstilsettet, men hvis du kan legge dem der uten at de ødelegger for øvrige nettlesere har du en mindre ting å tenke på når du skal vedlikeholde løsningen.

Tweet this

Publisert 21. desember 2007 under julekalender 2007 og teknikker.