Style Sheet (css) på lite mer komplicerade sajter

Introduktion

Jag håller på en del med att koda nätsidor. Jag är speciellt intresserad av att få koden snygg och att sidorna ska kunna läsas av alla, även av de som har någon form av funktionhinder.

Denna artikel har egentligen inget med skola att göra. Jag skriver den för att jag inte har hittat någon motsvarande sida på svenska pch att andra förmodligen har ställt sig samma fråga. Nu har jag surfat runt och funnit mina svar. Så är du inte intresserad av css-hygien och förstår du inte ens vad jag talar om så är det bara att klicka vidare till en annan artikel.

Premisserna är dessa:

Jag formger sajten aaa.bbb.se. Sajten lånar funktioner från www.bbb.se. För att dessa funktioner ska se bra ut så måste jag låna in stylesheeten för www.bbb.se. Stilmallarna (css) krockar då eftersom vissa klasser och id:n har samma namn. Stilmallarna måste alltså konstrueras om. De stilar som är unika för www.bbb.se ska bara dyka upp där.

Rätt sätt att bygga stilmallar på är att göra följande:

[easyembed field=”HTML3″]

Mallen

Till att börja med ska stilmallen delas upp delar efter hur innehållet ska visas. Det ska finnas stilmallar för:

  • datorer,
  • mobila läsare och 
  • utskrift.
Det går att skriva stilmallar för en rad olika ändamål. De olika typerna listas på denna sida: http://www.w3.org/TR/CSS2/media.html

Datorer

<link rel="stylesheet" type="text/css"
media="screen" href="screen.css">

Datorer tittar i nätsidans kod efter media=”screen” och väljer den stilmallen. Men det räcker inte med en stilmall för datorer. Användes stilmallar för fler sajter behöver stilmallen styckas upp i fler så att onödigt mycket kod inte behöver läsas in. Det blir också mindre risk för kodkrockar. Precis det som hände i exemplet ovan. Jag delar då in sajten i följande stilmallar:

 

  1. sidans_struktur.css – Denna stilmall beskriver webbsidans övergripande struktur. Här finns stilar för body, kolumner, sidhuvud och sidfot.
  2. texten.css – Denna mall går in på hur själva texten ska vara formaterad. Lägg stilar för p, blockqoute, h# med mera här.
  3. diverse.css – Denna mall kan i själva verket vara flera. Här lägger du kod för exempelvis tabeller och menyer. Allt som har med ajax, menyer, lightboxar med mera kan ligga här. Men som sagt: Gör flera mallar för olika funktioner för att göra problemlösningen enklare.
  4. ie-styles.css – Alla som jobbar med html vet att Internet Explorer 5 och 6 inte följer standarder. Lägg kod för särskilda webbläsare i slutet av stilmallsraddan här. Vill du använda mer avancerad html för exempelvis webkitbaserade webbläsare exempelvis Apples Safari, Googles Chrome eller KDE-varianten Konqueror så lägger du den också på slutet.

En listning av stilmallar skulle alltså kunna se ut så här när den är klar:

<link rel="stylesheet" type="text/css"
media="screen" href="css/struktur.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/text.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/tabeller.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/lightbox.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/menyer.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/ie.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/browers_specific.css"

Det finns många olika metoder för att få en stilmall att bara läsas av en specifik webbläsare, men det går jag inte in på här.

Utskrifter

Alla sajter med självaktning måste ha en stilmall för utskrifter. I denna stilmall tar man bort divar som definierar menyer, kolumner och övriga funktioner som bara behövs vid skärmläsning. Texten formateras också så att den blir optimalt läsbar på papper. Det kan handla om att byta till ett serift typsnitt i brödtexten.

Länken till stilmallen för utskrifter ser ut så här:

<link rel="stylesheet" type="text/css"
media="print" href="print.css"> 

Mobila läsare

För mobila läsare som sitter i mobiltelefoner, handdatorer och mindre bärbara datorer gör man en stilmall som saknar kolumner. Det räcker ofta med att bara använda sig av de stilar som finns i text.css.

Länken till stilmallen för mobila läsare ser ut så här:

<link rel="stylesheet" type="text/css"
media="handheld" href="handheld.css"> 

Att försöka få en sida att se snygg ut i mobila enheter är i princip omöjligt. Det finns så många varianter av skärmar, renderingsmotorer, typnsittsuppsättningar med mera. Dessutom vill vissa äldre mobiler att man kodar med hjälp av wap och wml.

Slutsats

När du har strukturerat dina stilar så får du i sidhuvudet en lista av css-länkar som ser ut på detta vis:

<link rel="stylesheet" type="text/css"
media="screen" href="css/struktur.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/text.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/tabeller.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/rapporter.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/lightbox.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/menyer.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/ie.css">
<link rel="stylesheet" type="text/css"
media="screen" href="css/browers_specific.css">
<link rel="stylesheet" type="text/css"
media="print" href="print.css">
<link rel="stylesheet" type="text/css"
media="handheld" href="handheld.css">

Många stilmallar blir det… Men det är det faktiskt värt. Det blir mycket enklare att lösa problem med denna struktur. Dessutom kan man välja att ladda stilmallar beroende på om de behövs eller inte. I fallet med  och aaa.bbb.se och www.bbb.se är rapporter.css den enda stilmall de två webbplatserna kommer att dela. Och rapporter.css styr jag via php så att det dokumentet bara läses in om sidan använder sig av funktionen rapporter.

Slutligen vill jag säga att det är svårt att lära sig css med hjälp av webbreferenser. Det finns inget som slår en bra bok att ha vid sidan av skärmen. Och som refernsverk för webbkodande finns det inget som slår O’Reillys böcker. Själv äger jag ett väl tummat exemplar av [easyembed field=”HTML1″] av den första upplagan. 

Andra böcker jag rekommenderar:

[easyembed field=”HTML2″]

Kommentera

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.