CSS editor with real-time preview and selector localization

The title says everything about what I'm looking for. Basically it should be an software that collects all styles of a website so I can edit them and save them.

Please read the question carefully, because I want all mentioned conditions to be met.

EDIT: I want to be more clear here or rather describe my desired workflow. Starting situation will be that you have the sources of the website on your local machine.
Now I want to open the plain sources (HTML/CSS) in my editor/IDE/whatever (no WYSIWYG!). And I want a live preview right next to it or in different window (not in another tab!), I want to see it as I edit the source. The preview should be updated automatically (or when I save the file which essentially would be the same because CTRL+S is kind of a reflex :P).
Additionally it should have an inspector that works like those in Firebug or Chrom(e|ium). When I click on a CSS selector in that inspector, the cursor should jump right to it in the respective source file.

ANOTHER EDIT: Found this https://stackoverflow.com/q/4680109/220652. Almost the same problem.

Solution 1:

There are a few options.

Currently I simply use Google Chrome's Developer Tools (Action Video) as it allows for a wide range of inspection, detailed reporting, and over-riding. After making my changes I just copy the updated CSS and over write the relevant sections of the CSS file, refresh, continue plugging away.

Here I have edited a definition in Chrome's Developer Tool

I can follow the file name and line number (after copying the changes) and just paste them into the editor

Beyond that there is a tool recently launched called WebPutty which is designed to alleviate your described problem. While I haven't used it personally yet it's developed by Joel Spolsky's company Fog Creek Software (Joel is also Co-Founder of StackOverflow) So I'd be willing to bet it's a relatively stable, simple, and effective product.

Solution 2:

This question seems to have already been discussed but you are more specifically talking about a CSS Editor. And I am sure that's why they haven't marked your question as duplicated.

However, what I can suggest you is the usage of several tools which I have posted in answers to other questions, like this: Dreamweaver alternative in ubuntu?, and even when I can bet that you have already seen it, I transcript it here for your convenience:

Your question seems to be a little bit ambiguous.

First of all and related to the alternative to Dreamweaver, I found all the suggestions of all the other answers excellent, but when looking for an alternative to Dreamweaver, the closest application -for me- it was the Amaya Project. Which seems to be richest than other alternatives and a little bit more sophisticated than the Kompozer.

A screenshot from the official web is here for you to see it in action:

Additional screenshots can be reached by clicking the next link: http://www.w3.org/Amaya/screenshots/Overview.html

You may find it a little bit unstable, or at least it was for me but it may also fit your needs.

After playing with WYSIWYG editors, I prefered direct encoding with BlueFish but it is not a WYSIWYG editor.

And about the suggestions for your issue with the firebug I can't say anything, sorry.

Please let us know how did you do if you give Amaya a chance.

Good luck!

Edit == After installing Amaya, I find it yet far from stable but somehow it seems to have a better features than other applications, if you consider that other software are simple Text Editors and Amaya is like a WYSIWYG editor.

I tested what you said in your comment and I found that Amaya don't even get noticed that something changed in the files/folders structure/name. Which won't fit your needs related to this.

In the next screenshot you can see I renamed the "resources" folder to "resources1" and Amaya is yet showing it as "resources" and there is no way to force it refresh. Even after restarting the software and loading the project again, Amaya won't notice it.

I am going to follow your question closely hoping somebody come and drop a good alternative.

Good luck!

Also, in the answers of other users to the same questions I found the "Blue Griffon Web Editor" which seems to be the only stable web editor that features a real time preview window, that -btw- can't be seen in split mode. You can only see the code or the WYSIWYG preview, not both at the same time.

Screenshots placed here for your convenience:

Preview Screen:

Code Screen:

This tool includes lots of useful tools but some of the add-ons or plugins may be non-free (paid). Which reduces the attraction to it.

The Aptana Studio 3, which I reccomend in this answer: Basic Web Development IDE/Editor like Dreamweaver? is -for me- the best tool for programming, since I can live preview using a web browser in my dual view extended desktop. Which may be not your case.

That's what I can suggest. Sorry if this don't fit your needs and...

Good luck!

Solution 3:

Ok, everbody listen! Geany is just AWESOME! It has a plugin that adds a browser preview. You can place it in the sidebar, in the "bottombar" or in an extra window. And now the two extra bonus bad ass killer features. 1. This browser uses WebKit. That means, it has this awesome inspector! 2. The browser reloads when you save an open document.

Besides this it has so many other awesome features but you should try it yourself. I for one just fell in love. Here you have a screenshot:

Solution 4:

Sorry folks, but I will answer my own question. I just found Stylebot. It meets almost all conditions I have. It doesn't have any auto completion but I can live with that.

Here is a screenshot. The sidebar is Stylebot. You have a basic editing mode where you can quickly edit some simple properties, an advanced mode where you can edit the plain CSS for the selected element and with "Edit CSS" you can edit the whole CSS for the page.

Solution 5:

Try the Firefox addon Firediff. It integrates with Firebug adding the "Changes" tab, which, as the zen-like name suggests, shows any changes you make to the CSS or DOM.

Right click a CSS change in the "Changes" tab to save either a diff or a snapshot of your changes.

There is also cssUpdater, though I haven't used it.

As for "selector localisation", I'm not totally sure what you mean but there is selectBug, which you can download here.