In TYPO3 ist in den letzten Jahren der Funktionsumfang von Fluid kontinuierlich gewachsen. Dies bedeutet, dass es nun auch möglich ist, die Einbindung von CSS und JavaScript Dateien nicht mehr nur per TypoScript, sondern auch per Fluid als Assets zu konfigurieren. Dies bringt mehrere Vorteile mit sich. So ist nun möglich, mit Conditions zu arbeiten. Zudem kann man die Optionen zur Verschachtelung und Vererbung von Fluid Templates und Partials nutzen. Der Asset Viewhelper bringt zudem mehrere Optionen zur Konfiguration des Systems mit sich.

<f:asset.css
  identifier="mein_css"
  href="EXT:vendor/Resources/Public/css/meinstyle.css"
  rel="stylesheet"
  media="all"
  useNonce="true">
</f:asset.css>

<f:asset.script
  identifier="mein_js"
  src="EXT:vendor/Resources/Public/js/meinjs.js"
  defer="true"
  useNonce="true">
</f:asset.script>

Für beide Möglichkeiten gilt, dass der Link zur Datei und der Identifier angegeben werden müssen. Dazu können mehrere weitere Optionen. Die Einbindung einer Content Security Policy kann in beiden Fällen über die Option useNonce gesteuert werden. Die media Option im CSS steuert die Ausgabe für Screen und Print. Über die defer Option können JavaScript Dateien nachgeladen werden.

Auch die Einbindung vorgeladener Fonts zur Verbesserung des Page Speed kann per Asset Viewhelper in Fluid umgesetzt werden. Hier ein Beispiel dazu:

<f:asset.css
  identifier="mein_preload_fa_brands"
  href="EXT:vendor/Resources/Public/lib/fontawesome-6.5.1/webfonts/fa-brands-400.woff2"
  rel="preload"
  as="font"
  media="all"
  crossorigin="anonymous"
  useNonce="true">
</f:asset.css>