Cascading Stylesheet
Når vi betrakter CSS setter vi fokus på utseendet. CSS lar seg anvende på HTML- og XML-dokumenter.
Det er verdt å merke seg at en av hovedpersonene bak CSS, Håkon Wium Lie [1] , har sine røtter ved den daværende EDB-linja ved Høgskolen i Østfold.
CSS har utviklet seg kraftig de seneste årene (CSS1, CSS2 og CSS3) og det foregår en kontinuerlig utvikling. Det er litt forskjell på hvorden nettleserne forholder seg til denne utvklingen. W3C har en side der de oppdaterer status på sitt arbeid med CSS [2] .
Du finner ikke en komplett referanse til alle CSS-egenskaper i dette materialet. W3Schooles [3] er rimelig godt oppdatert på tilstanden og er et greitt sted å slå opp. Det er imidlertid en del mer sofistikerte problemer og kombinasjoner som ikke dekkes der. Det er selvsagt mange andre kilder på nettet.
Det er hele tiden en litt åpen situasjon vilke nettlesere som implementerer ulike mekanismer. Det er mange som har kommentarerer til dette. En webside som har ambisjoner om å holde styr på det er Can I use [4]
I en periode ble CSS holdt opp mot XSL-FO (XSL-Formattering), se XSLT. Noen betraktet disse som konkurrerende teknologier og noen så dem som supplerende. Jeg har liten erfaring med XSL-FO, men det er vel slik at dette er en mer ambisiøs teknologi som dessuten har en syntaks og en definisjon som faller bedre på plass i XML-familien. På den annen side er CSS vesentlig enklere, i alle fall har CSS en slakkere læringskurve, enkle ting er intuitivt enkelt. Det er også slik at utviklingen av CSS og HTML ser ut til å gå ganske synkront. Det er litt uklart hvor mye arbeid som legges i å videreutvikle XSL-FO og tilhørende verktøy.
Cascading
Hva i all verden betyr det ?
Dersom vi lager dokumenter med flere stilsett, eller blander stilangivelser i selve elementet med tilsvarende i stilsett, eller unnlater å sette stiler for ulike situasjoner, kan vi få overraskende resultater i nettleseren. Stilangivelser tillegges ulik vekt når nettleseren skal beslutte hvem som skal brukes. Grunneleggende er det følgende nivåer i prioritering av stilangivelser, der de nedersete har høyest prioritet.
Men det er flere ting å passe på.
Stilen for et element kan gjøre mer eller mindre spesiell. Den stilangivelsen som er mest spesiell prioriteres.
For eksempel er "div .name{}" mer spesifikk en "div{}"
Det er også slik at ID angivelser "#name{}" har prioritet foran CLASS angivelser ".name{}".
Nettleseren forholder seg til stilsett som er tilpasset det mediet som materialet skal vises på. Det stilsettet som er tilpasset mediet prioriteres, se modulen Media
Begrepet "kaskade" knyttes til hvordan disse ulike prioriteringen vektes når stilen for et konkret element skal bestemmes.
Kopling
Hvis vi ser mer detaljert på de 4 laveste og høyest prioriterte nivåene over, er det i prinsipp fire måter vi som forfattere kan kople inn stilangivelser:
-
Vi kan, men bør ikke, angi en attributt i det individuelle elementet vi vil påvirke:
<h2 color="red">Overskrift</h2>
-
Vi kan angi en style-attributt i det individuelle elementet vi vil påvirke:
<h2 style="color:red">Overskrift</h2>
-
Vi kan skrive en style-tag i headeren til dokumentet, som i dette tilfellet påvirker alle h2-tagger
... <head> ... <style> h2{color:red} </style> </head> ... -
Vi kan importere en fil med stildefinisjoner i headeren til dokumentet.
... <head> ... <style> @import url(minstil.css); </style> </head> ...
-
Vi kan lenke til en fil med stildefinisjoner i headeren til dokumentet.
( denne fila skal ikke innholde noen style-tag)
... <head> ... <link href="minstil.css" rel="STYLESHEET" /> </head> ...
Vi kan blande disse mekanismene friskt og fort komme ut i en litt forvirret situasjon som framfor alt er vond å vedlikeholde. For de fleste vanlige publikasjonsformål er det min erfaring at den siste versjonen med å linke til et stilsett er å foretrekke, så langt som det er praktisk mulig. Samme stilsett kan brukes for mange sider, det trenger ikke lastes mer enn en gang for flere sider i et vevsted og det er bare ett sted å gjør endringer dersom vi ønsker å endre utseende på en gruppe dokumenter.
Beregnet stil
Selv om vi forsøker etter beste evne er det ikke alltid lett å se hva som er den effektive stileangivelsen for et element. I utviklerverktøyet i moderne nettlesere kan ve be omå få se "Computed style", altså hva som er effektivt etter at nettleseren har lest alle våre spesifikasjoner. Vi kan også gjøre en slik beregning ved hjelp av Javascript.
var style = window.getComputedStyle(elem1)
For eksempel slik
Der koden ser slik:
function showMyBackgroundColor(elt){
var result=window.getComputedStyle(elt).
getPropertyValue('background-color'));
document.getElementById("colorresult").innerHTML=result;
}
I XML
Vi tenker alltid CSS som et verktøy for å sette stil på HTML-strukturer. Det er viktig å huske at CSS er en teknologi som generelt er laget for å sette stil også på XML-strukturer. Dersom nettleseren ikke gjenkjenner formatet og ikke finner noe stilsett oppfører de nettleserne jeg bruker som referanse,(IE, Opera, Chrome, safari og Firefox), likt og framstiller XML-strukturen med et default stilsett.
| XML | CSS |
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="stil3.css"?>
<resultater>
<deltager>
<navn>Ole Brumm</navn>
<tid>24.7</tid>
</deltager>
<deltager>
<navn>Nasse Nøff</navn>
<tid>24.8</tid>
</deltager>
<deltager>
<navn>Tigergutt</navn>
<tid>37.5</tid>
</deltager>
</resultater>
|
navn{ font-size:14px;
font-weight: bold;
color:red;
display:block}
tid{ font-size:14px;
font-weight: normal}
|
|
Se xml-fila med stilsett: dok3.xml
Se xml-fila uten stilsett: dok3uten.xml |
|
Fordelen med å ha HTML som format ved framstilling framfor XML, er selvsagt at vi får en rekke stilegenskaper gratis. Det er dessuten et problem å få framstilt attributter som ofte er en viktig del av datainnholdet i en XML-fil. XSL-transformasjoner er det naturlige svaret på å bringe generelle XML-filer over på HTML-format. Se se XSLT.
