I have a css file that I only want to be visible to Firefox browsers. I thought I was super-smart coming up with
@-moz-document url-prefix() {
@import url("/a-large-css-file.css");
}
…only to find out that @import directives cannot be nested like that.
More details:
- The file is heavy, so it’s not an option for me to include its
content inline inside the “conditional” as I don’t want for it to
affect total request size for other browsers - The file contains a font-face declaration with the font itself
base64-encoded. Why you ask? Firefox does not allow for fonts to be
downloaded from a different subdomain and that’s how twe host static
content. There’s a nice recap of the issue here and here - If you’ve looked through the links in the point above, you’d see a
suggestion to add an Access-Control-Allow-Origin http header –
unforunately this is not an option for me given our infrastructure
setup and deployment procedures.
Even more details:
- Static content is hosted on a url similar to
resources.environmentN.domain.com while the pages’ urls are similar to environmentN.domain.com where N is different across
the environments. - We’re have Apache Tomcat running Liferay Portal.
At this stage I’m open to almost any workaround 🙂
Edit
I probably should have phrased this differently, but I must mention that I’m probably not open to javascript workarounds, the reason for that would be an unstyled content flash even after the resource is successfully cached locally – this would be the case with solutions proposed so far.
My apologies for the confusion!
You should really just bite the bullet and get the server side fixed, since http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction requires the Firefox behavior and the other browsers will update to it at some point.