CSS !important

Lad mig starte med at sige: Velkommen tilbage Internet Explorer 6.0.

Laaaaangt om længe fik jeg mig taget sammen til at optimerer sitet, så det nu også kan ses i IE 6.0. Det er ikke fordi jeg nu regner med selv at komme til at bruge den browser mere af den grund, ha! - men når man går og kalder sig webprogrammør, synes det at virke som lidt af en torn i øjet, ikke selv at have et site der kan ses i langt de fleste browsere.

Fixet skulle findes i CSS´s "!important"-tag, hvilket jeg højst sansynligt kommer til at bruge mere fremover.

!important

!important tagget i CSS, bliver normalt brugt til at beskrive præcedens. I CSS er det den sidst specificerede regel som tager præcedens (læs: afgørende regl), men tilskrives en regle !important-tagget, overtager denne præceden, også ligemeget om denne regle skrives tidligere i din CSS.

Catchen er... Internet Explorer 6.0 ignorerer !important tagget!

Dvs. at man kan bruge tagget til at lave CSS regler til alle andre browsere end IE 6.0, for herefter at skrive en "normal" regle, som vil blive brugt af IE 6.0... Lød det meget forvirende? Her er et par simpelt eksempler.

!important eksempel

Margins og paddings opfører sig ikke altid ens i f.eks. mozilla browsere og IE browsere. I eksemplet herunder, ønsker vi at have mere afstand fra et div-element til toppen i mozilla browseren, end vi gør i IE browseren. Dette kan gøres ved !important-tagget på følgende måde:

#myDiv {
margin-top: 50px !important; /*bliver ignoreret af IE*/
margin-top: 30px;
}

!important i andre sammenhænge

Faktisk startede jeg ud med at undersøge dette tag da jeg har anvendt PNG billeder, hvilket heller ikke fungerer så godt med IE 6.0. PNG billeder har den fantastiske evne, at de kan fade på en gennemsigtig baggrund - Normalt har du måske brugt GIF billeder til gennemsigtighed, og i så fald har du sikkert stødt på, at resultatet ofte ender ud med at være meget takket i kanterne, og langt fra ligner det design, du har siddet og brugt tid på i Photoshop - så ender vi altid med at smide en baggrundsfarve på billedet alligevel ;(. Dette billede viser hvordan IE vil fremvise et PNG billede med gennemsigtighed.

IE understøtter ikke PNG gennemsigtighed.

Vil du holde fat i at bruge PNG billederne hvor du kan, men samtidig vise et bedre resultat end ovenstående til IE 6.0, kan du som beskrevet ovenfor bruge !important.

#myDiv {
    width: 200px;
    height: 200px;
    background: url("FeedIcon-64.png") no-repeat !important;
    background: url("FeedIcon-64.gif") no-repeat;
}

I ovenstående CSS vil IE 6.0 igen ignorerer !important-tagget, og herefter benytte sig af GIF-billedet som baggrund. Alle andre browsere, som godt kan forså !important, vil benytte sig af PNG-billedet, hvorefter alle browsere gerne skulle endnu ud med et mere ens resultat ala nedenstående billede - you get the point .