4

I think there is a bug in the getHeadHtml function of craft. In the Documentation (https://craftcms.com/docs/templating/includecss) it says:

Your CSS snippet will be output by the getHeadHtml() function. If you aren’t calling that function anywhere, Craft will insert it right before the HTML’s < /head> tag.

But in my templates it works only, if the tag getHeadHtml() is placed after the includeCss Tag. So the following simple Example does not work as expected: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <!-- Here should the CSS start --> 
        {{ getHeadHtml() }}
    <!-- Here should the CSS end --> 
  </head>
  <body>

      {% set myCss %}
        .content {
            color:  red;
        }
      {% endset %}


      {% includeCss myCss %}

  </body>
</html>

It outputs the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <!-- Here should the CSS start --> 

    <!-- Here should the CSS end --> 
  <style type="text/css">
  .content {
            color:  red;
        }
  </style></head>
  <body> 
  </body>
</html>

It outputs the CSS before the closing < /head> Tag and not between the two comments. Is there any workaround/fix for this?

| improve this question | |
6

This is just an order of operations issue. The documentation is correct, but incomplete.

getHeadHtml() will only output head HTML that was queued up for it before the function was actually called. Any head HTML that is queued up after you've called getHeadHtml() will end up getting inserted in the default location - right before the </head> tag.

So, if you had this in your template instead:

{% includecss %}
  .content {
      color:  red;
  }
{% endincludecss %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <!-- Here should the CSS start --> 
        {{ getHeadHtml() }}
    <!-- Here should the CSS end --> 
  </head>
  <body>

  </body>
</html>

Then the CSS would get included between the HTML comments as you’d expect.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.