{"id":1043,"date":"2010-09-14T14:22:43","date_gmt":"2010-09-14T13:22:43","guid":{"rendered":"http:\/\/www.hinnerup.net\/?p=1043"},"modified":"2011-05-27T11:45:36","modified_gmt":"2011-05-27T10:45:36","slug":"css3-og-intellisense-til-css3","status":"publish","type":"post","link":"https:\/\/www.hinnerup.net\/en\/permanent\/2010\/09\/14\/css3-og-intellisense-til-css3\/","title":{"rendered":"CSS3 and Intellisense for CSS3"},"content":{"rendered":"

This post will focus on CSS3, and later how to get Visual Studio to recognize CSS3 attributes.
\nThe CSS3 attributes we will focus on will be: border-radius and box-shadow.
\nCSS3 isn’t finalized yet, so it’s always a good idea to use browser specific tags, such as “-o-box-shadow, -moz-box-shadow, -webkit-box-shadow”.
\nThese will be use in the rest of this post, but not be part of the code-examples.
\nNote: As of writing this article, Internet Explorer doesn’t support CSS3 at all, yet.<\/em><\/p>\n

Lets begin with a simple unstyled button:
\n<\/p>\n

Lets start by rounding the corners using the border-radius attribute:<\/p>\n

.button1\r\n{\r\n   border-radius: 6px \/ 4px;\r\n   \/* alternativ: border-radius: 6px 6px 6px 6px \/ 4px 4px 4px 4px *\/\r\n}<\/pre>\n
<\/p>\n
The syntax for “border-radius” is similar to the other “border”-attributes. The edge in each corner is “pulled” down over an invisible circle, which has the defined radius. If you, as I have chosen here, use “\/” then the circle will have 2 radii, and thus become oval.
\nThe complete syntax can be found here<\/a>.<\/p>\n
Lets try “box-shadow”:<\/p>\n
.button2\r\n{\r\n   background-color:#606EA6;\r\n   border:1px solid #3B4466;\r\n   color:#FFFFFF;\r\n   box-shadow:0 3px 3px #8CA0F2 inset, 0 -5px 2px #3B4466 inset, 2px 2px 3px black;\r\n}<\/pre>\n
<\/p>\n
The “box-shadow” attribute allows an unlimited amount of shadows, as long as they are comma-separated. On the button above, we thus add 3 shadows. The first 2 parameters define horizontal\/vertical placement of the shadow; third param defines how strong a blur effect the shadow should have, where 0 is “no blur”. Then the color is defined, and “inset” (can be left out) defines that the shadow should be inside the element, as opposed to the outside.<\/p>\n
So how do we get Visual Studio to recognize these new attributes?
\n(If you are not comfortable messing with the Windows registry, you might wanna skip this step.)<\/em>
\nVisual Studio keeps the existing templates in your Visual Studio installation folder, in the subfolder: \\Common7\\Packages\\1033\\schemas\\CSS
\nTake a copy of css21.xml and call the new file css3draft.xml. Open the file and find a section called “Edges Properties”.<\/p>\n
Insert 2 new nodes with the following:<\/p>\n
\r\n\r\n\r\n\r\n<\/pre>\n
These define our 2 new CSS3 attributes.<\/p>\n
Run regedit.exe and search through HKEY_LOCAL_MACHINE for a key (and only keys!) with the GUID: {A764E895-518D-11d2-9A89-00C04F79EFC3}
\nYou have found the correct GUID if it has a subkey by the name “Schemas” (and still remain in the HKEY_LOCAL_MACHINE tree).
\nThis subkey probably contains keys named “Schemas 1” up to “Schema 4”
\nMake a key by the name “Schema 5” and two strings with the names “File” and “Friendly Name”.
\nSet “File” to css3draft.xml and “Friendly Name” to whatever you want, for example “CSS 3 Draft”.<\/p>\n
The styles menubar in Visual Studio will now have an extra value in it’s drop-down list of CSS schemas.
\n\"Visual<\/p>","protected":false},"excerpt":{"rendered":"
This post will focus on CSS3, and later how to get Visual Studio to recognize CSS3 attributes. The CSS3 attributes we will focus on will be: border-radius and box-shadow. CSS3 isn’t finalized yet, so it’s always a good idea to use browser specific tags, such as “-o-box-shadow, -moz-box-shadow, -webkit-box-shadow”. These will be use in the […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,7,4],"tags":[],"class_list":["post-1043","post","type-post","status-publish","format-standard","hentry","category-misc","category-words_of_advice","category-programming"],"_links":{"self":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/1043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/comments?post=1043"}],"version-history":[{"count":84,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/1043\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/posts\/1043\/revisions\/1456"}],"wp:attachment":[{"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/media?parent=1043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/categories?post=1043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hinnerup.net\/en\/wp-json\/wp\/v2\/tags?post=1043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}