0

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!

Community
  • 1
  • 1
Oleg
  • 24,465
  • 8
  • 61
  • 91
  • If it helps http://stackoverflow.com/questions/9658339/is-it-possible-to-have-separate-css-stylesheets-that-are-automatically-loaded-de/9658874#9658874 – The Alpha Mar 15 '12 at 23:42
  • 1
    How about handling it at the server side according to User-Agent? – Ekin Koc Mar 16 '12 at 00:23
  • @EkinKoc: browser sniffing is not as reliable as it is advertised... thanks for bringing this up though! – Oleg Mar 16 '12 at 00:27
  • 1
    Given that the spec requires the cross-origin behavior Firefox has, you should really look into getting your server's headers fixed. Otherwise things will just break when other browsers actually implement the spec... – Boris Zbarsky Mar 16 '12 at 05:27
  • @BorisZbarsky: do you happen to have the link handy? I must have overlooked this somehow and written it off as a FF idiosyncrasy rather than following spec to the letter. Awkward! – Oleg Mar 16 '12 at 05:51
  • @o.v. http://www.w3.org/TR/WOFF/#General the part saying "When using such fonts, user agents MUST implement a 'same-origin restriction' on the downloading of WOFF files using the same-origin matching algorithm described in the HTML5 specification". – Boris Zbarsky Mar 16 '12 at 17:52
  • Though note that the current editor's draft at http://dev.w3.org/webfonts/WOFF/spec/ no longer has that text because the CSS WG decided to move it to http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction instead. Doesn't impact whether it's required in your case that much, though. ;) – Boris Zbarsky Mar 16 '12 at 17:56
  • @BorisZbarsky: if you move this to an answer, I'll be happy to accept it. Saved me the trouble of dealing with it when other browsers pick up the correct behaviour! – Oleg Mar 19 '12 at 21:11

2 Answers2

4

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.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • Again, thanks for steering me away from workarounds and saving me trouble in the future for when other browsers pick up the behaviour! – Oleg Mar 19 '12 at 23:35
0

Detect browser with JavaScript then append stylesheet link if it's FireFox

$('head').append(' <link href="a-large-css-file.css.css" media="screen" rel="stylesheet" type="text/css" />');
sanon
  • 6,403
  • 2
  • 21
  • 26
  • OP mentioned using css import not an individual link request. – The Alpha Mar 15 '12 at 23:23
  • @SheikhHeera: technically that is not an issue - as I said I'm open to pretty much anything right now. However this approach would not work well in my context as the font re-rendering will be visibly delayed even on subsequent visits to the page when the resource would be cached on the client side (content shows with fancy Arial, couple seconds for DOM to be ready and than the actual request) – Oleg Mar 15 '12 at 23:28