Feature #81223

includeCSS.forceInline property

Added by Raphael Graf over 2 years ago. Updated about 1 year ago.

Status:
Closed
Priority:
Could have
Assignee:
-
Category:
TypoScript
Target version:
Start date:
2017-05-14
Due date:
% Done:

100%

PHP Version:
Tags:
Complexity:
easy
Sprint Focus:

Description

The attached patch adds a property '.forceInline' to 'page.includeCSS'.
If '.forceInline' is set, the contentd of the css-file is inlined using <style>-tags.

Under certain conditions, inlining some CSS can improve frontend performance.
It can also help making the Google PageSpeedTest happy.
(see https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)

Example:

page.includeCSS {
    inline = EXT:test/Resources/Public/Css/inline.css
    inline {
        forceInline = 1
        forceOnTop = 1
        media = all
    }
    other = EXT:test/Resources/Public/Css/other.css
}

Some notes on the attached implementation:

External files are not inlined.
The inline-css is compressed if config.compressCss is set.
Most other properties (.allWrap, .disableCompression, .forceOnTop, .if, .media, .title) work even if '.forceInline' is set.
If '.import' and '.forceInline' are both set , the file is loaded via @import.
The feature could be added to 'includeCSSLibs' too (but I don't understand the purpose of 'includeCSSLibs' at all).
Documentation changes are not included.

forceInline.patch View (4.31 KB) Raphael Graf, 2017-05-14 19:58

forceInline-v2.patch View (4.31 KB) Raphael Graf, 2017-05-16 13:50

Associated revisions

Revision 2d0d401f (diff)
Added by Raphael Graf over 2 years ago

[FEATURE] Add .inline property to includeCSS/includeCSSLibs

If .inline is set, the contents of the css-file is inlined
using <style>-tags.

.inline implies .excludeFromConcatenation.
.import takes precedence over .inline.
The other properties of includeCSS still work if .inline is set.

Resolves: #81223
Releases: master
Change-Id: Id08fb0ce201d6992f68a1ac3f9d7735483cee3d7
Reviewed-on: https://review.typo3.org/53077
Reviewed-by: Henning Liebe <>
Tested-by: Henning Liebe <>
Tested-by: TYPO3com <>
Reviewed-by: Susanne Moog <>
Tested-by: Susanne Moog <>

History

#1 Updated by Raphael Graf over 2 years ago

The original patch had a problem related to concatenation of the css-files.
Here is a better version.

#2 Updated by Simon Schaufelberger over 2 years ago

  • Subject changed from includeCSS .forceInline property to includeCSS.forceInline property

Hi Raphael,

Thank you for your patch. Could you please push your change to our review system?

https://docs.typo3.org/typo3cms/ContributionWorkflowGuide/

Thank you very much!

#3 Updated by Gerrit Code Review over 2 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/53077

#4 Updated by Gerrit Code Review over 2 years ago

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

#5 Updated by Gerrit Code Review over 2 years ago

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

#6 Updated by Gerrit Code Review over 2 years ago

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

#7 Updated by Gerrit Code Review over 2 years ago

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

#8 Updated by Gerrit Code Review over 2 years ago

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

#9 Updated by Gerrit Code Review over 2 years ago

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

#10 Updated by Gerrit Code Review over 2 years ago

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

#11 Updated by Gerrit Code Review over 2 years ago

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

#12 Updated by Raphael Graf over 2 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#13 Updated by Benni Mack about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF