Unduh css inline - Unduh Kode Sumber css inline

css inline

Kode sumber lainnya

0.14.3

Unduh

CSS-Inline

css_inline adalah perpustakaan berkinerja tinggi untuk inlining CSS ke dalam atribut 'gaya' html.

Perpustakaan ini dirancang untuk skenario seperti menyiapkan email HTML atau menanamkan HTML ke halaman web pihak ketiga.

Misalnya, peti mengubah HTML seperti ini:

 <Html>
  <head> <tyle> h1 {color: blue; } </style>
  </head>
  <hody> <h1> Teks besar </h1>
  </body> </html>

ke dalam:

 <Html>
  <head> </head>
  <hody> <h1 style = "color: blue;"> Teks besar </h1>
  </body> </html>

Menggunakan komponen yang andal dari proyek servo Mozilla
Inlines CSS dari tag style dan link
Menghapus style dan tag link
Menyelesaikan Stylesheet Eksternal (termasuk file lokal)
Opsional menyimpan stylesheet eksternal
Bekerja di Linux, Windows, dan MacOS
Mendukung HTML5 & CSS3
Binding untuk Python, Ruby, JavaScript, C, dan modul WebAssembly untuk dijalankan di browser.
Antarmuka baris perintah

Tempat bermain

Jika Anda ingin mencoba css-inline , Anda dapat memeriksa taman bermain bertenaga websemly untuk melihat hasilnya secara instan.

Instalasi

Untuk memasukkannya ke dalam proyek Anda, tambahkan baris berikut ke bagian dependensi di file Cargo.toml proyek Anda:

 [Dependensi] CSS-Inline = "0,14"

Versi karat minimum yang didukung adalah 1,65.

Penggunaan

 const html: & str = r#"<html> <head> <tyle> h1 {color: blue;} </style> </head> <hody> <h1> Teks besar </h1> </body> </sebalkan html> "#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline (html) ?; // do Sesuatu dengan HTML yang diatur, misalnya Kirim emailok (())}

Perhatikan bahwa css-inline secara otomatis menambahkan html dan tag body yang hilang, sehingga output adalah dokumen HTML yang valid.

Atau, Anda dapat menyambung CSS ke dalam fragmen HTML, menjaga struktur asli:

 Const Fragment: & str = r#"<action> <h1> halo </h1> <section> <p> Siapa saya </p> </section> </pain>"#; const css: & str = r# "p {color: red;} h1 {color: blue;}"#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline_fragment (fragmen, css) ?; ok (())}

Konfigurasi

css-inline dapat dikonfigurasi dengan menggunakan CSSInliner::options() yang mengimplementasikan pola pembangun:

 const html: & str = "..."; fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). load_remote_stylesheets (false) .build (); diinstasi = inliner.inline (html) ?; // lakukan sesuatu dengan html yang dilontarkan, misalnya mengirim file emailok (())}

inline_style_tags . Menentukan apakah akan melapisi CSS dari tag "gaya". Default: true
keep_style_tags . Menentukan apakah akan menyimpan tag "gaya" setelah inlining. Default: false
keep_link_tags . Menentukan apakah akan menyimpan tag "tautan" setelah inlining. Default: false
base_url . URL dasar yang digunakan untuk menyelesaikan URL relatif. Jika Anda ingin memuat stylesheet dari sistem file Anda, gunakan skema file:// . Default: None
load_remote_stylesheets . Menentukan apakah stylesheet jarak jauh harus dimuat. Default: true
cache . Menentukan cache untuk stylesheet eksternal. Default: None
extra_css . CSS EKSTRA UNTUK DILAKUKAN. Default: None
preallocate_node_capacity . Canggih . Preallokasi kapasitas untuk node HTML selama penguraian. Ini dapat meningkatkan kinerja ketika Anda memiliki perkiraan jumlah node dalam dokumen HTML Anda. Default: 32

