kaxigt.com

Använder man sig av stilmallar kan det bli många märkningar i denna. En del av dessa märkningar är onödiga och stjäl bara plats. Istället ska vi nu optimera vår stylesheet. I och med detta blir den också mer snabbladdad och sidan visas fortare. Ett annat ord för detta är de så kallade short hand declaration groups. Vi kan göra detta på två vis.

Låt oss börja med en traditionell märkning som kan se ut så här:

html,body{
	background-color:#fff;
	background-image: url(bild.gif);
	background-attachment: repeat;
	font-family:arial,tahoma,Verdana, Helvetica, sans-serif;
	font-size:11px;
	font-weight: bold;
	font-variant: small-caps;
	line-height: 15px;
	border-left:1px;
	border-right:1px;
	border-bottom:1px;
	border-top:1px;
	border-color:#000;
	border-style:solid;
	padding-bottom:10px;
	padding-top;10px;
	margin-left:5px;
	margin-right:10px;
	margin-top:5px;
	margin-bottom:10px;
	}

Ganska mycket kod – eller hur? Och definitivt väldigt överdrivet mycket kod.

När man talar om short hand declarations betyder det att man skapar en enda kod för varje värde och att man i denna kod bara använder sig av de mest nödvändiga märkena för värdedefinitionerna.

Nu ska vi först göra om denna css-märkning till declaration groups och se vilken skillnad det blir. Sedan minskar vi ytterligare på en del av våra koder till short hand declarations. Vi tar det steg för steg!

Declaration Groups

Den absolut första märkningen vi har som vi inte ska ändra på är denna:

html,body{

Nästa steg är att formatera bakgrunden och en eventuell bakgrundsbild. Då gör vi så här:

background:#fff url(bild.gif) repeat fixed;

Som du nu ser så har vi ”dragit ihop” koderna till en enda. Man behöver alltså inte skriva ut varenda värdedeklaration för sig utan det går alldeles utmärkt att göra det i samma märkning. Vad man bör tänka på är att för att få ut det optimala i koden är att lämna en whitespace mellan semikolonen (’; ’) Skulle det också vara så att du av någon anledning vill formatera din bakgrundsbild kan du bland annat göra så här:

• background:#fff url(bild.gif) repeat-x;
• background:#fff url(bild.gif) repeat-y;
• background:#fff url(bild.gif) no-repeat left top;
• background:#fff url(bild.gif) no-repeat;

Nästa steg är att minimera font-deklarationerna. Det finns ingen anledning att upprepa samma definition bara för att värdedeklarationerna ser olika ut. Enklast gör vi det så här:

font: bold 11px/15px arial,tahoma,Verdana, Helvetica, sans-serif #000; letter-spacing: 2px; font-variant: small-caps;

Här finns alla värdedefinitioner samlade inom en och samma märkning – font. Enklare, eller hur?

När man då ska formatera padding och margin i en declaration group måste vi veta i vilken ordning vi formaterar dessa. I vanliga fall skriver vi ut antingen left eller right men när man grupperar ett och samma märke så utesluter man detta. Istället finns det en regel som talar om vilken ordning som ska följas. Det här gäller inte bara din padding utan alla värdedefinitioner som kan omsluta ett objekt.

Som en värdedefinition har vi våra marginaler. Dem har vi för att styra hur ett block ska förhålla sig till de övriga blocken. Nu ska vi skriva om marginalerna så de följer samma enkla kodning som de andra. Säkert ser du nu att våra marginaler också kommer att följa samma princip som paddingen. Den gör detta därför att en marginal kan omsluta ett helt objekt – block.

Låt oss börja med att se hur detta fenomen kan se ut.

margin:5px 10px 10px 5px;

Här har vi först angett utseendet på en marginal med 10 pixel right och bottom samt med 5 pixlar left och top. Men vilken av dessa är då höger och vänster och så vidare?

Det första värdet anger alltid värdet top – här ställt till 5px. Det andra värdet är right – här ställt till 10px. Det tredje värdet är bottom – här ställt till 10px, och slutligen har vi som fjärde märkning värdet left – ställt till 5 pixlar.

Med andra ord betyder denna enkla kod detta:

margin:5px(top) 10px(right) 10px(bottom) 5px(left);

Här är ytterligare en variant.

margin:5px 10px;

Vilket innebär att top och bottom har en marginal på 5px medan right och left har en marginal på 10px.

Men det går faktiskt att minimera koden ytterligare genom följande.

0 0 1.75em;

Dessa tre världen ger följande: 0 top 0 right 1.75em bottom 0 left.

Nästa steg i vår declaration group är padding. Om du kikar i koden högst upp vill vi bara formatera denna i top och bottom. Det är ingen skillnad mot hur vi formaterade vår border. Det är samma princip även här.

padding: 10px 0 10px 0;

Vad som finns kvar av den ursprungliga och omständiga koden är således detta:

• html,body{
• background:#fff url(bild.gif) left top repeat;
• font: 11px arial,tahoma,Verdana, Helvetica, sans-serif;
• color:#000;
• line-height: 15px;
• letter-spacing: 2px;
• font-weight: bold;
• font-variant: small-caps;
• padding: 10px 0 10px 0;
• margin: 5px 10px 10px 5px;
• }

Vad tycks?

Short hand declaration

Men det finns ett sätt att ytterligare minimera koderna. Så länge det handlar om samma märkning kan vi lika gärna det inom samma klammer. Går vi tillbaka och granskar vår formatering av fonten så kan den se ut så här i en short hand declaration:

body{font: bold verdana 11/150 small-caps;}

Denna enkla kod säger oss att vi vill ha verdana som typsnitt, fonten ska vara 11 pixlar och line height är ställd till 15 pixlar (observera slashen mellan värderna), vidare vill vi att det ska vara fetstilad och utseendet small caps.

Vi sätter inte ut några definitioner som color, letter-spacing och så vidare eftersom dessa värden inte stöds fullt ut som short hand av alla webbläsare.

Short hand declaration är alltså de koder i css man kan minimera inom samma definition. I hela vårt exempel är det bara letter-spacing jag har lagt som en egen märkning – det andra har vi skrivit tillsammans i short hand declaration groups. Så mycket mindre koder att hålla reda på och trevligare att skriva!