Extensions CSS – Préfixes des fournisseurs CSS

Préfixes des fournisseurs CSS

Les préfixes de fournisseur CSS, parfois appelés préfixes de navigateur CSS, sont utilisés dans les noms de propriétés CSS pour mettre en œuvre des fonctionnalités CSS expérimentales ou de préversion qui ne sont pas encore normalisées ou dont la prise en charge peut être limitée dans certains navigateurs. Les préfixes de fournisseur sont utilisés pour identifier les navigateurs spécifiques ou les versions de navigateurs qui prennent en charge ces fonctionnalités.

Les principaux fournisseurs de navigateurs utilisent généralement les préfixes suivants pour mettre en œuvre des fonctionnalités CSS non standard :

• -webkit- – Utilisé pour les navigateurs basés sur WebKit, notamment Chrome, Safari, les versions les plus récentes d’Opera et la plupart des navigateurs iOS (par exemple, Firefox pour iOS).
• -moz- – Utilisé pour les navigateurs basés sur Mozilla, tels que Firefox.
• -o- – Spécifique aux anciennes versions d’Opera avant le passage à WebKit.
• -ms- – S’applique à Internet Explorer et aux premières versions de Microsoft Edge.

Selon la spécification CSS, les extensions CSS spécifiques à un fournisseur doivent commencer par un tiret ou un trait de soulignement et avoir le format suivant :

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

Par exemple, la propriété -webkit-border-radius est une propriété préfixée par le fournisseur qui vous permet d’arrondir les coins des éléments pour créer un design moderne et visuellement attrayant dans les navigateurs basés sur WebKit, tels que Chrome.

Extension CSS Aspose – Exemple Java

Le préfixe utilisé par la bibliothèque Aspose.HTML ressemble à -aspose- et offre certaines fonctionnalités expérimentales. Voici une liste de fonctions CSS qui peuvent être activées en utilisant le préfixe -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.

L’extrait de code suivant montre comment utiliser les extensions CSS pour créer des marques personnalisées sur les marges des documents :

1. Initialise une instance de la classe Configuration.
2. Utilisez la méthode getService() pour récupérer l’implémentation du service User Agent dans la configuration.
3. Utilisez la méthode setUserStyleSheetU() pour définir les règles CSS pour les marges des pages, l’emplacement du contenu et le style des compteurs et des titres des pages.
   • Here is used the -aspose-content CSS property to define the content displayed in the bottom-right area. It includes the currentPageNumber() and the totalPagesNumber() functions, which are provided by the Aspose.HTML library to dynamically generate the current page number and a total number of pages.
   • Also, the -aspose-content CSS extension defines the content displayed in the top-center area. It sets the content to the string “Hello, World Document Title!!!”.
4. Initialise un document HTML en utilisant la classe HTMLDocument.
5. Créez une instance XpsDevice et indiquez le chemin du fichier de sortie où le document rendu sera enregistré.
6. Utilisez la méthode renderTo(device) pour convertir le HTML en 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);

Recommandations

• Utilisez les préfixes des fournisseurs avec parcimonie et uniquement pour les fonctionnalités requises, car les navigateurs modernes normalisent de plus en plus les propriétés CSS.
• Testez votre feuille de style CSS dans différents navigateurs pour vous assurer qu’elle se comporte de manière cohérente, en particulier lorsque vous utilisez des propriétés préfixées.

Vous pouvez télécharger les exemples complets et les fichiers de données à partir de GitHub.