Formatmallar

Lär dig CSS

Bakgrund

–Webbläsarens mall

–Netscapes format

–CSS introduceras

–CSS påbjuds

–Verktyg

–Mer om CSS

–Litteratur

Detta är CSS

–Intern / extern

–Kaskaden

–Utskriftsmall

–Radindrag

–Terminologi

–Selektorer

–Släktselektorer

–Pseudoklasser

–Gruppering

–Kombinationer

–DIV o SPAN

–Färger

–Typografiska mått

–Typografin

–Block-egenskaper

–Utmärkning

–Box-modellen

–Box-egenskaper

–Positionering

Övning

–Exempelsida

–Skapa sidan

–Skapa formatmallen

–Skapa klasser

–Textlänkar

–Skapa satsyta, DIV

–Relativa mått

–Generellt i BODY

–SPAN i texten

–Överkurs 1: "Faktaruta"

–Överkurs 2: "Utsluten sats"

–Överkurs 3: "Utskriftsmall"

–Överkurs 4: "Navigationsruta"

–Överkurs 5: "Navigationslänkar"

–Överkurs 6: "Gruppering"



Artiklar

Baskerville

Caslon

Cloister Old Style

Formatmallar CSS

Frakturen

Garamond

Jenson MM

Minion MM

MultipleMaster

Myriad MM

Pekpinnar 1

Pekpinnar 2

Poynter

RailwayType & Agenda

Tidningstypsnitt

Webbfonter

Webbtypografi

1 2 3 4

Storleksproblem

Bildskärms-
typografi 1995




 

Formatmallar för webben

HTML saknar form

HTML utvecklades inom det stora forskningslaboratoriet CERN i Schweiz 1991, för att kommunicera rapporter mellan forskare, som satt på en massa olika datorplattformar. Det centrala med HTML är att det är plattformsoberoende, och lätt att använda för vem som helst. För att fungera i alla tänkbara datormiljöer är det begränsat till miljöernas minsta gemensamma nämnare, nämligen textformatet ASCII.

HTML är en mycket enkel tillämpning av SGML (Standard Generalized Markup Language) som användes inom koncernen. Det speciella med HTML (HyperText Markup Language) är hypertext-länkning för att kunna koppla samman dokument med relaterat innehåll.

HTML:s ursprung i denna miljö förklarar övervikten av listor och tabeller och avsaknaden av grafiska element.

Det var viktigt att skilja på innehåll och form. HTML saknar formelement, det kan endast hantera struktur och innehåll. Tanken var att mottagarens webbläsare skulle svara för den utformning som var möjlig i dess datormiljö. Samma dokument skulle alltså kunna se mycket olika ut på olika datorer, men allt innehåll skulle vara lika tillgängligt överallt.

Webbläsarnas formatmallar

Vi har väl alla funderat på varför webbdokument ser så grafiskt undermåliga ut och endast kan använda ett fåtal tråkiga färger, medan andra typer av dokument hanterar text i alla tänkbara storlekar, i dubbelspalt och figursatt, och överträffar trycket i färgrikedom. Det är ju i båda fallen samma dator som hanterar kod, så varför inte använda datorns kapacitet även på webben?

Det beror inte på html-koden, utan på hur den uttolkas grafiskt. Svaret ligger i begreppet formatmall, närmare bestämt Netscapes formatmall. HTML blev snabbt populärt i forskningsmiljöer över hela världen, och spred sig därifrån till andra användargrupper, som hade sin bakgrund i desktop-publishing. För dem var det grafiska uttrycket minst lika viktigt som innehållet och frustrationen var stor över att webbdokumenten inte kunde formges typografiskt.

Problemet var att det inte fanns webbläsare tillgängliga som passade dessa grupper. Det var med Mosaic och dess stöd för bilder 1993 och dess efterföljare Netscape 1994 som html fick sitt genombrott inom breda användargrupper. Dessa webbläsare innehöll nämligen en formatmall som hjälpligt formgav rubriker, text, tabeller, listor, m.m.

Netscapes format-taggar

Redan från början (1994) tillförde Netscape egna format-koder, som gjorde det möjligt att formge sidan med bakgrundsfärg, centrera text, <FONT>-taggen som möjliggjorde val av typsnitt, teckenstorlek, vikt, färg etc. Därmed började webbens segertåg över världen och Netscape tillförde successivt ytterligare formtaggar, som frames.

Detta var en slug affärsidé: om man använde Netscape kunde man få snyggare webb-sidor än med andra webbläsare. Netscape blev närmast liktydigt med webben vid mitten av 1990-talet. Men härmed bröt man också mot grundprincipen, att dokumentet skulle vara neutralt i förhållande till datormiljö och webbläsare. Form-taggarna skrevs ju in i dokumentet och kunde bara tolkas i Netscape.

De grafiska bristerna i standard-dokumenten, t.ex. utseendet på H1–H6, teckenstorlekarna i size 1–7, styckemellanrummen i brödtexten, utformningen av tabellhuvud, beror alltså på de grafiska bristerna i Netscapes formatmall och tillkortakommanden hos dem som utvecklade den.

Den begränsade uppsättningen webbsäkra färger har ingenting med html att göra, utan är endast den minsta gemensamma nämnaren för användbara färger på Mac, Unix och PC, som fungerar på bildskärmar med sämsta färgdjup, alltså de färger som fungerar överallt, och ur grafisk synpunkt inte fungerar nånstans.

