i have a simple index.html with an import of a component, exaclty this.
On Chrome works fine, but on others browser (i tried firefox and safari) not, it shows only the index.html content, not the template content of the component. I read this and it seems like my situation, but this solution doesn't work for me.
EDIT: imports are correct (from IDE, if I command+click on links, I can go to the .js)
It's because document.currentScript doesn't work with polyfill.
You should use instead :
( document._currentScript || document.currentScript )
Update: Or you can use the new version of HTML Imports polyfill, that makes document.currentScript work as expected.
Related
I am making a Chrome extension to bring Material Design to the Web version of Google Calendar. I used Stylish and Tampermonkey to make the changes, but when I put everything together in a package and load the package into Chrome, a big part of the CSS seems to be totally broken!
The userstyle available here: https://userstyles.org/styles/126526/google-calendar-material-v3-0-beta
The userscript here: https://greasyfork.org/en/scripts/18878-google-calendar-web-material
And the Chrome extension here: https://chrome.google.com/webstore/detail/google-calendar-web-mater/cecnjahdgcpkhdgjbmiellinjbpamjgb
The strange thing that not everything is broken.
Should I use !important on every css rule, or the problem is somewhere else? The JS seems to work fine.
When I use Stylish for the CSS and Tampermonkey for JavaScript:
When using Chrome extension:
I created a test extension, to change a few things and maybe add some features to Firefox built-in devtools.
I set up a basic extension, with content css and the usual files, and chrome.manifest:
content devtooltweaks content/
style chrome://browser/content/devtools/framework/toolbox.xul chrome://devtooltweaks/content/devToolStyle.css
Although I can go to "chrome://devtooltweaks/content/devToolStyle.css" and see that file exists in the browser, DOM inspector doesn't show the style applying, I can't see the stylesheet listed either. It's been a long time since I did extension development, is there a step I'm missing here? Or is it not permitted to change the built in dev tools, similar to how it's not permitted in Chrome?
It looks like the style is imported, but not shown as a stylesheet in the DOM Inspector, I also may not have been using firefox -purgecaches. It's working now.
I'm having some trouble with our precious Internet Explorer 8. We are working on a CMS for hotels and everything was just fine until awhile back, when IE8 stopped rendering the frontend properly. This is the public website demo and the top navigation as well as the menustrip are messed up in IE8. Same with the "Payment methods" in the right side of the footer, where small icons for accepted payment methods should have been shown.
The thing is, we do have a special CSS file dealing with IE issues and it's loaded on the website, but it's not being applied to elements by IE. Also, on my local machine other CSS files (not conditional) are being loaded in IE, but the browser doesn't apply the styles.
It's like this:
the CSS file is loaded
the classes are applied to the tags
but the styles are not applied to those classes (!)
Now this behaviour happens on some pages and doesn't happen on others (very few). For example, on this page the menustrip is ok. I read about similar issues in IE isn't rendering the CSS and js dom injected elements don't pick up CSS styling in IE. The thing is this behaviour has been reproduced on other PC's in the office, as well as at home. I'm quite baffled by this.
Has anyone else experienced similar issues? If so, did you fix it? How did you manage to fix it? Thanks to all!
basically a majority of the CSS styles defined for my website are not displayed when opening the page in IE8. This is not only happening for my custom styles (which I load separately through a custom css file), but also for the built-in features of Rockettheme IONOSPHERE template, for example the box1/2/3/4/5/6 module styles. Also, the rounded style is not rendered, and all modules are shown with sharp corners instead.
I am also using a custom css file (called ralph_golfanatics.css), which I load inside the index.php as follows:
$gantry->addStyles(array('template.css','joomla.css', 'ralph_golfanatics.css'));
All custom styles of this file are displayed fine in IE9, but the most important styles are not shown in IE8. Simply adding these css-styles manually in the file template_ie8.css (that file comes with the Ionosphere template package) did not change anything.
Looking forward to receive any help in this matter. The webpage is http://www.golfanatics.de
Thank you all in advance for your hints.
Ralph
Unfortunately, the link you've included isn't working so it's difficult to pin down exactly what the problem is.
If you're referring to rounded borders displaying with sharp corners this is because border-radius is a CSS3 property which is not supported in IE8.
See this link for border-radius browser support.
There are many CSS3 properties which don't work in older browsers; this is expected behavior and most web developers work around this by using either 'progressive enhancement' or 'graceful degradation'. See this link for more information.
Most websites using CSS3 techniques will never look the same in every browser.
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