I'm writing simple web app which generates simple CSS file for user.
I've mapped servlet for writing CSS on specific tag, and depending of the user's session attributes, I use PrintWriter for generating CSS stylesheet.
Problem: Stylesheet doesn't have any effect. Chrone shows it was downloaded (inspect element -> network), but it doesn't have any effect on my htmlpage.
In html, CSS is defined by: <link href="stylesheet.css" rel="stylesheet" type='text/css'>.
That will happen if the response content type is (implicitly) set to something else than text/css. You can easily verify it in response headers section in HTTP traffic monitor.
Explicitly set it before writing any byte to the response body.
response.setContentType("text/css");
// ...
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 am using the Chargify service and within their settings they allow you to include some custom CSS. I am including
#import url(http://swag-box.herokuapp.com/chargify.css);
I can see that the CSS is being embedded into the page but It doesn't seem to be affecting the page in anyway.
You can view the live page here.
What exactly is the problem here?
Using #import is not necessary. You can just do:
<link rel="stylesheet" type="text/css" href="//swag-box.herokuapp.com/chargify.css">
The use of // makes the request use the same scheme as the page. In your case the page scheme is https. However, you were including via http. Some browsers will considre this unsafe and block the resource. That is why you were not seeing the import (it was working). You can of course change the #import to use https or //.
You can also update the browser settings to allow the unsafe resource to be loaded, but this is a per-user setting. If you are using Chrome, you will notice a shield to the left of the favorites star.
No quotes are required in the url declaration for #import.
EDIT: always use https
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.
How should I reference my css file (which is in the non-secure area) from a webpage in the secure area. I've considered duplicating it (moving one in to the secure area) but this seems very inefficient.
Any advice much appreciated.
(p.s. there will most likely be a few follow up questions ha ha)
You can always avoid the issue by using a relative/rooted path:
<link rel="stylesheet" href="/css/screen.css">
If you must use a full URL, I'm not sure why you can't use the https protocol (which is the correct solution), but there's one more option: don't specify a protocol at all.
<link rel="stylesheet" href="//example.com/css/screen.css">
http://paulirish.com/2010/the-protocol-relative-url/
If the browser is viewing that current page in through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll typically* request it with HTTP. This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.
However:
Caveat: When used on a <link> or #import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.
So if you must specify a full URL, the best/proper way is this:
<link rel="stylesheet" href="https://example.com/css/screen.css">
There's really no alternative. Relative paths to images and resources in the CSS file itself should work just fine with either approach, and won't trigger the security error. If you need absolute URLs in the CSS file, then you can use the same trick.
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.