The TSW Blog

 One of the features I really like in WebCoder, which might not be used as much as I could hope, is the CSS overview tree. It can be found on the "CSS" tab, and it can give you a good overview of a CSS document. However, the really cool part about it is that it can give you an overview of the CSS code in your HTML files as well! It looks for a <link> reference to an external stylesheet, or a <style> block, and then parses the CSS code it finds and shows it in the tree structure. This allows you to see which CSS selectors you can use while you actually need them, in the markup. However, the feature goes beyond that, and allows you to doubleclick the selectors to edit the CSS code - again, without leaving your HTML code. They can even be previewed, and if you're using the QuickPreview feature, it will be updated whenever you edit a CSS selector. In other words, you can do almost anything with the CSS code, without leaving the HTML. Very cool, if you ask me :). In case you've missed this feature, then be sure to have a look at the description, screenshot and demo video at the TSW WebCoder page.

Anyway, for those of you who use this feature a lot, I'm happy to tell you that it will be in the next version of WebCoder as well, in a new and improved version. In previous versions, this feature would only show CSS from one source, but in the coming version of WebCoder, multiple sources of CSS code is not a problem. It can be from several <link> sources and/or several <style> blocks. You can also attach multiple stylesheet files to your project, and WebCoder will look for CSS code for project files in these instead of having to search for them in your documents. Have a look at the screenshot, which will show the CSS overview tree with selectors from both a linked .css file as well as an internal <style> block from the current document.