En smart sak i CSS ör möjligheten att skriva shorthand, att förkorta och sammanfatta egenskaper. Detta sparar inte bara in tid och tangentbordsslitage, utan kan faktiskt medverka till att webbsidor laddas snabbare.

Skillnaden i hämtnings- och lästid är dock marginell, den stora vinsten med shorthand är den att CSS:en går snabbare att skriva och att det ger en mer överblickbar kod.

Om du tittar på W3C:s lista över CSS-egenskaper ser du att vissa egenskaper är sammansatta ord med bindestreck i. Alla dessa kan kortas ned. border-top-color i exemplet nedan är att se som en precisering av exakt vilken kantlinje det gäller.

I stället för att skriva till exempel:

#meny {
border-top-color: #ff0000;
border-top-width: 4px;
border-top-style: solid;
border-right-color: #ff0000;
border-right-width: 4px;
border-right-style: solid;
border-bottom-color: #ff0000;
border-bottom-width: 4px;
border-bottom-style: solid;
border-left-color: #ff0000;
border-left-width: 4px;
border-left-style: solid
}

så kan du sammanfatta detta som

#meny {
border-color: #ff0000;
border-width: 4px;
border-style: solid;
}

#meny {
border: #ff0000 4px solid;
}

Alla tre exemplen ovan kommer att ge id:t meny en röd, 4 pixlar bred kantlinje på all sidor. Alla fyra sätten är också korrekta, men det sista innebär mycket mindre text att skriva än det första exemplet.

En liten varning: All shorthand fungerar inte alltid, ibland måste man vara specifik och dela upp sina regler. Jag föreslår att du börjar med att försöka sammanfatta så mycket som möjligt, och dela upp reglerna om du stöter på problem, men du bestämmer själv vad du tycker känns mest bekvämt, som sagt: samtliga exempel ovan är formellt korrekta.

Om du skulle vilja göra ett block som ser ut

#tjosan {
   border-color: red;
   border-style: solid;
   border-top: 0;
   border-right: 4px;
   border-bottom: 0;
   border-left: 4px;
}

Detta kan sammanfattas till

#tjosan {
   border-width: 0 4px;
}

Det är nämligen så att man kan ange flera olika värden i följd. Om man anger två värden (i det här fallet 0 och 4px) så gäller det första värdet för top och bottom, det andra för right och left

Detta kan vidareutvecklas om vi gör följande block:

I ovanstående block är top 4px röd, right 8px grön, bottom 12px blå och left 16px gul. Detta kan uppnås på liknande sätt som i det förra exemplet, men med fyra värden i följd. Till exempel så här:

border-style: solid;
border-width: 4px 8px 12px 16px;
border-color: #ff0000 #00ff00 #0000ff #ffff00;


I det här fallen räknas värdena alltid medsols från top, alltså: top, right, bottom och left. Alltid i samma ordning. Tänk dig en klocka som börjar på klockan tolv.

Sammanfattning: vid två värden: top/bottom och sedan right/left.
Vid fyra värden: top, right, bottom och sedan left.

Om du kommer ihåg den ordningen kan du använda den i många olika sammanhang när du vill korta ned din kod.