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.
Related
My site is in a Host. (Not localhost)
Framework: CodeIgniter.
Changes made using CSS: Flot chart's legend
I did changes to front end using Chrome tools/developer tools.
I can see all the changes I made instantly.
I FTP to the site, downloaded the CSS file, did necessary changes (same as chrome developer changers) and uploaded the CCS file.
I access the site, but I cannot see the changes I made using CSS file.
Check if your hosted CSS contains the latest changes
If CSS is ok try to open chrome dev tools and inspect the element that you are trying to modify. Scroll through the CSS applied to that element and check if your styles are there.
If you didn't find any of the styles that you are tring to apply to the element probably you misspelled the selector name. Remember to check .class #id
also, in order to ensure that your CSS files are not cached suffix your php files like this
<link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" /&glt;
EDIT
tip above also works for any resource! (css, javascript files, images ...)
Try Ctrl+F5. It's hard refresh
change the name of the css file so there are no cache issues and then check. if that does not work then look at your source code and copy paste the address of the css file to make absolutely certain you have the link correct.
I think your CSS is still cached so have a Look at this popular question: How to force browser to reload cached CSS/JS files?
There are some solutions how you can force your browser to refresh the CSS or js.
The easiest answer you will get is using something like this:
/styles/screen.css?v=1234
If you did a change all you have to do is to +1 the counter!
In PHP you van also use this:
<link rel="stylesheet" href="mycss.css?v=<?php echo filemtime('mycss.css') ?>"/>
It's like an autocounter using the timestamp of the CSS file.
In the DevTools Settings (F1) or in the Network panel (depends on what version of Chrome you are using) tick the Disable cache (while DevTools is open) checkbox. If caching is your problem, it should get fixed.
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 both chrome and Firefox, the browser doesn't load the full stylesheet after a change is made. I have to refresh the browser twice. The styles are all in one stylesheet, so this makes no sense to me.
The main culprit is that ul elements set to display:none are over-ridden by the user agent styles of ul,menu display block. However, if I refresh again, then my entire stylesheet loads. All my files and folders are stored on the work server. Is it a caching problem?
To prevent caching of css files you can append a querystring. I do this when we update our main website.
<link rel="stylesheet" type="text/css" href="http://mysite.com/all.css?v=1.3">
I increment this whenever we do a release. If you are just testing your web server you can put in some dynamic code that generates the current time.
In Chrome, you can disable the cache when you're developing. Open the developer tools (F12, or Ctrl-Shift-J), click on the Gear at the very bottom right, and check "Disable cache".
In some sourcecodes i see this:
<link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" />
Now is my question: why do people print 201007071609 behind style.css?
This forces the browser to not load the css from cache and rather take the latest version from the server
see related article
Another trick developers do is to add a random string or a timestamp to force refresh the css page.
That's a way to make sure that clients don't cache older versions of the same file. If the URL is different, the client will retrieve the file from the server instead of from cache. So, for example, if a new version of the site was published, that would be a way to make sure visitors see the right CSS.
This forces the browser to retrieve a fresh copy of the file, rather than loading a cached version. This is important when your html has changed and requires an up to date css file to prevent it from displaying incorrectly.
the font of the content of my facebook app keeps getting italicized even when i've removed the italics from the css file. if i make minor changes in the css file and upload it to the server, the firebug shows the unedited previous css file and hence, the app keeps showing unformatted content. what exactly is going wrong here?
i made a new css file and copied the contents of the previous css exactly as it was, and i linked it in all the files which require css. but when i upload these files to the server, facebook canvas doesn't show any css at all. i replaced the css filename with the previous one, and it works. why is this?
Actually it looks like facebook is currently experiencing some weird problems with styling. It doesn't cache any new styles, only displays what was previously cached (from yesterday). If you provide a new stylesheet url it will not be able to pull it up (like that url doesn't exist).
During normal conditions what others already suggested should work.
Facebook does like to cache things. Persistently. I don't know why the new file wouldn't have worked, by I can recommend 'spoofing' your css filename with a spurious querystring variable, and incrementing it each time you make an update.
eg
href="my_css_file.css?x=1"
Sounds like the browser is caching your CSS file, which is why even Firebug sees the older version.
There are numerous ways you can prevent the browser from caching your CSS file during development (once in production mode, you probably want it to remain in the cache). The most common technique used by web frameworks like Ruby on Rails is to append a random query string to the URL, like so:
<link rel="stylesheet" type="text/css" href="style.css?96234987" />
...but the trick is that it should be different every time, so the browser thinks it's a different file.
Here are links to a simple trick for PHP, a JSP example, and other possible methods.
According to Include files on facebook developer wiki:
Stylesheet includes are cached automatically by Facebook. Just include a tag like:
<link rel="stylesheet" type="text/css" media="screen"
href="http://yourapp.com/stylesheets/style.css?v=1.0" />
Increment the version number upon each change to your style sheet, as specified above.