Is this common? When I save my external stylesheet and update my browser the changes applies directly for the most of the time, but after a while when I save again the changes does not apply at all. Nothing I do to the stylesheet at this moment will apply for a while. Then it continues to work for a while and then it stops working again for a while and so on and on and so on.
Any thoughts?
Take care
Good question. In general browsers try to cache any resource they have loaded previously.
Checkout this post that details this behaviour a bit more: Browser Caching of CSS files
Related
Hello I am developing a website on ASP.NET and while developing it I am also testing its behavior and changes. The problem I am facing is some times when I make change on .CSS file those changes does not appear on the browser even when I refresh it or rerun the project but when I run that project on different browser it began to show those changes. If it is a code related or browser related or IDE related please let me know. Thanks
Try hitting ctrl-F5 - that will force a re-load.
Unless you change the name of the css file or other resource, the browser can cache that information for months on end.
In fact, some utilities will even add say a dummy parameter to the linked css file - thus on each build the parameter is updated - and thus the browser will not use the older cached value (but, I not found a great working and easy to use utility that does this).
The other way? Empty your browser cache. So yes, the cache can be a REALLY nasty issue during development. And in fact it can be REALLY nasty when you update your site - users will not see say a modify css file, since it been cached, and with the same name, then users will not see new fixes/style changes or even even things like text alignment that you fixed in the css file.
As noted, in most cases, if you launch a page, then try hitting Ctrl-F5 (I think this works in most browsers). If that fails, then you have to in the browser re-set the cache (empty the cache), and then you see the new changes.
I wish had a better solution, and I wish one could just say:
Ok, please re-set ONE time for all past users - since they will often not see your changes - and you don't have much control with any real great ease to re-set the cached information. There are truck-loads, book sized articles in dealing with this issue, but sadly, there not really a great solution right now. If you want say things like cached css stuff to go away client side? Then you have to change the name of the css file - and that can be painful.
At least during development? Well, let the page load, then try Ctrl-f5 - that works well in most cases.
When I'm experimenting with css (in the dev tools) in the browser, I sometimes need to refresh the page. However, this causes me to lose the changes I've made. Is there a way to prevent this from happening or at least save the state of the last css.
First of all: You can't edit temporarily in the dev-tools and reuse it after you reload the site.
You will need an addon to do this. You could use Stylish to save it into a fake-implementation.
I hope this helps you.
Frustrating it is indeed. What solved the issue for me is using this tool called Browser-sync, this way you can update the css and see the changes at the same time. Give it a go, it's worth it.
I want to automatically refresh chrome immediately after an change of my less files. For some reason chrome can not even read my less file. So i always need to wait until the lessc have created my .css file. There a tools out there that are checking resources for changes and reload the page. I've even written my own: Luba Autoreload. What i annoying is the waiting time between less compiles and the extension request resources to detect changes. Chrome DevTools seems do not solve the problem as well. After mapping my style.css to a network resource i always need click inside the source in chrome to refresh for some reason (no auto reload).
I really prefer a way to immediately detect a less change and reload the browser. I can write a solution but i do not can spend all my time in stuff like these. Maybe somebody have an idea. Maybe there a solutions for Firefox ? I'm also using a prefixer, but i think i can forget it in this context.
Use LivePage extension. It supports LESS also. It also works offline and for file:// too.
EDIT:
Increase the refresh duration to 1000ms in LivePage's option page. It may help you. And don't select the option for "Entire Domain". It will monitor whole domain and will slow down your system, if you have many files in your domain. Use LivePage for the file, or files you are currently working on.
We have a WordPress website which loads sufficiently in every browser I've tried, except for IE. For some reason in IE, it seems to freeze the browser for a few seconds every single time the page is loaded, doubly so if it has to load a page with an iframe of another page. The user has to wait awhile before they can interact with anything on the page.
Here's the site.
Someone suggested we could use WP Supercache to solve the issue, but I've had problems with this plugin in the past and am reluctant to rely on it, especially since this seems to be only a problem in IE.
What is the best way I can troubleshoot this issue? How do I find out which scripts in the header, or footer, etc. is causing it? Is there a quick way to do so, or do I just need to start eliminating variables within the theme?
I'd don't quite understand why but in IE9 style.css is being pushed right down the page load order - see request #35 http://www.webpagetest.org/result/130327_Y9_f1d5796658d8475b68e2e537644173f1/1/details/
As a browser won't render until it's downloaded the applicable CSS this blocks rendering.
Chrome on the other hand prioritises downloads so that resources that can block rendering are downloaded ahead of images.
Here's a side-by-side video of the two loading experiences.
(If you want help looking at this further my contact details are in my profile)
Thanks to this thread I just found, the answer appears to be fancybox: Fancybox causing slow load times in IE?
Specifically, the IE-specific filters in the CSS file for fancybox. I removed those filter styles, and it loads fine now.
Sorry, I don't seem to be able to give just a comment. Anyway, in Opera 12.14 it works fine. And in Explorer (8) it works just as well, no errors in the console. Just my .1 cent.
This seems rather a common problem, however I can't find any reliable sources on this.
Once in a while Chrome will display a stylesheet-less version of page for like 2-3 seconds and soon after the page is displayed correctly. It can affect the very same page once in every 20-50 refresh and its not tied to a specific site. Happens all over the place. There are some threads about this here and there, but I have yet to find a full explanation.
Is this a bug? Feature? Is there a way to prevent Chrome from behaving like this on the client or perhaps server side?
In my experience, this happens when the network connection is poor and the page is (necessarily) loading slowly. The page's HTML will render first, and other assets called for within that HTML (like stylesheets or images) are rendered only after their calls are complete and their respective files load.
I have noticed this as well. It's definitely a bug. It seems to be this issue:
http://code.google.com/p/chromium/issues/detail?id=75761
You can "force" the stylesheet to load by opening the inspector (ctrl+shift+i).
shift + f5 should reload the page and the referenced stylesheets
With a normal reload it will only reload the page itself, and incorrectly assume that the stylesheets in the cache (the ones that never loaded in the first place) are correct.