CSS 扩展 – CSS 供应商前缀

CSS 供应商前缀

CSS 供应商前缀(有时也称为 CSS 浏览器前缀)用于 CSS 属性名中，以实现尚未标准化或某些浏览器支持有限的试验性或预发布 CSS 功能。供应商前缀用于标识支持这些功能的特定浏览器或浏览器版本。

主要浏览器供应商通常使用以下前缀来实现非标准的 CSS 功能：

-webkit- – 用于基于 WebKit 的浏览器，包括 Chrome、Safari、较新版本的 Opera 和大多数 iOS 浏览器(如 Firefox for iOS)。
-moz- – 用于基于 Mozilla 的浏览器，如 Firefox。
-o- – 仅适用于转用 WebKit 之前的旧版本 Opera。
-ms- – 适用于 Internet Explorer 和 Microsoft Edge 的早期版本。

根据 CSS 规范，特定于 CSS 供应商的扩展必须以破折号或下划线开头，格式如下：

['-' or '_'] + [vendor identifier] + ['-'] + [name]

例如，webkit-border-radius 是一个供应商前缀属性，可让您在基于 WebKit 的浏览器(如 Chrome 浏览器)中将元素的边角变圆，以创建具有视觉吸引力的现代设计。

Aspose CSS 扩展 – Java 示例

Aspose.HTML 库使用的前缀看起来像 -aspose-，可为您提供一些试验性功能。以下是使用 -aspose- 前缀可以启用的 CSS 功能列表：

Name	Description
currentPageNumber	This function returns the number of the current rendering page.
totalPagesNumber	This function returns the number of the total pages in the document.

接下来的代码片段演示了如何使用 CSS 扩展来创建自定义的文档页边距标记：

初始化 Configuration 类的实例。
使用 getService() 方法从配置中获取用户代理服务实现。
使用 setUserStyleSheetU() 方法定义页面边距、内容位置以及页面计数器和标题样式的 CSS 规则。
- 这里使用了 CSS 属性 -aspose-content 来定义右下角区域显示的内容。它包含了 currentPageNumber() 和 totalPagesNumber() 函数，这两个函数由 Aspose.HTML 库提供，用于动态生成当前页码和总页数。
- 此外，CSS 扩展 -aspose-content 还定义了顶部中心区域显示的内容。它将内容设置为字符串“Hello, World Document Title!!!”。
使用 HTMLDocument 类初始化 HTML 文档。
创建一个 XpsDevice 实例，并指定保存渲染文档的输出文件路径。
使用 renderTo(device) 方法将 HTML 转换为 XPS。

 1// Add custom page margins, header, and footer using CSS @page rules in Aspose.HTML for Java
 2
 3//  Initialize a configuration object
 4Configuration configuration = new Configuration();
 5
 6// Get the User Agent Service
 7IUserAgentService userAgent = configuration.getService(IUserAgentService.class);
 8
 9// Set a style of custom margins and create marks on it
10userAgent.setUserStyleSheet(
11        "@page {\n" +
12                "  /* Page margins should be not empty in order to write content inside the margin-boxes */\n" +
13                "  margin-top: 1cm;\n" +
14                "  margin-left: 2cm;\n" +
15                "  margin-right: 2cm;\n" +
16                "  margin-bottom: 2cm;\n" +
17                "  /* Page counter located at the bottom of the page */\n" +
18                "  @bottom-right {\n" +
19                "    -aspose-content: \"Page \" currentPageNumber() \" of \" totalPagesNumber();\n" +
20                "    color: green;\n" +
21                "  }\n" +
22                "  /* Page title located at the top-center box */\n" +
23                "  @top-center {\n" +
24                "    -aspose-content: \"Hello, World Document Title!!!\";\n" +
25                "    vertical-align: bottom;\n" +
26                "    color: blue;\n" +
27                "  }\n" +
28                "}");
29//  Initialize an HTML document
30HTMLDocument document = new HTMLDocument("<div>Hello, World!!!</div>", ".", configuration);
31
32//  Initialize an output device
33XpsDevice device = new XpsDevice("output.xps");
34
35// Send the document to the output device
36document.renderTo(device);

Example_CustomPageStyleUsingCssExtensions.java hosted with ❤ by GitHub

建议

由于现代浏览器对 CSS 属性的标准化程度越来越高，因此应尽量少用供应商前缀，仅在需要的功能上使用。
在不同浏览器中测试 CSS，确保行为一致，尤其是在使用前缀属性时。

您可以从 GitHub 下载完整的示例和数据文件。

HTML 表格编辑器