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.

Source code¶

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

Arguments¶

The following arguments are available for <f:asset.css>:

Name	Type	Default
additionalAttributes	mixed
data	mixed
aria	mixed
class	string
dir	string
id	string
lang	string
style	string
title	string
accesskey	string
tabindex	integer
onclick	string
as	string
crossorigin	string
disabled	boolean
href	string
hreflang	string
importance	string
integrity	string
media	string
referrerpolicy	string
rel	string
sizes	string
type	string
nonce	string
useNonce	boolean
identifier	string
priority	boolean

additionalAttributes ¶

Type: mixed
Required: true

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

data ¶

Type: mixed
Required: true

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

aria ¶

Type: mixed
Required: true

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

class ¶

Type: string
Required: true

CSS class(es) for this element

dir ¶

Type: string
Required: true

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id ¶

Type: string
Required: true

Unique (in this file) identifier for this HTML element.

lang ¶

Type: string
Required: true

Language for this element. Use short names specified in RFC 1766

style ¶

Type: string
Required: true

Individual CSS styles for this element

title ¶

Type: string
Required: true

Tooltip text of element

accesskey ¶

Type: string
Required: true

Keyboard shortcut to access this element

tabindex ¶

Type: integer
Required: true

Specifies the tab order of this element

onclick ¶

Type: string
Required: true

JavaScript evaluated for the onclick event

as ¶

Type: string
Required: true

Define the type of content being loaded (For rel="preload" or rel="prefetch" only).

crossorigin ¶

Type: string
Required: true

Define how to handle crossorigin requests.

disabled ¶

Type: boolean
Required: true

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

href ¶

Type: string
Required: true

Define the URL of the resource (absolute or relative).

hreflang ¶

Type: string
Required: true

Define the language of the resource (Only to be used if 'href' is set).

importance ¶

Type: string
Required: true

Define the relative fetch priority of the resource.

integrity ¶

Type: string
Required: true

Define base64-encoded cryptographic hash of the resource that allows browsers to verify what they fetch.

media ¶

Type: string
Required: true

Define which media type the resources applies to.

referrerpolicy ¶

Type: string
Required: true

Define which referrer is sent when fetching the resource.

rel ¶

Type: string
Required: true

Define the relationship of the target object to the link object.

sizes ¶

Type: string
Required: true

Define the icon size of the resource.

type ¶

Type: string
Required: true

Define the MIME type (usually 'text/css').

nonce ¶

Type: string
Required: true

Define a cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy.

useNonce ¶

Type: boolean
Required: true

Whether to use the global nonce value

identifier ¶

Type: string
Required: true

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

priority ¶

Type: boolean
Required: true

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

Examples¶

Details¶

Source code¶

Arguments¶

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