الفرق بين المراجعتين لصفحة: «Twig/inline css»

المراجعة الحالية بتاريخ 15:07، 11 مايو 2021

المرشح 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 الرسمي

@@ سطر 31: / سطر 31: @@
 </syntaxhighlight>ثم ثبت <code>twig/extra-bundle</code> في حالة مشاريع Symfony:<syntaxhighlight lang="twig">
 $ composer require twig/extra-bundle
-</syntaxhighlight>أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:<syntaxhighlight lang="twig">
+</syntaxhighlight>أما غير ذلك فأضف التوسيع صراحة إلى بيئة Twig:<syntaxhighlight lang="php">
 use Twig\Extra\CssInliner\CssInlinerExtension;