Felet låg delvis hos WorldWideWeb-konsortiet, W3C, som är en grupp utvecklare och företag under ledning av html:s uppfinnare Tim Bemeres-Lee, och som svarar för kodifieringen av html. Denna grupp togs på sängen av webbens framgångar i världen och Netscapes nya formattaggar, och hade inte i tid utvecklat ett standardiserat språk för formatmallar, som tillverkare av webbläsare kunde använda. Netscape gick på tvärs mot W3C, och tvingade dem att införa sina format-taggar i html 3.2, 1996. Nu hade Microsoft upptäckt webben, och tog till sig den formatmall som Netscape utvecklat och lade till lite egna format. Html höll på att spåra ur.

Formatmallar introduceras

Formatmallar innebär att man ersätter webbläsarens inbyggda formatmall, i de delar man anger egna format, och att man kan uppnå sådant som inte täcks av webbläsarnas begränsade formatmallar. Det innebär också att den ursprungliga tanken återställs, att innehåll och form skiljs åt, samtidigt som formgivaren och mottagaren har fria händer att utforma typografin, och på andra sätt dra nytta av datorns kapacitet.

En viktig aspekt är att externa formatmallar gör det möjligt att redigera formgivningen i en enda mall, varefter det påverkar hela webbplatsen. En annan fördel är att rena html-dokument kan återanvändas i andra miljöer, med andra formatmallar eller med annan utformning av mallen, t.ex. för utskrift, mobilt Internet etc.

Först 1996 presenterade W3C ett språk för standardiserad formatmall, Cascading Style Sheets 1, som har mycket kraftfulla typografiska och grafiska möjligheter. Netscape motarbetade dock formatmallar och gav inget eller otillräckligt stöd för dem, medan Microsoft redan från början anslöt sig till CSS, samtidigt som de tävlade med varandra om kunder med hjälp av sina egna format-finesser.

Nästa version av CSS kom 1998, CSS2. Denna standard har stöd för positionering och utformning av rektangulära ytor, alltså dispositon av sidans element, samt stöd för olika mediatyper, sidbrytningar, ljudmallar och lite annat. Nästa version, CSS3, beräknas komma nästa år, och har stöd för spaltsättning, textflöde, vertikal text och många andra finesser, som suddar ut skillnaden mellan tryckt och elektronisk typografi, och verkligen tillvaratar datorns möjligheter. Allt hänger dock på att det finns webbläsare som stöder CSS.

Microsoft gav delvis stöd för CSS1 med Internet Explorer 4, och sedan version 5 finns ett mycket gott, om än inte fullständigt, stöd för texthantering, typografi och disposition av sidan. Netscape har i version 4 hållit fast vid sina egna format och halvhjärtat stött CSS. Med version 7 finns hyfsat stöd och besvärande buggar. I själva verket har Netscape saboterat införandet av formatmallar som webbstandard. Den lilla webbläsaren Opera har i stor utsträckning anslutit sig till CSS och ger mycket gott stöd i version 6. Den är gratis och kan laddas ned från www.opera.com.

Formatmallar påbjuds

Med html 4 återställde W3C ordningen 1997 – CSS påbjuds som det enda sättet att formge html-dokument, de gamla format-taggarna finns inte kvar, och ska inte användas. Webbläsarna stöder dem dock.

Sedan något år – alltså sedan Explorer 5 blivit den dominerande webbläsaren – används formatmallar på alla seriösa webbplatser. CSS tycks dock främst användas för att få fram maximalt liten men läsbar teckenstorlek. De egenskaper som huvudsakligen används är teckenstorlek i punkter eller pixlar, ty därmed kan man ta fram teckenstorlekar som inte täcks av Netscapes och Explorers size 1–7. Med pixelmåttet kan man få fram teckenstorlekar som inte täcks av punkt-måttet, samtidigt som typografin blir identisk på Mac och PC.

En stor brist är att man inte använder möjligheterna till radavstånd, som avsevärt förbättrar läsbarheten, och placering av rubriker på typografiskt korrekt sätt, som underlättar orienteringen på sidan. Tabeller används i allmänhet för satsytan och sidans struktur, fast de inte längre behövs.

Verktyg

En formatmall kan utformas i ett vanligt word-dokument, sparas i textformat och ges suffixet .css, men det kräver att man har koll på formuleringen av alla egenskaper och värden, och tar onödigt mycket tid.

Formatmallar kan mycket väl utformas i en webbeditor, som Dreamweaver eller Frontpage. De har dock vissa begränsningar, och om man vill göra mer avancerade format blir de ett hinder. För formgivaren av en formatmall räcker dessa funktioner dock mycket väl.

För kvalificerade formatmallar, som är effektivt kodade och som möjliggör smidigare redigering av formatmallen, krävs en särskild style-editor. Efter en tid tycker man nog att en sådan är enklare att jobba med än webb-editorns style-funktioner. För PC finns ett stort utbud av style-editorer. En som jag kan rekommendera är TopStyle, som kan laddas ned från www.bradsoft.com.

Nyttiga webbplatser om CSS

www.webreview.com/style/ – lista över webbläsar-stöd

www.wdvl.com/Authoring/Style/Sheets/ – bra artiklar och länkar

www.w3.org/Style – WorldWideWeb-konsortiets hemsida med all information om CSS, boktips med mera

Bästa litteraturen om CSS

Håkon Wium Lie and Bert Bos: Cascading Style Sheets, Designing for the Web, 1999

© Text och illustrationer Stefan Lundhem

| FyrisFonts | Typsnitt | Beställa | Artiklar | Ordbok | Länkar | Innehåll | Om |

< - - - Sidan uppdaterad 021203 - - - >