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:

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:

NameDescription
currentPageNumberThis function returns the number of the current rendering page.
totalPagesNumberThis 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.
 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

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

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.