Dynamiske stylesheets

Stylesheets separerer indhold og formatering. De kan benyttes til at bygge forskellige versioner af det samme websted, hvilket kan spare arbejde i forbindelse med dynamiske websteder.

26. februar 2001 kl. 16.01

Tania Andersen

Cascading Style Sheets

De fleste kender nok stylesheets, selvom det stadig er de færreste, der benytter dem i deres daglige web-arbejde. Men lad os lige præsentere teknologien, så alle kan være med. Cascading Style Sheets (CSS) er en specifikation fra World Wide Web-konsortiet, der sætter HTML-tags sammen med en uafhængig formatering. Det kan være alle de gængse formateringtags, vi kender: Skrifttype og størrelse, farver, men også mere intrikate som bokse og rammer.

Ved at anvende dynamiske stylesheets, kan man benytte den samme shop-applikation med flere layouts. Man kan således bygge en meta-shop-løsning, og derefter lave et skræddersyet design til hver enkelt butik.

Lyder det kompliceret? Prøv at se eksemplet her.

Kort om stylesheets
Der er to måder at anvende CSS på: inde i HTML-dokumentet, eller i et eksternt css-dokument.

Selve CSS-koden kan se sådan ud:

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold }

Her specificeres, at alle h1-tags skal formateres med skrifttypen Arial, eller alternativt Helvetica eller en anden sans-serif skrift. Skriftstørelsen sættes til 12 punkt, og skriftsnittet til fed skrift.

Samme fremgangsmåde kan benyttes til stort set alle HTML-tags. I stedet for at definere hvorledes et tag skal vises, kan man også benytte CCS-selectors. Her defineres en klasse, der så kan bruges til forskellige tags. CSS-definitionen kunne se sådan ud:

.overskrift { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold }

I et HTML-tag tilføjes så en class-attribut:

<P CLASS="overskrift">Her er en overskrift</P>

Stylesheets kan enten placeres i selve HTML-dokumentet, eller i et selvstændigt dokument med endelsen .css.

Man kan læse mere om stylesheets hos Builder.com, der blandt andet har det lille værktøj Style-o-matic, hvor man nemt kan bygge stylesheets. Professionelle WYSIWYG-værktøjer som Dreamweaver og GoLive indeholder også funktioner for Stylesheets.

Dynamisk CSS

Stylesheets og dynamiske websider;
I forbindelse med dynamisk genererede websteder kan styslesheets gøre arbejdet en hel del nemmere. Hvis man for eksempel har bygget en shopløsning, og funktionaliteten er fornuftig, er der ingen grund til at kode det hele om. I stedet kan shopløsningen dække flere butikker på en gang.

Problemet er selvfølgelig, at alle butikkerne kommer til at se ens ud - og det accepterer kunden selvfølgelig ikke. Branding og personlighed er jo vigtigt. En løsning kan være at gøre alle formateringstags variable. Man kunne så gemme dem i en database, og hente de relevante tags frem, når siden skal vises. Problemet er, at koden bliver forfærdelig grim at arbejde med. Hvis vi forestiller os at for eksempel BODY-tag'ets attributter lå i én variabel, og overskriftens formatering i en anden variabel, kunne det ende med at se sådan ud:

<BODY <%=bodytag%>>
<%=overskrifttag%>Velkommen i super-duper shoppen
</<%=slut_overskrifttag>>

Hvis man forestiller sig sådanne formateringsvariabler strøget med løs hånd over resten af koden, kan man godt se, at koden bliver ulæselig og svær at vedligeholde. Det er altså ikke nogen god løsning.

Hvis man derimod kun skal indsætte et link til et eksternt stylesheet, er sagen en ganske anden. Her skal der blot tilføjes statiske CSS-selectors i forbindelse med tags og indsættes et stylesheet-link i HEAD-sektionen af HTML'en for hver enkelt shop:

Hvis vi i vores meta-shopløsning har butikkerne Super-duper shoppen og Vi-har-det-hele shoppen, kunne designet for de to shops ligge i to css-dokumenter, super_duper.css og vi_har_det_hele.css.

Ud over at kunne bruge den samme ramme for flere implementeringer, giver det også den store fordel, at der kan ændres på hele webstedets fremtoning, blot ved at redigere en enkelt fil.

Man kan også tage skridtet fuldt ud og placere sit stylesheet i databasen. Så kunne linket fra før se sådan ud:

Når script-filen fortolkes, bliver det så til

hvorefter browseren kalder

stylesheet.asp?SHOPNAVN=super_duper_shoppen

for at få style sheet-dokumentet.

I script-filen stylesheet.asp hentes de relevante css-definitioner fra databasen. Man skal huske at sætte Mime-typen til "text/css". I ASP gøres det ved at indsætte

<% Response.ContentType = "text/css" %>

før man begynder at skrive data til klienten.

Bruger-definerede designs
Et andet område, hvor dynamiske stylesheets kan anvendes, er til simpelthen at lade slutbrugerne selv definere deres sidelayout. Den mulighed findes for eksempel i portal-scriptet PHP-Nuke, som vi tidligere har skrevet om her på PC World Online. I PHP-Nuke har brugeren dog kun mulighed for at skifte imellem forskellige skabeloner, men ved hjælp af style sheets kunne brugeren få lov at pille ved udseendet i alle aspekter.