Conditional comments istället för IE-hacks

Ett bra sätt att komma ifrån alla IE hack är att använda conditional comments. Vill du dessutom ha IE-specifika attribut på din sida som olika filter och färgad skroll-list ska du absolut använda detta. Med andra ord görs det en möjlighet att skapa en sida som både IE och t ex Firefox kan ha glädje av eftersom man anpassar sin sida så att även IE ska kunna tolka koderna korrekt. Conditional comments kallar på en specifik fil som i detta fall är ägnad åt IE genom att den döljer de css-värden som är ogiltiga för andra webbläsare.

Vi som håller på att knacka kod vet att slutresultatet inte alltid ser likadant ut, och visst är det synd om man måste ge sig för mindre när det finns ett bra sätt att kringgå detta. Naturligtvis använder vi samma stilmall – det är bara det att i den ena skiljer sig vår css litegrann eftersom den är anpassad just till IE. Hur ska jag då göra och var infogar jag denna kod?

Vi tar det från början. Du har en stilmall – style.css – som presenterar strukturen, tyvärr blir det lite luft eller glapp i layouten på några pixlar om man öppnar sidan i IE. Det vill vi ju inte! För att undvika en massa hacks kopierar du därför din stilmall och döper den exempelvis till iestyle.css. Nu har vi alltså två stilmallar och arbetet börjar. Du öppnar upp Explorer och kikar på din sida. Öppna samtidigt upp iestyle.css i din texteditor. I denna stilmall ändrar du så att sidan i det närmaste ser likadan ut som i ex Firefox. När du är klar med trixandet är det dags atti lägga in vår kodsnutt.

All conditional comments ska ligga i head som sista kod innan /head. Din externa länk till stilmallen ser som vanligt ut så här:

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

Fast nu ska vi även kalla på stilmallen som riktar sig mot IE. Koden för conditional comments riktad mot IE 6 ser då ut så här:

  1. <!--[if lte IE 6]> <link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" /> < ![endif]-->

Som du ser har vi stoppat in länken iestyle.css i denna. Det innebär inga mer konstigheter än att koden kallar på ännu en stilmall förutsatt att det är webbläsaren Internet Explorer som som besökaren använder sig av.

Är det för andra versioner av IE du är intresserad av så ändrar du bara till det. Men om koden riktar sig mot alla versioner av IE ser den lite annorlunda ut. Kika här:

  1. <!--[if IE]> <type ="text/css"> OBSERVERA ATT DET ÄR REN CSS KOD SOM SKA VARA HÄR < ![endif]--></type>

Ren CSS-kod? Vad innebär det?

Först – är du inte van att handskas med stilmallar måst du börja med att läsa om det här. Ni andra som vet vad CSS är förstår då också att ren CSS-kod är detsamma som när man väljer att lägga in en avgränsande css på en specifik sida. Detta görs naturligtvis i head.

Låt oss nu se hur en sådan kod kan se ut för färgade scroll-lister. OBS! Definitionen här är riktad mot alla versioner av IE.

  1. <html>
  2. <head>
  3. <title>Din Titel Här</title>
  4. <link rel="stylesheet" href="style.css" type="text/css"><!--[if IE]></link>
  5. <style type="text/css"></style>
  6. scrollbar-arrow-color: #000000;
  7. scrollbar-track-color: #DDC8A6;
  8. scrollbar-face-color: #DDC8A6;
  9. scrollbar-highlight-color: #DDC8A6;
  10. scrollbar-3dlight-color: #DDC8A6;
  11. scrollbar-darkshadow-color: #DDC8A6;
  12. scrollbar-shadow-color: #DDC8A6;
  13. < ![endif]-->

Är det bara riktat mot IE 6 ser det ut så här (se definitionen):

  1. <html>
  2. <head>
  3. <title>Din Titel Här</title>
  4. <link rel="stylesheet" href="style.css" type="text/css"><!--[if lte IE 6]></link>
  5. <style type="text/css"></style>
  6. scrollbar-arrow-color: #000000;
  7. scrollbar-track-color: #DDC8A6;
  8. scrollbar-face-color: #DDC8A6;
  9. scrollbar-highlight-color: #DDC8A6;
  10. scrollbar-3dlight-color: #DDC8A6;
  11. scrollbar-darkshadow-color: #DDC8A6;
  12. scrollbar-shadow-color: #DDC8A6;
  13. < ![endif]-->

Sammanfattning!

Du har olika alternativ att använda dig av:

  1. 1) Du kallar på din externa stilmall för IE genom att använda denna kod: <!--[if lte IE 6]> <link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" /> < ![endif]-->
  1. 2) Du väljer att använda ren css istället för en extern stilmall genom lägga in denna kod:
  2. <link rel="stylesheet" href="style.css" type="text/css"><!--[if lte IE 6]></link>
  3. <style type="text/css"></style>
  4. scrollbar-arrow-color: #000000;
  5. scrollbar-track-color: #DDC8A6;
  6. scrollbar-face-color: #DDC8A6;
  7. scrollbar-highlight-color: #DDC8A6;
  8. scrollbar-3dlight-color: #DDC8A6;
  9. scrollbar-darkshadow-color: #DDC8A6;
  10. scrollbar-shadow-color: #DDC8A6;
  11. < ![endif]-->

Även om alternativ 2 vänder sig till alla versioner (se definitionen) av IE kan du naturligtvis även här själv välja vilka versioner du vill ska omfattas av din conditional comments.

Fler definitioner för conditinal comments

Du kan rikta koden antingen uppåt eller nedåt för versionerna.

  1. <!--[if gte IE 5]> Vill du tex att den ska rikta sig från IE 5 och uppåt anger du det märkningen gte < ![endif]-->
  1. <!--[if lt IE 6]>Vill du däremot att den ska rikta sig från IE 6 och nedåt anger du det märkningen lt < ![endif]-->
  1. <!--[if lte IE 5.5]>För likvärdig, eller lägre, IE 5.5 används märkningen lte < ![endif]-->
  1. <!--[if gt IE 6]>Sist har vi denna som riktar sig till IE som är större än IE 6. Märkningen för detta är gt < ![endif]-->

gt betyder större än
lte betyder mindre än eller lika stor

Läs gärna mer om detta på:

Liknande poster:

2 Comments Add yours

  1. Svenne says:

    Lite förvirrande. Synd att ingen kan skriva artiklar som riktar sig mot flera olika nivåer. Hmm det gick inte få in allt i denna kommentar, så jag vill bara säga att denna artikel förvirrade mer än hjälpte mig.

    1. Lena says:

      Hej Sven!
      Det är olika nivåer på artiklarna. Jag kan bara beklaga att den inte kunde hjälpa dig.

      Tack för din kommentar!

Leave a Reply

Your email address will not be published. Required fields are marked *