11 Methoden zum Hinzufügen von CSS/JS-Frontend-Assets in TYPO3

Published on :  
Markus Neumann
Maintenance

Suchen Sie nach Möglichkeiten, Ihre Frontend-Assets CSS/JS in TYPO3 einzubinden? Als TYPO3-Integrator, -Entwickler oder -Administrator kann es vorkommen, dass Sie eigene oder fremde CSS oder JavaScripts in die TYPO3-Instanz einfügen müssen. In diesem Blog lernen Sie alle 11 Möglichkeiten kennen, wie Sie interne oder externe Assets in TYPO3 einbinden können.

11 Methoden zum Hinzufügen von CSS/JS-Frontend-Assets in TYPO3

Suchen Sie nach zuverlässigen Möglichkeiten, CSS und JavaScript-Assets in TYPO3 hinzuzufügen?

Als TYPO3 Integrator, Entwickler oder Administrator müssen Sie häufig benutzerdefinierte Stylesheets oder JavaScript-Bibliotheken von Drittanbietern in eine TYPO3-Instanz einbinden, sei es für Templates, Extensions oder bestimmte Seiten.

In diesem Blog lernen Sie alle 11 bewährten Methoden kennen, um interne und externe CSS/JS-Assets in TYPO3 einzubinden – klar erklärt und direkt für den Einsatz in realen Projekten geeignet.

TYPO3 ist ein flexibles und erweiterbares Open-Source-CMS, das entwickelt wurde, um eine Vielzahl von Frontend-Anforderungen zu erfüllen. Je nach Anwendungsfall, Legacy-Systemen, modernen Templates oder der Extension-Entwicklung bietet TYPO3 mehrere Möglichkeiten, Frontend-Assets sauber und vorhersehbar zu integrieren.

Diese Flexibilität ist gewollt. Sie ermöglicht es TYPO3-Projekten, stabil, wartbar und zukunftssicher zu bleiben.

Lassen Sie uns jede Methode durchgehen und verstehen, wo sie am besten passt.

Wie fügt man CSS/JS-Assets in TYPO3 ein?

Welche Methode sollten Sie verwenden, um CSS/JS in TYPO3 hinzuzufügen?

Methoden zum Hinzufügen von CSS/JS in TYPO3

TYPO3 bietet mehrere Möglichkeiten, CSS und JavaScript einzubinden, aber nicht jede Methode passt zu jedem Anwendungsfall. Der richtige Ansatz hängt von Ihrer Rolle, Ihrer TYPO3 Version und davon ab, ob Sie an einem Template, einer Seite oder einer Extension arbeiten.

Nutzen Sie die folgende Orientierung, um schnell die passendste Methode zu identifizieren, bevor Sie sich mit der vollständigen Liste befassen.

Wenn Sie TYPO3-Integrator sind (Template / Site Setup)

  • Verwenden Sie Fluid Asset ViewHelpers (<f:asset.css />, <f:asset.script />) – Am besten geeignet für templatebasierte Asset-Einbindung in modernen TYPO3-Versionen
  • Verwenden Sie den AssetCollector (über Extbase oder PHP) – Empfohlen, wenn Assets programmatisch verwaltet werden müssen
  • Vermeiden Sie die Nutzung von veralteten TypoScript-Methoden, sofern diese nicht für ein älteres Projekt erforderlich sind

Ziel: saubere Struktur, vorhersehbares Rendering, zukunftssichere Updates

Wenn Sie TYPO3-Extension-Entwickler sind

  • Verwenden Sie den Extbase AssetCollector – Offizieller, moderner Weg zur Registrierung von CSS/JS aus Extensions
  • Nutzen Sie Inline-Assets nur dann, wenn eine dynamische Ausgabe unvermeidbar ist
  • Vermeiden Sie additionalHeaderData / additionalFooterData in neuen Extensions

Ziel: gekapselte Assets, updatesichere Extensions, keine globalen Nebeneffekte

Wenn Sie ein älteres TYPO3-Projekt warten oder erweitern

  • Bestehende TypoScript Methoden (includeJS, includeCSS, HeaderData) können weiterhin gültig sein
  • Bei einem Upgrade von TYPO3 ist eine schrittweise Migration zu AssetCollector vorzuziehen.
  • Vermeiden Sie das Mischen mehrerer Asset-Einbindungsmethoden auf derselben Seite

