عرض مصدر Twig/inline css

<noinclude>{{DISPLAYTITLE: المرشح inline_css في Twig}}</noinclude>
المرشح <code>inline_css</code> يضع أنماط [[CSS]] في مستندات [[HTML]]:<syntaxhighlight lang="twig">
{% apply inline_css %}
    <html>
        <head>
            <style>
                p { color: red; }
            </style>
        </head>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
</syntaxhighlight>تضاف بعض أنماط [[CSS]] بتمريرها كوسائط إلى المرشح:<syntaxhighlight lang="twig">
{% apply inline_css(source("some_styles.css"), source("another.css")) %}
    <html>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}
</syntaxhighlight>كذلك فإن الأنماط التي حمّلها المرشح تتخطى الأنماط المعرفة في وسم <code><style></code> في مستند [[HTML]]، ويمكن استخدام المرشح على ملف مدرَج أيضًا كما يلي:<syntaxhighlight lang="twig">
{{ include('some_template.html.twig')|inline_css }}

{{ include('some_template.html.twig')|inline_css(source("some_styles.css")) }}
</syntaxhighlight>تعمل أداة CSS inliner على مستند HTML كله، وليس جزءًا منه فقط.

لاحظ أن المرشح  <code>inline_css</code> جزء من <code>CssInlinerExtension</code> وهذا لا يكون مثبتًا افتراضيًا، لذا ثبته أولًا:<syntaxhighlight lang="twig">
$ composer require twig/cssinliner-extra
</syntaxhighlight>ثم ثبت <code>twig/extra-bundle</code> في حالة مشاريع Symfony:<syntaxhighlight lang="twig">
$ composer require twig/extra-bundle
</syntaxhighlight>أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:<syntaxhighlight lang="php">
use Twig\Extra\CssInliner\CssInlinerExtension;

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

== انظر أيضًا ==
* [[Twig/intro|مقدمة عن محرك القوالب Twig]]
* [[Twig/advanced|توسيع Twig]]
* [[Twig/internals|المكونات الداخلية لـ Twig]]
* [[Twig/tags|الوسوم في Twig]]
* [[ Twig/filters|المرشحات في Twig]]
== المصادر ==
* [https://twig.symfony.com/doc/3.x/filters/inline_css.html صفحة توثيق المرشح inline_css في توثيق Twig الرسمي]

[[تصنيف:Twig]]
[[تصنيف:Twig Filters]]