Project

General

Profile

Actions

Feature #81223

closed

includeCSS.forceInline property

Added by Raphael Graf almost 7 years ago. Updated over 5 years ago.

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

100%

Estimated time:
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.


Files

forceInline.patch (4.31 KB) forceInline.patch Raphael Graf, 2017-05-14 19:58
forceInline-v2.patch (4.31 KB) forceInline-v2.patch Raphael Graf, 2017-05-16 13:50
Actions

Also available in: Atom PDF