themedCSS order

Questions
#1

Silverstripe 4.x

Question:

I have the following problem:

In the template in the area I have the following code:

<head>
<% require thmedCSS('style.css')
<% require thmedCSS('custom.css')
<!--[if lte IE 9]>
links rel="Stylesheet" type="text/css" href="ie.css">
<![endif]-->

In the supplied html document it looks like that:

<!--[if lte IE 9]> 
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->


<link rel="stylesheet" type="text/css" href="/_resources/themes/mytheme/css/style.css?m=1484229516" />
<link rel="stylesheet" type="text/css" href="/_resources/themes/mytheme/css/custom.css?m=1573584963" />

So exactly the wrong way around. The instructions with “themedCSS” are always included last.

Additionally, a whole bunch of blank lines are substituted for the “themedCSS” statements.

Adding “themedJavascript” to the template will make it even crazier.

Is this a bug or a future?
Give it a trick to determine the order itself.

I’ve already tried to write and embed “IE9.ss” into an extra file with <% include IE9.ss>, but in this case as well, the “themedCSS” or “themedJavascript” instructions will always end at </ head> Section written.

Thanks & Greatings!

RALF

#3

Try This

6

7

#4

Hello “manibalan”!

Thanks for the tip. But that’s the way it is and it’s not necessarily the best solution. Especially with responsive designs, it is important in my opinion that only as much data is loaded as absolutely possible. And with this solution simply the attached timestamps “?m=123456789” are missing.

But I also believe that there is currently no other solution. Rather, it is a fundamental mistake in the design of SS.

The previously prepared code is inserted in “vendor/silverstripe/framework/src/view/Requirements_Backend.php::insertTagsIntoHead ()”. And there is only just fixed to the end of the head area. :frowning:

Maybe a core developer will read this as well and it will change in one of the next versions ?!

I think this thread can be closed here.

Greeting RALF

#5

The problem here is that you’re mixing techniques for including your CSS. The Requirements API is designed so that you can collect all the assets together, from all the templates, sub-templates, cointrollers, etc. and have them injected into the page (same with the JS functions). But you are also adding CSS directly in the template, which bypasses the Requirements methods.

The ordering could be changed to include it earlier, but the risk would be that you then simply reverse the problem.

Adding browser-specific CSS is (thankfully) becoming a thing of the past, so in theory it should be possible to just move all your CSS into the Requirements API.

An alternative would be to add your own extension to Requirements to deal with conditional tags. That way, you could still use the Requirements API, but could also include your conditional comments.

I’m not sure I agree that it’s a fundamental design mistake - it works well enough outside the case of adding conditional comments - but if you have a specific suggestion of how the functionality could be improved, then the best bet would be to raise an issue here: Issues · silverstripe/silverstripe-framework · GitHub or add a feature suggestion here: Feature Ideas - Silverstripe Forum