kaxigt.com

Jag skriver om webben för webben

Hem » CSS-guider » Conditional comments istället för IE-hacks

Conditional comments istället för IE-hacks

Postad: 15 december 2007 | CSS-guider | 2 Comments
Lästid: 3 minuter

Den här artikeln handlar om Conditional comments och 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 scroll-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.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall och funktionsfil innan.

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.

Syntax Conditional Comments

Den grundläggande syntaxen för varje typ av kommentarer visas i följande tabell.

Första kommentaren som visas är den grundläggande HTML-kommentaren vilken är inkluderad enbart som jämförelse och för att illustrera de olika syntaxerna som används av varje typ av villkorlig kommentar.

COMMENT TYP               SYNTAX ELLER MÖJLIGT VÄRDE
----------------------------------------------------
standard HTML comment     <!--Comment content -->
downlevel-hidden          <!--[if expression]> HTML <![endif]-->
downlevel-revealed        <![if expression]> HTML <![endif]>

De som håller på och bygger hemsidor vet att slutresultatet inte alltid ser likadant ut beroende på vilken webbläsare det är som visar sajten.

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 kommer vår css att skilja sig litegrann eftersom den är anpassad just till IE.

Conditional comments och IE-hacks. Hur gör jag?

Det är inte så svårt. Du har en stilmall (ex style.css) med alla dina css-deklarationer. Bra så långt. Fast när du öppnar hemsidan i IE så upptäcker du att det tyvärr finns luft eller konstigheter i layouten på några ställen, och det vill du ju inte!

För att då undvika en massa hacks ska du därför kopiera stilmallen och döpa om den, exempelvis till ie-style.css.

Två stilmallar

Nu har vi alltså två stilmallar och arbetet börjar.

Eftersom det är just IE du vill få ordning på så börja med att öppna upp Internet Explorer och kika på din sida.

Det är bra om du samtidigt öppnar upp ie-style.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 att 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:

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

Fast nu ska vi även kalla på stilmallen som riktar sig mot IE med conditional comments som är riktad mot IE 10.

<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<!--[if lte IE 10]> <link rel="stylesheet" href="ie-style.css" type="text/css" media="screen" /> <![endif]-->
</head>

Som du ser har vi stoppat in länken ie-style.css i din conditional comment. Det innebär inga mer konstigheter än att koden kallar på ännu en stilmall (ie-style.css), om 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.

<!--[if IE]><![endif]-->

Internal CSS-kod? Vad innebär det?

Det är ren CSS-kod man väljer att tillsammans med style type <”text/css”> lägga in på en specifik sida som en avgränsande css. Detta görs i head.

<head>
<style type="text/css">
scrollbar-arrow-color: #000000;
scrollbar-track-color: #DDC8A6;
scrollbar-face-color: #DDC8A6;
scrollbar-highlight-color: #DDC8A6;
scrollbar-3dlight-color: #DDC8A6;
scrollbar-darkshadow-color: #DDC8A6;
scrollbar-shadow-color: #DDC8A6;
</style></head>

IE-specifika scroll-lister

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 med koden <!–[if IE]>

<html>
<head>
<title>Din Titel Här</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<!--[if IE]>
<style type="text/css">
scrollbar-arrow-color: #000000;
scrollbar-track-color: #DDC8A6;
scrollbar-face-color: #DDC8A6;
scrollbar-highlight-color: #DDC8A6;
scrollbar-3dlight-color: #DDC8A6;
scrollbar-darkshadow-color: #DDC8A6;
scrollbar-shadow-color: #DDC8A6;
<![endif]-->
</style></head></html>

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

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

Sammanfattning!

Du har olika alternativ att använda dig av. Antingen så kallar på din externa stilmall för IE genom att använda denna kod.

<!--[if lte IE 10]> <link rel="stylesheet" href="ie-style.css" type="text/css" media="screen" /> <![endif]-->

Eller så väljer du att använda internal css istället för en extern stilmall genom lägga in denna kod.

<!--[if IE]>
<style type="text/css">
scrollbar-arrow-color: #000000;
scrollbar-track-color: #DDC8A6;
scrollbar-face-color: #DDC8A6;
scrollbar-highlight-color: #DDC8A6;
scrollbar-3dlight-color: #DDC8A6;
scrollbar-darkshadow-color: #DDC8A6;
scrollbar-shadow-color: #DDC8A6;
</style>
<![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 att din conditional comments ska omfatta.

Fler definitioner för conditional comments

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

<!--[if gte IE 10]> Vill du tex att den ska rikta sig från IE 10 och uppåt anger du det märkningen gte <![endif]-->
<!--[if lt IE 9]>Vill du däremot att den ska rikta sig från IE 9 och nedåt anger du det märkningen lt <![endif]-->
<!--[if lte IE 7]>För likvärdig, eller lägre, IE 7 används märkningen lte <![endif]-->
<!--[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 – greater than
lte betyder mindre än eller lika stor – less than (or) equal

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