I use workspaces and sourcemapping to live-edit my SCSS files in Chrome with live reload functionality.
However the live-reload part breaks if I add a version to the stylesheet that is being generated by the SCSS. The stylesheet is still saved and changed in the background, but Chrome does not inject the changes.
eg. <link rel="stylesheet href="style.css?v=255"/>
Any ideas on how to work around this?
This appears to be a current limitation on Chromes part and does also apply to plain CSS files. As a simple workaround you can execute this bookmarklet before attempting to change your source file:
javascript:(function(){var s=document.getElementsByTagName('link');for(var i=0;i<s.length;++i){var q=s[i].href.indexOf('?');if(q!==-1)s[i].href=s[i].href.substr(0,q)}})()
(What it does is look for <link> tags with an href containing a query string, and removes the latter if found).
Related
I'm developing a basic web page with css file on my local machine and testing by opening the html file in the browser straight from the filesystem.
This works, but now since using the Chrome developer tools to play around with different styles by editing the css file under the Sources tab, whenever I refresh the page none of the CSS loads until I again edit it in the sources tab - just adding a return to the end is enough to load all the CSS.
Also, occasionally when refreshing the page, the Sources tab shows the contents of the css file as corrupt (a load of random characters)
I've run the css through a validator and that says it is all fine and there is no javascript on the page
I'm not a web developer so probably missing something obvious...
This is happening because you are editing css inside the Inspect Element (Chrome developer tools).
This is because the css literally lives on a webpage and it is pulled from your actual css file on your desktop (css file from the folder of your website).
Because of this, you are never actually changing an actual css on your computer, just in the browser, and that is temporary, because the same old css from your computer will load everytime you reload the page (untill you modify the css on your computer).
You should edit your changes in your actual css file on your computer inside your text editor (notepad++, visual studio code, atom, sublime text, etc ...).
That way, it is going to work as you want ! Hope you understood what I meant, if not, just tell me, so I can clarify again :)
Add this to the nginx configuration:
http {
include /etc/nginx/mime.types;
....
}
this solved it for me.
Thanks
When I'm trying to change anything in my CSS files, I can't see any changes in the stylsheet shown to the browser.
After I build the project, I change a style (for example, the background color in default.css from white to black). I then run the project, but the page background still will be white. I think it comes from {% load static %} in my HTML template file, but I'm not quite sure. The only way I found to apply changes in CSS is to create new a CSS file and reference it from the HTML template. Any ideas how to fix it?
There are a couple things here that could be giving you issues.
Your browser is caching the stylesheets. To disable this caching, you can open your developer tools, go the network tab, and click "Disable cache" (in Firefox or Chrome, at least).
Your project is configured to serve the collected files. To fix this, run ./manage.py collectstatic - this will collect all your CSS into a single file, which can then be served.
sounds like caching is on on your browser. if you're using chrome, open dev tools and check the box to disable cache
https://stackoverflow.com/a/7000899/5360912
I have added a minifed css to my website for better speed and performance. However, When i look into the browsers developer tools, the css sources for any elements are coming from nomal theme.css file, instead of theme.min.css.
I dont know wheather my minified css files is being used or not? Anyone please guide.
Also, I have theme.min.css.map file. When its being used?
If you see the minified CSS file path in your tags, it's being used. If Chrome developer tools show the original file in italic, it's being referenced by the map. Like this:
Image taken from: Why does Chrome devtools show these folders in orange and in italics?
Did you give the correct file name? it should be theme.min.css instead of theme.css
Double confirm you have given the right file name ,you might have not or
It might be that the content are loaded from cache clear your cache or try with hard refresh pressing Ctrl+f5 if you are in Mozilla firefox browser.
I have a quite specific IE9 problem that relates to this for example (but here it only refers to IE8 and less) IE8 web font iframe bug workarounds
I have pages that have iFrames inside iframes like so
Top page
-- iframe1.html
-- -- iframe2.html
-- -- -- iframe3.html
The iframe 2 is loaded by iframe1 dynamically. I also have a fonts.css style sheet that has fonts encoded in this way:
src:url(data:font/opentype;base64, /*FONT HERE */
that is located next to iframe1's folder in
/%folder_with_top_page%/%folder with iframe1.html%/style/fonts.css
iframe2.html loads the fonts.css file from that folder:
<link rel="stylesheet" type="text/css" href="../style/fonts.css" />
And this works with other browsers just fine, except in IE9 the result is following:
page loads
page flashes with correct fonts
page reverts to New Times Roman/default serif font
Looking at the Network tab in dev tools in IE9 it shows that the browser is trying to load the fonts file from the root folder:
404 %folder_with_top_page%/style/fonts.css
Everything works just fine if I also place the fonts.css file there, but that seems unnecessary. There is also a file called fonts.css in %folder_with_iframe3.html%/style/fonts.css, which loads fine and seems to relate to the problem described in the first link, but I assumed the problem was fixed in >IE9? I know that the page structure isn't optimal in any case, but it's not up to me to change it.
My questions are as follows:
1) Is this the same problem as described in the link I posted but in IE9 instead?
2) Which would be the workaround that makes the most sense: just inserting the fonts file to the "correct" (= wrong, root-ish) folder, putting the fonts.css file to the same level as the file thats loading it (aka copying the file to %folder_with_iframe2.html%/style/fonts.css) or something else (such as appending the CSS again to the page with jQuery after the site has loaded).
The behaviour only happens with iframes but not when loading the pages individually.
I just stumbled on this post while diagnosing a similar issue with an embedded iframe trying to load a stylesheet with a relative link, and the request going to the outer page. To solve it, I appended the link tag to the DOM, then set the href attribute with JS.
var cssLink = "<link rel='stylesheet' type='text/css' id='addcss'/>";
$('head').append(cssLink);
$('#addcss').attr('href', src);
I was able to reproduce the issue consistently when including the href in the initial tag, and was unable to reproduce it after implementing this fix.
Ok.
So I know this is probably a stupid question, but I've been traversing SO and Google for the last many hours for an answer and found nothing.
I'm currently creating a HTML5 mobile app using JQM 1.2.0 and Google Maps js V3 - just to set the context.
My problem occurs when I try to test the page in FF 18 desktop version. In every other browser, be it mobile or desktop, I'm not having any problems. Also, I have tried on both localhost as well as the server I'm deploying to, and it's the same result.
In my HTML file I have a relative link to css and js files:
<script src="js/general.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mobile.css"/>
while my links to JQM etc. are absolute as I use a CDN:
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
When I use Firebug, I can see that the files with a absolute path are loaded fine, while the relative path links are ignored - or at least I think so, as nothing shows up in neither the Console or the Net pane.
When I check the Html pane in Firebug, it appears as if it has included a tag pr default (with the correct URL), but not if I try to view page source using the regular FF methods. Even though, I have tried to include a explicit base tag to my header and it changes nothing.
So, to sum up: relative path works fine in all browsers except FF, it it happens on both my server and localhost.
Update:
Tried moving the files to the root dir, but it didn't help.
Also, when trying to view the content of the js or css file in Firebug (pressing the arrow to the left of the tag in index.html), it just says:
Reload the page to get source for: http://localhost/~u040800/app/general.js
which, of course does not change after reload.
Nevermind - stupid mistake on my side!!
Note to self: when developing, do make sure that your add-ons are disabled before asking SO! otherwise, you make a complete ass of yourself!!
Yes, it is correct - I forgot to disable Ad-Blocker...
#robertc: Sorry to have wasted your time.