I am adding some style to a webpage, but I am having a problem, I added a rule, and chrome developer tools say that is computed, but it is not applied. What this mean?
I'm not sure if this is always the case, but I think this generally means that its been overridden by another rule with a higher degree of specificity.
CSS rules are graded in terms of how specific they are to an element, and when rules clash, then the most specific will be given precedence.
You can address this by adding a class directly to the element, or by making your rule stricter (more specific).
In my case I solved the problem adding -webkit-appearance: none. Apparently google dev tools don't show webkit appearance but apply that.
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.
How can this situation happen? (image is from chrome css inspector)
-there is no higher priority rule above
-there is no orange exclamation mark (error)
-I have NOT deactivated it manually in Chrome
Computed:
In developer tools, go to Computed tab beside Style Scroll down and look for those two properties. Expand it and you'll see which file and line number is applied to it
It is very difficult to answer your question by just looking at that image. The rules for CSS rule cascading are complex. I'll refer you to the spec:
https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade
In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used.
When the !important keyword is used on a specific property/value pair, it will cause that particular value to escape the cascade and become, as the name suggests, the most important value for that property, overriding any others. description here
When using the same CSS property in one rule set, in the case of needing to provide a fallback for browsers that don't support a property you may be using, like so:
body{
background: rgb(255, 255, 255);
background: rgba(255, 255 ,255, 0.5);
}
Do browsers that understand both of these declarations render the first, then overwrite it with the second? Or does a browser save itself the hassle and only render the latter?
Edit: I am aware that if a browser understands both declarations it will render the latter, but I want to know if the browser renders/draws the first into the viewport and then overwrites it with the second or does a browser work in a way that means it only renders the one declaration that is required, potentially saving itself resources?
I would expect modern (and probably old) browsers to parse the CSS rules supplied to it before rendering anything. Here's a screenshot from the Chrome profiler for both rules:
And here's another, for only the first rule:
As you can see, there are no extra steps involved when two different rules are present. If the browser was to render it twice, you would see another "Paint". (The slight reduction in paint time for the single rule is likely to be because I removed the rgba rule, so the browser did not have to take transparency into account).
the last of the 2 will be applied
To be more precise: the first will be applied, then the second.
It would be the same as having 2 identical selectors setting the background property.
The one most descriptive will be applied. If they are the same, the last declared will be the one applied.
The "C" in CSS stands for Cascading which means styles can add to or supercede preceding CSS rules. So the second declaration will override the first.
Browser handle this correctly. You can use that kind of rules.
For example, chrome will apply rgba, and IE8 will apply rgb.
Browsers in general apply the following algorithm:
for each element in the DOM tree
for each CSS rule
if rule's selector matches element
apply all declarations in rule
render
This is not how it works:
for each CSS rule
for each element in DOM tree
if rule's selector matches element
for each declaration in rule
apply declaration
render
That would be a huge performance problem.
It follows from the basic UA conformance requirements that browsers must first parse all CSS rules, then decide, by the principles set in the specifications, what values shall be used for each property of each element. There is no allowance for “incremental rendering” in the sense of applying part of the CSS code before reading the rest. And it would be very odd for a browser to deviate from this, as it would mean more work to implementors, more complaints from authors and end users, and no benefits.
I have element that could be injected into any page using a Firefox Addon.
Naturally, it and its ancestors are affected by the CSS rules defined on that page.
I can get so far by simply being explicit about every attribute, but even then my declarations may be overridden by an earlier declaration on the page with greater specificity.
Without making a huge mess of needlessly specific selectors and hanus use of !important, how could I go about resetting all elements' attributes under a given element (div#my_root_container_element) and ensure that my declarations under this parent element apply.
Using an iFrame is one option, but I would rather avoid it if possible - is there another way? Given the application, solutions need only work in Firefox.
Thanks.
Obviously, it seems like this aims to override the "specificity" which is core to CSS in general, but this is the closest I remember ever seeing someone attempt it. It seemed somewhat reputable at the time coming from someone involved with the YUI project:
http://developer.yahoo.com/yui/reset/#code
Using SASS, it's not too unpalatable nesting everything under a div with an ID to achieve sufficient specificity, which is the solution I've opted for.
That said, any !important declaration made in the page CSS will overrule my styles.