Extensiones CSS – Prefijos de proveedores de CSS

Prefijos de proveedores de CSS – CSS Vendor Prefixes

Los prefijos de proveedores de CSS, a veces denominados prefijos de navegador CSS, se utilizan en los nombres de propiedades de CSS para implementar funciones CSS experimentales o preliminares que aún no están estandarizadas o que pueden tener soporte limitado en ciertos navegadores. Los prefijos de proveedores se utilizan para identificar navegadores específicos o versiones de navegador que admiten estas funciones.

Los principales proveedores de navegadores suelen utilizar los siguientes prefijos para implementar funciones CSS no estándar:

-webkit-: se utiliza para navegadores basados en WebKit, incluidos Chrome, Safari, versiones más recientes de Opera y la mayoría de los navegadores iOS (por ejemplo, Firefox para iOS).
-moz-: se utiliza para navegadores basados en Mozilla, como Firefox.
-o-: específico de versiones anteriores de Opera antes de que cambiara a WebKit.
-ms- – Aplicado a Internet Explorer y versiones anteriores de Microsoft Edge.

Según la especificación CSS, las extensiones específicas del proveedor de CSS deben comenzar con un guión o guión bajo y tener el siguiente formato:

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

Por ejemplo, -webkit-border-radius es una propiedad con prefijo del proveedor que le permite redondear las esquinas de los elementos para crear un diseño visualmente atractivo y moderno en navegadores basados en WebKit, como Chrome.

Extensión CSS Aspose – Ejemplo de Java

El prefijo que utiliza la biblioteca Aspose.HTML se parece a -aspose- y le brinda algunas características experimentales. A continuación se muestra una lista de funciones CSS que se pueden habilitar usando el prefijo -aspose-:

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.

El siguiente fragmento de código demuestra cómo usar extensiones CSS para crear marcas personalizadas en los márgenes del documento:

Inicialice una instancia de la clase Configuración.
Utilice el método getService() para obtener la implementación del servicio del Agente de usuario de la configuración.
Utilice el método setUserStyleSheetU() para definir reglas CSS para márgenes de página, ubicación de contenido y estilo para títulos y contadores de páginas.
- Aquí se utiliza la propiedad CSS -aspose-content para definir el contenido que se muestra en el área inferior derecha. Incluye las funciones currentPageNumber() y totalPagesNumber(), que proporciona la biblioteca Aspose.HTML para generar dinámicamente el número de página actual y un número total de páginas.
- Además, la extensión CSS -aspose-content define el contenido que se muestra en el área superior central. Establece el contenido en la cadena “Hello, World Document Title!!!”.
Inicializa un documento HTML utilizando la clase HTMLDocument.
Cree una instancia de XpsDevice y especifique la ruta del archivo de salida donde se guardará el documento renderizado.
Utilice el método renderTo(device) para convertir HTML a XPS.

 1// @ms products/html/en/java/advanced-programming/dom-mutationobserver/_index.md#123
 2
 3// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
 4//  Initialize configuration object and set up the page-margins for the document
 5Configuration configuration = new Configuration();
 6// Get the User Agent service
 7IUserAgentService userAgent = configuration.getService(IUserAgentService.class);
 8
 9// Set the 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//  Initialize an output device
32XpsDevice device = new XpsDevice("output.xps");
33// Send the document to the output device
34document.renderTo(device);

view raw EAdvancedUsage_CSSExtensions_AddTitleAndPageNumber hosted with ❤ by GitHub

Recomendaciones

Utilice los prefijos de proveedores con moderación y sólo para las funciones requeridas, ya que los navegadores modernos estandarizan cada vez más las propiedades CSS.
Pruebe su CSS en diferentes navegadores para garantizar un comportamiento coherente, especialmente cuando utilice propiedades con prefijo.

Puede descargar los ejemplos completos y los archivos de datos desde GitHub.

Editor de formularios HTML