Udvikling af Determino (Hinnerup Net A/S’s måske kommende faktureringssystem)
MSSQL samt .NET C# udvikling
SCRUM / Agile udviklingsmetoder
Fredagsoplæg
Formålet med praktikopholdet, er at få omsat noget af den teoretiske viden de har med sig til praktisk erfaring, samtidigt med at gruppen får en fornemmelse for almindelige arbejdsgange i en IT/udviklings-virksomhed, og får snuset lidt til områder der ikke nødvendigvis har været en del af det de tre har mødt i undervisningen.
Medlemmerne af praktikantgruppen er:
Nawed Nabi Zada
Jacob Sørensen
Jannik Schøler
Efter deres 9 ugers praktikforløb, vil gruppen fortsætte et 10 ugers hovedopgave forløb hos os.
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:
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.
“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.
