I already attach query string to my url
"~/App_Theme/cssstyle/default.css?v=1"
but the style on the page was still not updated. In my IE's developer tool on css tab show both css file.
How can I fixed this problem?
Thank you in advance.
Each time you make a change and want to force the browser to fetch the latest version, you need to update the number on the end of your path, so something like:
"~/App_Theme/cssstyle/default.css?v=2"
then
"~/App_Theme/cssstyle/default.css?v=3"
etc. The number can be anything, it doesn't need to be sequential. It just tells the browser that a different version is required.
In your case, your changes are not visible because you are specifying a particular version of your file. If you remove the version number parameter from your path, then clear the cache, you should see your changes:
"~/App_Theme/cssstyle/default.css"
You can also press Ctrl+F5 to force the browser to do a 'hard refresh', which re-fetches all assets.
As a last resort (and a good habit to get into if you're developing) is clearing the cache regularly. In most browsers, you can do this with Ctrl+Shift+Del. You can also do this automatically in Chrome by selecting Disable cache (while dev tools are open), and leaving the dev tools open with F12
In most browsers it is Ctrl+F5, (on windows)
Related
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.
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
This is happening randomly out in the field. I am embedding the editor in a ASP.Net MVC application. When users clear their cache and restart the browser, it works again. Any ideas how to fix it?
You must convince your browser to clear it's cache for the icons.png image.
Go to htt://yoursite.com/path/to/ckeditor/skins/moono/icons.png
and then use Ctrl+F5 or Cmd+Shift+R (mac users) to tell your browser to not use the cache and fetch a new one, which will then be stored in the cache.
You CANNOT do this from the editor page for some reason, probably by the way that the css and image is loaded. And for me, this trick only worked in Firefox and not Chrome. However, if in Chrome you do Shift+Ctrl+N (new incogneto window) then go to your editor, you'll see that it is working. That's how your visitors will see it UNLESS they have the icons.png image cached in there browser as well. The only way to fix this is to change the URL of the image, which will require replacing the new url in the CSS file (it's the background image for all the buttons).
I'm working on a Rails app and was updating a page.
The page has a whole bunch of background images defined in css. When I refreshed the page (cmd+r on the mac), nothing changed. When I went into the Chrome inspector and unchecked then rechecked the css rules, the images appeared. Also, if I opened a new private browsing window (cmd+shift+n), the images all correctly displayed.
Am I running into some weird kind of cacheing issue?
Chrome: Version 21.0.1180.89
Mac OS X: 10.8.2
You need to do a hard refresh that bypasses the browser cache. I don't know the key combination on a mac, but it's probably similar to Windows: ctrl-shift-R. This is not the same as a normal refresh (ctrl-r on Windows) that does not bypass the cache.
Aparently on a Mac the equivalent key combination is cmd-shift-r.
Try forcing the browser to load your new css file. I usually add a query string (?v=1.0) to the link, like this:
<link rel="stylesheet" href="style.css?v=1.0" "type="text/css"/>
and then I change the number (?=1.1) each time I've done some changes in the css file.
This usually fixes it in Chrome.
Hope that helps!
I have this issue from time to time myself, especially when I am making lots of changes, I find clearing your browser cache works best, unless you have specifically set up some sort of caching.
Also make sure to check the "Disable Cache" is the inspector settings.
Screenshot taken October 10, 2016. Please update if changes have taken implemented by Google.
Command + Shift + Delete
Empty cache from the "beginning of time"
I have looked into this time and again and have read solutions but they simply do not work.
Supposedly, one can bypass the cache in Chrome by hitting F12, clicking the gear in the bottom-right corner, and checking "Disable cache." This does not work for me. I still get a page with cached CSS. In Firefox, I go under Net and check "Disable Browser Cache" to no avail. HTML is not an issue, just the CSS and, possibly, JS.
IE, however, doesn't have this problem. I update the page's CSS and IE updates accordingly. For obvious reasons this is not an ideal situation.
I go to my-site.com/style.css in Chrome and Firefox and the file there is not the file I see with FTP/SSH/IE. If this looks like a bug (it does to me), then please let me know. If I'm just being dumb, then please tell me what I am missing. Please.
Thank you.
One way to avoid caching is to explicitly change the url in someway. What I would suggest is to append a querystring parameter to the css url like:
http://mysite.com/content/css/File.css?version=1234
and update the version or another way is to attach the DateTimeOffset instead of an auto incremented number.