Dela stilmallen

En stilmall hos nybörjaren brukar inte vara så stor, men vart efter kunskaperna växer finns det en fara för att den utökas till att bli ofantligt stor, och lång, ibland nära en meters skrollande. Ur en designers perspektiv är detta inte bara arbetsamt, det är också förkastligt. Många skyller också på webbläsarna för att sidan inte beter sig som den ska – trots valideringens alla konster. Varför är det så och det viktigaste – kan man göra något åt det? Professionella webdesigners vet att hantera stilmallen för bästa optimering och resultat. Vi ska här gå igenom hur Du kan underlätta både för dig själv som för webbläsarna.

Låt oss säga att du har en stilmall med en massa koder. Du har säkert också koder för en gästbok, kommentarfunktion, sökformulär, kontaktformulär osv förutom koderna till alla dina divar, tabeller, texter och länkar och liknande. För att skapa bästa optimering – och att inte låta presentationen te sig inkonsekvent i de olika webbläsarna finns det några knep att ta till. Vi ska dela upp stilmallen i olika segment så de blir en stilmall var och en för sig.

Börja därför med att skapa en “master sheet” – det vill säga en huvudstilmall. Döp den förslagsvis till default.css. Denna stilmall kommer inte innehålla några koder utan den ska importera de övriga stilmallarna som ska länkas till sidan. Hur många de kommer att bli är helt beroende på hur och vad för sorts presentation du vill använda.

En viktig sak att tänka på, något inte alla vet om, är att “nollställa” alla koders värde som default. På så vis har du eliminerat alla webbläsares defaultläge och kan därefter bygga upp presentationen. En del väljer att använda starfloatkommande för html – men det handlar ju om att nollställa egenskaperna för just IE. Vi ska ska däremot nollställa de globala egenskaperna för alla webbläsare och det gör vi genom att skapa en stilmall som vi döper till reset.css. I denna stilmall stoppar vi sedan in följande värden som är bra att nollställas (du kan givetvis ta bort eller lägga till andra värden):

  1. html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, code, em, font, img, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tr, th, td {margin: 0; padding: 0; border: 0;}
  2. ol, ul { list-style: none;}

Så här långt har vi alltså två stilmallar om vi räknar bort den vi ska dela på. Vi öppnar default.css och lägger in den första importregeln för reset.css. Default.css ska då infogas denna kod:

  1. @import url("reset.css");

Nästa steg är att lyfta ut ditt globala bodyvärde och till denna gör vi ännu en stilmall vi kallar global.css. I denna lägger vi in de globala värden som ska gälla hela siten såsom länkar och bodydefinitioner.

  1. body {background: #fff url(images/bg.jpg) left top no-repeat fixed;color: #333; margin: 0 auto; font: .75em verdana, Arial, Helvetica, Sans-Serif; line-height: 1;}
  2. a, a:visited {color: #73AB02;text-decoration: none;}
  3. a:hover, a:focus, a:active {color:#ccc;text-decoration: none;}
  4. a img {border:none;}
  5. p {line-height: 1.8em; text-align:left; margin: 0;}

Därefter är det dags att infoga global.css i default.css.

  1. @import url("reset.css");
  2. @import url("global.css");

Så här långt har vi en default stilmall vars uppgift är att länka dina stilmallar som dels nollställer alla globala värden (reset.css) och dels behåller just dina globala bodyvärden vilka har prioritet till hela sidan (global.css). För varje ny stilmall du skapar, glöm inte att ta bort koderna från den gamla mallen.

Härnäst skapar du en stilmall, exempelvis kallad master.css som kommer att vara den du arbetar mest med. I denna lägger du in presentationen för layoutens struktur, olika divar med mer. Sedan upprepar du samma procedur för stilmallarna som ska sköta om alla dina formulär och/eller kommentarer och gästbok. Låt oss säga att du har skapat en stilmall för dina poster och inlägg inklusive kommentarer – döp den till post.css. Stilmallen som ska sköta om dina formulär kallar du sonika för form.css. När du har delat upp den gamla stilmallen till dessa olika segmenterade delar ska vi föra in alla i default.css.

  1. @import url("reset.css");
  2. @import url("global.css");
  3. @import url("master.css");
  4. @import url("post.css");
  5. @import url("form.css");

Ge akt på ordningen. Jag lägger in dem i den ordning som är naturligast. Först nollställer vi sidan via reset.css, därefter för jag in mina globala bodyvärden som ska vara prioriterande med global.css, nu kommer vi fram till master.css eftersom den är “stommen” för layouten och den stilmall jag förmodligen mest kommer att arbeta med. Alla inlägg och poster länkas därefter in via post.css och som sista prioritering kommer form.css eftersom denna stilmall enbart innehåller koderna för mina formulär. Räcker då detta? Nej! För att allt ska fungera måste du ändra länkningen till din stillmall. Det går inte att använda en traditionell länk och läs nu mycket noga – länken måste infogas precis innan /head. Det bör inte finnas några koder mellan denna länken och /head.

  1. <style type="text/css" media="Screen"> /*\*/@import url("http://dindomän.com/default.css");/**/ </style>

Vill du se vilka css filter de olika webbläsarna har kan du läsa om detta hos centricle.com. Så här har jag lagt upp mina stilmallar

Lycka till!

Liknande poster:

2 Comments Add yours

  1. Lennart says:

    Läser kaxigt.com med stort intresse från och till efterhand som jag jobbar med webben. Här stötte jag dock på patrull när jag vill länka samman mina css-dockument. Vill du utveckla koden där du anger
    /*\*/@import url(“http://dindomän.com/default.css”);/**/ lite mera? Vad gör alla krumelurer som /*\ för nytta?

    Tyvärr får jag inte den delen att funka och jag förstår inte varför. Publicerar på IIS. Detta är ju inte livsnödvändigt men det blir onekligen snyggare om man lyckas samla alla css-dokument så här.

    1. Lena says:

      Hej och ursäkta för sent svar!

      “Krumelurerna” i koden är ett “high-pass-filter” som har fått hänga med i många år för att täcka vissa webbläsare och få dem att förstå importregeln (en del webbläsare förstår ju inte alltid att ignorera vissa koder, eller att läsa in andra). Du kan läsa mer om detta hos tantek.com

      Du ska börja med att göra 1 stilmall och i denna lägger du sedan in importregeln som kallar på alla dina andra stilmallar.

      *\*/@import url(“http://dindomän.com/default.css”);/**/ är en speciell kod i dokumentet som anropar den stilmall i vilka resten av dina media type (import rules) ligger. Därför måste också koden ligga absolut sist i head-sektionen. Man importerar importen i två led för att vara väldigt avskalad i förklaringen.

      mvh/Lena

Leave a Reply

Your email address will not be published. Required fields are marked *