-prefix-free 技术文档

1. 安装指南

1.1 下载与引入

首先，从项目主页或GitHub仓库下载prefixfree.js文件。将该文件放置在你的项目目录中。

在你的HTML文件中，通过<script>标签引入prefixfree.js文件。建议将该脚本放在样式表之后，以减少页面加载时的闪烁（FOUC）。

<link rel="stylesheet" href="your-stylesheet.css">
<script src="prefixfree.js"></script>

1.2 浏览器支持

-prefix-free 支持以下浏览器：

• IE9+
• Opera 10+
• Firefox 3.5+
• Safari 4+
• Chrome
• Mobile Safari
• Android 浏览器
• Chrome 和 Opera Mobile

在较旧的浏览器（如IE8）中，不会出现错误，但CSS3属性不会被自动添加前缀。

2. 项目的使用说明

2.1 基本使用

-prefix-free 的主要功能是自动为CSS属性添加浏览器前缀。你只需要在项目中引入prefixfree.js，无需编写任何JavaScript代码。

例如，你可以直接在CSS中使用未加前缀的属性：

.element {
    transform: rotate(15deg);
    transition: all 0.3s ease;
}

-prefix-free 会在后台自动为这些属性添加相应浏览器的前缀。

2.2 插件使用

如果你是插件开发者，可以通过StyleFix和PrefixFree API来扩展功能。例如，你可以注册自定义的CSS修复回调函数：

StyleFix.register(function(css, raw, element) {
    // 自定义的CSS修复逻辑
    return fixedCSS;
});

3. 项目API使用文档

3.1 StyleFix API

属性

• StyleFix.fixers: 当前回调函数的数组。

函数

• StyleFix.register(callback): 注册一个回调函数，用于修复CSS代码。
• StyleFix.link(linkElement): 处理<link rel="stylesheet">元素，并将其转换为带有修复代码的<style>元素。
• StyleFix.styleElement(styleElement): 修复<style>元素内的代码。
• StyleFix.styleAttribute(element): 修复元素style属性内的代码。
• StyleFix.camelCase(str): 将字符串转换为驼峰格式。
• StyleFix.deCamelCase(str): 将驼峰格式的字符串转换回原格式。

3.2 -prefix-free API

属性

• PrefixFree.prefix: 当前浏览器的前缀（如'-moz-'或'-webkit-'）。
• PrefixFree.Prefix: 当前浏览器的前缀，驼峰格式（如'Moz'或'Webkit'）。
• PrefixFree.properties: 当前浏览器中仅支持带前缀的CSS属性列表。
• PrefixFree.functions: 当前浏览器中仅支持带前缀的CSS函数列表。
• PrefixFree.keywords: 当前浏览器中仅支持带前缀的CSS关键字列表。
• PrefixFree.selectors: 当前浏览器中仅支持带前缀的CSS选择器列表。
• PrefixFree.atrules: 当前浏览器中仅支持带前缀的CSS @规则列表。

函数

• PrefixFree.prefixCSS(code [, raw]): 为传入的CSS代码添加当前浏览器的前缀。如果第二个参数为真，则还会为选择器和@规则添加前缀。
• PrefixFree.prefixSelector(selector): 为传入的选择器添加前缀。
• PrefixFree.prefixProperty(property): 为传入的属性添加前缀，即使该属性在无前缀的情况下也受支持。

4. 项目安装方式

4.1 直接引入

最简单的安装方式是通过<script>标签直接引入prefixfree.js文件：

<script src="prefixfree.js"></script>

4.2 通过包管理器安装

如果你使用npm或yarn等包管理器，可以通过以下命令安装：

npm install prefixfree

然后在项目中引入：

import 'prefixfree';

4.3 本地测试

在本地测试时，某些浏览器（如Chrome和Opera）可能需要额外的配置。例如，在Chrome中，你需要使用--allow-file-access-from-files标志启动浏览器。

通过以上步骤，你可以轻松地在项目中使用-prefix-free，自动处理CSS前缀问题，提升开发效率。