如何将缺少的 browser-specific css 声明属性和前缀添加到 epub

Question

出版商有时会发布 Epub 标题而不包括所有必需的 browser-specific css 声明属性和前缀。例如，标题可能包含 -webkit-transform 声明但省略 transform，反之亦然。

有许多工具可用于协助开发人员创建新内容的工作流程Whosebug: How to automatically add browser prefix to CSS3 properties?；但是，我正在寻找一种方法来解析整个 Epub 并添加任何缺少的属性。

Answer 1

我们假设所有相关 CSS 都在 .css 文件中。您可以通过解压缩打开 epub，这将公开 CSS 文件，无论它们在哪里。然后，您可以通过您最喜欢的前缀工具简单地运行这些，然后将书压缩回来。

问题是 AFAIK 前缀工具通常需要 transform 属性并添加 -webkit-transform 对应物。如果只有 -webkit-transform 并且您希望添加 transform，我不确定这些工具是否有效。您必须检查每个工具以查看它是否提供此行为。在最坏的情况下，您可以为 CSS 转换框架编写自己的插件，例如返工来完成您需要的工作。

Answer 2

最终使用带有插件 postcss-unprefix 和 autoprefixer 的 postcss 解决了问题。 postcss-unprefix 删除现有的前缀和 autoprefixer 然后添加任何需要的前缀。

var fs = require('fs')
var postcss = require('postcss');

var input = process.argv[2]; // the source of the css
var output = process.argv[3]; // where to write the output

fs.readFile(input, 'utf8', function (err, result) {
    if (err) {
        console.log(err);
        process.exit(1);
    }
    processCss(result, function (err, result) {
        if (err) {
            console.log(err);
            process.exit(1);
        } else {
            fs.writeFileSync(output, result, "utf8");
            process.exit(0);
        }
    })
});


function processCss(cssString, callback) {
    postcss([require('postcss-unprefix'), require('autoprefixer')])
    .process(cssString, { from: 'in.css', to: 'out.css' })
    .then(function ( error, result ) {
        if (result) {
            callback(String.trim(result.css));
        } else {
            callback(null, error);
        }
    });
}

如何将缺少的 browser-specific css 声明属性和前缀添加到 epub

How to add missing browser-specific css declaration properties and prefixes to epub

css

epub

emmet

epub3