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:
Related
Currently, I can only see either one of them while viewing the styling of an element in DevTools.
Is there an extension or a setting that would let me see both the generated CSS as well as the source SCSS?
That would be especially useful when the SCSS is using mixins or functions and I would like to verify that the output CSS is correct.
I know I can achieve this by checking/unchecking the "Enable CSS source maps" in the DevTools settings, closing and relaunching DevTools, but that is a cumbersome and time-consuming method.
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.
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.
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
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.