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

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.

Published Wednesday, September 19, 2007 11:15 PM by Jon Galloway

Comments

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

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

Thursday, September 20, 2007 3:54 AM by Eddie Groves

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

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!

Thursday, September 20, 2007 6:26 AM by Paul Farnell

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

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

Thursday, September 20, 2007 11:30 AM by todd brooks

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

@todd brooks

Did you try launching the program as administrator?

Thursday, September 20, 2007 1:05 PM by Jon Galloway

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

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.

Thursday, September 20, 2007 2:23 PM by Ryan Smith

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

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.

Friday, September 21, 2007 10:33 AM by Ryan Haney

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

> Did you try launching the program as administrator?

Yes, running as administrator with UAC disabled.

Friday, September 21, 2007 2:24 PM by todd brooks

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

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

Monday, September 24, 2007 12:15 PM by kevin

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

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!

Tuesday, September 25, 2007 8:45 AM by Anna

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

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?

Monday, October 1, 2007 9:21 AM by Craig

# re: CSSVista - Edit your CSS code live on both Internet Explorer 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.

Wednesday, October 10, 2007 7:34 PM by Richard

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

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.

Thursday, October 25, 2007 5:28 PM by Marc Brooks

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

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..

Tuesday, July 15, 2008 6:26 PM by Grant