css inline - css inline Source Téléchargement

css inline

Autre code source

0.14.3

Télécharger

CSS-inline

css_inline est une bibliothèque haute performance pour l'inlinaison CSS dans les attributs HTML «Style».

Cette bibliothèque est conçue pour des scénarios tels que la préparation des e-mails HTML ou l'intégration de HTML dans des pages Web tierces.

Par exemple, la caisse transforme HTML comme ceci:

 <html>
  <A-thead> <style> H1 {couleur: bleu; } </ style>
  </ head>
  <body> <h1> Big Text </H1>
  </ body> </html>

dans:

 <html>
  <A-Head> </ Head>
  <body> <h1 style = "Color: Blue;"> Big Text </H1>
  </ body> </html>

Utilise des composants fiables du projet servo de Mozilla
Inline CSS à partir des balises style et link
Supprime les balises style et link
Résout les feuilles de styles externes (y compris les fichiers locaux)
Cachet éventuellement les feuilles de styles externes
Fonctionne sur Linux, Windows et MacOS
Prend en charge HTML5 et CSS3
Bindings pour Python, Ruby, JavaScript, C et un module WebAssembly à exécuter dans les navigateurs.
Interface de ligne de commande

Aire de jeux

Si vous souhaitez essayer css-inline , vous pouvez consulter le terrain de jeu propulsé par webassembly pour voir les résultats instantanément.

Installation

Pour l'inclure dans votre projet, ajoutez la ligne suivante à la section des dépendances dans le fichier Cargo.toml de votre projet:

 [dépendances] CSS-inline = "0,14"

La version minimale prise en charge de la rouille est de 1,65.

Usage

 const html: & str = r # "<html> <éad- head> <style> h1 {couleur: bleu;} </ style> </ head> <body> <h1> Big Text </h1> </ body> </ html> "#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline (html) ?; // faire quelque chose avec HTML incliné, par exemple, envoyer un e-mail (())}

Notez que css-inline ajoute automatiquement les balises html et body manquantes, la sortie est donc un document HTML valide.

Alternativement, vous pouvez en ligne CSS dans un fragment HTML, en préservant la structure d'origine:

 const Fragment: & str = r # "<Main> <h1> Bonjour </h1> <pection> <p> qui suis i </p> </ping> </-main>" #; const css: & str = r # "p {couleur: rouge;} h1 {couleur: bleu;}" #; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline_fragment (fragment, css)?; ok (())}

Configuration

css-inline peut être configuré à l'aide de CSSInliner::options() qui implémente le modèle du constructeur:

 const html: & str = "..."; fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). LOOD_Remote_stylesheets (false) .build (); = inliner.inline (html) ?; // faire quelque chose avec HTML incorporé, par exemple envoyer un e-mail (())}

inline_style_tags . Spécifie s'il faut en ligne CSS à partir de balises "Style". Par défaut: true
keep_style_tags . Spécifie s'il faut conserver les balises de "style" après l'inclinaison. Par défaut: false
keep_link_tags . Spécifie s'il faut conserver les balises "Link" après l'inclinaison. Par défaut: false
base_url . L'URL de base utilisée pour résoudre les URL relatives. Si vous souhaitez charger des feuilles de styles à partir de votre système de fichiers, utilisez le schéma file:// . Par défaut: None
load_remote_stylesheets . Spécifie si les feuilles de style distantes doivent être chargées. Par défaut: true
cache . Spécifie le cache pour les feuilles de styles externes. Par défaut: None
extra_css . CSS supplémentaire à incliner. Par défaut: None
preallocate_node_capacity . Avancé . PRÉALLOCATE la capacité des nœuds HTML pendant l'analyse. Cela peut améliorer les performances lorsque vous avez une estimation du nombre de nœuds dans votre document HTML. Par défaut: 32

Vous pouvez également ignorer CSS inclinable pour une balise HTML en ajoutant l'attribut data-css-inline="ignore" :

 <adal>
  <style> H1 {couleur: bleu; } </ style> </ head> <body>
  <! - La balise ci-dessous ne recevra pas de styles supplémentaires ->
  <h1 data-css-inline = "ignore"> Big Text </h1> </body>

L'attribut data-css-inline="ignore" vous permet également de sauter des balises link et style :

 <adal>
  <! - Les styles ci-dessous sont ignorés ->
  <style data-css-inline = "ignore"> h1 {couleur: bleu; } </ style> </ head> <body>
  <h1> Big Text </h1> </odyfing>

Alternativement, vous pouvez empêcher style d'être supprimé en utilisant l'attribut data-css-inline="keep" . Ceci est utile si vous souhaitez conserver les requêtes @media pour les e-mails réactifs dans des balises style séparées:

 <adal>
  <! - Les styles ci-dessous ne sont pas supprimés ->
  <style data-css-inline = "keep"> h1 {couleur: bleu; } </ style> </ head> <body>
  <h1> Big Text </H1> </body>

Ces balises seront conservées dans le HTML résultant même si l'option keep_style_tags est définie sur false .

Si vous souhaitez charger des feuilles de styles à partir de votre système de fichiers, utilisez le schéma file:// :

 const html: & str = "..."; fn main () -> css_inline :: Result <()> {let base_url = css_inline :: url :: parse ("fichier: // styles / e-mail /") .expect ("URL non valide"); Soit Inliner = css_inline :: cssinliner :: options (). Base_Url (some (base_url)). build (); let inlined = inliner.inline (html); // faire quelque chose avec html incliné, par exemple envoyer un e-mail (())}

Pour résoudre les feuilles de style distantes, il est possible d'implémenter un résolveur personnalisé:

 # [Derive (Debug, Default)] Pub Struct CustomStylesheetResolver; ILT CSS_INLINE :: StylesheetResolver pour CustomStylesheetResolver {fn récupération (& self, emplacement: & str) -> css_inline :: result <string> {err (self.unsupported ("Styleshets externe est non pris en charge "))}} fn main () -> CSS_INLINE :: Result <()> {let inliner = css_inline :: cssinliner :: options (). Resolver (std :: sync :: arc :: new (customStylesheetResolver). Build (); ok (())}

Vous pouvez également mettre en cache des feuilles de styles externes pour éviter les demandes de réseau excessives:

 Utilisez std :: num :: non-zère; # [cfg (fonctionnalité = "stylesheet-cache")] fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: options (). cache (// c'est un LRU cachecss_inline :: StylesheetCache :: new (non-zère :: new (5) .Expect ("Taille du cache invalide"))). build (); ok (())} // Ce bloc est là à des fins de test # [cfg (CFG (CFG ( non (fonctionnalité = "stylesheet-cache"))] fn main () -> css_inline :: result <()> {ok (())}

La mise en cache est désactivée par défaut.

Performance

css-inline incline généralement les e-mails HTML dans des centaines de microsecondes, bien que les résultats puissent varier avec la complexité d'entrée.

Benchmarks pour css-inline==0.14.1 :

Basique: 6,44 µs , 230 octets
Réaliste-1: 128,59 µs , 8,58 kb
Réaliste-2: 81,44 µs , 4,3 kb
GitHub Page: 224.89 ms , 1,81 Mo

Ces repères, menés à l'aide de rustc 1.78 sur M1 Max, peuvent être trouvés dans css-inline/benches/inliner.rs .

Interface de ligne de commande

Installation

Installer avec cargo :

cargo install css-inline

Usage

La commande suivante incline CSS dans plusieurs documents en parallèle. Les fichiers résultants seront enregistrés comme inlined.email1.html et inlined.email2.html :