المرشح inline_css في Twig

المرشح inline_css يضع أنماط CSS في مستندات HTML:

{% apply inline_css %}
    <html>
        <head>
            <style>
                p { color: red; }
            </style>
        </head>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}

تضاف بعض أنماط CSS بتمريرها كوسائط إلى المرشح:

{% apply inline_css(source("some_styles.css"), source("another.css")) %}
    <html>
        <body>
            <p>Hello CSS!</p>
        </body>
    </html>
{% endapply %}

كذلك فإن الأنماط التي حمّلها المرشح تتخطى الأنماط المعرفة في وسم <style> في مستند HTML، ويمكن استخدام المرشح على ملف مدرَج أيضًا كما يلي:

{{ include('some_template.html.twig')|inline_css }}

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

تعمل أداة CSS inliner على مستند HTML كله، وليس جزءًا منه فقط. لاحظ أن المرشح inline_css جزء من CssInlinerExtension وهذا لا يكون مثبتًا افتراضيًا، لذا ثبته أولًا:

$ composer require twig/cssinliner-extra

ثم ثبت twig/extra-bundle في حالة مشاريع Symfony:

$ composer require twig/extra-bundle

أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:

use Twig\Extra\CssInliner\CssInlinerExtension;

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

انظر أيضًا

المصادر

صفحة توثيق المرشح inline_css في توثيق Twig الرسمي