According to the specs, the precedence of declaration origins is as follows (Top wins):
Transition declarations [css-transitions-1]
Important user agent declarations
Important user declarations
Important author declarations
Animation declarations [css-animations-1]
Normal author declarations
Normal user declarations
Normal user agent declarations
I'm trying to verify that the normal author declaration (6) wins over the normal user declaration (7), but I think I get the opposite result:
In the above example, I have an external css file (style.css) that declares the color of the p element as green.
Then I add some user style, declaring the color of the same selector as blue.
I expect that the author declaration (green) will win over the user declaration (blue), but the opposite happens.
Any ideas of what is going on? Maybe I'm doing something wrong in the example?
A custom CSS applied from the dev tools is not treated as user style sheet, but as an inline, author one. That's why it beats the external CSS declaration.
afaik support for user style sheets was removed from Chrome back in 2014, and the only way to set them is through extensions. For Firefox, you can edit userContent.css
Add "!important" in stylesheet on color. See Below
p{
color: green !important;
}
Related
I had understaood (ref 1; ref 2) that CSS's all property, when set to revert, would, in the case of an author stylesheet, isolate it from inheriting from other author stylesheets.
In other words, elements protected with this property/value would be fed the styles in the current stylesheet and only the initial, default styles fed by the user agent.
According to MDN, when revert is used in an author stylesheet it
Rolls back the cascade to the user level, so that the
specified values are calculated as if no author-level rules were
specified for the element.
This doesn't seem to be the case for me, however. I have a Chrome extension which injects elements into a page, and I want to protect it from inheriting the webpage's styles.
CSS:
#guideo-tools, #guideo-tools * { all: revert; }
However, on the site shown in the pic it's inheriting box shadow on the buttons.
Have I misunderstood all?
You haven't misunderstood it, but the revert value for the all attribute is widely unsupported right now.
From the Mozilla Developer page on revert:
I can also see this if I look at their example fiddle in Chrome.
As seen in this fiddle, a property of color: inherit on button prevents a disabled button appearing as disabled.
I thought specificity would mean that disabled buttons still appeared disabled. How does this override the user-agent styling and how would it be possible to make them appear enabled again? Manually assigning a color to button:disabled {color:GreyText} does not work.
https://jsfiddle.net/zzhLhkjx/
Compare this to https://jsfiddle.net/g46kg6ev/ which shows a disabled button with greyed out text. Just specifying color to inherit stops that behaviour.
As I understand it, any author defined styles will over-qualify any user-agent style regardless of specificity - since author styles always carry more weight than user-agent styles.
JSFiddle demonstration to rule out any specificity doubts
More on user-agent stylesheet weight from an answer (What is user agent stylesheet) by #JukkaK.Korpela
"User agent style sheets are overridden by anything that you set in
your own style sheet. They are just the rock bottom: in the absence of
any style sheets provided by the page or by the user, the browser
still has to render the content somehow, and the user agent style
sheet just describes this."
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
I'm using a CSS theme that I'm not allowed to edit, I need a way to paint all the white backgroud-color with something less shiny.
I'm new to CSS, what should I do to override the background-color for all classes using CSS?
Here is a screen shot, I'm using Primefaces to generate the web content hence I'm unable to change the provided CSS
A screen shot of what I'm trying to change
I already understand that every element has it's own class in the theme, but I don't know their names, nor which one of these classes provide the background-color for those elements, what I'm looking for is a simple way to repaint the white color in the whole page.
From the official documentation:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
And also:
Specificity is based on the matching rules which are composed of CSS selectors of different sorts.
That means that the CSS would be applied depending of your browser and your CSS Selectors for that browser.
And you should also look at what CSS Selectors has a higher specificity.
But as you want to override the background-color, that means to get the higher CSS Selector specificity I think what you are looking for is the !important exception.
Again from the documentation:
this declaration overrides any other declarations.
that means that the property of CSS that you are going to set with !important exception will be applied overriding the rest of different configurations that has that property.
But also, you have to care about to abuse of that property:
Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
What I recommend:
Try to set your background-color with CSS Selectors with higher specificity.
If you cannot modify the property, and you have tried all the posibilities, then use !important exception.
You can paste this into the bottom of your page right before the tag.
<script>
document.body.style.backgroundColor = "#883377";
</script>
You can the change the #883377 to whatever color you would like.
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.