CSS Shorthands är en egenskap som borde vara närmast helig för alla gränssnittsutvecklare. Det spar viktiga bytes och ger nästan alltid en snyggare och mer lättläslig kod.
Jag har sedan länge använt de shorthands som de flesta stöter på tidigt.
/* === shorthands === */
.myElm {
background:#000 url(bgTeaser.png) no-repeat 50% 100%;
color:#fff;
font:bold 1.2em/1.4 Verdana,sans-serif;
padding:2px 0;
margin:0 5px 2px;
}
/* === long way, equivalent to above === */
.myElm {
background-color:#000;
background-image:url(bgTeaser.png);
background-position-left:50%;
background-position-top:100%;
background-repeat:no-repeat;
color:#ffffff;
font-weight:bold;
font-size:1.2em;
line-height:1.4;
font-family:Verdana,sans-serif;
padding-top:2px;
padding-right:0;
padding-bottom:2px;
padding-left:0;
margin-top:0;
margin-right:5px;
margin-bottom:2px;
margin-left:5px;
}
Nyligen upptäckte jag dock en ny shorthand, nämligen för border-color. Ett exempel där det kan komma till nytta: Vi ska göra en bloggpuff som ska ha 3D-utseende, med en ram som är ljusare på ovansidan) (topp och höger) och mörkare på undersidan (botten och vänster) utan att använda border-style: inset;.
Tidigare har jag gjort såhär:
/* === 1.using 'border' shorthand === */
.blogTeaser {
border-top:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #666;
border-left:1px solid #666;
}
Det är inte särskilt snyggt, då jag skriver bredd och style tre gånger för mycket. En annan variant skulle kunna vara en kortare, men fortfarande ful sådan:
/* === 2.using 'border' and switching colors === */
.blogTeaser {
border:1px solid #333;
border-bottom-color:#666;
border-left-color:#666;
}
Bättre. Jag känner dock fortfarande att jag slösar bytes. I det här skedet kommer border-color till hands!
/* === 3.using border and border-color === */
.blogTeaser {
border:1px solid #333;
border-color:#666 #666 #333 #333;
}
border-color har stöd för TRouBLE-minnesregeln och tar därför färgargumenten i ordningen topp, höger, botten och vänster. Det kan komma till nytta vid de mest oväntade situationer.
En bra sammanfattning över alla shorthands i allmänhet finns sammanställd av Sitepoints CSS-referens.