Normally a crossed rule means it is overridden by other rules somewhere, but in dev tool every now and then I see a dominating CSS rule being crossed-out, making me confused. See above picture. Please noted that changing the color in the crossed line actually affects the element on the page. Why is this?
In some cases, a style will be shown as struck-through if it exists in an matching rule but is commented out, or if you've manually disabled it by unchecking it within the Chrome developer tools. It will also show as crossed out, but with an error icon, if the style has a syntax error.
Related
I'm doing a bit of CSS troubleshooting and, as you can imagine, I'm having a tough time getting a div to style the way I want it too. In Chrome, I've opened the development window and I've selected my element to inspect the style settings.
I need to do a quick visual test of some of my changes from within a specific selector. Note, I'm not looking to declare a temporary, specific value for the element.
I've found the selector, and the respective CSS property and as I knew, it is crossed out because a CSS definition of higher precedence is overriding it. However, for my test I added !important after the property value but it did not update my element and remained crossed out.
We have some very complex CSS. There is a chance that it's somehow being overridden but I wanted to be sure-- in Chrome browser, within the development window, if you override a style specified for an object, adding !important should it work?
Does the Chrome browser development tools respect style changes specifying !important?
Yes it does respect the specificity.
You can however test the specificity of your rule before using it in the devtools (or anyplace for that matter) here
I know that in Chrome Dev Tools, for a selected HTML element, applicable CSS selectors are listen in order of specificity in the Styles tab.
But is it possible to see the exact exact CSS specificity value of each rule on the selected element?
EDIT: One answer says that I can see the CSS specificity value in the computed tab, but I don't see it there. See screenshot below. Maybe I need to clarify that when I am asking to see the CSS specificity value I am looking for a number like 0010 for a class selector or 0001 for an element selector.
Chrome dev tools sorts classes by their specificity from top-to-bottom.
Check this out:
Inspect an element (in this case an svg) and type in the css attribute you want to see the specificity for (this case "height').
Highest is always on top!
The chrome extension "CSS Dig" offers a solution to the finding the values of specificity in chrome in 0,0,0 format
The extension works and does the job but has a few bugs
Link :
https://chrome.google.com/webstore/detail/css-dig/lpnhmlhomomelfkcjnkcacofhmggjmco?utm_source=chrome-ntp-icon
Right click on the element you need to see styles for;
Choose Inspect;
The console will open. On the right side of it you'll see Styles tab (it'll be open by default);
Switch to Computed tab (to the right from Styles);
On this tab you'll see all CSS styles with it's values applied to the element.
UPDATE
Looks like I misunderstood the actual question, sorry.
It seems that there's no such thing in Chrome Dev Tools.
Check out this issue.
As it stands, simply displaying a number isn't as useful as it may seem to the majority of users. We are interested in exploring other patterns to explain overridden values.
This is what I see on the inspector:
There's like a left highlight in two rules, which are the ones Firefox is making up,
if I look on the computed styles I see this:
And finally this is how the original CSS looks like:
So Firefox it's changing the position and width rules somehow.
Anyone can explain me why is this happening and how to avoid Firefox changing those rules?
(In Chrome, Safari works fine)
The "left highlight" is used to indicate a style rule that has been modified within the Developer Toolbar since the page loaded. Reloading the page and/or restarting the browser should repair the rules from your stylesheet.
If you're still encountering the issue after this "quick fix", my next advice is to search your stylesheet(s) for position: absolute, disable them one at a time, and re-test. It's very unlikely Firefox is changing your style rules on its own.
You might also find it easier to postpone minifying your CSS while you're debugging. That way you'll get more useful line numbers to reference vs. having every rule cited as being on master.css:1.
Finally, you might find it advantageous to use shallow selectors in your CSS rather than deeply nested selectors like the one you've shown. This will help avoid specificity conflicts, which was likely the original cause of the issue you're encountering.
Is there a way to see exactly which declaration is affecting an element. Rather than looking at a million properties in the Firebug inspector, where depending on how many classes something is assigned may contain a lot of declarations that are lower precedence and therefore not applied. It can get lengthy to find which particular declaration is in fact affecting your element. I see long ignored declarations like this:
ul {
color: green;
}
"Computed style" will show you the end result of all the hierarchies, but not where the style derives from. Maybe I'm missing something simple. Thanks much!
JSBIN
Edit:
I've heard that I should be able to expand attributes in the Computed tag, however I don't see where that option is available. I can see that the font-size is 13.333px, but no option to see where that's coming from.
Yes, in Firebug select the element and then click on the 'Computed' tab (when viewing the HTML frame). Here you will see a list of CSS properties than can be expanded to show the location of the relevant CSS.
The Computed side panel can give you this info.
Note that it just shows the CSS trace - i.e. the styles that are affecting a specific CSS property - for those properties, which are actually changed by the CSS rules of your stylesheet. Though it can display all computed values for an element. To hide the unchanged ones you can uncheck the option Show User Agent CSS.
Also please ensure that you have a current version of Firefox installed (current stable is 20.0.1). Firebug internally uses some APIs for the style tracing, which are just available on newer versions of Firefox.
In Chrome DevTools there is 'computed style' panel which shows you the list of styles for an element property and their locations. For example see the screenshot for text-decoration property.
I have a CSS file which is not written by me, but I have to change stuff. My problem is a line like this:
list-style-image: url("../images/pfeil.png");
The path to the image is correct, but it's not displayed. I used Firebug to check which styles are applied and I see the line is stroke through. According to the documentation, that means that it's overwritten by another rule.
Is there a way / tool to find out, which rule is overwriting the line above?
They are not disabled. These entries have a strike through them to signify they have been reset or overwritten by a newer rule (one loaded after this style sheet for instance).
CSS styles are loaded in order of inclusion on the html page, with inline styles taking priority over CSS sheet definitions.
Firebug will show you which one has overwritten this one if you just review all CSS acting on that element. Just look for any other list-style-image: listed.
Open your page in chrome, hit ctrl, shift I to open developers console. On the right, there should be an accordion thingy with one of the options being "Computed Style". Open that, click on show inherited, find the setting your concerned about, click the little arrow next to it and it should open up and tell you where the computed setting is coming from.
Let me know if that does it for you.