CSS editor that extends one-line ads when editing

Question

Is there a CSS editor that automatically extends single-line ads as multi-line ads in focus? To clarify my point, see the example below:

Original CSS:

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

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

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

And when he loses focus, the editor again automatically compresses it in a single line ad.

Thanks.

Answer 1

If you are using Visual Studio, you should be able to get close to this:

• You can change the CSS formatting format through the menu Tools → Options.
• Check "Show all settings" if it is not installed.
• Go to a text editor -> CSS -> Format and select the semi-split option
• Ok, you are changing.
• Then ctrl + A , ctrl + K , ctrl + D should reformat the document
• When you finish editing, go back to the options and select the compact CSS format, then ctrl + A , ctrl + K , ctrl + D to format again.

Hope this helps.

Answer 2

I have not heard of this. If you're on a Mac, I can definitely recommend CSSEdit . It makes automatic formatting very beautiful, among other things.

EDIT: I initially said, "although, as the remark says, this is a great idea," but thinking about it, is that what you really want? I see that it would be nice to have the onClick extension / reduction (in this case, TextMate - again Mac - although CSS support is not as good as CSSEdit), but onFocus?

Answer 3

Unfortunately. I do not know any IDEs that explicitly do this.

But there are many external options:

• CSSTidy (download)
• Clear CSS (in browser)
• CSS optimizer (in browser)
• others ... (google search)

Answer 4

da5id, I really don't care about implementation details (onclick or onhover, although onclick seems to be better when you say this;), I'm just wondering if there are any editors that support this feature in any way.

PS. I'm not on a Mac, but on Windows.

Answer 5

Not quite what you want, but try the windows textmate E Text Editor port, for a click on css bending rules, automatic generation and most other text functions.

Answer 6

You can do this using 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 convenient features from my collection, I can give them (and do some compression) if you are interested.

Answer 7

That's a good question. I would like to see this in the CSS editor. TopStyle does this, but it is not automatic; you are using a hotkey.