Spørsmål? Ring tlf 94 30 21 81
Lag websider med vår publiseringsløsning Autopublish
CMS basert på brukervennlighet, søkemotorvennlighet og tilgjengelighet
Spørsmål? Ring tlf 94 30 21 81
CSS har eksistert i mange år, men den gjengse webutvikler/-designer har ikke nødvendigvis skjønt at dette er en revolusjon.
Revolusjonen består i at innhold og presentasjon kan skilles i mye større grad enn tidligere. HTML nå kan brukes kun til å formatere elementer med semantisk mening, for eksempel avsnitt, overskrifter og innholdsbokser. Tabeller som redskap i designprosessen er ut, mens floating divs er inn. Ingen flere "spacer.gif", font-tagger eller br-tagger - dette gjør man i stilarket. Kunsten å lage en god webside beror ikke lenger på tabell-kunnskaper, men på at disse kunnskapene er avlært, og erstattet med innsikt i W3C-standarder og ikke minst hvorfor disse eksisterer.
Det er kanskje ikke så lett å se det revolusjonerende i denne utviklingen. Hovedpoenget er at hvis innhold og struktur er adskilt, kan det samme innholdet presenteres på mange (MANGE) ulike måter.
Om man skriver helt enkle HTML-sider, der alle HTML-elementer av samme type skal ha likt utseende, blir HTML-koden ideell, kun bestående av <p>-tagger og <hx>-tagger et cetera.
Det finnes imidlertid et aber med denne differensieringen av innhold og presentasjon. Dette oppstår når man vil skille mellom elementer av samme type. I den vidunderlige nye verden har <div>-tagger overtatt mye av det tabeller gjorde tidligere. Man lager for eksempel èn boks for toppen av siden, èn boks for menyen på siden, èn for hovedinnholdet etc. Man vil gjerne at disse boksene skal presenteres på forskjellige måter. Og ett eller annet sted må det ligge et grensesnitt mellom HTML-koden og CSS-koden, slik at disse to delsystemene kan kobles til hverandre. Dette grensesnittet finnes i HTML-elementenes id- og class-attributter. Når det kun finnes èn forekomst av et element på en side, bruker man et id-attributt på det aktuelle HTML-elementet:
<div id="hovedmeny">
Når det finnes flere forekomster av en element-type, er løsningen å bruke klasser:
<div class="artikkel">
<div class="nyhet">
<div class="kommentar">
Legg merke til at vi ikke spesifiserer noen presentasjon i disse verdiene. I det første tilfellet finnes det kun èn forekomst av elementet, og vi bruker derfor id-attributtet for å identifisere dette elementet. I det andre tilfellet har vi innholdstyper som det ikke finnes HTML-elementer for, og vi spesifiserer derfor 3 klasser av bokser som det kan finnes ulike forekomster av.
Hovedtanken med stilark er å skille mellom innhold og presentasjon. Vi har sett at et totalt skille ikke alltid er praktisk mulig fordi det ofte gis krav til designet der forekomster av like elementer skal presenteres på ulik måte.
Målet må derfor være å minimere bruken nestede bokser i HTML-koden. Når du bruker en rekke nestede bokser kun for å gjøre det mulig å presentere innholdet på en bestemt måte, har du allerede definert litt presentasjon i innholdet. Da tenker man for mye design når man egentlig skal tenke innhold. HTML-koden blir spekket med presentasjons-informasjon heller enn at denne blir minimert.
Den nye skolen innenfor webdesign setter stor prestisje i å lage design uten tabeller. Enorme tabeller erstattes med såkalte floating divs, som er en helt ny måte å tenke på i forhold til webdesign. Dette er en veldig positiv utvikling ettersom mange av dagens websider er et mareritt av tabellkode. HTML-tabeller er ment å presentere strukturerte data, men designere plukket raskt opp tanken om å dele opp websider vha disse tabellene. Dette ser endelig ut til å snu, og vi finner stadig eksempler på gode websider med avansert utseende som ikke bruker tabeller i det hele tatt. Zengarden er et eksempel på hvordan dette kan gjøres: Dette er en samling av sider der ulike stilark gir totalt forskjellig presentasjon av det samme innholdet. Klikk litt rundt på nettstedet slik at du får et innblikk i mulighetene bruk av stilark gir.
Overgangen fra tabeller til bokser var i utgangspunktet en overgang fra en hack til en "riktig" måte å gjøre tingene på. Det har imidlertid vist seg at boksene ikke alltid oppfører seg slik man hadde tenkt, og man begynner istedet å lage hacks i CSS-koden heller enn i HTML-koden slik man gjorde før.
Problemet er blant annet at det er vanskelig å lage en side der man feks har tre kolonner som utvider seg vertikalt etter hvor lang den lengste kolonnen er. Med tabeller var dette et ikke-problem, ettersom tabellcellene oppførte seg på nettopp denne måten. Et annet problem ved bruk av floating divs, som i enkelte tilfeller også kan være en fordel, er at kolonnene vil falle under hverandre når vinduet blir smalt. Mange webdesignere får noia av denne oppførselen, og tenker "nei takke meg til tabeller, nå fikk jeg noia".
Løsingen kan være et minimalt tabell-design. Du lager èn stor tabell som representerer kun hovedelementene på websiden, feks et toppbanner, en sidekolonne og en innholdskolonne. Om siden din har denne strukturen har du nå laget et HTML-hack som består av en tre-cellers tabell. I dagens manglende støtte blant nettlesere for floating divs er det vanskelig å forestille seg at det finnes CSS-hacks som utgjør mindre kode.
