Project

General

Profile

Actions

Feature #87756

open

preload CSS (loadCSS)

Added by Andreas Lochner almost 6 years ago. Updated almost 3 years ago.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Frontend
Target version:
-
Start date:
2019-02-21
Due date:
% Done:

0%

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

Description

Since you integrated defer and async for "includeJS" so well i would like to see the same feature for "includeCSS".

Somethink like the following:
includeCSS.file1 = /PATH/file.css
includeCSS.file1.preload = 1

Which generates a Link-Tag with rel="preload", an as="style" and onload="this.onload=null;this.rel='stylesheet'", like suggested here https://github.com/filamentgroup/loadCSS
The usage of <link rel="preload"> is supported by around 75% of the browsers (https://caniuse.com/#feat=link-rel-preload) and is highly recommended by Google (PagespeedInsights/Lighthouse).

In my opinion this should be integrated for single files and for concatenated files.

Actions #1

Updated by Georg Ringer almost 6 years ago

  • Priority changed from Must have to Should have
Actions #2

Updated by Kim Christiansen over 4 years ago

The filament group recommends a new implementation:

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

https://www.filamentgroup.com/lab/load-css-simpler/

So could it be possible to add the onload attribute instead?

includeCSS.file1.onload = this.media='all'
Actions #3

Updated by Kim Christiansen about 4 years ago

In TYPO3 10 you could include the css on the filament group way like this in fluid:

<f:asset.css identifier="mycss" href="EXT:yourextension/path/to/css/mycss.css" media="print" additionalAttributes="{onload:'this.media=\'all\''}" />
Actions #4

Updated by Gerrit Code Review about 4 years ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/66073

Actions #5

Updated by Marco H over 3 years ago

Kim Christiansen wrote in #note-3:

In TYPO3 10 you could include the css on the filament group way like this in fluid:

[...]

Doesn't work with concatenation though, right?

Actions #6

Updated by Gerrit Code Review almost 3 years ago

Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/66073

Actions

Also available in: Atom PDF