CSS editor which expands one-line declarations on editing

Question

Is there a CSS editor which automatically expands one-line declarations as multi-line declarations on focus ? To clarify my thought, see example below:

Original CSS:

div#main { color: orange; margin: 1em 0; border: 1px solid black; }

But when focusing on it, editor automatically expands it to:

div#main { 
  color: orange; 
  margin: 1em 0; 
  border: 1px solid black; 
}

And when it looses focus, editor again it automatically compresses it to one-line declaration.

Thanks.

Answer 1

Sorry. I don't know of any IDEs that explicitly do that.

But, there are quite a few external options:

• CSSTidy (download)
• Clean CSS (in-browser)
• CSS Optimiser (in-browser)
• others... (Google Search)

Answer 2

I've not heard of one. If you're on a Mac I can definitely recommend CSSEdit. It does auto-formatting very nicely, amoungst other things.

EDIT: I originally said "though as the comment says it's a great idea" but, thinking about it, is that what you really want? I can see that it would be good to have expansion/contraction onClick (in which case TextMate - again Mac - though CSS suport isn't as good as CSSEdit), but onFocus?

Answer 3

da5id, I actually don't care about implementation details (onclick or onhover, though onclick seems better when you say it ;), I'm just curious if there are any editors which supports this kind of feature in any way.

PS. I'm not on Mac but Windows.

Answer 4

If you are using Visual Studio you should be able to do a close approximation of this:

1. You can change how CSS is formatted via the Tools -> Options menu.
2. Check 'Show all settings' if it is unchecked.
3. Go to Text Editor -> CSS -> Format and pick the semi-expanded option
4. Ok you changes.
5. Then ctrl+A, ctrl+K, ctrl + D should re-format your document
6. When you are finished editing just go back to the options and pick the compact CSS format then ctrl+A, ctrl+K, ctrl + D to re-format again.

Hope this helps.

Answer 5

Its not exactly what you want but try the windows port of textmate E Text Editor, for on click folding of css rules, auto formating and most other textmate functionality.

Answer 6

You can do that with the scripting language of your favorite editor.

For example in SciTE:

function ExpandContractCSS()
  local ext = string.lower(props["FileExt"])
  if ext ~= "css" then return end
  local line = GetCurrentLine()
  local newForm
  if string.find(line, "}") then
    -- On one line
    newForm = string.gsub(line, "; *", ";\r\n  ")
    newForm = string.gsub(newForm, "{ *", "{\r\n  ")
    newForm = string.gsub(newForm, " *}", "}")
  else
    -- To contract
    -- Well, just use Ctrl+Z!
    -- Maybe not, code to come if interest
  end
  if newForm ~= nil then
    ReplaceCurrentLine(newForm)
  end
end

GetCurrentLine and ReplaceCurrentLine are just convenience functions from my collection, I can give them (and do the contraction part) if you are interested.

Answer 7

It's a good question. I'd love to see this in a CSS editor. TopStyle does this, but it isn't automatic; you have you use a hotkey.