CSSVista - Edit your CSS code live on both Internet Explorer and Firefox

CSS editing is extremely frustrating without immediate feedback. Until a few years ago, you didn't really have a choice: you typed some CSS, you refreshed the page, you tried to figure out what was wrong, repeat until you hopefully got it working.

Then came the Firefox Web Developer Toolbar, and things started to get a whole lot easier. The Firefox Firebug extension and the IE Web Developer Toolbar let you work interactively with the the two main browsers, albeit one at a time. I usually pick one or the other, get a design working, and verify / fix it in the other browser.

Today Mike linked to something that might change that: CSSVista, a free tool which lets you edit CSS and immediately see the results in both IE and Firefox. I tested it out on the Silverlight website, modifying the CSS to include a content injection declaration which IE doesn't support so you can see this in action:

CssVista

Here's that CSS block in case it's hard to read in the screenshot:

div.homeModule:before 
{
    content: "monkey";
    font-size: 40px;
    color: red;
}

I think this one's a keeper, and I'll be watching for future releases.

13 Comments

  • Now we just need a way to do this with IE6/7 and we're getting somewhere...

  • Eddie - we're working on a version which will include IE6, IE7, Firefox 1.5 and Firefox 2.0. Keep an eye on the site for updates!

  • Has anyone installed this on Vista x64? It installed just fine, but blows up when launched, for me on a virgin Vista x64 installation.

  • @todd brooks
    Did you try launching the program as administrator?

  • Wow, that looks like it's going to be a very handy tool. I'm surprised that something like this wasn't invented years ago.

    Thanks for the link.

  • While I think CSSVista is cool, what we really need, assuming the browsers are never going to be standards compliant and pixel perfect, are frameworks and tools that make it easier to develop. I've created a CSS manager that is placed in the master page. The CSS manager dynamically places link elements in the header based on the browser that hits it. Typically, only two stylesheets are loaded, "Common.css" and "{Browser}{Version}.css" (or IE6.css, IE7.css, Firefox2.css etc.). Combine this with the web dev toolbars for IE & Firefox and you have a decent solution. The goal is to only use CSS rules that are supported by both browsers in Common.css while adding specific tweaks to the browser specific stylesheets...all without brittle hacks. This also takes advantage of the CASCADING feature of CSS.

    Now, for the ultimate tool, I can envision a CSS designer where you load a webpage and style it to your desire. When you are ready to save, there would be an export process that would create the stylesheets for your target browsers. Once implemented in your pages, either through javascript or server side means, the respective stylesheets are loaded dynamically.

  • > Did you try launching the program as administrator?

    Yes, running as administrator with UAC disabled.

  • jon, nice find. I actually just installed this earlier today. gonna give it a try - brilliant idea.

  • This is (hopefully) going to save me a lot of headache. And that IE6/IE7-compliant version is something I will look closely for, that could even spare me going insane... ;)

    Great tip about a great application!

  • Hi, This tool looks like it may save me hours however when i installed it it seems to be viewing IE7 and Firefox. Is there any way to get it to view IE6 and firefox?

  • Hi Craig,

    I found that CSSVista uses the default IE engine on your machine so if you are mainly designing for IE^ and Firefox, then you will have to uninstall IE7. Alternatively, you can use MultipleIE to see how your page renders in IE6. Unfortunately IE's Web Developer Toolbar will also only work in your default IE installation (IE7). I am really looking forward to the version of CSSVista that renders both IE6 and IE7 as I am sure are a lot of people.

  • Ryan,
    Due to user-agent spoofing, I've found it much more reliable to write CSS against FireFox and then use IE conditional comments to yank in (conditionally) the fixups needed specifically for that browser. Of course Safari and Opera are then a problem, but you can play similar games for them.

  • Also tried this on Vista x64 and having the same issue as todd brooks; it installs fine but won't run, even as Admnistrator.

    Disappointing, as this would be a very handy tool..

Comments have been disabled for this content.