Styling af hjemmesiden med CSS

Indlæs andet indhold på denne side:

Selektiv css

Siden er opdateret 18. 8. 2009

De moderne browsere fortsår det meste css helt uden problemer. Dog må det konstateres, at IE 6 stadig halter lidt. Hvad angår IE 5.0 og 5.5 er problemet endnu større. Men også med andre browsere kan man støde på et problem.

Disse problemer kan man langt hen ad vejen komme uden om ved at lave forskellige små 'hacks', der skjuler noget css for udvalgte browsere. Det kan være nyttigt på den måde, at man laver speciel css til en browser, der har problemer - og så skjuler denne specialdefinition for andre browsere.

Det er især IE, der skal have 'særbehandling'. De fleste andre nyere browsere forstår udmærket css2, men selv for IE 6 kniber det lidt selv med css1-standarden - selv om css2-standarden er flere år gammel.

Skal du for eksempel af hensyn til IE have defineret en anderledes bredde på et element, kan du benytte en række forskellige metoder:


Kald til ekstern IE-css (i contitional comments):

Kald til css for IE ældre end version 6
<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="ie5x.css">
<![endif]-->

Du kan i første kodelinje specifisere nøjagtigt hvilke IE-versioner din css skal læses af:

<!--[if lt IE 6]>
Alle IE-versioner ældre end 6.
<!--[if lte IE 5.5000]>
Alle IE-versioner lig med eller ældre end version 5.5.
<!--[if IE 5.0000]>
Specielt for IE 5
<!--[if lt IE 5.5000]>
Alle IE-versioner ældre end 5.5
<!--[if !IE 6]>
Alle andre versioner af IE end 6

Jeg har levet en testside, der nederst har en testtekst, som viser din aktuelle version af IE. Ser du siden i en anden browser end IE, vises ingen testtekst.


På samme måde som du skjuler et kald til en ekstern IE-css for andre browsere, kan du også (i contitional comments) skjule et indlejret IE-stylesheet for alle andre browsere:

Kald til css for IE ældre end version 6
<!--[if lt IE 6]>
<style type="text/css">
css-definitioner indsættes her
</style>
<![endif]-->

I et eksisterende css (eksternt eller indlejret) - men ikke i inline.css - kan du sætte specielle definitioner, som kun læses af IE. Her gives ikke mulighed for definition af versionsnumre,så det gælder for alle versioner. Du sætter en * html foran det element, som kun ældre IE'er skal læse:

Elementet foo sættes til 75% i alle browsere og derefter til 70% i IE ældre end version 7

Indlejret eller ekstern css:

foo {
  width: 75%
  }
* html foo {
  width: 70%;
  }

Man kan i et eksisterende css (eksternt eller indlejret) eller en inline-css sætte en definition, som kun læses af IE før version 7. Heller ikke her har du nogen mulighed for at skelne mellem versionsnumre, det rammer alle versioner af IE før 7: Du sætter en - eller _ foran den definition, som kun IE skal læse:

Elementet foo sættes til 75% i alle browsere og derefter til 70% i IE ældre end version 7

Indlejret eller ekstern css:

foo {
  width: 75%;
  -width: 70%
  }

Inline-css:
<foo style="width:75%;-width:70%;" />

Bemærk, at denne metode ikke er valid kode! Brug i stedet metoden i forrige eksempel.

Man kan også skjule noget css for Mac-udgaven af IE:

Koden herunder læses ikke af IE5 Mac

/* \*/
#foo {
  color: #008000;
  }
/* */

Endelig kan man skjule noget css for alle versioner af IE før 7:

Elementet p.foo sættes først til at være rød og derefter ændres farven til grøn i alle andre browsere end IE ældre end version 7:

p.foo {
  color: #f00;
  background: inherit;
  }
html>body p.foo {
   color: #0c0;
   background: inherit;
  }

Martin Hintzmann har lavet en opslagsliste, hvor du kan se meget mere om, hvordan du med små midler kan skjule noget css for udvalgte browsere:

Hintzmanns css-hacks

Valid XHTML og CSS / Copyright © Hjemmesideskolen februar 2003
Hjemmesideskolen
Du er her: Forsiden - css - Styling af hjemmesiden med CSS
Brugere lige nu: 1
Home Mail