can someone explain what is the difference in accessing CSS in browser by putting question mark ? in the end and why the new CSS is not making any affects on Website.
I have deployed a new CSS on web server but its not making any affect.
I tried to open the URL in browser as below:
www.mysite.com/styles/css/main.css
and it loads the older version of CSS.
Then I tried it as below and it loads the new version of CSS.
www.mysite.com/styles/css/main.css?
After doing all this. New CSS change does not affecting the website. Its still displaying the old design.
Kind Regards
You need to add something after the ? then change it when you change the CSS. What is happening is a browser will cache anything that doesn't change for a specific period, it does that by checking file names. so main.css? is still main.css? Anything after the question mark is a query string, generally it's used to pass data to a particular file. In this case it's just used to change the file string so the browser will update it every time it changes without affecting the file itself.
There are a couple of ways you can handle this, the first is manually changing the version, probably the easiest idea if you have a single header file, as in a template system that always loads the same head data.
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver1/>
Then on next change:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?ver2/>
If you'd rather do it automatically you can add a bit of PHP script to the css line like this:
<link rel="stylesheet" type="text/css" href="assets/css/main.css?time=<?php echo filemtime('./assets/css/main.css');?>" />
This is essentially adding a value that changes every time you save the file and results in something like this, the next time I save the file that time= value will change:
<link rel="stylesheet" type="text/css" href="http://localhost/refficient/trunk/assets/css/main.css?time=1350305706" />
browser cache is the reason,Adding ? after css is not recommended.Open your hosting space and clear cache and thread pool as well.
Related
I'm using less for a web-app. In development environment, I have something like
<head>
<link rel="stylesheet/less" type="text/css" href="test.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>
</head>
this is working correctly: my test.less file is downloaded and converted into valid css by less, automatically.
Now, If the user navigate in a particular section of the site, I need to download another .less file. To do so, I create a element on the fly like this:
<link rel="stylesheet/less" type="text/css" href="test2.less"/>
and append it to the head.
This is NOT working - at least in Chrome 66.0.3359.117 - because the browser is not triggering the file download at all.
I resolved the problem by modifying the link 'rel' attribute:
<link rel="stylesheet" type="text/css" href="test2.less"/>
This way, the browser correctly download the file test2.less; however, it's content is not automatically parsed by less, so it is not converted to valid .css
I think that when less.js is downloaded, it executes by searchings all element with attribute rel = "stylesheet/less" and parsing them - stop.
But after then, it "stops" listening to other .less files downloaded asynchronously.
There is a way to "trigger" less parsing?
Thank you
Ok, so far I've found a solution.
I bet there are more efficient solutions, but for now I'll proceed this way.
I append the element
<link rel="stylesheet/less" type="text/css" href="test2.less"/>
in the head of the document, and this is not triggering the file download.
After that, I call the function
less.registerStylesheets().then(less.refresh);
This is causing less to read again the document, ask for all documents and parsing again them all... not efficient, but it works.
I wonder if exist a method to tell to less to import just a single file...
Edit: a small improvement:
instead of doing
less.registerStylesheets().then(less.refresh);
I can do
less.sheets.push(link);
less.refresh();
link is the reference to the link created. This way less won't read again all the document, searching for links; instead, it will just prepare the XHR for the new link created and parse that.
I've seen this on a site:
<link rel="stylesheet" href="http://blablas.com/built/assets-styles.css?v=12355" />
which need to be underlined assets-styles.css?v=12355"
How to compile css file as above?
is it possible with less or sass?
[update]
And How about this?
<link rel="stylesheet" href="https://blablas.com/built/assets-201501-35b4b2bf0e75bb40f98d111b2d97951d.css">
CSS files are not to be compiled.
The reason the URI parameter is there could be it is not really a CSS file that's called, but a PHP engine (with mod_rewrite) that returns a CSS file based on the given parameter.
Another reason to use parameters is to force web browser to fetch the stylesheet again when necessary.
That has nothing todo with Compiling CSS! You use it for Cache Control. Everytime the CSS File gets changed they just need to change the numer and the new version gets requested.
In the 1st Link you posted ist a GET Variable therefore ist more likely to be vor some inernal Processing
I'm having a css file and i want to modify it to fit my needs.
The problem is that it seems to be cached somewhere, as i just cannot see the changes, no matter what i do in the css file.
I am sure i am pointing to the right file, as by now i'v modified in it, and it worked.
Is there any setting so that i can turn the cache off?
Thanks!
As pointed out in this article http://www.wkoorts.com/wkblog/2009/07/12/css-auto-reload-with-django-templates/, you could force django reload your css file by using a parameter in your css link :
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?{% now "U" %}" />
This is a timestamp which takes a different value every second, so you could even reload your css second every second if needed!
Just go into your site, view source, and copy the link to your CSS file. Verify the link, verify it's being modified. Refresh the CSS file manually via your browser to get the latest.
This isn't a Django issue.
Did you try appending a datetime stamp to the end of the request? I know some frameworks do this to .js and .css files automatically to prevent caching.
Instead of using complicated solutions you can add extra parameter to your includes in the templates.
For static includes:
<script src="{% static 'js/polls/polls.js' %}?version=1"></script>
For direct includes:
<link rel="stylesheet" type="text/css" href="/site_media/css/style.css?version=1" />
Note the ?version=1 in the code. Every time you're modifying the file, change this version in the template, so browser will be forced to reload the file.
Of course you can use even now as suggested by #rom, but if your static files are not being changed very often, it's not the smartest idea to don't use cache at all.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.
I got "dump" isp that always cached internet pages and its css for at least 1 day.
Although the css / js in the server changed, the presented css are not changed (i have been clear my cache everytime)
how to "tell" my isp not to cache some files like css and js ?
thank you !!
at the moment: i'm using proxy to check a under developed web so that it don't get cached ..
The way Stack Overflow itself solves this problem is to add a version parameter to the CSS and JS URLs, which refer to the version of the referenced files:
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=4542">
Every time the referenced files change, the href attribute of the link tag is updated in the HTML code, thus supporting caching and updated referenced files.
You could try to append some random string to every request of an external file like:
<link href="/css/style.css?cachekiller=1337" media="screen" rel="stylesheet" type="text/css" />
where the 1337 in the above code should be generated randomly for every request e.g.
<?php time() ?>
or something
You can include these documents directly in your HTML files, between <script> or <style> tags. It will obviously make all your HTML files bigger, but that's basically what you're asking.
It's the only way you can be 100% sure that your CSS and JS is not cached at all.