0

Seems like a simple question, since you can do it with JS files, but I can't seem to find an answer.

I know for javascript things like moveJsFromHeaderToFooter and includeJSFooter exist in typoscript config, but no such setting for stylesheets. I compress and concatenate my stylesheets as well, so the result isn't a static file either.

user828591
  • 1,212
  • 2
  • 17
  • 32
  • In general CSS inclusions should be at the most top position, while JS should placed be after whole code. Maybe that's why no such option. See [some explanation](https://stackoverflow.com/a/6517855/1066240) about that – biesior Apr 01 '21 at 20:49
  • If you determined to put styles into the footer, just don't use it by `page.includeCSS` and put it directly within your template or with `page.999` as a common text in your TypoScript template. – biesior Apr 01 '21 at 20:52
  • @biesior True, I approached my problem the wrong way. My goal is to avoid making my merged stylesheet a render blocking source and I thought I could do it like one does with scripts. It seems like I have to work with rel="preload" and some other attributes to achieve this. Unsure how to do it yet with compression and concatenation already happening... I'll see if I can find an answer to that. – user828591 Apr 01 '21 at 22:17
  • Actually they should be cached in most cases and although don't know your CSS in general they shouldn't be a big problem nowadays when we have broad bandwidths everywhere. That was a clue maybe 15 years ago. Optionally you can also try to minify it. – biesior Apr 01 '21 at 23:41
  • We had a little discussion about defering CSS here https://forge.typo3.org/issues/91769 – Jonas Eberle Apr 02 '21 at 11:38
  • @biesior I did all of it, merge, minify, concatenate, gzip and the result is a relatively small file. However, Google Pagespeed still calls it a render blocking source. Now, there is a way to approach this here https://web.dev/defer-non-critical-css/ and I could change the typo3 source file to match it, but I might also wait until the feature is implemented in TYPO3. – user828591 Apr 02 '21 at 12:35
  • @JonasEberle Great to see it progressing! May I ask, does f:asset.css work with concatenation? I've included some css files with f:asset to test it out, but they weren't merged with the other css files. – user828591 Apr 02 '21 at 12:56
  • Offtopic: I don't use concatenation. And if I would, I would not let TYPO3 handle that... – Jonas Eberle Apr 02 '21 at 13:38

2 Answers2

2

I am not discussing its right or not but if you want to move whole CSS to footer here is the solution:

  1. Copy file public/typo3/sysext/core/Resources/Private/Templates/PageRenderer.html to some location in your basic extension like myext/Resources/Private/Templates/PageRenderer.html

  2. In Template Typoscript put:

    config.pageRendererTemplateFile = EXT:myext/Resources/Private/Templates/PageRenderer.html

  3. In myext/Resources/Private/Templates/PageRenderer.html you see markers. Just move CSS markers you want to bottom.

Krystian Szymukowicz
  • 1,438
  • 9
  • 14
1

The style tag is only valid in the head section. Thats why TYPO3 does not provide a move to footer option.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style

So please create valid html

Wolffc
  • 1,176
  • 6
  • 9
  • In my case it would be a link tag to the css file, but you're right either way since both link and style tags belong into the head tag. – user828591 Apr 01 '21 at 22:09
  • If I am not wrong, one reason to move Javascript to footer is that you usually use jQuery to manipulate the DOM and you usually use `$( document ).ready(function() ...` that is executed once the page is ready, so it is useful to put it just before the end of the document – Riccardo De Contardi Apr 02 '21 at 10:34
  • You need to take into accout as well. This is allowed in as well, though MDN does not recommend it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link – Jonas Eberle Apr 02 '21 at 11:41