Anda juga dapat melewatkan CSS inlining untuk tag HTML dengan menambahkan atribut data-css-inline="ignore" untuk itu:

 <head>
  <tyle> h1 {color: blue; } </tyle> </head> <body>
  <!-Tag di bawah ini tidak akan menerima gaya tambahan->
  <h1 data-css-inline = "abaikan"> teks besar </h1> </body>

Atribut data-css-inline="ignore" juga memungkinkan Anda untuk melewatkan link dan tag style :

 <head>
  <!-Gaya di bawah ini diabaikan->
  <style data-css-inline = "abaikan"> h1 {color: blue; } </tyle> </head> <body>
  <h1> Teks Besar </h1> </body>

Atau, Anda dapat menjaga style agar tidak dihapus dengan menggunakan atribut data-css-inline="keep" . Ini berguna jika Anda ingin menyimpan @media kueri untuk email responsif dalam tag style terpisah:

 <head>
  <!-Gaya di bawah ini tidak dihapus->
  <style data-css-inline = "Keep"> h1 {color: blue; } </tyle> </head> <body>
  <h1> Teks Besar </h1> </body>

Tag semacam itu akan disimpan dalam HTML yang dihasilkan bahkan jika opsi keep_style_tags diatur ke false .

Jika Anda ingin memuat stylesheet dari sistem file Anda, gunakan file:// skema:

 const html: & str = "..."; fn main () -> css_inline :: result <()> {let base_url = css_inline :: url :: parse ("File: // styles/email/"). Expect: ("Url tidak valid"); biarkan inliner = css_inline :: cssinliner :: options (). base_url (beberapa (base_url)). build (); biarkan inlined = inliner.inline (html)};

Untuk menyelesaikan stylesheet jarak jauh, dimungkinkan untuk mengimplementasikan resolver khusus:

 #[turunan (debug, default)] pub struct customstylesheetResolver; IMPSS_INLINE :: stylesheetResolver untuk customstylesheetResolver {fn retrieve (& self, location: & str) -> css_inline :: result <string> {err ERR (self.unsupported) -"csss_inline :: hasil <string> {err eRRET (self.unsupported) -" csss_inline :: hasil <string> {err eRRET.Unsupport tidak didukung "))}} fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). resolver (std :: sync :: arc :: new (customstylesheetresolver)). build (); ok (ok (ok ())}

Anda juga dapat menyimpan stylesheet eksternal untuk menghindari permintaan jaringan yang berlebihan:

 Gunakan std :: num :: nonzerousize;#[cfg (feature = "stylesheet -cache")] fn main () -> css_inline :: result <()> {biarkan inliner = css_inline :: cssinliner :: options (). cache (// ini adalah LRU cachecss_inline :: stylesheetcache :: new (nonzerousize :: new (5). expect ("ukuran cache tidak valid"))). build (); ok (())} // blok ini ada di sini untuk tujuan pengujian#[cfg ( not (feature = "stylesheet -cache"))] fn main () -> css_inline :: result <()> {ok (())}

Caching dinonaktifkan secara default.

Pertunjukan

css-inline biasanya memasukkan email HTML dalam ratusan mikrodetik, meskipun hasilnya dapat bervariasi dengan kompleksitas input.

Tolok ukur untuk css-inline==0.14.1 :

Dasar: 6.44 μs , 230 byte
Realistis-1: 128.59 µs , 8.58 kb
Realistis-2: 81.44 μs , 4,3 kb
Halaman GitHub: 224.89 MS , 1.81 MB

Tolok ukur ini, dilakukan dengan menggunakan rustc 1.78 pada M1 Max, dapat ditemukan di css-inline/benches/inliner.rs .

Antarmuka baris perintah

Instalasi

Instal dengan cargo :

cargo install css-inline

Penggunaan

Perintah berikut ini memasukkan CSS dalam beberapa dokumen secara paralel. File yang dihasilkan akan disimpan sebagai inlined.email1.html dan inlined.email2.html :