Style Sheets er den rigtge måde at formatere websider på i år 2001. De fleste browsere opfylder efterhånden en god del af standarderne CSS1 og CSS2. En sammenligning af et simpelt CSS-ark på tværs af browsere og platforme ser lovende ud.
CSS
CSS, Cascading Style Sheets, er en måde at formatere websiderne uden at bruge HTML-formateringstags. Der er en lang række fordele i CSS, som vi har skrevet om i en tidligere artikel.
The Web Standards Project er en lobbygruppe bestående af webdesignere, som er trætte af at udvikle forskellige versioner af websiderne til forskellige browsere. De opfordrer ligefrem til bare at gå i gang med at benytte de nye standarder, så må browserproducenterne og publikum bare følge med.
Her afprøver vi et simpelt CSS-ark i en række af dagens browsere, og konklusionen er, at browserene fremviser testsiden på en bemærkelsesværdig ensartet facon. Den eneste der rigtigt skiller sig ud, er faktisk Internet Explorer 4 på Macintosh.
Man kan dog stadig ikke regne med typografisk kontrol, som man kender det fra DTP-verdenen, så det er stadig en god idé at holde sig fra typografiske tilretninger, såsom at indsætte linieombrydning, fordi det ser bedst ud i den browser, man arbejder med. Den slags medfører altid flere problemer andre steder, end det løser i den foretrukne browser.
Til sidst i artiklen giver vi en stribe snusfornuftige råd om brugen af CSS.
Sammenligningen
Sammenligningen
Det CSS-ark, der blev benyttet er ganske simpelt, og stammer fra artiklen Dynamiske stylesheets.
Internet Explorer 5 på Windows. Den mest udbredte platform, ifølge de fleste statistikker.
Opera 5 under Windows. Der er lidt meget luft i toppen og bunden af den gule <DIV>-kasse til højre, men ellers ser det fint ud.
Internet Explorer 4 på Macintosh. Som den eneste skiller den sig synligt ud fra de andre browsere. Skrifttypen er væsentligt mindre end i de andre eksempler.
Internet Explorer 5 på Macintosh. Internet Explorer installerer også den populære Frutiger- og News Gothic-lignende Windows-skrifttype Verdana, så umiddelbart ligner det de andre. Den venstre kant i den gule boks er dog på mystisk vis blevet blå, så hel fin i kanten er den heller ikke.
Mozilla 0.9 under Windows. Mozilla er den mest standard-følgende browser på markedet.
Netscape 6 under Linux. Skrifttyperne ser ikke særlig pæne ud, men det er ikke CSS'en, der har ansvaret, men derimod grimme skriftyper i Netscape på denne platform.
En browser, der slet ikke understøtter CSS, her Netscape 3, kan stadig godt give en læsbar oplevelse for brugeren.
Gode råd
Gode råd til brug af CSS
Undgå alle formatteringstags, også i <BODY> og <TABLE>.
Brug relative skriftstørrelser (em, pt) istedet for pixel-angivelser (px, inch). Skrifttyperne fremvises almindeligvis pænere på denne facon.
Sæt alle egenskabers værdier. Webdesignerne kender problemet fra for eksempel HTML-tabeller: Hvis man ikke angiver specifikt, hvor store marginerne skal være, kommer det let til at se forskelligt ud fra browser til browser. Ved at sætte alle marginer, kommer man tættest på et ensartet udseende.
Hvis man benytter en WYSIWYG-editor, som ikke kan fremvise CSS korrekt, eller kun kan fremvise CSS delvist, så kan man kode en dummy med gammeldags HTML-tags, og derefter skrive den om i CSS. Det er faktisk ikke så omstændigt, som det måske kan lyde.
Hvis siderne skal kunne printes, så test at det faktisk kan lade sig gøre. CSS er rettet imod visning på skærm, og det kan ofte give problemer ved udskrift, eksempelvis hvis linieafstand er sat i CSS. CSS-specifikationen indeholder også en del for printdokumenter, men det er nok ikke mange browsere, der har implementeret denne del af CSS.
Brug eksterne CSS-ark til de definitioner der går igennem hele websitet. Det smarte er selvfølgelig, at bagefter kan man ændre hele websitet blot ved at ændre et enkelt ark. CSS, der er specifik for hver enkelt side, kan så lægges i selve sidens kode.
Brug DIV-tags istedet for tabeller, når man har behov for billeder og tekstbokse med tekstomløb omkring.
Brug CLASS-attributter i stedet for STYLE-attributter, og gør klassernes navne sigende. I de første versioner af HTML-standarden beskrev tags ting som fremhævelse (<EM>) og citat (<CITE>), og ideen var faktisk god. Med CSS har man mulighed for at give fornuftige og sigende navne til klasserne som for eksempel .billedtekst, .kommentar, .hovedoverskift og så videre. Hvis man ændrer hele websitets arkitektur på et senere tidspunkt, kan denne information også gøre det nemmere at identificere eventuelle problemer som følge af layout.
Til sidst to råd der strengt taget ikke har noget med CSS at gøre - men alligevel:
Brug XHTML. Sammen med ovenstående råd om sigende CLASS-atributter gør det livet meget nemmere, når den næste opdatering kommer. Samtidig får designere og udviklere tillært sig en langt bedre kodepraksis. Siderne bliver renderet hurtigere, på grund af kravet om gyldig kode, som de fleste HTML-kodere desværre ofte er ligeglade med. Til sidst er der også mulighed for ekstern processering, da mange applikationer kan læse XHTML - det er jo et XML-sprog.
Kend RDF, Ressource Description Framework, og tving indholdsleverandørerne til også at levere metadata. For at programmer og robotter kan identificere indholdet af en webside må det beskrives, og det er ideen bag RDF. Dublin Core er et sted at starte.
