11 ways to add CSS/JS frontend assets into TYPO3

Published on :  
Dhyana Chauhan
Maintenance

Looking to enhance your TYPO3 website's functionality and aesthetics? Discover 11 ways to add CSS/JS frontend assets with this comprehensive guide.

11 ways to add CSS/JS frontend 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.

 

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

  1. <head>
  2. page.includeJSLibs.forceOnTop
  3. page.includeJSLibs
  4. page.includeJS.forceOnTop
  5. page.includeJS
  6. AssetCollector::addJavaScript() with ‘priority’
  7. page.jsInline
  8. AssetCollector::addInlineJavaScript() with ‘priority’
  9. </head>
  10. page.includeJSFooterlibs.forceOnTop
  11. page.includeJSFooterlibs
  12. page.includeJSFooter.forceOnTop
  13. page.includeJSFooter
  14. AssetCollector::addJavaScript()
  15. page.jsFooterInline
  16. 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
maintenance
Dhyana Chauhan

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…

More From Author

Previous Article
TYPO3 + WordPress: Case Study of TYPO3 Slider Revolution
Next Article
T3Planet – Introducing Ideal Subscription Model

Post a Comment

×
Captcha Code Can't read the image? Click here to refresh
  • user
    Nichol Southwell 2023-07-25 at 1:23 pm
    Hi t3planet.com webmaster, You always provide great resources and references.
  • user
    David Adler 2023-07-14 at 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!
  • user
    Lucas Holzman 2023-07-14 at 12:33 pm
    Great article! These article incredibly helpful and have made my web development tasks much more efficient. Thank you!

You May Also Like

Why Your Business Needs SLA

Why Your Business Needs SLAs: Benefits and Advantages Explained

Sanjay Chauhan
Maintenance
How to install TYPO3 - Manually & Via Composer

How to install TYPO3 - Manually & Via Composer

Dhyana Chauhan
Maintenance
TYPO3 Gitlab CI/CD Auto Deployment

TYPO3 Gitlab CI/CD Auto Deployment (2024)

Dhyana Chauhan
Maintenance