I have 2 CSS files as below. style.css is getting 304 Not Modified. But default.css is always getting 200 OK. Why is default.css not being cached?
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="style.css"/>
I have tried including number of external multiple CSS files into XHTML .I always go with the basic approach to insert CSS into XHTML.I insert the following lines on the index page of your project. It always works fine.
<link rel="stylesheet" type="text/css" href="file1.css" />
<link rel="stylesheet" type="text/css" href="file2.css" />
It is possible that the default.css style is being provided by the server with some sort of document header that prevents caching. This may be out of your control, but if not you could inquire if the server has some specific rule(s) via htaccess or another configuration that prevents the browser from caching (or caching for a very short time).
If default.css is a dynamically generated document, the header could also be created dynamically by the language that creates the actual css document on the server.
There are tools like Fiddler and browser plugins like Live HTTP Header that allow you to inspect the headers of a file requested by the browser.
The browser itself can also have caching turned off but if two unique files with the same extension are acting differently it's probably not a browser setting.
Related
The occurence seems to happen at completely random intervals
Accompanied by message in Chrome console: Resource interpreted as
Document but transferred with MIME type application/octet-stream:
"<url>"
It only happens when loaded from disk cache - if a cache refresh is
forced then it displays in the Chrome as expected
Currently the CSS file is hosted on sirv.com - this may or may not be
significant
Here is the HTML code used to load the CSS:
<link rel="stylesheet" href="<url>" media="all">
Remove media="all" and it will be solved <link> is itself used for loading.
The media attribute specifies what media/device the target resource is optimized for.
The default is always media="all" so you don't need to specify it again
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.
In my JSF Application (My faces 1.2.3) , I am referring to a css file as
<link href="css/nav.css" type="text/css" rel="stylesheet" />,
This worked when the rendered HTML is accessed as an HTML file using the browser but not inside my customized servlet container.
It wasn't referring correctly, eventhough the relative path was correct. Then I tried with
<link href="../css/nav.css" type="text/css" rel="stylesheet" />
It worked in a browser and did not in some other browsers.
I was told that I should use facelets.DEVELOPMENT" = true to make it work , It worked in Dev Env and it did not in Test Env (There will be some inherited properties!!! and not everything will be used from my application)
I have some knowledge on these accompanying technologies but not an expert. Wondering whats the issue and where ? - Servlet Container , XHTML , Facelets , JSF Impl ?
Any Idea - What could be the problem?
A relative <link> URL is relative to the request URL as it is on the client side, in the webbrowser's address bar (the webbrowser is namely the one responsible for loading the CSS files), it is not relative to the folder structure as it is on the server side.
So if the request URL is for example http://example.com/context/page.jsf, then the CSS which is referenced by href="css/nav.css" will be loaded by http://example.com/context/css/nav.css and the CSS referenced by href="../css/nav.css" by http://example.com/css/nav.css.
If you still stucks with this, then you need to post both the absolute URL with which you can request the page in question successfuly and the CSS file itself. This way we can explain you which relative URL to the CSS file you should be using for the page in question.
Probably the problem is that your application is not absolute to the request url
Lets assume that you access your application via:
http://localhost/my-app/
And now when you try to load a resource as you described above
<link href="css/nav.css" type="text/css" rel="stylesheet" />
It will be loaded by
http://localhost/css/nav.css
I would suggest using the context path property when referring resources.
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/style.css"/>
One potential solution here would be to use a root relative path, something like.
/MyCSSFolder/myfile.css
In most cases this can resolve the issues.
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.
When SharePoint's content editor CSS file (HtmlEditorCustomStyles.css) is customized how can I get the updated css file updated on the client browser?
In testing I've found the updated version is ignored in favor of the browser cached version and I've only been able to get the updated version by deleting the CSS file from the browser cache (or just deleting the cache completely).
If you figure out where the CSS file is being included, you can add a URL parameter to the end of the include. For example if you find the include is:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css">
You can add:
<link type="text/css" rel="stylesheet" href="[some path]HtmlEditorCustomStyles.css?revision=1">