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.
Related
I have not worked on JSPs for a long time and I'm not sure how to approach this issue.
I have this following code which tries to load a stylesheet in a page in the following way-
In JSP-
<link type="text/css" rel="stylesheet" href='<bean:message key="properties.file.key" bundle="propertiesFile" />' />
In propertiesFile.properties file-
properties.file.key=//dummy.website.com/absolute/path/of/cssFile.css
The same css file is downloaded and available locally as well.
Now, I want to fetch the cssFile.css from the dummy.website.com first, if I'm unable to do it (due to various reasons like the css may not be available anymore or the website may be blocked by the browser, etc...), I want to fetch it from the local location. Is there anyway I could do that?
So I am using https://github.com/chrisnharvey/CodeIgniter-PDF-Generator-Library/wiki to easily make PDF's on my system.
I am also using bootstrap. Now when I run the code, my styles dont' get extracted. And I get the following error:
Illegal string offset 'hex'
If I remove my stylesheets, I don't get the error but nothing is styled.
I am loading my styles like so:
<link href="http://the-green-panda.org/themes/admin/Adminica/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://the-green-panda.org/themes/admin/Adminica/css/theme.css" rel="stylesheet" />
I did enable remote in the dompdf_config.inc.php file
def("DOMPDF_ENABLE_REMOTE", true);
Has anyone else used this codeigniter library and successfully linked style sheets to make the pdf's look nicer?
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.
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.