När det kommer till CSS kan man vinna en hel del på att använda kortformen för deklarationer, vilket man gör genom att ange flera egenskaper i en deklaration. Daniel K

 

Kortforms egenskaper

En av de främsta fördelarna med att använda CSS är den stora minskningen av webbsidans nedladdningstid. För att lägga till formatering på typsnitt förr i tiden, var du tvungen att använda <font> om och om igen. Nu kan all presentations information placeras i ett CSS dokument, och en CSS regel behöver bara skrivas en gång. Men varför stanna där? Genom att använda CSS kortform för egenskaper kan du minska storleken på ditt stilmall ännu mer, och även minska tiden för utvecklingen.

 


 

Webb-typografi – font i kortform

Man kan ange flera egenskaper i en och samma deklaration genom att använda sig av CSS kortform (shorthand).När det kommer till font egenskapen, så kan man få med en hel del i en kortform:

Diagram av CSS font deklaration i kortform/shortform
Diagram av CSS font deklaration i kortform

 

…är samma som:

Denna CSS kortform kommer dock bara att fungera om du specificerar värden för både font-size och font-family – utelämnar du någon av dessa kommer regeln att helt ignoreras. Dessutom, om du inte anger font-weight, font-style, eller font-variant kommer dessa värden automatiskt få ett normalvärde, så tänk på det.

 

Här är alla möjliga värden för font egenskaper:

 

I bakgrunden – background i kortform

Bakgrund kan vara knepigt, men mycket effektivt när de är korrekt komprimerat. Syntaxen för att förklara kortform för bakgrunds värden är följande:

Och här är alla möjliga värden för egenskaperna i samma ordning:

 

Border i kortform

Du kan använda:

Istället för:

Tänk på: Alltid deklarera border-style egenskapen innan border-width egenskapen för ett element måste ha själva border stilen innan man kan ange dess bredd.

 

Det här exemplet:

Kan du uppnå genom att skriva:

 

Några exempel på resultat om man utelämnar värden:

element { border:solid blue; } /* blir – 3px solid blue – varför det är 3 vet jag inte*/

 

element { border: 5px solid; }  /* ger en – 5px solid initial – och initial är på min webbplats – rgb(90,90,90) */

 

element { border:dashed; }  /* skapar en – 3px dashed black */

 

CSS kortform shorthand guide

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: