If I put all of my CSS in <style> .. </style> tags, will the browser cache that style data and apply it to either reloads of the same page or other pages on my web site?
If your style is part of the HTML page, it is only cached together with the whole page. If you need the style on separate pages, it needs to be loaded everytime. You should use one style file with all the relevant styles in it and refer to it with <link rel="stylesheet" href="stylesheet.css">. This file is then cached (if your HTTP header says so) and can be used in every HTML page.
Related
I have an application that loads some CSS from a url. The css is loaded from the HTML page using a link tag:
<link rel="stylesheet" type="text/css" data-ng-href="{{dynamicCss}}">
The dynamicCss variable is set in angular and it is a link of the type 'serverUrl/file.css?v=timeStamp'. The timestamp is generated by using timeStamp = new Date() * 1;
I am adding the timestamp to stop the css from being cached, as we allow css customisation and the css file needs to be recompiled by the server when the user customises the style.
There are other pages in the same application that load different css files, some of them without the timestamp, so they are cached. If I come from one of those pages, I can see the css that belongs to those pages in the source tab of my new page, even if those also have a timestamp to avoid caching.
My problem is: every time I deploy the code, if I look on the sources tab of Chrome and look for the css file, there is missing css when I compare it with the css file that the url 'serverUrl/file.css?v=timeStamp' loads. If I clear the cache the css in the sources tab of the browser matches the css in the link.
Any ideas of what is happening? Is there any problem with telling the browser to cache some css files and not others?
The problem was on the server side, some caching had been added.
I know that there are many similar issues in google, but I can't find one that help me..
When I include a css file in my JSP page it doesn't work:
<link rel="stylesheet" type="text/css" ../../css/car_rental.css">
If I try this:
<%# include file="../../css/style.css"%>
it throws exception
/WEB-INF/view/../../css/style.css" file not found
How can I get rid of WEB-INF/view/ prefix?
P.S. my jsp page is located at /WEB-INF/view/ folder, and my css file at /css/ folder
It looks like you are referencing your style sheet via a server side include. The <%# include file="../../css/style.css"%> tag will inject the contents of the named file into the JSP containing the tag, as if it were copied and pasted. It is unlikely your JSP code will need to modify the contents of your cascading style sheet.
Try replacing the <%# include file="../../css/style.css"%> tag with the HTML tag to include your stylesheet.
<LINK href="/css/style.css" rel="stylesheet" type="text/css">
<%# include file="XYZ" %> statically includes the content of your file as part of compiled servlet response.
So even if it successfully finds the CSS file, its content will be treated as normal text and will be flushed in response.
This means that your page will simply display the content of CSS and there wouldn't be any styling that would actually occur
You need to use the link tag in the head. It directs the browser to apply the style.
Also, relative paths do not work in include, as you can see from the error.
Use:
<link href="../../css/style.css" rel="stylesheet" type="text/css">
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.
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.
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.