CSS Extensions – CSS Vendor Prefixes

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.

Major browser vendors commonly use the following prefixes to implement nonstandard CSS features:

• -webkit- – Used for WebKit-based browsers, including Chrome, Safari, newer versions of Opera, and most iOS browsers (e.g., Firefox for iOS).
• -moz- – Used for Mozilla-based browsers, such as Firefox.
• -o- – Specific to older versions of Opera before it switched to WebKit.
• -ms- – Applied to Internet Explorer and early versions of 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(device) method to convert the HTML to XPS.

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

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

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

Recommendations

• Use vendor prefixes sparingly and only for required features, as modern browsers increasingly standardize CSS properties.
• Test your CSS across different browsers to ensure consistent behavior, especially when using prefixed properties.

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