{"id":2534,"date":"2012-03-12T13:47:55","date_gmt":"2012-03-12T13:47:55","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2012\/03\/12\/visual-studio-11-beta-htmlcss-editor-features\/"},"modified":"2022-08-10T07:15:24","modified_gmt":"2022-08-10T14:15:24","slug":"visual-studio-11-beta-htmlcss-editor-features","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/visual-studio-11-beta-htmlcss-editor-features\/","title":{"rendered":"Visual Studio 11 Beta HTML\/CSS editor features"},"content":{"rendered":"<p>Visual Studio 11 Beta has some more improvement in HTML and CSS editors over the Developer Preview time. You can see the major feature descriptions through <a href=\"http:\/\/www.asp.net\/vnext\">www.asp.net\/vnext<\/a> .&#160; In this <a href=\"https:\/\/channel9.msdn.com\/Shows\/Web+Camps+TV\/Web-Developer-Efficiency-Tools-in-Visual-Studio-11\">channel9 video<\/a>, Mads Kristensen demonstrated a few great HTML\/CSS editor features in VS11 Beta (The video also demos Page inspector features by Jorge Gabuardi, and JavaScript feature by Mads as well).<\/p>\n<p>Also, Here is an additional list of HTML\/CSS editor features that we improved in Visual Studio 11 Beta.<\/p>\n<h2>HTML editor<\/h2>\n<ul>\n<li>Smart Task on all HTML elements with full MEF extensibility support<\/li>\n<\/ul>\n<ul>\n<li>IntelliSense for Metro Style application\u2019s data-win-control attribute<\/li>\n<\/ul>\n<ul>\n<li>Improved formatter<\/li>\n<\/ul>\n<ul>\n<li>Updated HTML5 IntelliSense and validation based on latest W3C standards<\/li>\n<\/ul>\n<ul>\n<li>Drag and drop support for user controls, video and audio files into source editor.&#160; For example, if you drag drop a test.mp3 file from solution explorer to the html editor, you will see this:<\/li>\n<\/ul>\n<blockquote>\n<pre class=\"code\"><span style=\"background: white;color: blue\">&lt;<\/span><span style=\"background: white;color: maroon\">audio <\/span><span style=\"background: white;color: red\">src<\/span><span style=\"background: white;color: blue\">=&quot;test.mp3&quot; <\/span><span style=\"background: white;color: red\">controls<\/span><span style=\"background: white;color: blue\">=&quot;controls&quot; \/&gt;<\/span><\/pre>\n<\/blockquote>\n<h2>CSS editor<\/h2>\n<ul>\n<li>Validation of vendor specific properties, for example:<\/li>\n<\/ul>\n<blockquote>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/03\/6862.clip_image001_thumb.png\"><img decoding=\"async\" style=\"border-bottom: 0px;border-left: 0px;padding-left: 0px;padding-right: 0px;border-top: 0px;border-right: 0px;padding-top: 0px\" title=\"clip_image001\" border=\"0\" alt=\"clip_image001\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2012\/03\/6862.clip_image001_thumb.png\" width=\"244\" height=\"30\" \/><\/a><\/p>\n<\/blockquote>\n<ul>\n<li>Hierarchical indentation is now fully extendible<\/li>\n<\/ul>\n<ul>\n<li>Auto completion of CSS comments.&#160; For example, when you type <span style=\"background: white;color: #006400\">\/*<\/span>, you will see <span style=\"background: white;color: #006400\">\/**\/<\/span> get generated.<\/li>\n<\/ul>\n<ul>\n<li>Auto insert closing curly bracket followed by smart indent.&#160; For example, when typing .class1{, the following will get generated, where | is the cursor position.<\/li>\n<\/ul>\n<blockquote>\n<pre class=\"code\"><span style=\"background: white;color: maroon\">.class1 <\/span><span style=\"background: white;color: black\">{\r\n    |\r\n}<\/span><\/pre>\n<\/blockquote>\n<ul>\n<li>Improved IntelliSense triggering when working with colors.&#160; For example, when typing # after \u201cbackground: \u201c, the color picker will get triggered as editor recognize a color is to be entered.<\/li>\n<\/ul>\n<p>&#160;<\/p>\n<p>Hope to <a href=\"http:\/\/connect.microsoft.com\/VisualStudio\">hear your feedbacks<\/a>. Thanks for reading.<\/p>\n<p>&#160;<\/p>\n<p>Xinyang Qiu<\/p>\n<p>Web Platform and Tools Team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visual Studio 11 Beta has some more improvement in HTML and CSS editors over the Developer Preview time. You can see the major feature descriptions through www.asp.net\/vnext .&#160; In this channel9 video, Mads Kristensen demonstrated a few great HTML\/CSS editor features in VS11 Beta (The video also demos Page inspector features by Jorge Gabuardi, and [&hellip;]<\/p>\n","protected":false},"author":404,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7403,7394,7398],"class_list":["post-2534","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-css-editor","tag-html-editor","tag-visual-studio-11-beta"],"acf":[],"blog_post_summary":"<p>Visual Studio 11 Beta has some more improvement in HTML and CSS editors over the Developer Preview time. You can see the major feature descriptions through www.asp.net\/vnext .&#160; In this channel9 video, Mads Kristensen demonstrated a few great HTML\/CSS editor features in VS11 Beta (The video also demos Page inspector features by Jorge Gabuardi, and [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/404"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/2534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=2534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=2534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}