Ziel: zuerst Stabilität, Modernisierung Schritt für Schritt

Schnelle Faustregel

  • TYPO3 v10+ → AssetCollector und Fluid Asset ViewHelpers bevorzugen
  • TYPO3 v8–v9 → TypoScript und Fluid-Sektionen sind weiterhin verbreitet
  • Extensions → Immer zuerst an den AssetCollector denken

Die folgenden Abschnitte erklären alle 11 Methoden im Detail, einschließlich wann und wie jede einzelne verwendet wird.

Moderne vs. Legacy-Methoden zur Einbindung von Assets in TYPO3

Moderne vs. traditionelle Methoden zum Hinzufügen von Assets in TYPO3

TYPO3 bietet mehrere Möglichkeiten, CSS und JavaScript einzubinden, aber nicht alle Ansätze haben heute den gleichen Stellenwert. Einige Methoden sind modern und empfohlen, während andere hauptsächlich aus Gründen der Abwärtskompatibilität existieren.

Die folgende Einordnung hilft Ihnen zu verstehen, welche Ansätze TYPO3 heute fördert und welche nur bei der Wartung älterer Projekte eingesetzt werden sollten.

Moderne & empfohlene Ansätze

Diese Methoden entsprechen der aktuellen TYPO3-Architektur und eignen sich für neue Projekte sowie die laufende Entwicklung:

  • Fluid Asset ViewHelpers (<f:asset.css />, <f:asset.script />)
    Entwickelt für moderne TYPO3 Templates mit klarer Asset-Verwaltung und vorhersehbarem Rendering.
  • Extbase AssetCollector
    Der empfohlene Ansatz für Extensions und die dynamische Registrierung von Assets, mit besserer Kontrolle, Prioritätensteuerung und Updatesicherheit.

Legacy- oder abwärtskompatible Ansätze

Diese Methoden werden weiterhin unterstützt, sind jedoch in der Regel für ältere TYPO3-Projekte oder spezielle Sonderfälle gedacht:

  • TypoScript-basierte Asset-Einbindung (includeJS, includeCSS, HeaderData, FooterData)
  • Inline-JavaScript oder -CSS über TypoScript
  • additionalHeaderData / additionalFooterData in Extbase-Controllern

Warum diese Unterscheidung wichtig ist

  • Moderne Methoden verbessern Wartbarkeit, Performance-Kontrolle und Updatesicherheit
  • Legacy-Methoden erhöhen das Risiko einer unvorhersehbaren Render-Reihenfolge und von technischer Schuld
  • Das Mischen moderner und legacybasierter Ansätze auf derselben Seite führt häufig zu schwer nachvollziehbaren Fehlern

Die folgenden detaillierten Abschnitte erklären alle 11 Methoden, einschließlich der Situationen, in denen Legacy-Ansätze weiterhin erforderlich sein können.

TYPO3 Fluid ViewHelper (>= v10.3)

Ab TYPO3 v10 bieten die Fluid Asset ViewHelpers eine saubere und strukturierte Möglichkeit, CSS und JavaScript in TYPO3 Templates einzubinden.

Mit <f:asset.css /> und <f:asset.script /> können Assets direkt innerhalb von Fluid Templates registriert werden, während gleichzeitig ein vorhersehbares Rendering und eine bessere Kontrolle gewährleistet bleiben.

Dieser Ansatz eignet sich besonders für moderne TYPO3-Projekte, bei denen Assets eng mit der Template-Logik verknüpft sind und der von TYPO3 empfohlenen Frontend-Architektur folgen sollen.

 

<f:asset.css identifier="yourIdentifier" href="EXT:yourext/Resources/Public/Css/myCustom.css" />
<f:asset.css identifier="yourIdentifier">
  .myBlock { display: block }
</f:asset.css>

<f:asset.script identifier="yourIdentifier" src="EXT:yourext/Resources/Public/Css/myCustom.js" />
<f:asset.script identifier="yourIdentifier">
  alert('hello world');
</f:asset.script>

 

Referenz: Dokument anzeigen

TYPO3 Fluid Assets (>= v8.6)

