CSS-egenskaben opacity

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10

CSS3 standarden omfatter en egenskab, kaldet opacity. Ordet betyder gennemskinnelighed, og egenskaben er sådan set let at have med at gøre: opacity: 1.0 betyder at et element med denne egenskab er aldeles uigennemskinnelig, mens opacity: 0 betyder at elementet er fuldstændig gennemskinneligt og altså ikke kan ses.

I skrivende stund (sommeren 2005) er CSS3 anbefalingen ikke frigjort endnu, men blandt andre er denne egenskab interessant af to grunde:

  1. Egenskaben tolkes korrekt af Firefox, som er tidens mest populære browser (bortset fra Internet Explorer, som kun er populær i den forstand, at vældig mange bruger den, fordi de ikke ved der findes andre og bedre browsere...)
  2. Og så komplementerer netop denne egenskab lige præcis den Microsoft opfundne filter-egenskab.

Til gengæld kan Internet Explorer fortolke en egenskab der hedder filter, og som er proprietary, det vil sige det er kun microsoft browsere, der kan tolke denne egenskab.

Herover ser du sandsynligvis to næsten ens figurer, en række bokse med en faldende opacitet fra 100 procent foroven til 20 procent forneden.

Rækken af kasser til venstre har næsten ens formdeklarationer:
#box_3 {left:75px; top:50px;background:#257;opacity:0.6;}
mens rækken af kasser til højre har følgende formdeklarationer:
#box_8 {left:300px; top:50px;background:#257;filter:alpha(opacity=60);}

Tricket går nu ud på at lave det sådan, at den samme række kasser viser sig ens, uanset om du bruger den ene eller den anden browser. Til den ende bruger jeg Microsofts betingede kommentar, sålunde:

<!--[if IE]>
<style type="text/css" media="screen">
#box_11 {left:250px; top:0px;background:#257;
  filter:alpha(opacity=100);}
#box_12 {left:275px; top:25px;background:#257;
  filter:alpha(opacity=80);}
#box_13 {left:300px; top:50px;background:#257;
  filter:alpha(opacity=60);}
#box_14 {left:325px; top:75px;background:#257;
  filter:alpha(opacity=40);}
#box_15 {left:350px; top:100px;background:#257;
  filter:alpha(opacity=20);}
</style>
<![endif]-->
Box 11
Box 12
Box 13
Box 14
Box 15

Microsofts betingede kommentarer har jeg skrevet en artikel om: Betingede kommentarer. I korthed er ideen at bruge Microsofts egen metode til at præsentere IE for et stylesheet, som ingen anden browser ser.

Denne side er senest opdateret: 11. November, 2006