11 ways to add CSS/JS assets into TYPO3

Are you looking for ways to add your frontend assets CSS/JS into TYPO3? As a TYPO3 integrator, developer or administrator, you may be required to add custom or third-party CSS or JavaScripts into TYPO3 Instance. In this blog, you will learn all 11-ways to include internal or external assets into TYPO3.

TYPO3 is one of the flexible and extendible Opensource CMS in the world. For your so simple needs of inserting CSS/JS files or code - You have 11-ways to integrate such frontend assets into TYPO3. The TYPO3 core is robust, which provides many ways to perform such tasks based on your needs. Because, as a TYPO3 integrator or developer, you may face a different situation to insert frontend assets - TYPO3 is extendible enough! Let’s see how.

via GIPHY

How to add CSS/JS assets into TYPO3?

TYPO3 Fluid ViewHelper (>= v10.3)

From TYPO3 v10, Using TYPO3 viewhelper <f:asset.css /> and <f:asset.js /> you can easily include your CSS and JS.

<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>

Reference: View Document

TYPO3 Fluid Assets (>= v8.6)

Since TYPO3 v8, We have HeaderAssets/FooterAssets ways to include your frontend assets to your TYPO3 instance.

<f:section name="HeaderAssets"> for assets intended for the <head> tag
<f:section name="FooterAssets"> for assets intended for the end of the <body> tag
<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>

Reference: View Document

HeaderData TypoScript (>= v4)

One of the safest and easiest ways to add your custom CSS or Javascript code at </head> tag using TypoScript is below.

page = PAGE
page { … }

// Add your CSS/JS assets globally
page.HeaderData.99 = TEXT
page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>

// Add your CSS/JS assets to particular page(s)
[getTSFE().id in [1,4]]
    page.HeaderData.99 = TEXT
    page.HeaderData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]

FooterData TypoScript (>= v4)

In the same, Do you want to add your CSS or Javascript code to </body> then use FooterData TypoScript?

page = PAGE
page { … }

// Add your CSS/JS assets globally
page.FooterData.99 = TEXT
page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>

// Add your CSS/JS assets to particular page(s)
[getTSFE().id in [1,4]]
    page.FooterData.99 = TEXT
    page.FooterData.99.value = <script async src="//yourdomain.com/your.js"></script>
[end]

includeJS TypoScript (>= v4)

page.includeJS used since years to integrate CSS/JS at your TYPO3 template integration.

page = PAGE
page { … }

page.includeJS {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSFooter {
    // at </body> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSFooterlibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

page.includeJSLibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.js
}

Tips:
You can configure either config.moveJsFromHeaderToFooter or config.moveJsFromHeaderToFooter to move your all JS to either </head> or </body> tag for better performance.

jsInline TypoScript (>= v4)

Are you looking to write inline Javascript code? It means not including the whole Javascript file path but just writing your Javascript code; consider jsInline Typoscript.

page = PAGE
page { … }

page.jsInline {
    // Your JavaScript code
}

page.jsFooterInline {
    // Your JavaScript code
}

includeCSS TypoScript (>= v4)

In the same way, You can use includeCSS typoscript to add CSS assets.

page = PAGE
page { … }

page.includeCSS {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

includeCSSLibs {
    // at </head> Include your all JavaScript to TYPO3
    yourIdentifier = EXT:yourext/Resources/Public/Css/myCustom.css
}

cssInline TypoScript (>= v4)

Also, use the cssInline TypoScript to add directly stylesheet instead of calling CSS file.

page = PAGE
page { … }

page.CSS_inlineStyle {
    /* Writ down other CSS stuff */
}

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

Extbase additionalFooterData (>= v6)

Now here is something interesting for the TYPO3 extension backend developer. You will often be required to dynamically add your CSS or JS assets while you develop your Extbase PHP controller. You can simply use Global TSFE additionalFooterData.

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

Extbase additionalHeaderData (>= v6)

In the same way, If you want to include your CSS/JS to </head> then use additionalHeaderData.

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

Extbase AssetCollector (>= v10.3)

Wait, from TYPO3 v10 - You should use AssetCollector to add CSS or JavaScript for your Extbase TYPO3 extension.

use TYPO3\CMS\Core\Page\AssetCollector;
use TYPO3\CMS\Core\Utility\GeneralUtility;

GeneralUtility::makeInstance(AssetCollector::class)
   ->addJavaScript('yourIdentifier', 'EXT:yourext/Resources/Public/Css/myCustom.js', ['data-foo' => 'bar']);

AssetCollector provides all excellent functions to add or remove your CSS/JS; check out these functions.

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()

Reference: View Document

Rendering Order of Assets in TYPO3

Last but not least, with the above so many ways - You may have questions about the exact render order or priority of assets in TYPO3.

From v10.3, CSS and JavaScript registered with the AssetCollector will be rendered after their PageRenderer counterparts. The order is

<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()

Wrapping-up!

Thanks for reading my TYPO3 blog. I hope you learned and found it helpful for your current or future TYPO3 projects.

From the list above, there are 11 ways to integrate frontend assets into TYPO3. Which one is your favorite? I would like to know in the comment box below.

For an even more powerful TYPO3 experience, don't forget to check out the T3AI TYPO3 AI extension. It’s an all-in-one solution that enhances content creation, to help code generation, and optimization with AI!

Have a Happy Include Assets into TYPO3!

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

Dhyana Chauhan

Tech Expert & Customer Manager

Dhyana Chauhan is the customer support manager at T3Planet, having vast experience as an technology lead who loves exploring everything that’s in trend, especially TYPO3. Being a TYPO3 fanatic, in her free time, she loves…

Dhyana Chauhan

Tech Expert & Customer Manager

11 ways to add CSS/JS frontend assets into TYPO3

How to add CSS/JS assets into TYPO3?

TYPO3 Fluid ViewHelper (>= v10.3)

TYPO3 Fluid Assets (>= v8.6)

HeaderData TypoScript (>= v4)

FooterData TypoScript (>= v4)

includeJS TypoScript (>= v4)

jsInline TypoScript (>= v4)

includeCSS TypoScript (>= v4)

cssInline TypoScript (>= v4)

Extbase additionalFooterData (>= v6)

Extbase additionalHeaderData (>= v6)

Extbase AssetCollector (>= v10.3)

Rendering Order of Assets in TYPO3

Wrapping-up!

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

Dhyana Chauhan

Dhyana Chauhan

TYPO3 + WordPress: Case Study of TYPO3 Slider Revolution

T3Planet – Introducing Ideal Subscription Model

Post a Comment

11 ways to add CSS/JS frontend assets into TYPO3

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

Dhyana Chauhan

Dhyana Chauhan

TYPO3 + WordPress: Case Study of TYPO3 Slider Revolution

T3Planet – Introducing Ideal Subscription Model

Post a Comment

You May Also Like

Why Your Business Needs SLAs: Benefits and Advantages Explained

How to install TYPO3 - Manually & Via Composer

TYPO3 Gitlab CI/CD Auto Deployment (2024)