inline_css

The inline_css filter inline CSS styles in HTML documents:

inline_css は、HTML ドキュメントのインライン CSS スタイルをフィルター処理します。
1
2
3
4
5
6
7
8
9
10
11
12
 
{% apply inline_css %}
    <html>
        <head>
            <style>
                p { color: red; }
            </style>
        </head>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}

You can also add some stylesheets by passing them as arguments to the filter:

フィルターに引数として渡すことで、いくつかのスタイルシートを追加することもできます。
1
2
3
4
5
6
7
 
{% apply inline_css(source("some_styles.css"), source("another.css")) %}
    <html>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}

Styles loaded via the filter override the styles defined in the <style> tag of the HTML document.

フィルタを介して読み込まれたスタイルは、HTML ドキュメントのタグで定義されたスタイルをオーバーライドします。

You can also use the filter on an included file:

インクルード ファイルに対してフィルターを使用することもできます。
1
2
3
 
{{ include('some_template.html.twig')|inline_css }}

{{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}

Note that the CSS inliner works on an entire HTML document, not a fragment.

CSS インライナーは、フラグメントではなく、HTML ドキュメント全体で機能することに注意してください。

Note

ノート

The inline_css filter is part of the CssInlinerExtension which is not installed by default. Install it first:

inline_css フィルターは、デフォルトではインストールされない CssInlinerExtension の一部です。最初にインストールします。
1
 
$ composer require twig/cssinliner-extra

Then, on Symfony projects, install the twig/extra-bundle:

次に、Symfony プロジェクトで、twig/extra-bundle をインストールします。
1
 
$ composer require twig/extra-bundle

Otherwise, add the extension explicitly on the Twig environment:

それ以外の場合は、Twig 環境で拡張機能を明示的に追加します。
1
2
3
4
 
use Twig\Extra\CssInliner\CssInlinerExtension;

$twig = new \Twig\Environment(...);
$twig->addExtension(new CssInlinerExtension());