Question

发布商有时会发布Epub标题，但不包含所有必需的浏览器特定的css声明属性和前缀。例如，标题可能包含-webkit-transform声明，但省略transform，反之亦然。

有许多工具可用于协助开发人员制作新内容Stackoverflow: 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-inconfix和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);
        }
    });
}

如何向epub添加缺少特定于浏览器的css声明属性和前缀

2 个答案: