css_inline هي مكتبة عالية الأداء لتحديد CSS في سمات HTML "نمط".
تم تصميم هذه المكتبة لسيناريوهات مثل إعداد رسائل البريد الإلكتروني HTML أو تضمين HTML في صفحات ويب من طرف ثالث.
على سبيل المثال ، يقوم الصندوق بتحويل HTML مثل هذا:
<html>
<head> <style> h1 {color: Blue ؛ } </style>
</head>
<Body> <h1> نص كبير </h1>
</body> </html>داخل:
<html> <head> </head> <Body> <h1 style = "color: Blue ؛"> Text Big </h1> </body> </html>
يستخدم مكونات موثوقة من مشروع مؤازرة Mozilla
تطبع CSS من العلامات style link
يزيل style وعلامات link
يحل أوراق الأنماط الخارجية (بما في ذلك الملفات المحلية)
اختياريا مخبأ أوراق الأنماط الخارجية
يعمل على Linux و Windows و MacOS
يدعم HTML5 و CSS3
روابط لـ Python و Ruby و JavaScript و C ووحدة Webassembly لتشغيلها في المتصفحات.
واجهة سطر الأوامر
إذا كنت ترغب في تجربة css-inline ، فيمكنك التحقق من ملعب Webassem-Powergle للاطلاع على النتائج على الفور.
لتضمينه في مشروعك ، أضف السطر التالي إلى قسم التبعيات في ملف Cargo.toml لمشروعك:
[التبعيات] CSS-Inline = "0.14"
الحد الأدنى لنسخة الصدأ المدعومة هو 1.65.
const html: & str = r#"<html> <head> <style> h1 {color: blue ؛} </style> </head> <body> <h1> نص كبير </h1> </body> </// html> "#؛ fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline (html)؟ ؛ // do do شيء مع HTML مضمّن ، على سبيل المثال ، أرسل بريدًا إلكترونيًا (())} لاحظ أن css-inline يضيف تلقائيًا html وعلامات body ، وبالتالي فإن الإخراج هو مستند HTML صالح.
بدلاً من ذلك ، يمكنك مضمنة CSS في جزء HTML ، مع الحفاظ على الهيكل الأصلي:
شظية const: & str = r#"<main> <h1> hello </h1> <pection> <p> من أنا </p> </s. "p {color: red ؛} h1 {color: Blue ؛}"#؛ fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline_fragment (جزء ، css)؟ ؛ ok (())} يمكن تكوين css-inline باستخدام CSSInliner::options() التي تنفذ نمط البناء:
const html: & str = "..." ؛ fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). = inliner.inline (html)؟ ؛ // افعل شيئًا مع HTML المضمون ، على سبيل المثال أرسل البريد الإلكتروني (())} inline_style_tags . يحدد ما إذا كان يجب مضمنة CSS من علامات "النمط". الافتراضي: true
keep_style_tags . يحدد ما إذا كان يجب الحفاظ على علامات "النمط" بعد التحضير. الافتراضي: false
keep_link_tags . يحدد ما إذا كنت تريد الاحتفاظ بعلامات "الارتباط" بعد التحديد. الافتراضي: false
base_url . عنوان URL الأساسي المستخدم لحل عناوين URL النسبية. إذا كنت ترغب في تحميل أوراق الأنماط من نظام الملفات الخاص بك ، فاستخدم مخطط file:// . الافتراضي: None
load_remote_stylesheets . يحدد ما إذا كان ينبغي تحميل أوراق الأنماط عن بعد. الافتراضي: true
cache . يحدد ذاكرة التخزين المؤقت لورائح الأنماط الخارجية. الافتراضي: None
extra_css . CSS إضافية لتكون inline. الافتراضي: None
preallocate_node_capacity . متقدم . سعة preallocates لعقد HTML أثناء التحليل. يمكن أن يحسن الأداء عندما يكون لديك تقدير لعدد العقد في مستند HTML الخاص بك. الافتراضي: 32
يمكنك أيضًا تخطي CSS التي تضم علامة HTML عن طريق إضافة سمة data-css-inline="ignore" :
<head>
<style> H1 {color: Blue ؛ } </style> </head> <body>
<!-العلامة أدناه لن تتلقى أنماطًا إضافية->
<H1 data-css-inline = "تجاهل"> نص كبير </h1> </body> تتيح لك سمة data-css-inline="ignore" تخطي علامات link style :
<head>
<!-يتم تجاهل الأنماط أدناه->
<style data-css-inline = "dection"> h1 {color: Blue ؛ } </style> </head> <body>
<H1> النص الكبير </h1> </body> بدلاً من ذلك ، يمكنك الحفاظ على style من إزالته باستخدام سمة data-css-inline="keep" . هذا مفيد إذا كنت ترغب في الاحتفاظ باستعلامات @media لرسائل البريد الإلكتروني المستجيبة في علامات style منفصلة:
<head>
<!-لا تتم إزالة الأنماط أدناه->
<style data-css-inline = "keep"> h1 {color: Blue ؛ } </style> </head> <body>
<H1> النص الكبير </h1> </body> سيتم الاحتفاظ بهذه العلامات في HTML الناتجة حتى إذا تم تعيين خيار keep_style_tags على false .
إذا كنت ترغب في تحميل أوراق الأنماط من نظام الملفات الخاص بك ، فاستخدم file:// scheme:
const html: & str = "..." ؛ fn main () -> css_inline :: result <()> {let base_url = css_inline :: url :: parse ( ("عنوان URL غير صالح") ؛ دع inliner = css_inline :: cssinliner :: reports (). base_url (بعض (BASE_URL)). build () ؛ Let inlined = inliner.inline (html) ؛ // قم بشيء مع html inlileلحل أوراق الأنماط عن بُعد ، من الممكن تنفيذ حل مخصص:
#[derive (depug ، default)] pub struct structyshedleSheetResolver ؛ Impl css_inline :: STYLESHEETRESSOLVER FOR غير مدعوم "))}} fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). resolver (std :: sync :: arc :: new (customStyleSheetResolver)). build () ؛ ok ()}}يمكنك أيضًا تخزين أوراق الأنماط الخارجية لتجنب طلبات الشبكة المفرطة:
استخدم std :: num :: nonzourize ؛#[cfg (feature = "stylesheet cache")] fn main () -> css_inline :: result <()> {letinlyer = css_inline :: cssinliner :: خي خيارات (). ذاكرة التخزين المؤقت (// هذا هو LRU cachecss_inline :: STYLESHEETCACHE :: NEW (NONZERISE :: NEW (5) .EXPERT ("حجم ذاكرة التخزين المؤقت غير الصالحة"))). Build () ؛ OK (())} // هذه الكتلة موجودة هنا لأغراض الاختبار#[CFG (CFG ( not (feature = "stylesheet cach"))]تم تعطيل التخزين المؤقت بشكل افتراضي.
عادةً ما تقوم css-inline بتدوين رسائل البريد الإلكتروني HTML ضمن مئات من microseconds ، على الرغم من أن النتائج قد تختلف باختلاف تعقيد الإدخال.
معايير css-inline==0.14.1 :
أساسي: 6.44 µs ، 230 بايت
واقعية 1: 128.59 µs ، 8.58 كيلو بايت
واقعية 2: 81.44 µs ، 4.3 كيلو بايت
صفحة جيثب: 224.89 مللي ثانية ، 1.81 ميغابايت
يمكن العثور على هذه المعايير ، التي يتم إجراؤها باستخدام rustc 1.78 على M1 Max ، في css-inline/benches/inliner.rs .
التثبيت مع cargo :
cargo install css-inline يتحول الأمر التالي إلى تحديد CSS في مستندات متعددة بالتوازي. سيتم حفظ الملفات الناتجة على أنها inlined.email1.html و inlined.email2.html :
css-inline email1.html email2.html للحصول على التفاصيل الكاملة للخيارات المتاحة ، يمكنك استخدام علامة --help :
css-inline --helpإذا كنت مهتمًا بمعرفة كيفية إنشاء هذه المكتبة وكيف تعمل داخليًا ، تحقق من هذه المقالات:
قفص الصدأ
روابط بيثون
إذا كان لديك أي أسئلة أو مناقشات تتعلق بهذه المكتبة ، فيرجى الانضمام إلى Gitter!
هذا المشروع مرخص بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.