Asset.css ViewHelper <f:asset.css> 

ViewHelper to add CSS to the TYPO3 AssetCollector. Either a file or inline CSS can be added.

Go to the source code of this ViewHelper: Asset\CssViewHelper.php (GitHub).

Table of contents

Examples 

packages/my_sitepackage/Resources/Private/Templates/Page/Default.fluid.html 
<f:asset.css identifier="identifier123" href="EXT:my_sitepackage/Resources/Public/Css/foo.css" />
<f:asset.css identifier="identifier123">
  .foo { color: black; }
</f:asset.css>
Copied!

Content security policy 

The csp argument controls whether TYPO3 adds the stylesheet to the content security policy of the page. TYPO3 then adds a hash of the stylesheet to the CSP header, and a nonce attribute to the tag if the page uses a nonce. If csp is not set, TYPO3 does this for a file in href, but not for inline CSS:

packages/my_sitepackage/Resources/Private/Templates/Page/Default.fluid.html 
<f:asset.css identifier="highlight" csp="1">
  .highlight { color: red; }
</f:asset.css>
Copied!

Changed in version 15.0 Breaking: #109783 - Deprecated functionality removed

The useNonce argument, deprecated since TYPO3 v14.2, has been removed. Use the csp argument instead:

 <f:asset.css identifier="main"
   href="EXT:my_sitepackage/Resources/Public/Css/main.css"
-  useNonce="1" />
+  csp="1" />
Copied!

Details 

In the AssetCollector, the "identifier" attribute is used as a unique identifier. Thus, if assets are added multiple times using the same identifier, the asset will only be served once (the last added overrides previous assets).

Some available attributes are defaults but do not make sense for this ViewHelper. Relevant attributes specific for this ViewHelper are: as, crossorigin, hreflang, importance, integrity, media, referrerpolicy, sizes, type, nonce.

Using the "inline" argument, the file content of the referenced file is added as inline style.

Arguments of the <f:asset.css> ViewHelper 

additionalAttributes

additionalAttributes
Type
array
Additional tag attributes. They will be added directly to the resulting HTML tag.

aria

aria
Type
array
Additional aria-* attributes. They will each be added with a "aria-" prefix.

csp

csp
Type
bool
Whether to collect a CSP hash value for this asset (default: true for external files, false for inline)

data

data
Type
array
Additional data-* attributes. They will each be added with a "data-" prefix.

disabled

disabled
Type
bool
Define whether or not the described stylesheet should be loaded and applied to the document.

href

href
Type
string
The URI of the stylesheet to be loaded. If omitted, the tag children are added as inline CSS.

identifier

identifier
Type
string
Required
1
Use this identifier within templates to only inject your CSS once, even though it is added multiple times.

inline

inline
Type
bool
Default
false
Define whether or not the referenced file should be loaded as inline styles (Only to be used if 'href' is set).

priority

priority
Type
boolean
Default
false
Define whether the CSS should be included before other CSS. CSS will always be output in the <head> tag.