I understand that you can set up caching on your own webserver, but how do you leverage caching of static assets for CDNs. For example
FAILED - (No max-age or expires) - http://fonts.googleapis.com/css?family=Bree+Serif
FAILED - (No max-age or expires) - http://fonts.googleapis.com/css?family=Open+Sans
and files being hosted on my Amazon S3 are also not caching
My HTML looks like
<link href="http://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
1.Copy-Paste the font ( or font family ) CSS file.
2.Put the resulting FLAT CSS file at a location & naming convention of your choosing, somewhere within your web app or a centralized known location that you can always get to.
3.Download each of the .ttf files, rename them according to some sensible convention, inclluding the actual ".ttf" file extension. The mime-type should be included in the binary of the file itself. ( This is a good theory. If any knows how to test it let me know. )
4.Place those, again, somewhere sensible that you can access. A "ttf/" directory in the directory that you placed that CSS file in step 2 seems pretty darn reasonable to me.
5.Edit the CSS to reflect the new URL's of those .ttf's instead of Google's "dynamicized" URL's.
6.Edit the original CSS include to reflect the new location of your flat CSS file.
Enjoy fast download times on Web Fonts.
Related
I apologize in advance for the generic examples of this since the issue is with a proprietary corporate system.
I support a web app that allows for edits to a secondary CSS file in order to style the page (within the limits of the application). I'm trying to apply a non-standard font that is used company wide but I do not have access to edit the HTML or header of the site, only the CSS. I tried declaring the font-family in the main CSS while referencing the actual font file URLs (since they are used on our corporate site) but they never actually loaded.
I then took the same font-family snippet and created a separate CSS file for just the font declaration and changed the URL to point to the actual files in the relative path (ex: url('fonts/DINWeb.woff') ). I moved this fonts.css file along with the reference font files (eot, ttf,and woff versions) to a public Dropbox folder for testing. I was able to get everything working by simply importing the fonts.css file using the line of code below (URL modified) at the top of my application's CSS.
#import url('https://dl.dropboxusercontent.com/.../fonts.css');
The problem is that the Dropbox solution was just for temporary testing purposes. Once I confirmed everything worked as expected, I moved the exact folder structure to an external hosting location that is approved for use. When I update my import code in the CSS to the new URL, the font does not load. I can access the CSS file and the font files from my browser without any issue so I don't understand why the web app fails to load it. I also have images hosted in this same hosting location that pull into the web app without an issue, it's only the font that has issues. The files work when hosted on Dropbox but not the other source. I've also double checked the references for the URL and they are still correct since the folder structure never changed.
Any suggestions would be GREATLY appreciated. Ideally I would like to just reference the corporate URLs directly in the web app's CSS like I initially tried. If that will not be possible, I need it to work with the externally hosted files since Dropbox cannot be used as the permanent solution.
Basically you cannot load from one domain resources hosted in other domain, unless the second host says that you can. See CORS
You can solve it by moving everything to the same domain (or forcing the user to be always in certain domain) or by adding the Access-Control-Allow-Origin header to the responses.
You can achieve this last thing if you can edit an .htaccess file in the server. Add:
Header set Access-Control-Allow-Origin "*"
Or replace the * with the domain from which you'll be making the requests.
Yes, a subdomain is a different domain (abc.com, www.abc.com and dl.abc.com are not the same).
I'm building a website locally using Apache, MySQL and PHP. I have different subfolders and I'm trying to give one absolute reference to my css file from my main header.php includes file.
Inside of header.php I have:
<link href="/Users/nicolauria/Sites/sd/css/style.css" type="text/css" rel="stylesheet" />
The css file does not load correctly. Developer tools gives me this message "The requested URL /sd/css/style.css was not found on this server."
Any help is greatly appreciated!
Nico
You're loading this via HTTP? Then you're bound to use only "http-space" paths, which means you can NOT include the site's document root in urls. e.g.
your site's files are physically on the server in /home/sites/example.com/html, which is defined as the document root of the site. When you visit the site and request a file, e.g. http://example.com/foo/bar.html, the web browser will send over:
GET /foo/bar.html
and the webserver will tack on the document root, producing
/home/sites/example.com/html/foo.bar.html
But note that this path applies ONLY within the webserver itself. It will never be accesssible to you in this form. You can only specify directories/files within the site's document root. That means if you requested something like example.com/home/sites/example.com/other/file.html, you'd force the server to produce /home/sites/example.com/html/home/sites/example.com/other/file.html, etc...
If you want to provide an absolute URI then you must:
Include the scheme (file://)
Accept that many browsers will refuse to load file: data onto a page loaded via http:/https: for security reasons
Accept that users on other computers won't have access to your filesystem
It is far, far better to host all the resources you need on the webserver.
In Which location your header.php file is located? I mean If you have your header.php file in sd folder than use your code like this <link type="text/css" rel="stylesheet" href="css/style.css" />
Maybe this link will help you alot
http://www.htmlhelp.com/reference/css/style-html.html
If I edit .css file and upload it by ftp to apache web-server I need to clear a cache in a browser to see the correct page.
Why does it happen? I think browsers should check .css file's date to decide to load it from the net or from the cache.
What is the proper solution of the problem for web-developers?
I think browsers should check .css file's date to decide to load it
from the net or from the cache.
Depends on the headers. The browser doesn't even need to check if the file has been modified if, for example, the Expires header had a date in the future. It's a good thing, because it spares a request to the server.
Solution for web developers - disabling cache in browser's web tools and/or constanly purging your cache if that option isn't available in given browser.
When you want the changes to go live you can change the CSS file name. Adding a parameter with modfication date to the CSS url is usually enough, like <link rel=stylesheet" href="style.css?20130917" />, but if you use an additional layer (like a CDN) you may need to go with <link rel=stylesheet" href="style.20130917.css" /> and some server-side magic to map filename.[numbers].css to filename.css.
There is a 'hack' you can use - while loading css file add after file path ?randomNumber=xxxx like:
/path/to/my/css/file.css?anything=123123
If you want to ensure the browser grabs a fresh copy of that CSS file you need to change URL for that file. But that's not as bad as it seems. A common trick to to append a new querystring on the end of the CSS file with the last modified datetime. That way it only changes when the file changes.
<link href="/css/stylesheet.css?20131422080000">
We are using static HTML files as theme for our Plone 4 site with collective.xdv.
The static HTML files themselves are openable in a web browser making the theming process easy for the theme authors.
However, theme files use a file system resource directores which are referred in HTML like
<link rel="stylesheet" type="text/css" href="../css/jquery/accordion.css"/>
How it could be possible to rewrite these to be absolute URL when served through Plone, with a custom prefix? (Can it be done in rules.xml??
E.g. translate
../images/logo.gif
To
http://portal_url/images/logo.gif
If you use the "absolute_prefix" setting
<registry>
<record interface="collective.xdv.interfaces.ITransformSettings" field="absolute_prefix">
<value>/++resource++example.sitetheme</value>
</record>
</registry>
and manage your static files via the resource registries with the "applyPrefix=True" option you can use both relative and absolute urls inside your theme html file (preserving the possibility for theme authors to simply use the static directory independent from Plone) and use
<drop theme="/html/head/style" />
<append theme="/html/head" content="/html/head/style " />
to remove them from the theme template and pull all static resources back in from the resource registries (with the additional benefit of having them merged for production use). See collective.xdv for details.
Note: though Nginx is very fast at serving static files we got better overall performance from utilizing the resource registries for our theme`s static files in combination with the usual caching proxy (Varnish) in front.
Register the static directory as a resource. Keep the directories containing the rules and the media files separate.
To register a resource directory inside your package, named 'my.package', use the following in your configure.zcml
<browser:resourceDirectory
name="my.package.media"
directory="static"
/>
In your template, you will now be able to access a resource using '++resource++my.package.media/name-of-resource', i.e.
<link rel="stylesheet" type="text/css" href="++resource++my.package.media/css/jquery/accordion.css"/>
This should now work as intended even after a url rewrite.
Avoid using absolute paths when defining the locations of your XDV rules and templates. Instead, simply use Python :) For example, we have placed our template files (.html) and our rules files (.xml) in a directory called xdvstuff, inside our package:
python://my.package/xdvstuff/theme.html
python://my.package/xdvstuff/theme.xml
When opening a file from your hard drive into your browser, where is the document root? To illustrate, given the following HTML code, if the page is opened from the local machine (file:///) then where should the css file be for the browser to find it?
<link href="/temp/test.css" rel="stylesheet" type="text/css" />
You can, but probably don't want to, set the document root on a per-file basis in the head of your file:
<base href="my-root">
It depends on what browser you use, but Internet Explorer, for example, would take you to the root directory of your harddrive (eg. C:/), while browsers such as Firefox does nothing.
On a Mac, the document root is what you see in the window that appears after you double click on the main hard drive icon on your desktop. The temp folder needs to be in there for a browser to find the CSS file as you have it written in your code.
Actually, you could also write the code like this:
<link href="file:///temp/test.css" rel="stylesheet" type="text/css" />
Eric, the document root is the folder in which your file is, wherever it may be.
As far as local, static html goes, unless you specify it, most browsers will take the location of the html file you are viewing as the root. So any css put in there can just be referenced by it's name only.
The lazy way to get the correct reference for your css file is to open it in your browser. Then just grab the url that you see there - something like: file:///blah/test.css and copy that into your stylesheet link on your html: <link href="file:///blah/test.css" rel="stylesheet" type="text/css">
Either that or you can just take the url for the html file and amend it to refer to the stylesheet.
Then your local page should load fine with the local stylesheet.
If you're interested in setting the document root, you might look at getting a web server installed on your machine, or, if you already have one (like Apache or IIS), storing your project-in-development in the web root of that server (htdocs in Apache, not entirely sure in IIS). If you'd rather leave your files where they are, you can set up virtual hosts and even map them to addresses that you can type into your browser (for example, I have a local.mrwarshaw.com address that resolves to the web root of my personal site's development folder).
If you're on Windows and don't want to mess around with setting up a server on your own, you could get a package like XAMPP or WAMPP, though bear in mind that those carry the extra weight of PHP and MySQL with them. Still, if you've got the space, they're a pretty easy drop-in development environment for your machine.