CSS kortform shorthand guide

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

 

element { font: italic small-caps bold 1em/150% 'Helvetica Neue', Georgia; }

…är samma som:

element {
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1em;
  line-height: 150%;
  font-family: 'Helvetica Neue', Georgia;
}

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:

/* || står för ELLER */
element {
  font-style: normal || italic || oblique || initial || inherit;
  font-variant:normal || small-caps || initial || inherit; 
  font-weight: normal || bold || bolder || || lighter || (100-900) || initial || inherit; 
  font-size: (nummer+enhet) || (xx-small - xx-large) || initial || inherit; 
  line-height: normal || (nummer+enhet) || initial || inherit; 
  font-family: Font-namn,'Font namn' || initial || inherit; 
}

 

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:

element { background: #fff url(image.png) no-repeat 20px 100px fixed; }

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

element { 
  background-color: color || #hex || (rgb / % || 0-255); 
  background-image:url(URI); 
  background-repeat: repeat || repeat-x || repeat-y || no-repeat; 
  background-position: X Y || (top||bottom||center) (left||right||center); 
  background-attachment: scroll || fixed; 
}

 

Border i kortform

Du kan använda:

element { nummer+enhet en-av-många-stil-alternativ (namn || #hex || (rgb / % || 0-255)); }

Istället för:

element {
   border-width: nummer+enhet;
   border-style: (en-av-många-stil-alternativ);
   border-color: namn || #hex || (rgb / % || 0-255);
}

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:

border: .5em dotted #999;
border-left: 1em dotted #ccc;
border-top: 1em dotted #ccc;

Kan du uppnå genom att skriva:

border-style: dotted; /* du behöver ändå ange border-style annars får man ingen border */
border-width: 1em .5em .5em 1em;
border-color: #ccc #999 #999 #ccc;

 

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 */

 

/* Och dessa fungerar inte alls för dom har ingen border-style: */
element { border:1px red; }
element { border:1px; }
element { border:blue; }

CSS kortform shorthand guide

Lämna ett svar

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

Rulla till toppen