Copying CSS from devtools copies spaces

Question

My workflow for CSS often includes that I tingle around in devtools, add/change CSS in the browser and when the values fit my needs I copy the CSS and paste it in my .scss-file.

Now since a while my copied CSS includes spaces for formatting.

CSS in Chrome

div {
    width: 100%;
    background-color: yellow;
}

Copied Code in Editor

Now when I copy the properties (width & background-color) and paste it in my editor I copy it as follows:

..width: 100%;
..background-color: yellow;

(dots indicate spaces)

Is there a way to copy the CSS without the spaces, like this:

width: 100%;
background-color: yellow;

Every time I paste the CSS it messes up my formatting, I therefor do a lot of unnecessary formatting. (like removing the spaces as I use tabs and not spaces)

I know the spaces were added some months ago, before you could just copy the CSS without spaces.

Try snappysnippet? https://chrome.google.com/webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil?hl=en from this question/answer: http://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-existing-sites — ctwheels, Jun 01 '15 at 15:05
Outside of the box suggestion - can you copy your code into excel and do a trim on all the code - that would get rid of all spaces quickly then you can copy-paste that into your code editor? — Justin, Jun 01 '15 at 15:06
I was more hoping to change the settings my CSS gets copied from devtools, I don't really want to have an extra program like excel open. I could also use `find`/`replace` in my editor, but that is also extra "work" — MMachinegun, Jun 01 '15 at 15:09
about snappysnippet: seems like a cool tool, but for an other job. Most of my CSS I already have in my .file , I just copy some CSS I want to save in the .file . Not the whole block :) — MMachinegun, Jun 01 '15 at 15:17
There is a purpose for the formatting - if you select whole rule (including selector and braces) & paste in text editor it will look perfectly formatted with correct indentation. — Praveen Vijayan, Jun 04 '15 at 14:06
I understand the purpose, but for my personal use I would prefer not having the formatting done for me. Usually I just copy some values and not the whole code (without selector & braces). Thanks for your response anyway :) — MMachinegun, Jun 04 '15 at 18:34

score 9 · Accepted Answer · answered Jul 29 '15 at 06:58

9

I was looking for this too and the closest thing I found is at the Chrome developer tools > settings > Sources > Default indentation. Unfortunately there is no option for zero spaces.

answered Jul 29 '15 at 06:58

tgogos

23,218
20
96
128

thanks man, this is really closest to what I was hoping for! If there was an option for 0 indentation it would be here :). But at least you can choose between tabs and spaces :D:D – MMachinegun Jul 29 '15 at 09:50
and I might just file a feature request at chrome for 0 spaces – MMachinegun Jul 29 '15 at 09:52

score 1 · Answer 2 · answered Jun 01 '15 at 15:22

1

It is not possible to copy from styles inspector without these spaces.

One solution is to click on the stylesheet name near the style, open the css in Sources tab, then align the required code to left by pressing Shift+Tab and then copy.

answered Jun 01 '15 at 15:22

Felix A J

6,300
2
27
46

score 0 · Answer 3 · answered Jul 21 '15 at 15:11

0

In most editors it's simply: Ctrl-A then Shift-Tab.

answered Jul 21 '15 at 15:11

Ron Richardson

111
1
6

Copying CSS from devtools copies spaces

3 Answers3