ToolJovia
Developer

Static Email CSS Inliner

Inline selected author CSS into a standards-mode HTML document with explicit cascade ordering, without rendering the supplied markup or fetching stylesheets.

✓ Browser-local processing

Loading tool…

How to use Static Email CSS Inliner

Inline selected author CSS into a standards-mode HTML document with explicit cascade ordering, without rendering the supplied markup or fetching stylesheets. Collect embedded style rules followed by your additional CSS, match the original parsed tree, and download actual HTML with ordered style declarations. Unsupported selector or at-rule behavior fails explicitly.

  1. Provide optional complete html document file, complete standards-mode html document, additional css, appended after embedded styles.
  2. Choose the supported mode and run the tool. Review its assumptions and any reported errors.
  3. Copy the result or download a separate output; reset to clear the current form.

Good to know

  • Provide a complete standards-mode HTML document with <!doctype html>, at most 100,000 UTF-8 bytes, 3,000 parsed nodes and 40 levels. Parse5 normalizes the tree, implied elements, entities and serialization; this is not source-byte preservation. Input HTML is never mounted, rendered or navigated to.
  • Embedded ordinary CSS style elements are collected in tree order; supplied additional CSS follows them. Combined CSS is capped at 100,000 characters/20,000 syntax nodes/100 ordinary rules/128 selectors/2,000 declarations including existing inline source. A conservative raw punctuation-depth limit of 40 applies even inside strings. CSS comments/style-element boundaries are not preserved as source layout.
  • Supported selectors are types/universal, IDs, classes, attribute presence and selected value operators, with descendant/child/adjacent/general sibling combinators. At most 8 compounds and 16 simple selectors per compound. CSS identifier escapes are decoded. Pseudo-classes/elements, namespace selectors, CSS nesting and all at-rules including media/supports/layer/font-face/keyframes are refused instead of silently removed.
  • Attribute value selectors support =, ~=, |=, ^=, $= and *=, with explicit i/s flags. Without a flag, values are allowed only for id/class/title/role/name/value/href/src/alt, data-* and aria-* source attributes; other HTML attribute case rules are refused. Matching uses the original HTML attribute snapshot before any style is changed.
  • Matched declarations are sorted from lower to higher priority by important status, element-attached source precedence, selector specificity and source order. All declarations remain in that order, including shorthand/longhand and fallback duplicates. A grouped rule uses its most specific matching selector. revert/revert-layer and legacy expression() are refused; no origin/layer or full computed-style engine is claimed.
  • Active/foreign/template/legacy raw-text elements, event-handler attributes, HTTP-equivalent meta behavior, base elements, conditional/named/non-CSS style elements and external stylesheet links are refused. Other supplied URLs and authored HTML content remain in the output: this is not a sanitizer, tracking remover, offline asset bundler or a guarantee that downloaded markup is safe in another context.
  • Selector work is capped at 2,000,000 compound-match operations. Matched declaration text is capped at 200,000 characters and final HTML at 250,000; structured reports at 500,000. A dedicated module Worker loads Parse5/CSS Tree before ready, with a 10-second preparation deadline and separate 2-second compute limit.
  • This transforms the declared static author-rule subset; it does not certify any email client, browser layout, responsive rule, inherited computed value, external resource, animation or delivery result. Review the separate HTML artifact before using it.
  • Structured text output is limited to 500,000 characters. Reduce the supplied source when that separate output budget is exceeded.
  • Inputs are processed on this device and are not automatically saved or uploaded.

Common questions

Why does the tool refuse media queries or :hover instead of dropping them?

Those rules depend on rendering context or unsupported selector behavior. Removing them while claiming an equivalent inline result would be misleading. This selected static inliner fails explicitly, so you can simplify the source or use a full email build system for that document.

Does this change my original input?

No. The tool returns a separate result. Review that output before using it in another application.

Keep going with related tools

All developer →