EDIT: My sincere apologies! This wasn't an issue with anything but myself - I had a global.css file with correct stuff in it, but below that I included another file with the old CSS in it, in the <head> bit of my HTML. Facepalm.
I have a site I'm developing. I'm using LESS to enhance my CSS to make it easier to write. The problem is, when I change the .less file, the styles rendered in the browser refuse to change. I've looked in the generated .css file, and that updates to reflect the changes made, however the browser doesn't update it's rendered style from the CSS file. I've tried this in Chrome, FF(3 and 4) and Opera, with the same non-updating results.
I've even told the browser to cache nothing, both with PHP and meta tags, to no avail. My Apache config file is almost vanilla, although I am using multiple localhosts (this is a local server). The code used to convert LESS to CSS is given below, and is run every time the page is reloaded:
try
{
lessc::ccompile('global/global.less', 'global/global.css');
}
catch(exception $ex)
{
exit('lessc fatal error:<br />' . $ex->getMessage());
}
There are no exceptions here. the less.php parser checks if the file has been modified, which I removed for a bit, but the CSS file is re-generated on every change, so this must be a caching issue with the browser somewhere... Apache serves up the updated CSS file just fine :-/
Sorry to go on for so long, but I wanted to be clear. If you need anything else, do let me know.
Once I saw in a code the use of timestamp to force the browser to download the css and js files every request, that way:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=time()?>" />
The ?ts=123456789 forces the browser to reload the file whenever the number is different from the previous one.
So I adopted the idea, but instead of timestamp of now, I use timestamp of the modification of file style.css; so it's cached in the browser until be modified on the server:
<link rel="stylesheet" type="text/css" href="http://www.example.com/style.css?ts=<?=filemtime('style.css')?>" />
I'm using LESS and Laravel, and I finally figured out a good solution:
In my <head> tag, I have:
<link rel="stylesheet/less" type="text/css" href="/less/main.less?ts={{FileHelper::getMostRecentModifiedTimeInFolder(realpath(public_path() . '/less'))}}" />
Then I also created a FileHelper class (based on https://stackoverflow.com/a/6767411/470749):
<?php
class FileHelper {
public static function getMostRecentModifiedTimeInFolder($path)
{
//https://stackoverflow.com/a/6767411/470749
$iterator = new DirectoryIterator($path);
$mtime = -1;
foreach ($iterator as $fileinfo) {
if ($fileinfo->isFile()) {
if ($fileinfo->getMTime() > $mtime) {
$mtime = $fileinfo->getMTime();
}
}
}
return $mtime;
}
}
I might decide to use this approach only on my local development server and use a different approach for production so that it's not always checking file timestamps on every page load.
Since you can't control browser cache, I would suggest you give versions to your css file. Like global.1.11.css.
Related
I am building a web2py application.
I use my own css file called style.css
I do know that the following code
{{response.files.append(URL('static','css/base.css'))}}
{{include 'web2py_ajax.html'}}
will link my css file to my application.
I use this for layout.html; which is used for every page of application.
Initially, I do not have problem with this...
Suddenly, at some point, my css is not updated...
Every css before the point, works fine.
Every css after the point, do not work at all.
In web2py editor, all css changes are updated. However, If if run it, the css is not updated... If I inspect the css code using chrome, the css is not updated and remain to previous css file..
for clarification, I give you example
initially I just have the following.
#title{
font-size: 90px;
}
then I change it to the following
#title{
font-size:100px;
}
IN the web2py editor, the change is saved and set it to 100px. However, if i run the application and view css file using chrome inspect, it is still remained as 90px.
I thought the server may have some error, so I restarted. I still get error.
Another thing I can think of is the confit with bootstrap..
The following is the head part of layout.html
<head>
<title>NR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{response.files.append(URL('static','css/bootstrap.min.css'))}}
{{response.files.append(URL('static','css/style.css'))}}
{{include 'web2py_ajax.html'}}
</head>
Actually, I do have a solution...
If I create css file with different name, and copy and paste all css work, it work!!
However, this takes extra work... create new css file and copy and paste.... It is not good way.
Can you help me?
Thank you
Perhaps your web server is configured to set the HTTP response headers so the assets will be cached by the browser (in which case, they will not be re-sent on every request). If this is just a development issue, you can simply force your browser to reload all assets (e.g., by pressing CTRL-F5).
For a more general solution, see the documentation on static asset management.
Another option is to let web2py serve the static content itself, in which case, the assets will be re-requested with each page and web2py will return 304 responses if the assets have not changed since last sent.
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.
For some reason I can't get the new css to be used in firefox or ie's browser.
I am using php to consolidate all the css into one file, then output it like so:
PHP file:
header('Content-type: text/css');
readfile('layout.css');
readfile('a.css'); //jqueryUI
Here's how I call it from the HTML side:
<link rel='stylesheet' href='stylesheet/css.php?v=1327523109' type='text/css' />
The "v" querystring parameter is simply a php time() function from a tip I got on another search for the problem. Hoping the time() would trick the browser into not loading the cache version, but it is not working and still loading the old css.
When I look in firebug's css file it shows the old css file. However if I directly access the .css page through the url, the output to the browser screen shows all the new css code.
if I render the same page in the chrome browser it shows the new css without any problem...but ie and ff show the old css.
I don't understand what's going on and how to fix it. Can anyone help me?
ctrl + shift + del In both browser will allow you to clear your cache, cookies, temp files, and more via nice checkboxes.
Perhaps the css file is cached in the browser. Try CTRL+F5. If that doesn't work try clearing the cache, if that doesn't work try a reboot. :D
I tried CTRL+F5, Clearing the cache, rebooting...none of that worked right. Then I decided to change the ordering inside the css.php file for the readfile() functions. Once I moved the ordering around it triggered the new css to load. I don't know exactly why this worked, but now the new css loaded.
Decided to answer this here in case someone else comes accross a similar problem and the traditional cache clearing doesn't fix it.
Here is the trick, instead version, just use the PHP filemtime() Function to show your last modified file.
<link rel='stylesheet' href='stylesheet/css.php?<?php filemtime('stylesheet/css.php'?>' type='text/css' />
So every time you modified CSS file, the browser will know what file must be loaded.
hope it help..
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.
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.