Seit TYPO3 v8 ermöglichen Fluid HeaderAssets und FooterAssets, Frontend-Assets direkt innerhalb von Fluid Templates über spezielle Sections zu definieren.

Diese Methode ist hilfreich, wenn Assets gezielt im <head> oder am Ende des <body> eingebunden werden müssen.

Obwohl dieser Ansatz weiterhin unterstützt wird, ist er häufiger in älteren TYPO3 Setups zu finden und wird in neueren Projekten oft durch den AssetCollector oder die Fluid Asset ViewHelpers ersetzt.

 

<f:section name="HeaderAssets">
   <!-- Write down anything which you want to add into <head> tag -->
</f:section>

<f:section name="FooterAssets">
   <!-- Write down anything which you want to add into </body> tag -->
   <script async src="//yourdomain.com/your.js"></script>
</f:section>

 

Referenz: Dokument anzeigen

HeaderData TypoScript (>= v4)

HeaderData ist eine der klassischen, auf TypoScript basierenden Methoden, um CSS oder JavaScript in den <head> Bereich einer TYPO3-Seite einzubinden.

Damit können Assets global oder abhängig von Seiten-IDs hinzugefügt werden.

Diese Methode wird hauptsächlich in Legacy-TYPO3-Projekten eingesetzt und sollte bei neuen Implementierungen vermieden werden, es sei denn, Abwärtskompatibilität ist erforderlich.

 

page.HeaderData.99 = TEXT
page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>

FooterData TypoScript (>= v4)

FooterData funktioniert ähnlich wie HeaderData, gibt Assets jedoch direkt vor dem schließenden </body> Tag aus.

Dies wird häufig für JavaScript-Dateien bevorzugt, um renderblockierende Inhalte zu reduzieren und die wahrgenommene Performance zu verbessern.

Wie HeaderData ist auch dieser Ansatz hauptsächlich für ältere TYPO3 Installationen relevant.

 

page.FooterData.99 = TEXT
page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>

includeJS TypoScript (>= v4)

includeJS ist eine der am häufigsten verwendeten TypoScript-Methoden, um JavaScript-Dateien in TYPO3 Templates einzubinden.

Es unterstützt das Laden von Skripten im Header, im Footer oder als Libraries, abhängig von der Konfiguration.

Obwohl diese Methode weiterhin unterstützt wird, gilt sie in modernen TYPO3-Projekten als Legacy und sollte nur mit Vorsicht zusammen mit neueren Mechanismen zur Asset-Verwaltung eingesetzt werden.

 

