css_inline
은 CSS를 HTML '스타일'속성으로 인한화하기위한 고성능 라이브러리입니다.
이 라이브러리는 HTML 이메일 준비 또는 HTML을 타사 웹 페이지에 포함시키는 것과 같은 시나리오를 위해 설계되었습니다.
예를 들어, 상자는 다음과 같이 HTML을 변형시킵니다.
<html> <head> <style> h1 {색상 : 파란색; } </style> </head> <body> <h1> 큰 텍스트 </h1> </body> </html>
안으로:
<html> <헤드> </head> <body> <h1 style = "color : blue;"> 큰 텍스트 </h1> </body> </html>
Mozilla의 서보 프로젝트에서 신뢰할 수있는 구성 요소를 사용합니다
style
및 link
태그에서 CSS를 인용합니다
style
과 link
태그를 제거합니다
외부 스타일 시트 해결 (로컬 파일 포함)
선택적으로 외부 스타일 시트를 캐시합니다
Linux, Windows 및 MacOS에서 작동합니다
HTML5 & CSS3을 지원합니다
파이썬, 루비, 자바 스크립트, C 및 브라우저에서 실행할 webAssembly 모듈에 대한 바인딩.
명령 줄 인터페이스
css-inline
사용하려면 WebAssembly 기반 놀이터를 확인하여 결과를 즉시 확인할 수 있습니다.
프로젝트에 포함 시키려면 프로젝트의 Cargo.toml
파일의 종속성 섹션에 다음 줄을 추가하십시오.
[종속성] CSS-Inline = "0.14"
최소 지원 Rust 버전은 1.65입니다.
const html : & str = r#"<html> <head> <style> h1 {color : blue;} </style> </head> <hod> <h1> 큰 텍스트 </h1> </body> </ html> "#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline (html)?; // do html이 상감 된 것, 예 : emailok (())}을 보냅니다.
css-inline
누락 된 html
및 body
태그를 자동으로 추가하므로 출력은 유효한 HTML 문서입니다.
또는 원래 구조를 보존하여 CSS를 HTML 조각으로 인라인 할 수 있습니다.
Const Fragment : & str = r#"<main> <h1> hello </h1> <섹션> <p> 누가 i </p> </section> </main>"#; const css : & str = r# "p {색상 : 빨간색;} h1 {color : blue;}"#; fn main () -> css_inline :: result <()> {let inlined = css_inline :: inline_fragment (fragment, css)?; ok (())}
css-inline
빌더 패턴을 구현하는 CSSInliner::options()
사용하여 구성 할 수 있습니다.
const html : & str = "..."; fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: 옵션 (). load_remote_stylesheets (false) .Build (); = inliner.inline (html)? emailok (())}
inline_style_tags
. "스타일"태그에서 CSS를 인라인할지 여부를 지정합니다. 기본값 : true
keep_style_tags
. 인라인 후 "스타일"태그를 유지 해야하는지 여부를 지정합니다. 기본값 : false
keep_link_tags
. 인라인 후 "링크"태그를 유지 해야하는지 여부를 지정합니다. 기본값 : false
base_url
. 기본 URL은 상대 URL을 해결하는 데 사용됩니다. 파일 시스템에서 스타일 시트를로드하려면 file://
scheme을 사용하십시오. 기본값 : None
load_remote_stylesheets
. 원격 스타일 시트를로드 해야하는지 여부를 지정합니다. 기본값 : true
cache
. 외부 스타일 시트의 캐시를 지정합니다. 기본값 : None
extra_css
. 여분의 CSS가 상환됩니다. 기본값 : None
preallocate_node_capacity
. 고급의 . 구문 분석 중에 HTML 노드의 용량을 Preallocates. 이는 HTML 문서에 노드 수를 추정하면 성능을 향상시킬 수 있습니다. 기본값 : 32
또한 data-css-inline="ignore"
속성을 추가하여 HTML 태그에 대한 CSS Inlining을 건너 뛸 수도 있습니다.
<헤드> <스타일> H1 {색상 : 파란색; } </style> </head> <body> <!-아래 태그는 추가 스타일을받지 않습니다-> <h1 data-css-inline = "무시"> 큰 텍스트 </h1> </body>
data-css-inline="ignore"
속성을 사용하면 link
및 style
태그를 건너 뛸 수 있습니다.
<헤드> <!-아래 스타일은 무시됩니다-> <스타일 data-css-inline = "무시"> h1 {색상 : 파란색; } </style> </head> <body> <H1> 큰 텍스트 </h1> </body>
또는 data-css-inline="keep"
속성을 사용하여 style
제거되는 것을 막을 수 있습니다. 이는 별도의 style
태그로 응답 형 전자 메일에 대한 @media
쿼리를 유지하려는 경우 유용합니다.
<헤드> <!-아래 스타일은 제거되지 않습니다-> <스타일 data-css-inline = "keep"> h1 {color : blue; } </style> </head> <body> <H1> 큰 텍스트 </h1> </body>
keep_style_tags
옵션이 false
로 설정된 경우에도 이러한 태그는 결과 HTML에 보관됩니다.
파일 시스템에서 스타일 시트를로드하려면 file://
scheme :
const html : & str = "..."; fn main () -> css_inline :: result <()> {let base_url = css_inline :: url :: parse ( "file : // styles/email/") .expect ( "유효하지 않은 URL"); inliner = css_inline :: cssinliner :: 옵션 (). base_url (some (base_url)). build (); letinined = inliner.inline (html); // html을 감염시키고 emailok (())}를 보냅니다.
원격 스타일 시트를 해결하기 위해 사용자 정의 리졸버를 구현할 수 있습니다.
#[DERICE (DEBUG, DEFAULT)] PUB Struct CustomStylesheetResolver; CustomStylesheetresolver {fn retrieve (& self, 위치 : & str) -> css_inline :: eRc.Unclesupported ( "external stylesheets are ("explysupported ( "외부 Stylesheets는 empr css_inline :: stylesheetresolver; 지원되지 않음 "))}} fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: Options (). Resolver (std :: sync :: arc :: new (customStylesheetresolver)). build (); ok ())}
과도한 네트워크 요청을 피하기 위해 외부 스타일 시트를 캐시 할 수도 있습니다.
std :: num :: nonzerousize;#[cfg (feature = "stylesheet -cache")] fn main () -> css_inline :: result <()> {let inliner = css_inline :: cssinliner :: 옵션 (). 캐시 (// 이것은 LRU입니다 cachecss_inline :: stylesheetcache :: new (nonzouserize :: new (5) .expect ( "invalid cache size")). build (); ok ())} //이 블록은 테스트 목적#[cfg ( not (feaction = "stylesheet -cache"))] fn main () -> css_inline :: result <()> {좋아요(())}
캐싱은 기본적으로 비활성화됩니다.
css-inline
일반적으로 수백 마이크로 초 내에 HTML 전자 메일을 인선이지만 결과는 입력 복잡성에 따라 다를 수 있습니다.
css-inline==0.14.1
:
기본 : 6.44 µs , 230 바이트
현실 -1 : 128.59 µs , 8.58 kb
현실 2 : 81.44 µs , 4.3 kb
Github 페이지 : 224.89ms , 1.81 MB
M1 Max에서 rustc 1.78
사용하여 수행되는 이러한 벤치 마크는 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에 가입하십시오!
이 프로젝트는 MIT 라이센스의 조건에 따라 라이센스가 부여됩니다.