CSS Extensions – CSS Vendor Prefixes – Aspose.HTML for Java

CSS Vendor Prefixes

CSS vendor prefixes, sometimes called CSS browser prefixes, are used in CSS property names to implement experimental or pre-release CSS features that are not yet standardized or may have limited support in certain browsers. Vendor prefixes are used to identify specific browsers or browser versions that support these features.

Historically, browser vendors use the prefixes for nonstandard CSS features. Following is the list of the major browsers prefixes:

• -webkit- (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
• -moz- (Mozilla-based browsers such as Firefox)
• -o- (Old, pre-WebKit, versions of Opera)
• -ms- (Internet Explorer and Microsoft Edge)

According to the CSS specification, CSS vendor-specific extensions must start with a dash or underscore and have the following format:

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

For example, the -webkit-border-radius is a vendor-prefixed property that allows you to round the corners of elements to create a visually appealing and modern design in WebKit-based browsers, such as Chrome.

Aspose CSS Extension – Java Example

The prefix that is used by Aspose.HTML library looks like -aspose- and gives you some experimental features. Following is a list of CSS functions that can be enabled by using -aspose- prefix:

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.

The next code snippet demonstrates how to use CSS extensions to create custom marks on document margins:

1. Initialize an instance of the Configuration class:
2. Use the getService() method to fetch the User Agent service implementation from the configuration.
3. Use the setUserStyleSheetU() method to define CSS rules for page margins, content placement, and styling for page counters and titles.

• Here is used the -aspose-content CSS property to define the content displayed in the bottom-right area. It includes the currentPageNumber() and the totalPagesNumber() functions, which are provided by the Aspose.HTML library to dynamically generate the current page number and a total number of pages.
• Also, the -aspose-content CSS extension defines the content displayed in the top-center area. It sets the content to the string “Hello World Document Title!!!”.

4. Initializes an HTML document using the HTMLDocument class.
5. Create an XpsDevice instance and specify the output file path where the rendered document will be saved.
6. Use the renderTo() method to convert the HTML to XPS.

// @java java/com/aspose/html/examples/Examples_Java_AdvancedUsage_CSSExtensions_AddTitleAndPageNumber.java
// @java java/com/aspose/html/documentation/examples/Advanced_CSSExtension.java
//  Initialize configuration object and set up the page-margins for the document
Configuration configuration = new Configuration();

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

// Set the 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
HTMLDocument document = new HTMLDocument("<div>Hello World!!!</div>", ".", configuration);

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

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

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