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.
If you are using Visual Studio you should be able to do a close approximation of this:
You can change how CSS is formatted
via the Tools -> Options menu.
Check 'Show all settings' if it is unchecked.
Go to Text Editor -> CSS -> Format and pick the semi-expanded option
Ok you changes.
Then ctrl+A, ctrl+K, ctrl+D should re-format your document
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.
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?
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)
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.
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.
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.
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.
Related
I have problems with the use of ! in my CSS code.
If I take the example in the Emmet documentation :
p!+m10e!
Should produce:
padding: !important;
margin: 10em !important;
On my side, it doesn't work. p!+m10e works, but p!+m10e! does not. The final exclamation point seems to be a problem.
I did another test with dn! to display display: none !important;, the problem is the same.
Do you have an idea?
Enabling Trigger Expansion on Tab seems to have solved the problem on my machine.
The solution lies in disabling text-suggestions. In fact, I think the fact that IntelliSense shows the !important and !default
when you type an exclamation mark, makes Emmet mess up.
So I disabled this:
"editor.suggest.showWords": false
If you prefer the UI, you can also find it by doing the following:
Navigate the menus: click on - File > Preferences > Settings (or
press Ctrl + ,)
Type Show Words in the search box at the top
Uncheck the setting Editor > Suggest: Show Words
A few observations, this may help future readers:
CTRL + Space forces the non-suggested(intellisense) expansion.
"emmet.triggerExpansionOnTab": true also expands non-suggested option.
If you type dn!i it will give you suggestion dn: i !important; then you delete 'i' then hit enter/tab, it expands as expected.
I think the bug https://github.com/microsoft/vscode/issues/120245 still hasn't been resolved completely. Otherwise you could've typed 'dn!important` and it would've expanded as expected.
I'm working with a friend on a project with a huge CSS file.
There is a lot of duplication like:
h1 {
color : black;
}
h1 {
color : blue;
width: 30px;
}
The first h1 can be removed, because it will never be used, because fully rewrited by the second. (because it is in the same CSS file)
I would know if it exists a tool that factorizes (and compress) this kind of stuff.
To only have at the end:
h1 {color:blue;width:30px}
PS: If it can be an online tool, it will be perfect!
There's a nice one in ruby: http://zmoazeni.github.io/csscss
In node.js: https://github.com/rbtech/css-purge
Both are very easy to use from command line.
This is also a nice once: http://cssmerge.sourceforge.net
And a plugin for Firefox: https://addons.mozilla.org/en-us/firefox/addon/css-usage
First you can try
CSS usage checker
Then Try these
CSS Compressor
Javascript Compressor
If you are using Firefox, you can use this addon which will help you achieve it.
https://addons.mozilla.org/en-us/firefox/addon/css-usage/
It creates a new css which tells you only used rules and sideline unused one. It also lets you export that css.
I'm searching for the correct style to configure CopySourceAsHtml to change my Selenitic style to default Visual Studio style when I copy and paste it to e.g. an e-mail. Does anybody know what CSS style(s) I need to use to set it up correctly?
When I copy & paste source code an e-mail I get a dark background. If I set it to white it will show all text in light colours which are hard to read. So I need to change the complete style.
How does your plugin expect the CSS to look like? If you open the theme I referred to in the comments above in a text editor you'll see a lot of lines like this:
<Item Name="outlining.collapsehintadornment" Foreground="0x00E8DDD7" Background="0x00FAF7F6" BoldFont="No"/>
Now since I don't know how exactly your plugin is expecting the CSS I will go ahead and give an example of what this might look like in CSS:
.outlining-collapsehintadornment
{
color: #D7DDE8;
background-color: #F6F7FA;
}
Or:
<Item Name="String" Foreground="0x001515A3" Background="0x02000000" BoldFont="No"/>
Becomes
.String
{
color: #A31515;
background-color: #000000;
}
How did I get this?
Visual Studio settings file save color codes as "code hex" values. And they use BGR instead of RGB. This means that you can convert this VS color hexes very simple to HTML color hexes. And since HTML uses RGB don't forget to invert the code. So for example:
0x00E8DDD7. Replace the 0x00 (sometimes this may be 0x02) with a #. And then swap the first 2 and the last 2 characters (BGR to RGB). So you get #E8DDD7 = #D7DDE8. And of course "Foreground" is text-color and "Background" is background-color...If your plugin supports it you might even consider to write font-size: bold if you see BoldFont="Yes" in your XML.
Summarized: Open the VSSettings file I referred to in my comment above in a texteditor. Then convert everything to CSS. Write a simple program to do this, or do it by hand, whatever you prefer. Just remember that this is just an example of what it might look like. I don't know what "CopySourceAsHtml" is expecting your CSS to look like.
Using PHPStorm 3.0:
Is there a way to tame auto-completion in css files?
I've disabled everything in "Preferences > Editor > Code Completion", yet I still observe the following behavior:
Say I'd try to type
.list {
}
When typeing ".list" and pressing the space key to add a { bracket, PHPStorm automatically expands .list to
.list-style-type:
;
This happens with almost every other word that also occurs as a css property even in comments
Any ideas on how to stop this without altering PHP/JS auto complete behavior?
It seems you set Space shortcut for live template expanding (Settings | Live templates). If so, this behaviour is by design.
Go to Editor > General > Code Completion.
Uncheck Insert selected variant by typing dot, space, ect.
After doing this, your example of .list { will no longer insert .list-style-type: when pressing space before the {.
Eric Meyer's advice to keep individual rules alphabetized in a CSS style definition makes sense - there's no "natural" way to order rules, and this makes it easy in a complex definition to make sure you don't define the same thing twice.
div.Foo
{
background:Green;
border:1px solid Khaki;
display:none;
left:225px;
max-height:300px;
overflow-x:hidden;
overflow-y:auto;
position:absolute;
top:0;
width:230px;
z-index:99;
}
So my question: Is there a plugin or some other easy way to select a list of rules in Visual Studio and alphabetize them? (Better yet, to apply this throughout a stylesheet in one fell swoop.)
Update
#Geoff suggests CleanCSS, which is very cool and will do the above-requested alphabetization all at once, in addition to a lot of other nice clean-up (e.g. merging definitions with the same selector). Unfortunately it collapses multiple selectors in a definition into a single line. For example
div.Foo,
div.Foo p,
div.Foo li
{
color:Green;
}
becomes
div.Foo,div.Foo p,div.Foo li
{
color:Green;
}
which is much harder to read and kind of a deal-breaker. This is with the lowest compression setting, and I don't see a way to override it.
Ben's answer is correct but is error prone but lead me to this plugin:
https://github.com/mrmlnc/vscode-postcss-sorting
Simply add this to your settings.json after installing,
"postcssSorting.config": {
"properties-order": "alphabetical"
}
Then in the vscode command panel (cmd+shift+p) choose PostCSS Sorting: Run
There's lot of other great config options too including how to handle comments.
I don't know of anything in visual studio, but there online tools to clean up and format css. I've used CleanCSS with success
Update:
Try this one Format CSS Online. It seems to output the lines more like you want
In fact it's much more simple and you do not have to install any plugin.
Just go File > Preferences > Keyboard Shortcuts
Then Type Sort lines ascending, then map a keybinding to that.
Use CodeMaid. Ctrl+M+F9 will sort any text in your selection, regardless of type.
In 2021, I found this extension that does the job perfectly ; It also can sort any blocks codes in others languages: https://marketplace.visualstudio.com/items?itemName=1nVitr0.blocksort
Important note: You must first group the selectors on a single line, otherwise the plugin will not understand that they go together. For example:
// Don't do this
.rule1,
.rule2 {
color: red;
}
// Do that
.rule1, .rule2 {
color: red;
}
In VSCode. Just attach a key binding to the
“Sort Lines Alphabetically” command.
File > Preferences > Keyboard Shortcuts
Type “sort lines” in the search box and add a keybinding to Sort Lines Alphabetically. For example Ctrl+Cmd+O.
However you need to be careful with your formatting as this feature is not smart enough to move css properties that are wrapped to multiple lines.
There's a VSCode plugin called CSS Alphabetize that should allow you to do this.
Disclaimer: I'm the author. Not trying to plug it, just happened to come across this article.
https://marketplace.visualstudio.com/items?itemName=PolymerMallard.css-alphabetize
It's not a plugin and it doesn't know about CSS but it's often helpful: a spreadsheet such as Excel or Google Spreadsheets.
I often cut code, paste it into Excel, munge it a bit, and paste it back into my editor. I find this technique especially useful for quick alphabetizing.