INLINE / CSS

HTML CSS 内联

使用 Juice 将 HTML 中的 style 标签和附加 CSS 内联到元素属性，适合邮件模板与嵌入式内容处理。

在线工作台

浏览器本地处理

Ctrl/⌘+Enter 执行

输入内容后，点击上方按钮开始处理。

Under the hood

实现原理

输入只在浏览器中处理，下面分别说明转换逻辑与页面实现方式。

Logic

工作原理

  • Juice 根据选择器匹配与 CSS 优先级，把最终声明合并到对应元素的 style 属性。
  • 媒体查询、字体和关键帧无法直接写入单个元素，可按配置保留在 style 标签中。
  • 工具不请求外部样式表；需要合并的外部 CSS 应粘贴到附加 CSS 配置中。

Browser

前端如何实现

  • Juice 库在浏览器中解析 HTML 与 CSS，匹配选择器并计算层叠优先级。
  • 计算后的声明写回元素 style 属性；外部样式不会被自动下载，输入内容始终本地处理。

Process map

样式如何写入元素

  1. 01解析 HTML 与 CSS
  2. 02匹配样式选择器
  3. 03计算层叠优先级
  4. 04写入元素 style 属性

Keep working

相关工具

查看全部 →
开发

JSON 格式化与校验

格式化、压缩并定位 JSON 语法错误。

开发

JWT 调试器

解码、编辑、签名并验证 JWT，支持常见 HMAC、RSA 与 EC 算法。

开发

时间戳转换

在 Unix、日期格式与多个 IANA 时区之间转换。