Inspecting css that is within an @supports declaration looks the same as normal CSS - should have visual indicator
Reported by
jonmclar...@gmail.com,
May 2 2017
|
||||||
Issue descriptionChrome Version: 58.0.3029.81 Stable build of Chrome This seems like a bit of a flaw in Chrome's current implementation of @supports. When inspecting an element that has styling which is in an @supports declaration, there is no indication that the class/styles are within an @supports. All of the other @media, @print etc, queries are displayed, @supports is equally as important to display. Here's a test case https://codepen.io/thewebtech/pen/aWwEZr Steps To Reproduce: (1) go to the page above. (2) inspect the body of the page. Expected Result: Like it shows for @media(max-width:767px) or any other query, it should display the styles are within the query. Actual Result: http://pocket-giants.d.pr/nXVEc+ No indication at all. How frequently does this problem reproduce? Always What is the impact to the user? Impacts only developers and can cause confusion.
,
May 5 2017
Unable to reproduce the issue on windows 7 using chrome version 58.0.3029.96 with the below steps 1.Opened the URL https://codepen.io/thewebtech/pen/aWwEZr 2.Inspect on the body of the page 3.Observed the same behaviour as mentioned in screen shot Please find the attached screen shot for the same. Would you mind please provide us the expected screen shot to triage the issue from test team end. Thanks,
,
May 5 2017
You appear to mis-understand. Your screenshot DOES show the problem.
"@supports" is not indicated ANYWHERE in the inspector, and this is important.
It displays as if it's simply an overriding style but it's more complicated than that because it's within an @supports query.
If you had say:
@media(min-width:768px){
body{color:teal;}
}
then you inspected the text you would see that the body{color:teal} is within the @media for min-width:768px;
Since @supports only triggers the styles on browsers that claim to support both @supports AND the tested property and value, it is important to be able to see when your styles are within @supports or not. Much in the same way it's important to be able to see media queries when they are active or not.
,
May 31 2017
Hi, bumping this post so it doesn't get forgotten. Someone please address this issue.
,
Feb 1 2018
Bumping back to triage queue.
,
Feb 5 2018
,
Feb 6 2018
,
Feb 6 2018
WOO! Glad to see someone addressing it.
,
Dec 20
DevTools bug triage: archiving low-pri low-demand bugs. |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by ligim...@chromium.org
, May 4 2017Labels: Needs-Triage-M58 Needs-Bisect