Menu
The undesired functionality
In Chrome 95 there was introduced new functionality where the user can hover and click on the unit part of a css value to hotswap the unit.
The feature is part of a package solution that has been labeled "Length Authoring Tools" in the release notes, and can be seen in action and described in detail in the release notes on the official blog.
How can this feature be disabled?
Issue 1:
If a css-line in the inspector says padding: 0 10px; then the user can click the px-part of the line and open a selector that let's the user swap px to other units such as rem,vmax or in.
Clicking this part of the value no longer lets the user edit the entire value quickly. Most users already know what unit they desire to use beforehand, so they do not need to be helped to accidentally select pt or vw when working exclusively with px everywhere else.
Issue 2:
When selecting and copying properties from the inspector there is now inserted whitespaces/new lines between the value and the unit since the unit portion seems to be considered a separate element. This makes prototyping in the devtools and copy/pasting to external documents very tedious and broken.
763
Navigate to Device > Chrome > Settings. Scroll down to User Experience > Developer Tools. Select the "Never allow the use of built-in developer tools" option from the dropdown.
Goto chrome://flags/#enable-devtools-experiments , and enable Developer Tools experiments . Select Relaunch Now at the bottom of the page. F12 to Open developer tools, go to Settings , select Experiments tab, and check Allow custom UI themes .
Change where DevTools is docked by using the Command Menu Or, press Shift + Ctrl + P on Windows/Linux or Command + Shift + P on macOS. Type dock, and then select a dock command: Dock to bottom.
Complete these interactive tutorials to learn the basics of viewing and changing a page's CSS using Chrome DevTools. Right-click the Inspect Me! text below and select Inspect. The Elements panel of DevTools opens. The Inspect Me! element is highlighted in the DOM Tree. Inspect Me!
DevTools added an easier yet flexible way to update lengths in CSS! In the Styles pane, look for any CSS property with length (e.g. height, padding ). Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.
Once in Google Chrome and at your webpage, Open the Chrome developer tools by right clicking and selecting “inspect” or by pressing ctrl-shift-i. In the top left of the Dev tools panel is the element selector, circled red in this image:
The Styles tab on the Elements panel lists the CSS rules being applied to whatever element is currently selected in the DOM Tree, which should still be the Inspect Me! element in this case. Find the aloha class rule. The fact that you see this rule means that it's being applied to the Inspect Me! element.
Updated answer 2021-11-16:
The following is mentioned in the official release notes for Chrome 96.
To disable Length Authoring Tools, navigate to this location in the DevTools and uncheck the checkbox:
Settings > Experiments > Enable CSS length authoring tools in the Styles pane.
The initial incentive to disable these tools has been greatly diminished because of this.
A chevron will now appear to the right of the hovered value instead of reacting to clicks to the entire unit portion of it.
Copy paste now also works as intended.
Conclusion:
It is now possible to disable the Length Authoring Tools, but you might no longer need to.
Old answer:
Fixes have been added to Chromium ( [1], [2], [3] ) that are slowly making their way to the stable release of Chrome.
But help is on its way...
Chrome 96 is scheduled to be released on November 16 2021 (source), or ~3 weeks after October 28 according to this official tweet. It will at least contain a revert to free text editing of css properties (source). Hopefully version 96 will address the issue completely, but if it doesn't then the next major release is scheduled for January 4 2022 (If this issue is unresolved by then somebody at Google should be fired).
As for now, Chrome Canary seems to have these fixes implemented and might be considered an alternative solution to the issue if you find the current state of Length Authoring Tools unbearable.
Please be advised that Chrome Canary can be quite unstable.
This question and answer will be edited and corrected once there are real fixes in the live stable version.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
