Yes. It is true that CSS Design files (as well as site Design files aka parse files) cannot be placed into Safe Edit, and has been for as long as I can recall. And I agree it's a massive problem. To the point that I avoid CSS Design files completely, and will not take on any sites to support that use them (at least until we get a chance to swap them over).
What I do now for css files is use Standard Page assets - I know, but hear me out! You write CSS as per normal on but instead of using 'mysource_files' for the URL's etc use './?a=' syntax instead. The rest is just basic CSS.
- Create a Std Page asset with raw HTML
- Apply custom design that sets the MIME type to text/css
- Apply caching headers so it's cached for a long period of time by Matrix cache and Squid proxies (if you have them), and set the browser cache to a relatively small period of time. Use Squid accelerator headers to ensure the Squids store it for a long time and not use the browser cache.
Performance!! I can hear you say.
- Matrix cache is fast, Squids even faster, so there's minimal performance hit for this approach vs apache __data area.
- Smaller browser cache ensures currency of file.
- Longer accelerator cache ensures minimal (no??) performance hit on the servers.
- Granted you do lose the ability to return 304 responses, but since the major contributor to latency in particular for mobile or slower networks is the http request, not the amount downloaded, the performance loss is negligible. (if you were really worried you could increase the browser cache header value up - my testing shows it's literally milliseconds of difference, and by combining multiple css components together you can reduce the number of http calls even further, which more than offsets any loss in performance. But let's be real, we're discussing a few bytes/milliseconds - usually stripping out or minimising a single image will have drastically more impact)
- [UPDATE - added] Note that there is literally no performance difference between this approach and using a CSS Design File as a CSS Design file is not served as a static file anyway, so it always returns to the Matrix cache (or proxy if you have one). In other words, neither responds with a 304 (at least in my version of Matrix).
- [UPDATE - added] Approach above responds *very* favourably from proxies (Squids) on the front of the Matrix instance. Response time is incredibly quick, and the accelerator settings keep the number of hits on the Matrix cache low.
Benefits:
- You can now Safe Edit.
- Images/fonts referenced in css no longer have to be under the css parse file.
- Images/fonts references now show NOTICE links when they are included in a css file this way (no more "anyone using this font? How 'bout I just delete it and see").
- You have access to all keywords available in a Std Page asset, which leads to...
- Able to insert/combine multiple css components together (reducing http calls required, page load performance benefit), which leads to...
- Able to use keyword modifiers to replace pre-configured 'tokens' in css components, kinda like a pre-compiler/SASS/etc. We re-use a set of core css/js plugins we've developed in-house, and are able to customise them for each site. In particular we can adjust css breakpoints with just a few numbers, spin up the entire framework within a few minutes.
We use the above approach for our JS files as well. Have had incredible success so far. I've kept the option to increase browser cache time much higher, but so far performance has never been an issue. Sites using this approach have the fastest page load times I've ever developed (not *because* of this approach, my point is it's not hurting it).
(Sorry if anything doesn't make sense - it's late).
