Given the problem that browsers (Internet Explorer in my case) sometimes don't correctly apply complex CSS rules, how could one possibly force the evaluation?
A sampe rule:
body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
stop-color: #012d71;
}
The data flag will be set from JS and the styling should change accordingly. In some real world application this will sometimes not work, but when opening F11 browser tools and just selecting the node in the DOM explorer, the rule will then be applied.
Is there a common workaround for this kind of browser issues?
Something like
node.recalculateCssRules()
If you think the browser is not giving priotiry to your css and some other css is overriding it, then you can put !important beside the property to force the browser to use that property.
For Example:
body[data-some-flag="3"] #someElement .someClass svg stop:first-child {
stop-color: #012d71 !important;
}
What worked for me is removing the node and inserting it again at the same position.
This seems to force the browser to evaluate all CSS rules again relevant for the node.
Related
Is there a way to reproduce that but using additional css rules ?
My specific problem is how to disable a framework rule (that i cannot modify or edit) using additional css the same way firefox and chrome dev tools do.
What you might mean is the CSS unset or inherit keyword. By that, you can rule out CSS-properties assigned from other CSS sources (that probably aren't your own, e.g. coming from some theme files). unset makes it as if it wasn't set in the first place while inherit makes it inherit the parent's property.
Then just define the selector you're targeting and switch off a certain CSS property, e.g.:
.foo .bar {
font-family: unset;
}
You might have to enforce that with !important in case your selector is less powerful than some other.
Disabling code in css while leaving it in place for possible later use is done by commenting it out. All code between /* and */ will not be used.
/* .foo {
display:block;
} */
While researching how to create a userChrome.css for Mozilla Firefox, I found out that you can do it in different ways:
Example 1:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#-moz-document url(chrome://browser/content/browser.xul) {
#PanelUI-button {
display: none !important;
}
}
Example 2:
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#PanelUI-button {
display: none !important;
}
First example contains the line #-moz-document url(chrome://browser/content/browser.xul) and the second does not. I'm not sure what it does and ouput of both examples is exactly the same.
Are there any benefits by including #-moz-document url(chrome://browser/content/browser.xul) in userChrome.css?
#-moz-document is the prefixed form of #document, a CSS "#-rule" which restricts the contained rules to certain URLs. So in this case,
#-moz-document url(chrome://browser/content/browser.xul)
restricts its contained rules to browser.xul.
Without going too deeply into userchrome.css research, I expect this means the rules will only apply to "bits of Firefox", and not actual web pages.
You could probably test it out by creating a page with an element of ID #PanelUI-button, and see if the display:none applies to it.
The #-moz-document scope restricts the style rules to that one chrome document. In this case it's the main browser UI which is what you want most of the time. Without that scope the rules would be applied to all chrome pages. This might be what you want if you're creating a theme and want consistent colors and fonts.
If your style rules are manipulating a specific element as in your example then you should limit it to the specific document, but leaving that out generally doesn't cause any problems. In this case, though, you might end up with missing buttons on some unrelated dialog if that document happened to use the same element name.
I'm answering a very old question and more recent versions of Firefox have renamed all the .xul files to .xhtml. You'd want to use #-moz-document url(chrome://browser/content/browser.xhtml) { ... } instead.
To confirm Jeremy's answer, "userChrome.css" applies only to bits of the Firefox UI, not web content. But there is a "userContent.css" file that can be used to apply custom styles to web-content. You will definitely want to scope rules in userContent.css to specific URLs or domains.
I'm building an html5/js/css application that will exist inside of a div on my client's existing html. I want to be sure that none of the client's CSS styles are inherited by my app.
Is there a best practice to reset this div and its descendant elements?
I'm thinking I'll use something like:
#my-id * { //styles }
I'm wondering if there is a better/best-practice approach? Thanks.
That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.
But in your case, your client CSS may already contain highly specific selectors such as
#someDiv .aClass a{float:left;}
... and applying those "CSS reset" solutions simply will not override this.
You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.
Your question is very similar: How to remove all inherited and computed styles from an element?
So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.
If you want to only recent this specific div, than what you have is fine. You forgot to reset the div itself though:
#my-id, #my-id * { /* styles */ }
You are probably looking for Eric's CSS Reset as it one of robust resets out there.
But the reset rule is applied to the whole page, instead of the just the box. SO, modify the rules, by keeping #my-id infront.
What does !important mean in CSS?
Is it available in CSS 2? CSS 3?
Where is it supported? All modern browsers?
It means, essentially, what it says; that 'this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!'
In normal use a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.
Also, ordinarily, a more specific rule will override a less-specific rule. So:
a {
/* css */
}
Is normally overruled by:
body div #elementID ul li a {
/* css */
}
As the latter selector is more specific (and it doesn't, normally, matter where the more-specific selector is found (in the head or the external stylesheet) it will still override the less-specific selector (in-line style attributes will always override the 'more-', or the 'less-', specific selector as it's always more specific.
If, however, you add !important to the less-specific selector's CSS declaration, it will have priority.
Using !important has its purposes (though I struggle to think of them), but it's much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the neighbourhood.
It also makes debugging your CSS a nightmare (from personal, empirical, experience).
The !important rule is a way to make your CSS cascade but also have
the rules you feel are most crucial always be applied. A rule that has
the !important property will always be applied no matter where that
rule appears in the CSS document.
So, if you have the following:
.class {
color: red !important;
}
.outerClass .class {
color: blue;
}
the rule with the important will be the one applied (not counting specificity)
I believe !important appeared in CSS1 so every browser supports it (IE4 to IE6 with a partial implementation, IE7+ full)
Also, it's something that you don't want to use pretty often, because if you're working with other people you can override other properties.
!important is a part of CSS1.
Browsers supporting it: IE5.5+, Firefox 1+, Safari 3+, Chrome 1+.
It means, something like:
Use me, if there is nothing important else around!
Cant say it better.
It is used to influence sorting in the CSS cascade when sorting by origin is done.
It has nothing to do with specificity like stated here in other answers.
Here is the priority from lowest to highest:
browser styles
user style sheet declarations (without !important)
author style sheet declarations (without !important)
!important author style sheets
!important user style sheets
After that specificity takes place for the rules still having a finger in the pie.
References:
http://www.w3.org/TR/CSS2/cascade.html#cascade
https://russmaxdesign.github.io/maxdesign-slides/02-css/207-css-cascade.html
It changes the rules for override priority of css cascades. See the CSS2 spec.
I have apply a classname "bSelect" to a Link element, it could apply background image but not converting the link into white?
.bSelect {background:url('../../img_assets/bs1.png') 0 0 no-repeat;background-position:center;color:#fff;}
The most specific rule will always apply, so if you have the following somewhere:
a.bSelect { color: red; }
Then it will always take presidence over a less-specific rule, like:
.bSelect { color: white; }
Adding "!important" to the end of the rule forces it to be applied (though again, if you have multiple "!important"s, the most specific wins again).
It's usually a good idea to try and avoid "!important" and instead figure out why the rule isn't being applied. There ae built-in tools in most browsers to help you trace which CSS styles are being applied. However, "!important" works and is often easier than trying to rewrite CSS rules to make them work.