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: Asset\CssViewHelper.php (GitHub).
Arguments
Allows arbitrary arguments
This ViewHelper allows you to pass arbitrary arguments not defined below directly
to the HTML tag created. This includes custom
data- arguments.
The following arguments are available for the asset.css ViewHelper:
-
accesskey¶ -
- Type
- string
Keyboard shortcut to access this element
-
additionalAttributes¶ -
- Type
- array
Additional tag attributes. They will be added directly to the resulting HTML tag.
-
aria¶ -
- Type
- array
Additional aria-* attributes. They will each be added with a "aria-" prefix.
-
as¶ -
- Type
- string
Define the type of content being loaded (For rel="preload" or rel="prefetch" only).
-
class¶ -
- Type
- string
CSS class(es) for this element
-
crossorigin¶ -
- Type
- string
Define how to handle crossorigin requests.
-
data¶ -
- Type
- array
Additional data-* attributes. They will each be added with a "data-" prefix.
-
dir¶ -
- Type
- string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
-
disabled¶ -
- Type
- bool
Define whether or not the described stylesheet should be loaded and applied to the document.
-
href¶ -
- Type
- string
Define the URL of the resource (absolute or relative).
-
hreflang¶ -
- Type
- string
Define the language of the resource (Only to be used if 'href' is set).
-
id¶ -
- Type
- string
Unique (in this file) identifier for this HTML element.
-
identifier¶ -
- Type
- string
- Required
- 1
Use this identifier within templates to only inject your CSS once, even though it is added multiple times.
-
importance¶ -
- Type
- string
Define the relative fetch priority of the resource.
-
integrity¶ -
- Type
- string
Define base64-encoded cryptographic hash of the resource that allows browsers to verify what they fetch.
-
lang¶ -
- Type
- string
Language for this element. Use short names specified in RFC 1766
-
media¶ -
- Type
- string
Define which media type the resources applies to.
-
nonce¶ -
- Type
- string
Define a cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy.
-
onclick¶ -
- Type
- string
JavaScript evaluated for the onclick event
-
priority¶ -
- Type
- boolean
- Default
- false
Define whether the CSS should be included before other CSS. CSS will always be output in the <head> tag.
-
referrerpolicy¶ -
- Type
- string
Define which referrer is sent when fetching the resource.
-
rel¶ -
- Type
- string
Define the relationship of the target object to the link object.
-
sizes¶ -
- Type
- string
Define the icon size of the resource.
-
style¶ -
- Type
- string
Individual CSS styles for this element
-
tabindex¶ -
- Type
- integer
Specifies the tab order of this element
-
title¶ -
- Type
- string
Tooltip text of element
-
type¶ -
- Type
- string
Define the MIME type (usually 'text/css').
-
useNonce¶ -
- Type
- bool
- Default
- false
Whether to use the global nonce value