Blend-created HTML/CSS running in browser?

Question

Has anyone had any luck using Blend for Visual Studio 2011 Beta to create webpages? I'm a designer coming from using Blend to create XAML-based UIs and freaking out that there might not be some brilliant WYSIWYG editor like Blend for web out there :P I was -hoping- I could design most things in Blend and then just hand it off the developer to do their code-behind in whatever the hell they use. Does Blend create a lot of IE10/Windows 8 specific stuff in the markup/styling or is it pretty standard stuff it generates?

Cheers, Nick

Answer 1

HTML authoring in Blend is currently focused on creating Metrostyle apps for Windows 8 in HTML and CSS, not on apps to run in browsers. The underlying Windows HTML / CSS / JavaScript platform is, of course, very standards-compliant, and therefore Blend edits and generates standards-based HTML and CSS.

Here are a few points of interest: • The Blend design surface uses the same renderer that is used for Windows 8 apps at runtime (i.e., IE10). The Windows app runtime may render things differently than other browsers do, just as different browser implementations have their differences. It’s still standard HTML and CSS, but WYSIWYG editing is based on the Windows 8 app runtime rendering.

• Windows 8 apps can be in different view states. In a running app, view state switches cause media queries and events to fire. There is special tooling in Blend to simulate view state and resolution / DPI switching on the design surface, for accurate design experiences.

• Web sites are generally intended to have scrolling pages of unlimited height. App UI, in contrast, will more often assume fixed height, as determined by the size of the screen of the device the app is running on. The Blend design surface is designed for building apps.

• Interactive mode runs apps as Windows 8 apps.

• Blend does not edit loose HTML or CSS files, it assumes a project file. The project templates supplied are for Windows 8 apps.

• Blend’s CSS property editor focuses on the set of CSS properties and values that is supported in IE. The vast majority of CSS properties and property values present in IE are the same as everywhere else, but there are a few minor differences, just like between other browsers.

• There are a bunch of CSS features supported in IE 10 that are proposed standards but not finalized. The W3C requires that browsers use vendor-specific prefixes for such properties and property values. This includes things such as CSS Grid, Flex box, Transitions and Transforms and several others. For such properties, Blend will only understand and generate the Microsoft-specific vendor prefixes.

• Part of the Windows 8 HTML UI platform is the WinJS toolkit (which is just a JavaScript library), which provides controls and other useful building blocks. Blend includes special tooling for several features of WinJS, such as controls or fragments. Using any of these features will create markup that relies on the availability of the WinJS toolkit, but use of WinJS is of course not mandatory.

Cheers, Lori Dirks Blend Team Community PM