With stylish you can specify a domains using #-moz-document url-prefix(http://) for example.
This applies to all URLs. Is there a way to specify which URLs you don't want the style to affect? This means you could have a global stylesheet that effects everything except specified URLs where there is another stylesheet you want to use.
This can get tricky but it can be done.
From the the Stylish documentation: "Applying styles to specific sites":
#-moz-document regexp('(?!http://www\.example\.com).*') {
/* CSS rules here.*/
}
Will activate for all URLs except those that start with http://www.example.com.
my solution
#-moz-document regexp("^((?!(domain1\.com|domain2\.fr)).)*")
{
...YOUR CSS...
}
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;
} */
I have used this hack to make css changes needed for firefox. It has worked, but when I validated the code I have the below error. Can I use the code below, or is there a better way?
751 Sorry, the at-rule #-moz-document is not implemented.
798 Parse Error }
/*********************************
FIRE FOX HACK TO FIX ERRORS
***********************************/
#-moz-document url-prefix() {
#rectangle {
width: 1030px;
right: -100px;
}
}
Any CSS at-rule that starts with #-moz- is a Gecko-engine-specific rule i.e. it is a Mozilla-specific extension, not a standard rule.
The url-prefix rule here applies the contained style rules to any page whose URL starts with it. When used with no URL argument like #-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.
Hence, you can perfectly use #-moz- styles to target only the Firefox browser.
See here for a list of other Mozilla-specific extensions.
See here for valid #moz document rules.
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.
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.
I just found the CSS #page directive, and using it with :first to apply CSS to the first page of an html print. Is there any way to go the opposite, and apply CSS to all pages except the first?
Use CSS3's :not() together with #page:
#page :not(:first) {
}
If you need better browser compatibility, Donut's solution of styling everything then "undoing" them for :first also works (relying on specificity/the cascade).
#page {
/* Styles for everything but the first page */
}
#page :first {
/* Override with perhaps your stylesheet's defaults */
}
If you're using CSS2, you can do it indirectly. Use #page to set the style that you want for all your pages except the first, then use #page along with :first to "undo" those styles for the first page.