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:
- Initialisieren einer Instanz der Klasse Configuration.
- Verwenden Sie die Methode
getService()
, um die Implementierung des User Agent-Dienstes aus der Konfiguration zu holen. - 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!!!”.
- Initialisiert ein HTML-Dokument unter Verwendung der Klasse HTMLDocument.
- Erstellen Sie eine XpsDevice-Instanz und geben Sie den Pfad der Ausgabedatei an, in der das gerenderte Dokument gespeichert werden soll.
- Verwenden Sie die Methode
renderTo(
device
), um das HTML in XPS zu konvertieren.
1// Initialize a configuration object
2Configuration configuration = new Configuration();
3
4// Get the User Agent Service
5IUserAgentService userAgent = configuration.getService(IUserAgentService.class);
6
7// Set a style of custom margins and create marks on it
8userAgent.setUserStyleSheet(
9 "@page {\n" +
10 " /* Page margins should be not empty in order to write content inside the margin-boxes */\n" +
11 " margin-top: 1cm;\n" +
12 " margin-left: 2cm;\n" +
13 " margin-right: 2cm;\n" +
14 " margin-bottom: 2cm;\n" +
15 " /* Page counter located at the bottom of the page */\n" +
16 " @bottom-right {\n" +
17 " -aspose-content: \"Page \" currentPageNumber() \" of \" totalPagesNumber();\n" +
18 " color: green;\n" +
19 " }\n" +
20 " /* Page title located at the top-center box */\n" +
21 " @top-center {\n" +
22 " -aspose-content: \"Hello, World Document Title!!!\";\n" +
23 " vertical-align: bottom;\n" +
24 " color: blue;\n" +
25 " }\n" +
26 "}");
27// Initialize an HTML document
28HTMLDocument document = new HTMLDocument("<div>Hello, World!!!</div>", ".", configuration);
29
30// Initialize an output device
31XpsDevice device = new XpsDevice("output.xps");
32
33// Send the document to the output device
34document.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.