Feature #93644

includeCSS should have options for rel="preload"

Added by David Bruchmann 2 months ago. Updated about 1 month ago.

Status:
Needs Feedback
Priority:
Should have
Assignee:
-
Category:
Fluid
Target version:
-
Start date:
2021-03-04
Due date:
% Done:

0%

Estimated time:
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Having this desired HTML:

  <link rel="preload" href="/typo3conf/ext/sitepackage/Resources/Public/Fonts/Adelle-Bold.woff" as="font" title="FontHeadingsBold" type="font/woff" crossorigin="anonymous" />
  <link rel="preload" href="/typo3conf/ext/sitepackage/Resources/Public/Fonts/Adelle-Bold.woff" as="font" title="FontHeadingsRegular" type="font/woff" crossorigin="anonymous" />
  <link rel="preload" href="/typo3conf/ext/sitepackage/Resources/Public/Fonts/GothamNarrSSm-Book_Web.woff" as="font" title="FontRegular" type="font/woff" crossorigin="anonymous" />
  <link rel="preload" href="/typo3conf/ext/sitepackage/Resources/Public/Fonts/GothamSSm-Medium_Web.woff" as="font" title="FontBold" type="font/woff" crossorigin="anonymous" />
  <link rel="stylesheet" href="/typo3conf/ext/sitepackage/Resources/Public/Css/fonts.css" crossorigin="anonymous" />

and this content in fonts.css:

@font-face {font-family: "FontRegular"; src: url("/typo3conf/ext/sitepackage/Resources/Public/Fonts/GothamNarrSSm-Book_Web.woff") format("woff"); font-display: swap;}
@font-face {font-family: "FontBold"; src: url("/typo3conf/ext/sitepackage/Resources/Public/Fonts/GothamSSm-Medium_Web.woff") format("woff"); font-display: swap;}
@font-face {font-family: "FontHeadingsRegular"; src: url("/typo3conf/ext/sitepackage/Resources/Public/Fonts/Adelle-Bold.woff") format("woff"); font-display: swap;}
@font-face {font-family: "FontHeadingsBold"; src: url("/typo3conf/ext/sitepackage/Resources/Public/Fonts/Adelle-Bold.woff") format("woff"); font-display: swap;}

I don't see an option how to achive it differently by TypoScript than as comment.

The feature request is to increase the amount of options, so that the desired code can be created in top of the css-files.

#1

Updated by Christian Hackl 2 months ago

Just as a hint if you were not yet aware of this:
You can already implement this with FLUID:
https://docs.typo3.org/other/typo3/view-helper-reference/10.4/en-us/typo3/fluid/latest/Asset/Css.html

(In my opinion, it is better to load css and js via FLUID / ViewHelper instead of TypoScript).

Example for fluid.assets :
https://github.com/Hauer-Heinrich/hh_theme_default/tree/master/Resources/Private/Theme/Partials/Assets

#2

Updated by David Bruchmann 2 months ago

Thanks, that's a good hint.
I never used fluid yet for the head-area and missed the assets-options.

#3

Updated by Riccardo De Contardi about 1 month ago

  • Category set to Fluid
  • Status changed from New to Needs Feedback

@David Bruchmann is the answer sufficient for you? Is there still something missing?

Also available in: Atom PDF