Caches and browser conditional content

(Andrew Harris) #1

I'm running into some curly browser compatibility problems with IE 10 and below. (Actually, it's a WebGL compatibility problem, but IE10 is my main problem)

 

Essentially, I need to serve different css and javascript files to IE10 and below, and then run some different functions in a js code block down in the body of the page.

 

So, one thing I am considering is whether I can use Matrix to serve the conditional code blocks. I mean, the application can do it, but what happens when that page gets cached in Squiz Edge? If an IE request populates the cache, what does a Chrome user see?

 

Is this a sensible thing to do?

 

Note: IE Conditional Comments don't work in IE 10

 

Edit: Also, the js and css files I'm loading are libraries that I will not be editing, so no @media queries or special functions etc.

(Marcus Fong) #2

Matrix has conditional DIVs, but from what I recall they force no-cache headers. So if you use them, neither Squiz Edge nor any other proxy (Squid, Varnish etc.) will do any caching of that particular URL.

Matrix manual page: https://matrix-manuals.squiz.net/concepts/chapters/page-contents-and-divisions

(Bart Banda) #3

I think your best bet is to run some JS client side that detects the browser version and then if IE10, run your other JS or add new CSS via JS. I'm sure there are IE10 detection script samples out there on the web somewhere, and I think maybe even modernizr might help you? https://modernizr.com/