有效方法:在 Blend中快速寻找和设置CSS属性

[原文发表地址] Supercharged Styling: Quickly Finding and Setting a CSS Property in Blend [原文发表时间] 2013-09-12 8:00 AM         Vs中Blend的核心目标是使那些关注他们开发出来的APP的质量的开发者们更加快速简洁的开发APP。当开发APP时,要想使HTML设计者在Blend中快速掌握CSS编辑,一个好的方法就是直接提供一个可视反馈机制,并且可以在设计界面上直接编辑,这样实际上是边开发边执行你的应用程序。         当听到我们如何能更好的优化我们的工作流的类似的反馈后,我们已经将这些观念引入到即将发布的VS2013的Blend中,让你以现有的能力开发出足够专业的windows APP。另外,当你想通过更多的可控形式管理复杂的CSS属性时,你可以通过“应用样式规则”列表来设置特殊的CSS规则。这次,我们将在CSS编辑器中提供一些新的有效的CSS输入方法。 类别编辑器         举个例子:在Animation类别编辑器中以category排序,你可以发现CSS属性编辑能够输入复杂的CSS属性。 我们将在CSS animation编辑器中,使这特殊的编辑方法应用到更多的细节,但值得注意的是,当引用多个animations时,编辑器用了一组逗号分隔CSS属性,并且在一个简单易懂的列表中显示他们,使减少输入复杂的属性。         类别视图包括几个其它的类别编辑器,如:box-shadow,text-shadow,fon-family等等。尽管如此,当你在编辑CSS时,你将在一个样式中需要输入简单的和更多的复杂的属性,最终,我们发现大多数的开发者倾向于使用CSS属性编辑器去写复杂的属性,而遇到已知的,简单的属性时会在代码编辑器里编辑,从而造成了脱节没有效率的CSS编辑体验,这个问题促使我们在这一次的发布中引入了“Search or set propert Bar”。 快速寻找和设置CSS属性         Vs2013中的blend 引进了一个新的”search or set property bar’ 来使从快速进入众所周知的属性和在CSS编辑器中发现的所有的CSS编辑经验有一个平稳的过度。 你现在可以使用快捷键 Ctrl+.(Ctrl+Shift+;)打开search bar,不仅可以寻找而且可以直接输入已知的CSS属性值,CSS属性编辑器会自动的过滤出输入的属性,并且可以直接设置输入。         当输入不正确的变量或值时,错误的输入可以被快速的修正,所以你可以简单的输入然后选择正确的输入。 另外,多数CSS属性可以被输入或者粘贴到“search or set property bar”。 调试         值得注意的是”Search or…

0

对于Visual Studio 2013中 Blend的HTML开发人员来说什么是新的

[原文发表地址] What’s new for HTML Developers in Blend for Visual Studio 2013 [原文发表时间] 3 Sep 2013 9:30 AM         在6月Windows的Build 研讨会上,我们向世界介绍了Visual Studio和Blend 2013 Preview版。随着这次的发布,我们极大地扩展了Visual Studio对于用JavaScript、HTML、CSS创建Window Store Apps的支持,除了在Visual Studio中发现的客户端诊断和调试工具外,Blend同时还提供了主机功能,旨在通过打破那折磨人的“编辑-刷新”周期来提高效率。         在本文中,我们将深度剖析一下Blend中三个改善 HTML/CSS开发最多的的部分,包括创作CSS Animations新的工作流程(1)、嵌入自定义字体(2)和数据绑定属性(3)。 CSS 动画          W3C CSS ANIMATIONS 规则描述了一个极其强大的句法,但是该句法还是比较复杂的,难以单独通过代码来使其呈现出来,并且不容易调试。幸运的是,创作动画有行之有效的模式。在这个版本中,Blend采用了最熟悉的模式之一:基于时间轴的创作。         通过动画时间线,开发人员可以擦除至任意时间点,添加keyframes,拖放关键规则,修改迭代次数,设置填充模式等。简而言之,你可以编辑任何一个或者每个W3W规则描述的CSS动画。         大多其他的动画创作工具需要一个JavaScript的依赖,但是Blend时间轴却是众多中独一无二的一个,因为它创建了一个单纯的并且无需JavaScript或其他框架的CSS动画。一切都百分之百的符合CSS标准。这就意味着开发人员可以打开编辑任何网络中发现的CSS动画。         我们同样注意到大多数的动画工具只允许编辑工作程序以外的范围。不幸的是,这种隔离是有代价的:开发者无法看到DOM中的动画是如何与其他元素交互的。使用Blend,在工作程序范围内开发者能直接删除并且编辑动画。这就意味着如果你设置动画一个元素的宽度,例如,你就能看到它如何影响相邻元素的布局。         虽然动画应该谨慎使用在任何程序中,但正是谚语中的“锦上添花”促使我们做最好的应用,使得它们看起来灵敏、完美、现代化。我们认为动画时间轴编辑器将会向那些期望往组合里面添加一些动作的UI开发人员证明这是无法估价的。 嵌入自定义字体         对于所有影响品牌视觉形象的设计元素来说,没有什么比排版更重要了。文字的格式必须清晰,能在任何一个尺寸呈现出来,并且留下一个唯一的印象。为了达到这些目标,图形设计师经常利用一些不是Windows自带的字体系列。以往,UI开发人员通过图片、Flash、或者SVG文本把这些相同的自定义字体加入到网站或者应用程序、。不幸的是,文本替换一个长的字符串(例如一个段落)几乎是不可能实现的,并且增加了文件的大小以及载入时间。         为了克服这些弊端,开发团体最近估算了CSS3潜在的功能,就像字体外表。高分辨率时代同样恢复了对自定义图标字体的兴趣,将它作为创造性地提供可扩展图形的一种方式。         按照这种趋势发展,Blend现如今通过字体外表规则提供一些了便于向应用程序中添加自定义字体的加速器,支持字体的文件可以被加到既定的项目中,并且通过简单地选择右键菜单中的“字体外表规则”来创建属于它的规则。  …

0