Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Line Breaks are Inserted when Copying CSS Rules from Chrome Developer Tools [duplicate]

I have no idea why this has started happening but it is very annoying...

Basically, now when I copy CSS from Google Chrome Inspector, it formats it as follows:

border-radius: 50%;
    width: 26
px
;
    height: 26
px
;
    color: transparent;
    margin: 0 auto;
    padding: 0;
    position: relative;

Instead of how it's always worked like so:

border-radius: 50%;
width: 26px;
height: 26px;
color: transparent;
margin: 0 auto;
padding: 0;
position: relative; 

Any idea on why this is happening and how I can fix it?

EDIT: I think it's to do with the latest Chrome update...

It seems it now has an option to set which metric you want to use, i.e. PX, EM etc...

Can this be disabled somehow?

enter image description here

like image 925
nsilva Avatar asked Oct 27 '21 08:10

nsilva


People also ask

How do I copy CSS in Chrome?

On Chrome (without CSS Scan): On the left side is the HTML DOM tree, and on the right side, the CSS styles of the selected element. Having the right element selected on the HTML DOM tree, right-click on it and choose “Copy” > “Copy styles”. And done, the CSS was copied! That's how you copy CSS from “Inspect element”.

What does a strikethrough in a CSS element mean in your browser's developer tools?

If you can see your new CSS in the Styles pane, but your new CSS is crossed out, it means that there's some other CSS that is overriding your new CSS.

How do I save CSS changes of styles panel of Chrome developer tools?

To save your changes, press CTRL + S when editing the file.


Video Answer


2 Answers

It used to copy normally, now it takes those silly breaks.

I found this - https://support.google.com/chrome/a/answer/7125792

If you select CSS and Copy (Ctrl+C) it's broken, but if you use right-click > copy it's clean format.

//Hey, I have a solution. The Chromium developers have fixed it in the latest update .96 (it is not known when it will be stable) - until then, you just need to download Google Chrome Canary - it is fixed there. For now the stable version (with faulty CSS copying) is .95, please wait for the .96 update.

like image 101
Damian Szymański Avatar answered Oct 01 '22 14:10

Damian Szymański


By reading the comments on the following bug report, I guess they're going to rollback this feature and go back to plaintext CSS editing.

https://bugs.chromium.org/p/chromium/issues/detail?id=1259088

Many people are complaining so we may have a setting in the future to enable/disable that.

like image 23
Sebastien Avatar answered Oct 01 '22 15:10

Sebastien