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:

1. Inicialice una instancia de la clase Configuración.
2. Utilice el método getService() para obtener la implementación del servicio del Agente de usuario de la configuración.
3. 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!!!”.
4. Inicializa un documento HTML utilizando la clase HTMLDocument.
5. Cree una instancia de XpsDevice y especifique la ruta del archivo de salida donde se guardará el documento renderizado.
6. Utilice el método renderTo(device) para convertir HTML a 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
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);

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.