page.includeJS {
   yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

 

Tipps:
Sie können config.moveJsFromHeaderToFooter verwenden, um Skripte aus dem Header in den Footer zu verschieben und so eine bessere Performance zu erzielen.

jsInline TypoScript (>= v4)

Wenn Sie Inline-JavaScript einbinden müssen, stellt TYPO3 jsInline und jsFooterInline zur Verfügung. Damit können Sie JavaScript-Code direkt einfügen, ohne auf eine externe Datei zu verweisen.

Inline-Skripte sollten sparsam eingesetzt werden, da sie im Vergleich zu dateibasierten Assets schwieriger zu cachen und zu warten sind.

 

page.jsInline {
   // Your JavaScript code
}

includeCSS TypoScript (>= v4)

includeCSS ermöglicht es, CSS-Dateien über TypoScript zu registrieren und im <head> Bereich einzubinden. Diese Methode findet sich häufig in älteren TYPO3 Templates und Legacy-Integrationen.

Für moderne Projekte werden in der Regel die Fluid Asset ViewHelpers oder der AssetCollector bevorzugt.

 

page.includeCSS {
   yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

cssInline TypoScript (>= v4)

cssInline ermöglicht es, Inline-CSS direkt über TypoScript zu definieren.
Dies kann für kleine, dynamische Styles nützlich sein, sollte jedoch in größeren Projekten nicht die strukturierte, dateibasierte CSS ersetzen.

 

page.cssInline {
   10 = TEXT
   10.value = h1 {margin:15px;}
}

Extbase additionalFooterData (>= v6)

Für Extension-Entwickler, die mit Extbase arbeiten, ermöglicht additionalFooterData das dynamische Einfügen von JavaScript aus einem Controller.

Diese Methode bietet Flexibilität, umgeht jedoch moderne Asset-Management-Workflows.

Sie wird allgemein als Legacy für die Entwicklung neuer Extensions betrachtet.

 

$GLOBALS['TSFE']->additionalFooterData['yourIdentifier'] =
   '<script async src="//yourdomain.com/your.js"></script>';

Rendering-Reihenfolge von Assets in TYPO3

Ähnlich wie additionalFooterData ermöglicht diese Methode das Einfügen von Assets in den <head> Bereich aus einem Extbase-Controller.

Obwohl sie noch funktionsfähig ist, wird sie für moderne TYPO3 Extensions nicht empfohlen.

 

$GLOBALS['TSFE']->additionalHeaderData['yourIdentifier'] =
   '<script async src="//yourdomain.com/your.js"></script>';

Extbase AssetCollector (>= v10.3)

Ab TYPO3 v10 ist AssetCollector der empfohlene Weg, CSS und JavaScript in Extbase-Extensions zu verwalten.

Es bietet eine zentrale Asset-Verwaltung, Prioritätssteuerung und vermeidet Duplikate über Templates und Extensions hinweg.

Dies ist der bevorzugte Ansatz für die moderne TYPO3 Entwicklung.

 

GeneralUtility::makeInstance(AssetCollector::class)

  ->addJavaScript(

      'yourIdentifier',

      'EXT:yourext/Resources/Public/Css/myCustom.js',

      ['data-foo' => 'bar']

  );

 

AssetCollector bietet eine umfangreiche API zur Verwaltung von Assets über den gesamten Anforderungszyklus hinweg und sollte die Standardwahl für neue Extensions sein.

 

AssetCollector::addInlineJavaScript()

AssetCollector::addStyleSheet()

AssetCollector::addInlineStyleSheet()

AssetCollector::addMedia()

AssetCollector::removeJavaScript()

AssetCollector::removeInlineJavaScript()

AssetCollector::removeStyleSheet()

AssetCollector::removeInlineStyleSheet()

AssetCollector::removeMedia()

AssetCollector::getJavaScripts()

AssetCollector::getInlineJavaScripts()

AssetCollector::getStyleSheets()

AssetCollector::getInlineStyleSheetsAssetCollector::getMedia()

 

Referenz: Dokument anzeigen

Empfohlene Methoden nach TYPO3-Version

TYPO3 unterstützt mehrere Möglichkeiten, CSS und JavaScript einzubinden, aber der empfohlene Ansatz ändert sich je nach TYPO3-Version. Die folgende Übersicht fasst zusammen, welche Methoden bevorzugt werden und welche als Legacy betrachtet werden sollten.

Dieser Abschnitt dient als schnelle Referenz und ersetzt nicht die detaillierten Erklärungen, die folgen.

TYPO3 v13 / v12

Empfohlen

  • Fluid Asset ViewHelpers (<f:asset.css />, <f:asset.script />)
  • Extbase AssetCollector

Legacy / Vermeiden für neue Projekte

  • TypoScript HeaderData / FooterData
  • additionalHeaderData / additionalFooterData

TYPO3 v11 / v10

Empfohlen

  • Extbase AssetCollector
  • Fluid Asset ViewHelpers

Akzeptabel (Legacy, aber unterstützt)

  • Fluid HeaderAssets / FooterAssets
  • TypoScript includeJS / includeCSS

TYPO3 v9 / v8

Häufig verwendet

  • Fluid HeaderAssets / FooterAssets
  • TypoScript includeJS / includeCSS
  • Inline TypoScript (jsInline, cssInline)

Zu berücksichtigen

  • Planen Sie eine Migration zum AssetCollector, wenn Sie auf neuere TYPO3-Versionen upgraden.

TYPO3 v7 und älter

Nur Legacy

  • TypoScript HeaderData / FooterData
  • Inline CSS/JS über TypoScript oder PHP

Hinweis

  • Diese Ansätze werden für moderne TYPO3-Projekte nicht empfohlen und sollten bei Upgrades refaktoriert werden.

Wichtiger Hinweis

  • Vermeiden Sie das Mischen mehrerer Methoden zur Asset-Einbindung auf derselben Seite oder Extension.
  • Wählen Sie für jede TYPO3-Version einen primären Ansatz für ein vorhersehbares Rendering und eine einfachere Wartung.

Die folgenden Abschnitte erklären alle 11 Methoden im Detail, einschließlich ihrer Anwendungsfälle und Einschränkungen.

Rendering-Reihenfolge von Assets in TYPO3

Zuletzt, nach all den oben genannten Möglichkeiten, haben Sie möglicherweise Fragen zur genauen Render-Reihenfolge oder Priorität der Assets in TYPO3.

Ab v10.3 werden CSS und JavaScript, die mit dem AssetCollector registriert wurden, nach ihren PageRenderer-Pendants gerendert. Die Reihenfolge ist

 

<head>
page.includeJSLibs.forceOnTop
page.includeJSLibs
page.includeJS.forceOnTop
page.includeJS
AssetCollector::addJavaScript() with ‘priority’
page.jsInline
AssetCollector::addInlineJavaScript() with ‘priority’
</head>
page.includeJSFooterlibs.forceOnTop
page.includeJSFooterlibs
page.includeJSFooter.forceOnTop
page.includeJSFooter
AssetCollector::addJavaScript()
page.jsFooterInline
AssetCollector::addInlineJavaScript()
 

Leistungsüberlegungen bei der Hinzufügung von CSS und JavaScript in TYPO3

Wie CSS und JavaScript in TYPO3 hinzugefügt werden, beeinflusst nicht nur die Funktionalität, sondern auch die Seitenleistung, das Rendering-Verhalten und die Core Web Vitals.

Das Verständnis dieser Auswirkungen hilft Ihnen, häufige Leistungsengpässe zu vermeiden, insbesondere in modernen TYPO3-Projekten.

Header vs. Footer-Laden

  • CSS wird normalerweise im <head> geladen, um Layoutverschiebungen zu verhindern.
  • JavaScript, das im <head> geladen wird, kann das Rendering blockieren, wenn es nicht sorgfältig behandelt wird.
  • Im Footer geladenes JavaScript reduziert das Rendering-Blocking und verbessert die wahrgenommene Geschwindigkeit.

TYPO3 bietet mehrere Möglichkeiten, zu steuern, wo und wann Assets gerendert werden. Die Wahl der richtigen Methode ist entscheidend für leistungsabhängige Seiten.

Risiken durch Rendering-Blocking

  • Inline- oder headerbasiertes JavaScript kann das Rendering der Seite verzögern.
  • Das Laden unnötiger Assets global erhöht das Seitengewicht.
  • Das Mischen mehrerer Methoden zur Asset-Einbindung kann zu Duplikaten oder ungeordnetem Output führen.

Moderne Ansätze wie AssetCollector helfen, diese Probleme zu vermeiden, indem sie Prioritäten und Rendering-Reihenfolge vorhersehbarer verwalten.

Warum AssetCollector die Leistung verbessert

  • Zentralisierte Asset-Verwaltung
  • Bessere Kontrolle über die Lade-Reihenfolge und Prioritäten
  • Vermeidet unbeabsichtigte Duplikationen über Templates und Extensions hinweg
  • Vereinfachte Fehlerbehebung bei assetbezogenen Problemen

Für TYPO3 v10 und höher ist AssetCollector in der Regel die sicherste Wahl für leistungssensitive Projekte.

Best Practices für die Leistung (Kurzübersicht)

  • Laden Sie JavaScript immer im Footer, wenn möglich.
  • Vermeiden Sie Inline-Assets, es sei denn, sie sind wirklich erforderlich.
  • Injizieren Sie dasselbe Asset nicht über mehrere Methoden.
  • Überprüfen Sie regelmäßig die Frontend-Ausgabe auf ungenutztes CSS oder JS.

Diese Praktiken helfen, TYPO3-Projekte schnell, wartbar und upgradesicher zu halten.

Häufige Fehler bei der Hinzufügung von CSS und JavaScript in TYPO3

Obwohl TYPO3 mehrere Möglichkeiten zur Einbindung von Frontend-Assets bietet, kann die falsche Nutzung zu Leistungsproblemen, unvorhersehbarem Verhalten oder Upgrade-Problemen führen. Vermeiden Sie die folgenden häufigen Fehler, um Ihr TYPO3-Projekt sauber und wartbar zu halten.

1. Verwendung von Legacy-TypoScript-Methoden in modernen TYPO3-Versionen

Was geht schief

  • Methoden wie HeaderData, FooterData oder alte includeJS-Patterns werden in TYPO3 v10+ verwendet.
  • Das Laden von Assets wird schwieriger zu steuern und zu debuggen.

Warum es ein Problem ist

  • Diese Ansätze wurden für ältere TYPO3-Architekturen entwickelt.
  • Sie erhöhen die technische Schuld und erschweren zukünftige Upgrades.

Was stattdessen zu tun ist

  • Bevorzugen Sie Fluid Asset ViewHelpers oder den AssetCollector in modernen TYPO3-Projekten.

2. Mischen mehrerer Asset-Injektionsmethoden auf derselben Seite

Was geht schief

  • CSS oder JS wird gleichzeitig über TypoScript, Fluid und PHP hinzugefügt.
  • Assets erscheinen mehrmals oder in unerwarteter Reihenfolge.

Warum es ein Problem ist

  • Die Render-Reihenfolge wird unvorhersehbar.
  • Das Debuggen von Frontend-Problemen wird erheblich schwieriger.

Was stattdessen zu tun ist

  • Wählen Sie eine primäre Methode zur Asset-Einbindung pro Seite oder Extension.
  • Halten Sie das Asset-Handling im gesamten Projekt konsistent.

3. Zu starke Abhängigkeit von Inline-JavaScript oder CSS

Was geht schief

  • Inline-JS oder CSS wird der Bequemlichkeit halber hinzugefügt.
  • Logik und Styling werden verstreut und sind schwer zu warten.

Warum es ein Problem ist

  • Inline-Assets sind schwieriger zu cachen.
  • Sie können die Leistung und Lesbarkeit negativ beeinflussen.

Was stattdessen zu tun ist

  • Verwenden Sie nach Möglichkeit dateibasierte Assets.
  • Reservieren Sie Inline-Code für wirklich dynamische oder minimale Anwendungsfälle.

4. Laden von Assets global, wenn sie nur auf bestimmten Seiten benötigt werden

Was geht schief

  • CSS oder JS wird auf der gesamten Seite eingebunden, obwohl die Funktion nur auf wenigen Seiten verwendet wird.

Warum es ein Problem ist

  • Erhöht unnötig das Seitengewicht.
  • Beeinträchtigt die Leistung auf der gesamten Seite.

Was stattdessen zu tun ist

  • Begrenzen Sie Assets auf Templates, Seiten oder Extensions, auf denen sie benötigt werden.

5. Ignorieren der Render-Reihenfolge und Abhängigkeiten

Was geht schief

  • JavaScript wird ausgeführt, bevor das DOM oder erforderliche Bibliotheken verfügbar sind.
  • CSS-Überschreibungen werden nicht wie erwartet angewendet.

Warum es ein Problem ist

  • Führt zu fehlerhafter Funktionalität oder Layout-Problemen.
  • Wird oft als „zufällige“ Frontend-Bugs missverstanden.

Was stattdessen zu tun ist

  • Seien Sie sich der TYPO3-Asset-Rendereihenfolge bewusst.
  • Verwenden Sie moderne Methoden, die Prioritäten und Abhängigkeitsmanagement unterstützen.

6. Überspringen der Bereinigung bei TYPO3-Upgrades

Was geht schief

  • Alte Asset-Einbindungsmethoden bleiben nach dem Upgrade von TYPO3 bestehen.
  • Im Laufe der Zeit sammeln sich mehrere Legacy-Patterns an.

Warum es ein Problem ist

  • Erhöht den Wartungsaufwand.
  • Erschwert zukünftiges Debugging und Optimierung.

Was stattdessen zu tun ist

  • Überprüfen Sie die Asset-Einbindungsmethoden während des Upgrades.
  • Ersetzen Sie schrittweise Legacy-Ansätze durch moderne Methoden.

Einpacken!

Danke, dass Sie diesen Leitfaden gelesen haben. Wir hoffen, er hat Ihnen geholfen, die verschiedenen Methoden zur Hinzufügung von CSS- und JavaScript-Assets in TYPO3 klar zu verstehen und wann welche Methode in realen Projekten verwendet werden sollte.

TYPO3 bietet mehrere gültige Methoden für die Asset-Integration, und die richtige Wahl hängt immer von Ihrem Anwendungsfall, Ihrer TYPO3-Version und der Projektstruktur ab. Wenn Sie bereits mit einer dieser Methoden gearbeitet haben, teilen Sie gerne Ihre Erfahrungen in den Kommentaren.

Wenn Sie neugierig sind, wie KI im TYPO3-Ökosystem angewendet wird, werfen Sie einen Blick auf das AI Universum für TYPO3, wo praktische TYPO3-Workflows auf intelligente Automatisierung treffen.

Und für Teams, die die Erstellung von Inhalten, die Code-Generierung und die Optimierung direkt in TYPO3 vereinfachen möchten, bietet der T3AI - AI Assistant eine fokussierte, All-in-One-Lösung.

Bauen Sie saubere, wartbare TYPO3-Projekte und wählen Sie die Asset-Strategie, die zu Ihrer Einrichtung passt.

FAQs

Für TYPO3 v10 und höher sind Fluid Asset ViewHelpers und AssetCollector die empfohlenen Ansätze. Sie bieten bessere Kontrolle, vorhersehbares Rendering und sind upgradesicher.

includeJS und includeCSS werden weiterhin unterstützt, gelten jedoch als Legacy-Methoden. Sie sollten hauptsächlich verwendet werden, wenn Sie ältere TYPO3-Projekte warten.

AssetCollector wird verwendet, um CSS und JavaScript zentral zu registrieren und zu verwalten, insbesondere in Extbase-Extensions. Es hilft, Duplikate zu vermeiden und verbessert die Kontrolle der Render-Reihenfolge.

Es ist technisch möglich, wird jedoch nicht empfohlen. Das Mischen von TypoScript, Fluid und PHP-basierten Methoden zur Asset-Einbindung kann zu unvorhersehbarem Verhalten und Debugging-Problemen führen.

Wann immer möglich, sollte JavaScript im footer geladen werden, um das Rendering-Blocking zu reduzieren und die Leistung zu verbessern. TYPO3 bietet mehrere Möglichkeiten, dies zu steuern.

Für Upgrades sollten Sie zunächst die bestehenden Methoden stabil halten und dann schrittweise auf AssetCollector oder Fluid Asset ViewHelpers migrieren, um sich an die modernen TYPO3 Best Practices anzupassen.

Do you need help maintaining and supporting (SLA) your TYPO3 website?

  • 2 Days of quick support (reaction and resolution time)
  • 3 Packages plans available for TYPO3 SLA (service level agreement)
  • 3 Timezone support available (CET, CEST, IST)
  • 2 Languages support available (English, German)
  • 1 Monthly updates & report (TYPO3 security & maintenance)
TYPO3 SLA Gig
maintenance
Markus Neumann

Markus Neumann

Template Support Manager

Markus lebt und atmet TYPO3-Templates. Bekannt für sein strukturiertes Denken und sein Auge fürs Detail hat er bereits Hunderten von Kund:innen geholfen, schnellere und sauberere TYPO3-Websites zu erstellen. Wenn es ein…

More From Author

Previous Article
TYPO3 + WordPress: Case Study of TYPO3 Slider Revolution
Next Article
T3Planet - Einführung des idealen Abonnementmodells

Post a Comment

×

  • user
    Nichol Southwell 2023-07-25 Beim 1:23 pm
    Hi t3planet.com webmaster, You always provide great resources and references.
  • user
    David Adler 2023-07-14 Beim 12:35 pm
    I never knew there were so many ways to add CSS/JS assets in TYPO3! This article provided a comprehensive guide, and I can't wait to implement these techniques in my projects. Thanks for sharing!

You May Also Like

Warum Ihr Unternehmen ein SLA braucht

Warum Ihr Unternehmen SLAs benötigt: Vorteile und Vorteile erklärt

Markus Neumann
Maintenance
TYPO3 Gitlab CI/CD Auto Deployment

TYPO3 Gitlab CI/CD Auto Deployment (2024)

Markus Neumann
Maintenance

TYPO3 Composer gegenüber TER (TYPO3 Extensions Repository)

Markus Neumann
Maintenance