I've got a site that uses a lot of SVGs as background images. Many of the SVG files have query strings attached to them, which are used to dynamically change colors (via a bit of PHP). For example, my CSS might call an SVG like this:
background-image: url("/images/sprite.svg?color=00ffff");
I've now realised that these SVGs with query stings don't get cached which makes page loads very slow and clunky!
I tried adding this to my .htaccess:
<FilesMatch "\.(svg)">
ExpiresActive on
ExpiresDefault "access plus 1 month"
</FilesMatch>
But that doesn't seem to do it – looking at the Network tab of Chrome Dev Tools shows that they still have a size, rather than being "from cache".
Is it actually possible to tell a browser to cache SVGs with query strings? Is my htaccess rule wrong? Or is there another reason that Chrome wouldn't be caching them?
You should use an ExpiresByType directive instead. See mod_expire:
ExpiresActive on
ExpiresByType image/svg "access plus 1 month"
Related
So I usually want to set htaccess rules slightly differently based on what server it is on, eg live or development.
The ErrorDocument usually needs to be different, as well as some of the AddType and SetHandlers bits.
Is there any way I can make this a bit more dynamic and get it to auto detect based on the URL, then set a variable and have if conditionals further down in the htaccess?
Want to do this entirely from URL detection instead of setting parameters with apache please :)
No there isn't any way to set those things via some url detection. You can't make normal if conditions surrounding some of the things you want (AddType SetHandlers and ErrorDocument).
You could use env variables and mod rewrite but I don't think you'll like the end result. You'll have to do something like this using env|E=[!]VAR[:VAL] syntax
If you were in the httpd.conf or vhost file you might be able to separate your different setups by using <directory> sections </directory>. But Directory is not allowed in htaccess.
Also I wouldn't do this in a production environment anyways since something could go wrong and I would think the detection is slower and not needed. Perhaps you may want to look into a build script you run to create/deploy your different setups for development/production depending on hostname and other factors.
I would like my Web page
http://www.gmarks.org/math_in_e-mail.txt
on my Apache 2.2.14 server to display correctly in all browsers on all platforms (or something approaching this). I have included the line
AddDefaultCharset utf-8
in the appropriate .htaccess file. I find, however, that on my own machine, running Ubuntu 10.04, the page displays exactly as I would like only in the Google Chrome browser. Problems in other browsers: in Opera the last two lines do not display, in Firefox the subscripted aleph’s are too small, in rekonq the last two lines display incorrectly with various Fraktur characters repeated and others not displayed, in Midori the Opera and Firefox problems both occur, in Arora the Firefox and rekonq problems both occur, in Epiphany the Opera problem occurs.
Is there something else I could put in my .htaccess file, or some other configuration I might set up, to get that Web page to display correctly everywhere? I suppose I must rely on the font set each user has installed on his or her computer (obviously it defeats the purpose of the Web page to use something like GIF images). I find the differences among the browsers strange: does each browser include its own set of fonts in some configuration file, or do they access some directory containing fonts for the entire computer? (And is the answer to the last question OS-dependent?)
Further questions: would I do better to change the line in my .htaccess file to
AddCharset UTF-8 .txt
and is there a way I can make the .txt file display by default with an increased font size?
A browser will not know the text is UTF-8 encoded unless the text starts with a UTF-8 BOM (assuming the browser even looks for that) or the HTTP Content-Type header specifies UTF-8 as the Charset, ie: Content-Type: text/plain; charset=utf-8. If AddCharset tells Apache to generate that attribute for .txt files, then great.
There is no way to specify a font for a .txt file by itself. You have to use HTML for that. To specify a font for a .txt file, you would have to write a server-side script that outputs an HTML wrapper around the .txt file content and then sets the HTTP Content-Type header to specify text/html instead of text/plain as the data type.
Check out http://fube.ca in any browser but Firefox and you'll see that the cloud logo is a custom glyph font. In Firefox, though, the font won't load.
As best I can gather, the problem is that I'm serving the font from a subdomain and Firefox has strict requirements about the serving fonts from the exact same domain as the site. Apparently I can get around this by making a change to my .htaccess file, but the recommended changes don't seem to be working. See https://www.fontspring.com/support/troubleshooting/webfonts-are-not-loading-in-firefox and http://enable-cors.org.
Based on what I gather from these, here is what my .htaccess file currently looks like:
AddHandler php-stable .php
Header set Access-Control-Allow-Origin "*"
The first line was already there. I added the second (blank) and third lines. What am I doing wrong?
Actually, it turns out that my changes to .htaccess didn't save somehow. Adding that line to .htaccess does fix the problem.
I am hoping to have some .htaccess expires headers stuff be conditional based upon the current environment. For example, the following would only be active if it were the production server, as opposed to local development:
ExpiresByType image/png "access plus 1 month"
It is annoying to have to clear cache during development constantly. Any ways around this?
Thanks :)
Yup, use your browser in Private AKA "Porn Mode" during testing. Chrome allows this on a per window basis. In this mode, any caching, 301 redirect info is cleared when you close and reopen a session. You can also clear history over the last hr / day / week. This is what I do.
In terms of Expires, etc. AFAIK there is no mechanism for embedding conditionals for ExpiresByType however is its trivial to bookend such lines with "##--START-DEV" "##--END-DEV" lines and write a trivial sed script (or windows equivalent) to rewrite the .htaccess commenting out or re enabling lines between such bookends.
One of my friend says, etags on off mode for speed up page loading. How to off etags with htaccess?
To unset Etags use 3 lines below:
Header unset Pragma
FileETag None
Header unset ETag
But, to increase page loading speed, my advice is YSlow.
perfect tool & Yslow recommends to use Etags instead of setting off.
Putting the following in your .htaccess should do the trick.
Header unset ETag
FileETag None
Note: Disabling etags only helps if you are hosting the same content from more than 1 server (such as when using a cluster or CDN). Take a look at wikipedia or yahoo best practices for more information.