Chrome developer tools some styles from CSS file grayed out/uneditable?

Question

I found lots of questions regarding the grayed out styles in Chrome developer tools, but none that describes the strange behavior I have. I have plain class styles in a CSS file. For some reason I can edit one of them, but not the other:

CSS file:

.result {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

.result_image {
    height: 80%;
    overflow: hidden;
}

.result_text {
    font-size: 13.6px;
    margin-left: 5px;
    font-weight: bold;
    height: 20%;
}

HTML:

<div class="result">
    <div class="result_image"><img src="..."></div>
    <div class="result_text">Some text</div>
</div>

As you can see in the screenshots, I can edit the div class="result_image", but not the div class="result_text". I think the problem has something to do with Chrome claiming that the grayed out style comes from a style-tag, but both styles are in the file "qb1.core.css".

score 3 · Answer 1 · answered Apr 03 '18 at 00:12

This happened to me without any iFrame. It turns out that there was a style in my stylesheet giving the background to a particles.js area an empty url. Basically, it said: background-image: url(''); - this was in a completely unrelated area of the css file, but as soon as I commented it out and refreshed the page I could edit the css from developer tools and it showed as coming from the css file, not from a style tag.

Another thing to point out is that when I observed the css file from the Sources tab the css file showed as completely empty. When I saw that, I was able to find the info about the empty url css rule at the following forum post https://groups.google.com/forum/#!topic/google-chrome-developer-tools/Z_TLvpOXrMg

score 2 · Answer 2 · answered Jul 05 '16 at 12:26

2

Ok, this seems to happen because my HTML/CSS is in an iframe and I only reload the iframe. When I hard-reload the whole page, the class is not grayed out anymore. Maybe Chrome loses the context, if some of the code comes from the cache.

answered Jul 05 '16 at 12:26

needfulthing

1,056
11
21

2

this is exactly my issue and only occurs within iframes that have been reloaded. Must be a bug. version 59.0.3071.109 – frumbert Jun 23 '17 at 12:12

score 0 · Answer 3 · edited May 23 '17 at 11:46

0

That is actually style coming from the browser itself, default values and that's why you can't edit it.

That's what user agent stylesheet means. See also What is user agent stylesheet for details.

edited May 23 '17 at 11:46

Community

1
1

answered Jul 05 '16 at 12:30

Paul Ghiran

1,233
1
16
29

4

That's true for the div style, but not for the class .result_text, which is also grayed out but shouldn't be. – needfulthing Jul 06 '16 at 14:46

score 0 · Answer 4 · answered Aug 03 '18 at 20:32

Have a look if you have an error somewhere. I had an error in the command line as I started my app via npm start, then chrome dev tools had the same problems that you are describing with .result_text {...}. And try to check Disable Cache in the settings of Chrome dev tools.

Chrome developer tools some styles from CSS file grayed out/uneditable?

4 Answers4

Linked