CSS Extensions and Vendor Prefixes in Java

CSS extensions let rendering engines support vendor-specific or product-specific features outside standard CSS. Aspose.HTML for Java uses the -aspose- prefix for page-aware content, including current page numbers and total page counts in page margin boxes.

In this article, CSS extensions means prefixed CSS syntax interpreted by a rendering engine. It does not refer to browser add-ons such as Chrome extensions.

To add page marks in Java, create a Configuration, obtain IUserAgentService, and call setUserStyleSheet() with CSS @page rules that use -aspose-content. Load the HTML with this configuration and call renderTo() to send it to a paged output device.

CSS Vendor Prefixes

CSS vendor prefixes, sometimes called CSS browser prefixes, identify experimental, pre-release, or implementation-specific CSS features. They let a browser or rendering engine expose a feature without presenting it as a standard CSS property.

Browser engines have historically used the following prefixes:

• -webkit- – WebKit- and Blink-based browsers, including Safari and Chrome, and browsers on iOS.
• -moz- – Mozilla-based browsers such as Firefox.
• -o- – older versions of Opera before its switch to a Chromium-based engine.
• -ms- – Internet Explorer and legacy versions of Microsoft Edge.

Vendor-specific identifiers traditionally start with a dash or underscore and use the following pattern:

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

For example, -webkit-border-radius and -moz-border-radius were historically used before the standard border-radius property became widely supported. For modern CSS, prefer the unprefixed standardized property unless a specific target engine still requires a prefix.

Browser Vendor Prefixes vs. Aspose.HTML Extensions

Browser vendor prefixes such as -webkit- and -moz- identify features associated with particular browser engines. The -aspose- prefix instead identifies product-specific extensions for Aspose.HTML rendering. A browser prefix alone does not establish whether Aspose.HTML supports a particular CSS feature; verify the property and its rendered result for your target workflow.

Use standard CSS properties for ordinary styling and page margins, and add -aspose-content when using the page-number functions demonstrated below. These product-specific extensions supplement standard CSS rather than replace it, and should not be relied on for browser output.

Aspose.HTML CSS Extensions

Aspose.HTML for Java uses the -aspose- prefix for product-specific CSS features evaluated during rendering. The example on this page uses the -aspose-content property with two page-number functions:

Function	Description
currentPageNumber()	Returns the number of the current output page.
totalPagesNumber()	Returns the total number of output pages.

Add Page Numbers and Margin Content in Java

The following Java example defines a user stylesheet with @page margin boxes. It places a document title in the top-center margin and Page X of Y in the bottom-right margin, then renders the HTML document to XPS.

1. Initialize an instance of the Configuration class.
2. Obtain the IUserAgentService implementation by calling configuration.getService(IUserAgentService.class).
3. Call setUserStyleSheet() to define page margins and the @top-center and @bottom-right margin boxes.
4. Use -aspose-content with currentPageNumber() and totalPagesNumber() to generate the page counter.
5. Initialize an HTMLDocument with the configured environment.
6. Create an XpsDevice for the output file.
7. Call renderTo(device) to render the document to XPS.

// Add custom page margins, header, and footer using CSS @page rules in Aspose.HTML for Java

//  Initialize a configuration object
Configuration configuration = new Configuration();

// Get the User Agent Service
IUserAgentService userAgent = configuration.getService(IUserAgentService.class);

// Set a style of custom margins and create marks on it
userAgent.setUserStyleSheet(
        "@page {\n" +
                "  /* Page margins should be not empty in order to write content inside the margin-boxes */\n" +
                "  margin-top: 1cm;\n" +
                "  margin-left: 2cm;\n" +
                "  margin-right: 2cm;\n" +
                "  margin-bottom: 2cm;\n" +
                "  /* Page counter located at the bottom of the page */\n" +
                "  @bottom-right {\n" +
                "    -aspose-content: \"Page \" currentPageNumber() \" of \" totalPagesNumber();\n" +
                "    color: green;\n" +
                "  }\n" +
                "  /* Page title located at the top-center box */\n" +
                "  @top-center {\n" +
                "    -aspose-content: \"Hello, World Document Title!!!\";\n" +
                "    vertical-align: bottom;\n" +
                "    color: blue;\n" +
                "  }\n" +
                "}");
//  Initialize an HTML document
try (HTMLDocument document = new HTMLDocument("<div>Hello, World!!!</div>", ".", configuration)) {

    //  Initialize an output device
    try (XpsDevice device = new XpsDevice("output.xps")) {

        // Send the document to the output device
        document.renderTo(device);
    }
}

The generated output.xps file displays the title in the top margin and a green page counter in the bottom-right margin. The example defines nonzero page margins because margin boxes need available margin space for their content.

Recommendations

• Use standard unprefixed CSS properties when they provide the required browser behavior.
• Use -aspose- extensions specifically for Aspose.HTML rendering workflows; other browsers and rendering engines are not expected to interpret product-specific properties.
• Define sufficient page margins when placing content in @page margin boxes.
• Test page marks with representative content because the total page count depends on the final layout.

You can download the complete examples and data files from GitHub.

Related Articles

• Fine-Tuning Converters in Java – configure rendering devices, page setup, and format-specific output options.
• Convert HTML to XPS in Java – convert HTML documents to XPS with default or customized save options.
• Edit an HTML Document in Java – change HTML elements, attributes, and CSS before saving or rendering.
• Advanced HTML Programming in Java – return to the advanced programming section.