Supercharged Styling: Quickly Finding and Setting a CSS Property in Blend
A core goal of Blend for Visual Studio is to make it fast and easy for developers who care about the quality of their markup to create professional looking apps. One of the many ways that the HTML Designer in Blend can speed up the CSS editing experience when developing Windows Store apps is by providing immediate visual feedback and enabling direct editing on a design surface that is actually running your application.
In addition, the CSS Property Inspector (CSS PI) has been designed to allow you to target specific CSS rules with these edits via the “Applied Style Rules” list and to further provide productivity improvements when managing complex CSS property sets by presenting them in a more manageable form. After hearing some great feedback from you on how we could better optimize our workflow, we have taken these concepts one step further with the upcoming release of Blend for Visual Studio 2013 by introducing additional productivity enhancements designed to further streamline your ability to create professional looking Windows Store apps in HTML. In this post, we’ll cover some of the new CSS entry efficiency improvements available in the CSS PI.
Category Editors
A good example of how the CSS Property Inspector can aid the entry of complex CSS properties can be found in the new Animation Category Editor available in “Arrange by: Category” view. We will cover this particular editor in more detail in a dedicated post about Blend’s brand new pure-CSS Animation editing features, but it is worth noting that the editor takes the set of comma separated CSS properties and presents them in an easily understood list / detail form that reduces entry complexity particularly when multiple @keyframes animations are referenced.
Category view is also home to several other new CSS property editors for box-shadow, text-shadow, font-family, and more. However, the reality is thatyou will frequently need to enter both simple and more complex properties in the same style rule when editing CSS. As a result, we found that most developers tended to use the CSS Property Inspector for more complex properties but jumpback to the code editor when entering known, simple property values thereby creating a disjointed and less efficient overall CSS editing experience. This problem has motivated us to go a bit farther in this release and introduce something called the “Search or Set Property Bar.”
Quickly Finding and Setting CSS Properties
Blend for Visual Studio 2013 has introduced a new “Search or Set Property Bar” to streamline the transition between the rapid entry of well-known properties and the full CSS editing experience found in the CSS PI. You can now jump to the search bar using Ctrl + Colon (Ctrl + Shift + 😉 and not only search but also quickly enter known CSS property values using standard CSS syntax. The CSS PI is automatically filtered down to the entered property and hitting enter sets it.
Typos can be also be quickly corrected since the incorrect name or value is selected automatically upon hitting enter so that you can simply start typing to correct it. In addition, multiple CSS properties can also be entered into the “Search or Set Property Bar” and pasted whitespace is automatically processed to enable quick cut-and-paste scenarios form one convenient place.
Visual Debugging
It is worth noting that the Search or Set Property Bar also enables exact-match filtering to specific properties (without setting them) using quotes or simply ending with a colon. This can be particularly useful for debugging CSS properties across multiple rules and elements.
After entering a set of properties into the search bar, one need only step through the style rules applied to an element via the “Applied Style Rules” list to determine which rule in the cascade is affecting the element in an undesirable way. All other properties are hidden to create a distraction free environment. Selecting “Winning Properties” in the Applied Style Rules list provides an excellent starting point for debugging across elements when combined with this same filtering capability since the values displayed represent a consolidated view of winning property values across all rules in the cascade.
Once a problem is identified, a fix can be entered using the method described previously but this would remove the applied filter which may not always be desirable. Fortunately you can also opt to leave the filter in place and jump down to the first visible property by simply hitting enter from the search bar. When combined with the CSS cascade visibility and the ability to create a new CSS rule directly from the PI (using the icon in the upper right of the “Applied Style Rules” list) this feature significantly speeds up style debugging, fixes, and tweaking.
Conclusion
These are a few of the numerous other improvements that have been introduced into Blend for Visual Studio 2013 that are designed to improve your overall productivity. We sincerely hope you find them every bit as useful as we do ! Please tell us what you think via the send-a-smile feature or through Visual Studio User Voice.
 |
Chuck Lantz – Program Manager, Visual Studio Client Tools Team Chuck spent over 15 years as developer, advocate, and architect in a variety of mid and large scale enterprise IT shops. He brought his passion for web based app development to Microsoft when he joined in 2012 and is currently focused on client HTML, CSS, and JavaScript tooling in Visual Studio. |
Light
Dark
0 comments