Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

CSS-Inline

css_inline ist eine Hochleistungsbibliothek, mit der CSS in HTML 'Style'-Attribute integriert werden.

Diese Bibliothek ist für Szenarien wie die Vorbereitung von HTML-E-Mails oder die Einbindung von HTML in Webseiten von Drittanbietern konzipiert.

Zum Beispiel verwandelt die Kiste HTML wie folgt:

 <html>
  <Head> <style> H1 {Farbe: Blau; } </style>
  </head>
  <body> <h1> Big Text </h1>
  </body> </html>

hinein:

 <html>
  <Head> </head>
  <body> <h1 style = "color: blau;"> großer text </h1>
  </body> </html>

  • Verwendet zuverlässige Komponenten aus dem Servoprojekt von Mozilla

  • Einbricht CSS aus style und link -Tags

  • Entfernt style und link -Tags

  • Löst externe Stylesheets (einschließlich lokaler Dateien)

  • Optional zwischen externen Stylesheets zwischengeschnitten

  • Funktioniert unter Linux, Windows und MacOS

  • Unterstützt HTML5 & CSS3

  • Bindungen für Python, Ruby, JavaScript, C und ein WebAssembly -Modul zum Ausführen in Browsern.

  • Befehlszeilenschnittstelle

Spielplatz

Wenn Sie css-inline ausprobieren möchten, können Sie den von WebAssembly betriebenen Spielplatz überprüfen, um die Ergebnisse sofort zu sehen.

Installation

Um es in Ihr Projekt aufzunehmen, fügen Sie die folgende Zeile in den Abschnitt Abhängigkeiten in die Cargo.toml -Datei Ihres Projekts hinzu:

 [Abhängigkeiten] CSS-Inline = "0,14"

Die minimal unterstützte Rust -Version beträgt 1,65.

Verwendung

 const html: & str = r#"<html> <kopf> <style> h1 {color: blau;} </style> </head> <body> <h1> Big Text </h1> </body> </ html> "#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline (html)?; // do do Etwas mit eingebrauchtem HTML, z. B. Senden Sie einen E -Mailok (())}}

Beachten Sie, dass css-inline automatisch fehlende html und body -Tags hinzufügt, sodass die Ausgabe ein gültiges HTML-Dokument ist.

Alternativ können Sie CSS in ein HTML -Fragment inlinieren und die ursprüngliche Struktur erhalten:

 Const Fragment: & Str = R#"<Ain> <h1> Hallo </h1> <abschnitt> <p> Wer bin i </p> </§> </Main>"#; const CSS: & str = r# "P {Farbe: rot;} H1 {Farbe: blau;}"#; fn main () -> css_inline :: result <()> {let Inlined = CSS_Inline :: inline_fragment (Fragment, CSS)?; OK (())}}

Konfiguration

css-inline kann durch Verwendung von CSSInliner::options() konfiguriert werden, die das Builder-Muster implementiert:

 const html: & str = "..."; = inliner.inline (html)?; // etwas mit inlinied HTML tun, z. B. senden eine E -Mailok (())}

  • inline_style_tags . Gibt an, ob Sie CSS aus "Style" -Tags inlinieren sollen. Standard: true

  • keep_style_tags . Gibt an, ob Sie nach dem Inlining "Stil" -Tags halten sollen. Standard: false

  • keep_link_tags . Gibt an, ob Sie nach dem Inline -Tag "Link" -Tags halten sollen. Standard: false

  • base_url . Die Basis -URL, mit der relative URLs gelöst wurden. Wenn Sie Stylesheets aus Ihrem Dateisystem laden möchten, verwenden Sie die file:// Schema. Standard: None

  • load_remote_stylesheets . Gibt an, ob Remote -Stylesheets geladen werden sollten. Standard: true

  • cache . Gibt Cache für externe Stylesheets an. Standard: None

  • extra_css . Zusätzliche CSS, die eingebaut werden sollen. Standard: None

  • preallocate_node_capacity . Fortschrittlich . Preallocates Kapazität für HTML -Knoten während des Parsens. Dies kann die Leistung verbessern, wenn Sie eine Schätzung der Anzahl der Knoten in Ihrem HTML -Dokument haben. Standard: 32

Sie können auch CSS überspringen, um ein HTML-Tag zu integrieren, indem Sie das data-css-inline="ignore" -attribut hinzufügen:

 <kopf>
  <Styles> H1 {Farbe: Blau; } </style> </head> <body>
  <!-Das unten stehende Tag erhält keine zusätzlichen Stile->
  <H1 data-css-inline = "Ignore"> Big Text </h1> </body>

