CSS-Erweiterungen – CSS-Hersteller-Präfixe

CSS-Anbieter-Präfixe

CSS-Hersteller-Präfixe, manchmal auch CSS-Browser-Präfixe genannt, werden in CSS-Eigenschaftsnamen verwendet, um experimentelle oder vorveröffentlichte CSS-Funktionen zu implementieren, die noch nicht standardisiert sind oder in bestimmten Browsern nur begrenzt unterstützt werden. Hersteller-Präfixe werden verwendet, um bestimmte Browser oder Browser-Versionen zu identifizieren, die diese Funktionen unterstützen.

Die großen Browserhersteller verwenden in der Regel die folgenden Präfixe, um nicht standardisierte CSS-Funktionen zu implementieren:

• -webkit- – Wird für WebKit-basierte Browser verwendet, darunter Chrome, Safari, neuere Versionen von Opera und die meisten iOS-Browser (z. B. Firefox für iOS).
• -moz- – Wird für Mozilla-basierte Browser, wie Firefox, verwendet.
• -o- – Speziell für ältere Opera-Versionen vor dem Wechsel zu WebKit.
• -ms- – Angewandt auf Internet Explorer und frühe Versionen von Microsoft Edge.

Gemäß der CSS-Spezifikation müssen herstellerspezifische CSS-Erweiterungen mit einem Bindestrich oder Unterstrich beginnen und das folgende Format haben:

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

Die Eigenschaft “Webkit-border-radius” ist beispielsweise eine herstellerabhängige Eigenschaft, mit der Sie die Ecken von Elementen abrunden können, um ein optisch ansprechendes und modernes Design in WebKit-basierten Browsern wie Chrome zu erstellen.

Aspose CSS Erweiterung – Java Beispiel

Das Präfix, das von der Aspose.HTML-Bibliothek verwendet wird, sieht aus wie -aspose- und bietet Ihnen einige experimentelle Funktionen. Es folgt eine Liste von CSS-Funktionen, die mit dem Präfix -aspose- aktiviert werden können:

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.

Der nächste Codeschnipsel demonstriert, wie CSS-Erweiterungen verwendet werden können, um benutzerdefinierte Markierungen für Dokumentränder zu erstellen:

1. Initialisieren einer Instanz der Klasse Configuration.
2. Verwenden Sie die Methode getService(), um die Implementierung des User Agent-Dienstes aus der Konfiguration zu holen.
3. Verwenden Sie die Methode setUserStyleSheetU(), um CSS-Regeln für Seitenränder, die Platzierung von Inhalten und die Gestaltung von Seitenzählern und Titeln zu definieren.
   • Hier wird die CSS-Eigenschaft -aspose-content verwendet, um den unten rechts angezeigten Inhalt zu definieren. Sie enthält die Funktionen currentPageNumber() und totalPagesNumber() der Aspose.HTML-Bibliothek, um die aktuelle Seitenzahl und die Gesamtseitenzahl dynamisch zu generieren.
   • Die CSS-Erweiterung -aspose-content definiert außerdem den oben in der Mitte angezeigten Inhalt. Sie setzt den Inhalt auf die Zeichenfolge “Hello, World Document Title!!!”.
4. Initialisiert ein HTML-Dokument unter Verwendung der Klasse HTMLDocument.
5. Erstellen Sie eine XpsDevice-Instanz und geben Sie den Pfad der Ausgabedatei an, in der das gerenderte Dokument gespeichert werden soll.
6. Verwenden Sie die Methode renderTo(device), um das HTML in XPS zu konvertieren.

// 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);

Empfehlungen

• Verwenden Sie Herstellerpräfixe sparsam und nur für erforderliche Funktionen, da moderne Browser die CSS-Eigenschaften zunehmend standardisieren.
• Testen Sie Ihr CSS in verschiedenen Browsern, um ein konsistentes Verhalten sicherzustellen, insbesondere bei der Verwendung von vorangestellten Eigenschaften.

Sie können die vollständigen Beispiele und Datendateien unter GitHub herunterladen.