CSS3 og Intellisense til CSS3

Dette indlæg vil fokusere på CSS3 og efterfølgende hvordan du får Visual Studio til at genkende CSS3 attributter.
De CSS3 attributer vi vil fokusere på er: border-radius og box-shadow.
CSS3 er ikke finalized endnu, så det er altid en god idé at bruge browser specifikke tags, som “-o-box-shadow, -moz-box-shadow, -webkit-box-shadow”.
Disse bliver brugt i resten af dette indlæg, men vil ikke være del af kodeeksemplerne.
Note: Per dags dato understøtter Internet Explorer overhovedet ikke CSS3 endnu.

Lad os begynde med en simpel ustylet knap:

Lad os starte med at give knappen runde hjørner vha. attributten border-radius:

.button1
{
   border-radius: 6px / 4px;
   /* alternativ: border-radius: 6px 6px 6px 6px / 4px 4px 4px 4px */
}

Syntaksen for “border-radius” minder om de andre “border”-attributter. Kanten i hvert hjørne “trækkes” rundt om en usynlig cirkel med den radius som er defineret. Hvis man, som jeg har valgt her, bruger “/” får cirklen 2 radier, og bliver derved oval.
Den komplette syntaks kan ses her.

Lad os tage hul på “box-shadow”:

.button2
{
   background-color:#606EA6;
   border:1px solid #3B4466;
   color:#FFFFFF;
   box-shadow:0 3px 3px #8CA0F2 inset, 0 -5px 2px #3B4466 inset, 2px 2px 3px black;
}

“box-shadow” attributten tillader et ubegrænset antal skygger, blot de er komma-separerede.
På ovenstående knap tilføjes der derfor 3 skygger. De første 2 parametre i attributten definerer horisontal/vertikal forskydning af skyggen; tredje param angiver hvor meget blur-effekt skyggen skal have, hvor 0 er “ingen blur”. Efterfølgende defineres en farve, og “inset” (kan undlades) definerer at skyggen skal være inde i elementet, fremfor udenpå.
Den komplette syntaks for box-shadow kan ses her.

Så hvordan får vi Visual Studio til at genkende disse nye attributter?
(Hvis du ikke er komfortabel med at rode i Windows registreringsdatabase, skal du nok springe over dette trin)
Visual Studio gemmer de eksisterende templates i din Visual Studio installationsmappe, i mappen: \Common7\Packages\1033\schemas\CSS
Tag en kopi af css21.xml og kald den nye fil css3draft.xml. Åben filen og find den sektion der hedder “Edges Properties”.
Indsæt 2 nye noder med følgende:

<cssmd:property-def _locID="box-shadow" _locAttrData="description,syntax" type="composite"
            description="Attaches one or more drop-shadows to the box"
            syntax="inset? && [ length{2,4} && color? ] [ , inset? && [ length{2,4} && color? ]*" />

<cssmd:property-def _locID="border-radius" _locAttrData="description,syntax" type="composite"
            description="Defines the radii of a quarter ellipse that defines the shape of the corners of the outer border edge of an element"
            syntax="[ length | percentage ]{1,4} [ / [ length | percentage ]{1,4} ]?" />

Disse definerer vores 2 nye CSS3 attributter.

Kør regedit.exe og søg igennem HKEY_LOCAL_MACHINE efter en key (og kun keys!) med GUID: {A764E895-518D-11d2-9A89-00C04F79EFC3}
Du har fundet den rigtige GUID hvis den har en underfolder ved navn “Schemas” (og stadig er under HKEY_LOCAL_MACHINE).
Denne underfolder inderholder formegentligt “Schema 1″ til “Schema 4″.
Lav en ny key ved navn Schema 5 og to strings med navnene “File” og “Friendly Name”.
Sæt file til css3draft.xml og “Friendly Name” til hvad end du nu har lyst til, f.eks “CSS 3 Draft”.

Menulinjen “Style” (i VS) vil nu have en ekstra værdi i dropdownlisten over CSS schemas.