1``inline_css``
2==============
3
4.. versionadded:: 2.12
5
6    The ``inline_css`` filter was added in Twig 2.12.
7
8The ``inline_css`` filter inline CSS styles in HTML documents:
9
10.. code-block:: html+twig
11
12    {% apply inline_css %}
13        <html>
14            <head>
15                <style>
16                    p { color: red; }
17                </style>
18            </head>
19            <body>
20                <p>Hello CSS!</p>
21            </body>
22        </html>
23    {% endapply %}
24
25You can also add some stylesheets by passing them as arguments to the filter:
26
27.. code-block:: html+twig
28
29    {% apply inline_css(source("some_styles.css"), source("another.css")) %}
30        <html>
31            <body>
32                <p>Hello CSS!</p>
33            </body>
34        </html>
35    {% endapply %}
36
37Styles loaded via the filter override the styles defined in the ``<style>`` tag
38of the HTML document.
39
40You can also use the filter on an included file:
41
42.. code-block:: twig
43
44    {{ include('some_template.html.twig')|inline_css }}
45
46    {{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}
47
48Note that the CSS inliner works on an entire HTML document, not a fragment.
49
50.. note::
51
52    The ``inline_css`` filter is part of the ``CssInlinerExtension`` which is not
53    installed by default. Install it first:
54
55    .. code-block:: bash
56
57        $ composer require twig/cssinliner-extra
58
59    Then, on Symfony projects, install the ``twig/extra-bundle``:
60
61    .. code-block:: bash
62
63        $ composer require twig/extra-bundle
64
65    Otherwise, add the extension explicitly on the Twig environment::
66
67        use Twig\Extra\CssInliner\CssInlinerExtension;
68
69        $twig = new \Twig\Environment(...);
70        $twig->addExtension(new CssInlinerExtension());
71