The making of "WebCoder.NET" – part 5

February 19, 2007

 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.

Kasper (TSW) @ 5:20 pm in TSW

2 Responses to “The making of "WebCoder.NET" – part 5”

  1. Have you made it so it also takes the @media-keyword into account?
    This, i think, was missing in the old version…

  2. Hi Kasper

    Just reading the blog on WC .net Interesting. I don’t use the css pane because whilst it does look at links, it doesn’t follow @imports in the style.

    I have recently been looking at Expression Web from MS too (as the school I teach in will be using it from September). It has some cool tools. As it is a .net2 app, have you looked it over (there is a free 60 day demo right now, 200MB download. Our school licence is about US$55 per workstation.

    Maybe your code parser will now parse php when inside css style that is in the head of a html page (I see that tsWebCoder does do this).


Leave a Reply