inline-css中文文档|inline-css js中文教程|解析

npm npmdoc 3年前 (2021-12-23) 558次浏览

inline-css中文文档|inline-css js中文教程|解析

安装命令:npm i inline-css

内联css 新产品经理 构建状态 覆盖状态

新产品管理

将您的 CSS 属性内联到stylehtml 文件中属性中。对电子邮件有用。

灵感来自果汁库。

特征

  • 使用cheerio而不是jsdom
  • 适用于 Windows
  • 保留文档类型
  • 模块化的
  • 通过样式和链接标签自动获取您的 CSS
  • 函数返回符合 A+ 的承诺

怎么运行的

该模块采用 html 并将 CSS 属性内联到 style 属性中。

/path/to/file.html

<html>
<head>
  <style>
    p { color: red; }
  </style> 
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>Test</p>
</body>
</html>

style.css

p {
  text-decoration: underline;
}

输出:

<html>
<head>
</head>
<body>
  <p style="color: red; text-decoration: underline;">Test</p>
</body>
</html>

这有什么用?

  • HTML 电子邮件。有关支持的选择器的完整列表,请参见
    此处
  • 在第 3 方网站中嵌入 HTML。
  • 表现。下载外部样式表会延迟页面在浏览器中的呈现。内联 CSS 加快了这个过程,因为浏览器不必等待下载外部样式表来开始呈现页面。

安装

使用npm安装

npm install --save inline-css

用法

var inlineCss = require('inline-css');
var html = "<style>div{color:red;}</style><div/>";
 
inlineCss(html, options)
    .then(function(html) { console.log(html); });

应用程序接口

inlineCss(html,选项)

options.extraCss

类型:String

默认:
""

要应用于文件的额外 css。

options.applyStyleTags

类型:Boolean

默认:
true

是否在<style></style>.

options.applyLinkTags

类型:Boolean

默认:
true

是否解析<link rel="stylesheet">标签并内联生成的样式。

options.removeStyleTags

类型:Boolean

默认:
true

是否<style></style>在(可能)从它们内联 css 之后删除原始标签。

options.removeLinkTags

类型:Boolean

默认:
true

是否<link rel="stylesheet">在(可能)从它们内联 css 之后删除原始标签。

选项.url

类型:String

默认:
filePath

如何解决href。必需的

options.preserveMediaQueries

类型:Boolean

默认:
false

<style></style>removeStyleTagsis时,保留标签内的所有媒体查询(和包含的样式)作为细化true删除了其他样式。

options.applyWidthAttributes

类型:Boolean

默认:
false

是否使用任何 CSS 像素宽度width在元素上创建属性。

options.applyTableAttributes

类型:Boolean

默认:
false

是否将border,cellpaddingcellspacing属性应用于table元素。

options.removeHtmlSelectors

类型:Boolean

默认:
false

是否从标记中删除classid属性。

options.codeBlocks

类型:Object

默认:
{ EJS: { start: '<%', end: '%>' }, HBS: { start: '{{', end: '}}' } }

一个对象,其中每个值都有一个startend来指定在解析和内联过程中应该被忽略的受保护的代码块。例如,把手 (hbs) 模板是HBS: {start: '{{', end: '}}'}. codeBlocks可以解决内联 css 可能将代码解释<=为 HTML 之类的问题,而当它是模板语言代码时。请注意,这codeBlocks是一个可以包含许多不同代码块的字典,所以不codeBlocks: {...}要这样做codeBlocks.myBlock = {...}

特殊标记

数据嵌入

当标签上存在数据嵌入属性时,inline-css 不会内联样式并且不会删除标签。

这可用于将依赖 css 选择器的电子邮件客户端支持技巧嵌入到您的电子邮件模板中。

啦啦队选项

传递给cheerio的选项

贡献

请参阅贡献指南

执照

麻省理工学院 © Jonathan Kemp

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:inline-css中文文档|inline-css js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}