Dela stilmallen för bästa resultat

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å se ut så här:

  1. default.css
  2. @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. global.css
  2. 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;}
  3. a, a:visited {color: #73AB02;text-decoration: none;}
  4. a:hover, a:focus, a:active {color:#ccc;text-decoration: none;}
  5. a img {border:none;}
  6. p {line-height: 1.8em; text-align:left; margin: 0;}

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

  1. default.css
  2. @import url("reset.css");
  3. @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. default.css
  2. @import url("reset.css");
  3. @import url("global.css");
  4. @import url("master.css");
  5. @import url("post.css");
  6. @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.

Lycka till 🙂

Liknande poster:

12 Comments Add yours

  1. leila says:

    glöm min förra fråga, jag har fått det att funka. Jippie, på första försöket. tackar och bockar för tipsen. kramis leila

  2. leila says:

    hej, jag gillar att ha mina stilmallar i en egen mapp. kan man lägga alla dessa stilmallar i en mapp och skriva in sökvägen till mappen. Jag är en mappoman :). här sitter jag och läser och provar då jag borde packa då vi far ut med husvagnen i morgon bitti. alla sju plus hunden ska med så det blir lite. mvh leila

  3. Lena says:

    Hej Anders,
    smart sätt du har kommit på måste jag säga. Det ÄR svårt att få ha kakan kvar när man har ätit upp denna.

    Å andra sidan, om du lägger upp dina stilmallar och importerar dem i den turordningen sidan (ska) laddas så är ju det bara en tidsvinst. Reset har ju egentligen “inget” värde (sanning med modifikation visserligen) eftersom den nollställer defaultvärden, global plockar upp de globala värderna för body – och även här är det inga större märkvärdigheter för laddningstiden. Det är ju först när vi kommer till master.css som tidsförlusten uppkomer. Jag menar då att om man minimerar denna och delar upp struktur/presentation från andra element med ofta “tunga” selektorer som kommentarfunktion, gästbok, formulär etc (vilka var och en i sin tur får sin egen stilmall) så laddas dessa element sist eftersom deras stilmallar importeras sist enligt “turordningen”.

    Ja ja vet att det handlar om millisekunder som dock kan vara nog så viktiga. Ditt förslag är definitivt något att tänka på. TACK!
    mvh/Lena

  4. Anders Ringqvist says:

    haha… ok, jag är en kommentar-n00b xD sorry för ‘spam’ men jag testar igen…


    1. först så använder jag den här syntaxen för att inkludera stilmallen:

    <link type=”text/css” rel=”stylesheet” media=”screen” href=”/chrome/screen/” />

    jag pekar alltås bara på en katalog och ingen specifik fil.

  5. Anders Ringqvist says:

    Hmm… HTML-en försvann vid punkt 1, försöker med ersättningskoder =P

    — 8

  6. Anders Ringqvist says:

    Tjena Lena,

    trevligt att se så bra webbguider på svenska (blir lite trött i huvudet av allt us-en ibland ^^).

    detta är mitt första besök på din plats och inte det sista kan jag säga.

    hur som helst så vill jag ge lite synpunkter på ämnet om att dela upp sin stilmall =Pjag gillar @import väldigt mycket och använder det själv för att få struktur på en webbplats olika delar. Även om jag använder proffesionella webbutvecklingsverktyg med bokmärkesfunktioner och hela fadderullan så gillar jag att dela upp css:en i olika filer. Antar att det är flera orsaker som ligger bakom detta beteende, jag kanske hamnar i en situation när jag inte har tillgång till mer än notepad eller nått. Det kan också vara så att det är svårt att lära gamla hundar sitta 😉

    Det “negativa” med att dela upp stillmallen är att UA:en gör ett HTTP-request per fil, vilket förlänger nerladdningen och som vi alla vet så är varje millisekund i detta skede viktigt.

    Så vi har ett delikat problem där det går snabbare för oss att hitta (utveckla) i vår stilmall om vi delar på den men vi förlänger nedladdningen på vår webbplats när den är live.

    Det vi skulle vilja göra är att äta kakan och ha den kvar samtidigt… går detta?

    Självklart ^^ med lite hjälp av något server-side script (i.e. php) så blir ju detta busenkelt. Jag tänkte bara berätta hur jag löst detta, har inte haft något direkt tanke på det egentligen men jag tycker själv att det är en hållbar lösning.

    1. först så använder jag den här syntaxen för att inkludera stilmallen:

    jag pekar alltås bara på en katalog och ingen specifik fil.

    2. jag har ändrat DirectoryIndex-direktivet i apache till att även kolla efter ‘_.css _.php manifest.css’ (använder ‘_’ för att lättare hitta dessa filer =P). Detta innebär att när en UA efterfrågar sidan och sidan i sin tur efterfrågar ‘/chrome/screen/’ så kommer servern först kolla om ‘_.css’ existerar. Är så fallet så serveras den, i annat fall så körs ‘_.php’ osv.

    4. ‘_.php’ är ett php-skript (doh!) utan någon som helst output code. Det enda detta skriptet gör är att läsa en specifik css-fil (min heter ‘manifest.css’) som innehåller alla @import-regler man vill (denna css-filen innehåller alltså inga egna css-regel-sets). php-filen läser alla de css-filer man länkat till och ‘kopierar’ (tekniskt sett skapar den ju en ny fil =P) över all css till en fil som den döper till ‘_.css’. Den redirectar sedan till ‘manifest.css’

    så katalogen ‘/chrome/screen/’ innehåller från början alla ens css-filer (reset.css, global.css osv) + ‘manifest.css’ och i produktionsmiljö (skarpa servern) även _.php. Första besökaren som kommer till webbplatsen (antagligen en själv då man testar ^^) kommer att köra php-skriptet eftersom det inte existerar någon ‘_.css’ än och sen ladda ner ‘manifest.css’ som i sin tur kallar på alla andra css-filer. Alla nästkommande besökare kommer att kalla på ‘_.css’ där all css nu ligger ihopslagen.

    Om man gör som så att man endast har ‘_.php’ på produktionsservern så kommer man i sin utvecklingsmiljö (där antalet HTTP-requests spelar midre roll) endast använda sig av ‘manifest.css’. Då är man nära att både kunna äta och ha kvar kakan ^^ Man behåller den praktiska nyttan med delad stilmall och man minimerar antalet HTTP-requests.

    Ha en fortsatt trevlig sommar =)

  7. Lena says:

    Hej Nina, så klart att jag förstår hur du menar, och jag kanske ska skriva lite tydligare. Det är i stilmallen som heter default.css du lägger in följande:

    @import url(”reset.css”);
    @import url(”global.css”);
    @import url(”master.css”);
    @import url(”post.css”);
    @import url(”form.css”);

    Alltså – istället för en massa koder lägger du in dina importregeler.

    😉

  8. Nina says:

    En fånig fråga .. *ler blygt*

    Du har ju numrerar 1-6 i ditt exempel här ovan ..

    ska det i stilmallen default.css stå default.css som första rad ..

    och att desse sen ska stå nedanför ..
    @import url(“reset.css”);
    @import url(“global.css”);
    @import url(“master.css”);
    @import url(“post.css”);
    @import url(“form.css”);

    Jag antar att det inte är så men är ändå osöker. Jag gjorde en default.css och i den la jag som du numrerat från 2-6.

    Hm.. undrar om du förstår vad jag menar. Tihii.

  9. Nina says:

    Tusen tack för din utomordentliga förklaring till hur man delar upp stilmallen.
    PERFEKT JOBB LENA. Du är så himla bra och du gör det himlans bra också.
    🙂

  10. Lena says:

    Per – jo visst är det så. Jag glömde att slänga in en slash innan. Tack för att du påpekade saken.

  11. per* says:

    Trevlig läsning. Men menar du inte att länkningen skall infogas precis innan /head och inte innan head.

    Det är väl ändå en stor skillnad.

  12. leila says:

    hej, men sån läcker spindel du hade här då 🙂 nu har jag lite nytt att läsa och lära om css , jättekul och jättespännande. jag har just nu datatorka, försöker få ordning på min hemsida och att få upp mina sidor om min sjukdom men det är trögt, det är ju sommar ju och då är jag mycket ute men jag ska läsa igenom ditt senaste inlägg för det låter spännande, det är nåt jag har fundrat på , att importera css om man kan säga så, jag får läsa det många ggr då jag är lite trögtänkt 🙂 ha det så bra, kramis leila

Leave a Reply

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