asset.css ViewHelper `<f:asset.css>`¶

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

Examples¶

<f:asset.css identifier="identifier123" href="EXT:my_ext/Resources/Public/Css/foo.css" />
<f:asset.css identifier="identifier123">
   .foo { color: black; }
</f:asset.css>

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, disabled, href, hreflang, importance, integrity, media, referrerpolicy, sizes, type, nonce.

Arguments¶

additionalAttributes¶

DataType: mixed
Required: false
Description: Additional tag attributes. They will be added directly to the resulting HTML tag.

data¶

DataType: mixed
Required: false
Description: Additional data-* attributes. They will each be added with a "data-" prefix.

aria¶

DataType: mixed
Required: false
Description: Additional aria-* attributes. They will each be added with a "aria-" prefix.

class¶

DataType: string
Required: false
Description: CSS class(es) for this element

dir¶

DataType: string
Required: false
Description: Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id¶

DataType: string
Required: false
Description: Unique (in this file) identifier for this HTML element.

lang¶

DataType: string
Required: false
Description: Language for this element. Use short names specified in RFC 1766

style¶

DataType: string
Required: false
Description: Individual CSS styles for this element

title¶

DataType: string
Required: false
Description: Tooltip text of element

accesskey¶

DataType: string
Required: false
Description: Keyboard shortcut to access this element

tabindex¶

DataType: integer
Required: false
Description: Specifies the tab order of this element

onclick¶

DataType: string
Required: false
Description: JavaScript evaluated for the onclick event

as¶

DataType: string
Required: false
Description: Define the type of content being loaded (For rel="preload" or rel="prefetch" only).

crossorigin¶

DataType: string
Required: false
Description: Define how to handle crossorigin requests.

disabled¶

DataType: mixed
Required: false
Description: Define whether or not the described stylesheet should be loaded and applied to the document.

href¶

DataType: string
Required: false
Description: Define the URL of the resource (absolute or relative).

hreflang¶

DataType: string
Required: false
Description: Define the language of the resource (Only to be used if 'href' is set).

importance¶

DataType: string
Required: false
Description: Define the relative fetch priority of the resource.

integrity¶

DataType: string
Required: false
Description: Define base64-encoded cryptographic hash of the resource that allows browsers to verify what they fetch.

media¶

DataType: string
Required: false
Description: Define which media type the resources applies to.

referrerpolicy¶

DataType: string
Required: false
Description: Define which referrer is sent when fetching the resource.

rel¶

DataType: string
Required: false
Description: Define the relationship of the target object to the link object.

sizes¶

DataType: string
Required: false
Description: Define the icon size of the resource.

type¶

DataType: string
Required: false
Description: Define the MIME type (usually 'text/css').

nonce¶

DataType: string
Required: false
Description: Define a cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy.

useNonce¶

DataType: mixed
Required: false
Description: Whether to use the global nonce value

identifier¶

DataType: string
Required: true
Description: Use this identifier within templates to only inject your CSS once, even though it is added multiple times.

priority¶

DataType: boolean
Required: false
Description: Define whether the CSS should be included before other CSS. CSS will always be output in the <head> tag.

asset.css ViewHelper <f:asset.css>¶