This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here.
So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari.
Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com:
#-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work.
#namespace is quite confusing and I've tried every variation I could think of. None worked.
Safari does not appear to support the #-moz-document rule, which would explain why that wouldn't have worked for you. In Firefox, the following stylesheet will work:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("stackexchange.com"), domain("stackoverflow.com") {
/* your styles here */
}
However, in Safari 5, there is an extension called User CSS (note: link is to the developer's website and not to a page in the Safari Extensions gallery; caveat emptor) that will allow you to apply a single user stylesheet to multiple sites. (It seems to be the rough Safari equivalent of Stylish.)
With respect to your last comment, I think you're right: there still seems to be no way to do this with only CSS.
have you tried setting a <link /> src dynamically based on the document.domain? If you're using javascript, that is. This will let you set the src of the link tag to mydomain.com.css or myotherdomain.com.css
Related
I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.
On http://onpole.org/roland/, I have used background-images to decorate the page.
I, myself, use Mozilla Firefox, so I created my CSS with that browser in mind.
However, if I open the same website in different browsers (Chrome, Safari, have not tried IE yet) I see minor differences, which disrupt the layout.
Examples:
(this one actually is wrong in Firefox)
At the top of the page, there is a drawing, in which a white line comes out and goes down, into the next part of the website.
In Firefox there is an error when it comes to the next part,
But in Safari and Chrome this line is correct!
I would post more examples, but apparantly my reputation is too low to post more than 2 links. There goes being specific.
There's also a part where there are arrows coming out of the line. This works fine in Firefox, but has an error in both Safari and Chrome.
So the first error is not correct in Firefox but works fine in Safari and Chrome.
The second error is exactly the other way around.
I am posting this here because I need advice on how to tackle these problems.
Should I make browser specific css where I move the line 1 pixel?
Or is there some other way? Or do any of you know why these differences occur?
Just a suggestion but why not create a separate stylesheet? When I helped redesign my company's website, my supervisor and I found that our stylesheet rendered properly in Chrome but not in Firefox. Ultimately we created a stylesheet to fix those areas. It would only launch if the browser being used was Firefox.
Using a simple PHP command (and assuming that your Gecko stylesheet will be stored in a folder called CSS in your site's main template directory), here's how you can detect if the browser being used is Firefox which will then force the Gecko stylesheet to launch before the page is even loaded:
// firefox
if ($this['useragent']->browser() == 'firefox') {
// add gecko stylesheet
$this['asset']->addFile('css', 'css:gecko.css');
}
Important: When writing a stylesheet meant for Gecko-based browsers only, the sheet must be written as follows:
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Only the code in between the { } will be read in Firefox. The best thing of all is if you want to target specific subdomains on your site, you can add a declaration for that subdomain all on the same stylesheet.
#-moz-document domain(YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
#-moz-document domain(SUBDOMAIN.YOUR-DOMAIN.com) {
/* ADD YOUR CSS HERE */
}
Just remember to keep your rules inside the curly { } brackets and you'll be good to go.
I'm attempting to use the Stylish extension on the Chrome extensions page.
But for some reason it's not working. I've attempted to Google this, but I only get answers about overriding CSS with an extension not overriding the Chrome extension page.
Any ideas why it's not working? Or how I can force it?
I initially tried this to style a specific extension without !important. Then I tried it with !important to force it.
#fjnbnpbmkenffdnngjfgmeleoegfcffe {
display: none !important;
}
And then I tried on a general class, just in case I got the extension id wrong. But still it wouldn't work.
.extension-list-item-wrapper {
display: none !important;
}
Thanks.
All Chrome extensions, including Stylish, cannot modify content on chrome:// URLs.
If you want to apply a style to chrome://extensions/ (actually, chrome://extensions-frame), edit the user stylesheet located at path/to/chrome profile dir/Default/User StyleSheets/Custom.css.
This style sheet is applied to all pages (including the devtools), so make sure that you choose a sufficiently specific / unique CSS selector.
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.
I am pretty much worried to make a duplicate with this question while more than on hour seems to be too much for navigating for the answer.
The situation is:
Widget, which needs to load css dynamically
Sammy.js and .ejs for views - most of all the html content is loaded dynamically
Lab.js to load javascripts
one loaded styles should apply to all the new content which instantly appears on the page
I've already tried the answers from these related posts:
dynamic CSS loading in IE won't work
Dynamically changing stylesheet path not working in IE and Firefox
(..and others)
The only thing which works for me even in the modern browsers is the injection of the "style" node with the inline styles inside. But this doesn't work in IE8 :( I do see the style node in the Developer Tools, but they do not apply. I've also tried to wait until the stylesheet is applied before starting the sammy.js application.
I would really appreciate your answer or a link to the related question and working answer.
P.S. I fix IE8 now, but IE7 working is also in the plan.
Did you try using createStyleSheet instead?
Or you could serve IE styleSheet.cssText instead of createTextNode.