kaxigt.com

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 både en designers som webbläsarnas 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).

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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:

@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.

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

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

@import url("reset.css");
@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.

@import url("reset.css");
@import url("global.css");
@import url("master.css");
@import url("post.css");
@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.

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

Lycka till :)