Das data-css-inline="ignore" -Matchtribut ermöglicht es auch, link und style Tags zu überspringen:

 <kopf>
  <!-Stile unten werden ignoriert->
  <style Data-CSS-Inline = "Ignore"> H1 {Farbe: Blau; } </style> </head> <body>
  <h1> großer Text </h1> </body>

Alternativ können Sie style davon abhalten, das Attribut von data-css-inline="keep" zu entfernen. Dies ist nützlich, wenn Sie @media -Abfragen für reaktionsschnelle E -Mails in separaten style -Tags behalten möchten:

 <kopf>
  <!-Stile unten sind nicht entfernt->
  <style Data-CSS-Inline = "Keep"> H1 {Farbe: Blau; } </style> </head> <body>
  <h1> großer Text </h1> </body>

Solche Tags werden in der resultierenden HTML aufbewahrt, auch wenn die Option keep_style_tags auf false gesetzt ist.

Wenn Sie Stylesheets aus Ihrem Dateisystem laden möchten, verwenden Sie die file:// Schema:

 const html: & str = "..."; fn main () -> css_inline :: result <()> {lass Base_url = CSS_Inline :: url :: parse ("Datei: // styles/E -Mail/") .Exepe. ("Ungültige URL"); css_inline :: cssinliner :: options (). base_url (einige (base_url)). Build (); let inlined = inliner.inline (html); // etwas mit eingebrauchtem HTML tun, z. B. eine E -Mail ())}}

Für die Lösung von Remote -Stylesheets ist es möglich, einen benutzerdefinierten Resolver zu implementieren:

 #[Derive (Debug, Standard)] Pub Struct CustomStylheetresolver; impl css_inline :: styleSheetresolver für CustomStylleSheetresolver {fn retrieve (& self, Standort: & str) -> cs nicht unterstützt ")}} fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). resolver (std :: sync :: arc :: new (CustomStylesheetresolver). ())}

Sie können auch externe Stylesheets zwischenspeichern, um übermäßige Netzwerkanforderungen zu vermeiden:

 Verwenden Sie STD :: num :: nicht -zousize;#[cfg (feature = "stylesheet -cache")] fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). Cache (// Dies ist eine LRU cachecss_inline :: styleSheetcache :: new (nicht -zousize :: new (5) .prozent ("Ungültige Cache -Größe"))). Build (); OK (())} // Dieser Block ist hier zu Testzwecken#[CFG (CFG (() (CFG (() (CFG (() (). nicht (feature = "stylesheet -cache"))] fn main () -> css_inline :: result <()> {ok (())}

Das Caching ist standardmäßig deaktiviert.

Leistung

css-inline stellt normalerweise HTML-E-Mails in Hunderten von Mikrosekunden ein, obwohl die Ergebnisse mit der Eingabekomplexität variieren können.

Benchmarks für css-inline==0.14.1 :

  • Basis: 6,44 µs , 230 Bytes

  • Realistisch-1: 128,59 µs , 8,58 kb

  • Realistic-2: 81,44 µs , 4,3 kb

  • Github Seite: 224.89 ms , 1,81 MB

Diese Benchmarks, die mit rustc 1.78 auf M1 Max durchgeführt werden, können in css-inline/benches/inliner.rs gefunden werden.

Befehlszeilenschnittstelle

Installation

Mit cargo installieren: 

cargo install css-inline

Verwendung

Der folgende Befehl gibt CSS in mehreren Dokumenten parallel an. Die resultierenden Dateien werden als inlined.email1.html und inlined.email2.html gespeichert: 

css-inline email1.html email2.html

Ausführliche Informationen zu den verfügbaren Optionen finden Sie im Flag: Die --help : 

css-inline --help

Weitere Lesen

Wenn Sie daran interessiert sind, zu erfahren, wie diese Bibliothek erstellt wurde und wie sie intern funktioniert, lesen Sie diese Artikel:

  • Rostkiste

  • Python -Bindungen

Unterstützung

Wenn Sie Fragen oder Diskussionen zu dieser Bibliothek haben, nehmen Sie bitte unserem Gitter bei!

Lizenz

Dieses Projekt ist gemäß den Bedingungen der MIT -Lizenz lizenziert.

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle