inline_cssΒΆ
New in version 2.12: The inline_css filter was added in Twig 2.12.
The inline_css filter inline CSS styles in HTML documents:
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.
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.
Note
The inline_css filter is part of the CssInlinerExtension which is not
installed by default. Install it first:
1 | $ composer req twig/cssinliner-extra
|
Then, use the twig/extra-bundle on Symfony projects or add the extension
explictly on the Twig environment:
use Twig\Extra\CssInliner\CssInlinerExtension;
$twig = new \Twig\Environment(...);
$twig->addExtension(new CssInlinerExtension());
