Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Расширения CSS – Префиксы поставщиков CSS
Contents
[
Hide
Show
]CSS-префиксы поставщиков – CSS Vendor Prefixes
Префиксы поставщиков CSS, иногда называемые CSS префиксами браузера, используются в именах свойств CSS для реализации экспериментальных или предварительных функций CSS, которые еще не стандартизированы или могут иметь ограниченную поддержку в определенных браузерах. Префиксы поставщиков используются для идентификации конкретных браузеров или версий браузеров, поддерживающих эти функции.
Основные поставщики браузеров обычно используют следующие префиксы для реализации нестандартных функций CSS:
- -webkit- – используется для браузеров на основе WebKit, включая Chrome, Safari, более новые версии Opera и большинство браузеров iOS (например, Firefox для iOS).
- -moz- – используется для браузеров на базе Mozilla, таких как Firefox.
- -o- – относится к более старым версиям Opera до перехода на WebKit.
- -ms- – применяется к Internet Explorer и ранним версиям Microsoft Edge.
Согласно спецификации CSS, расширения CSS, специфичные для конкретного поставщика, должны начинаться с тире или подчеркивания и иметь следующий формат:
['-' or '_'] + [vendor identifier] + ['-'] + [name]
Например, -webkit-border-radius – это свойство с префиксом поставщика, которое позволяет вам скруглять углы элементов для создания визуально привлекательного и современного дизайна в браузерах на основе WebKit, таких как Chrome.
CSS Расширения – Aspose.HTML
Префикс, используемый библиотекой Aspose.HTML, выглядит как -aspose- и предоставляет вам некоторые экспериментальные функции. Ниже приведен список функций CSS, которые можно включить с помощью префикса -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. |
Следующий фрагмент кода демонстрирует, как использовать расширения CSS для создания пользовательских меток на полях документа:
- Инициализируйте экземпляр класса Configuration.
- Используйте метод
getService(), чтобы получить реализацию службы User Agent из конфигурации. - Используйте метод
setUserStyleSheetU(), чтобы определить правила CSS для полей страницы, размещения контента и стиля счетчиков страниц и заголовков.- Здесь используется свойство CSS -aspose-content для определения содержимого, отображаемого в правой нижней части. Оно включает в себя функции currentPageNumber() и totalPagesNumber(), которые предоставляются библиотекой Aspose.HTML для динамической генерации номера текущей страницы и общего количества страниц.
- Кроме того, расширение CSS -aspose-content определяет контент, отображаемый в верхней центральной области. Оно устанавливает содержимое в строку «Hello, World Document Title!!!».
- Инициализируйте HTML-документ, используя класс HTMLDocument.
- Создайте экземпляр XpsDevice и укажите путь к выходному файлу, в котором будет сохранен визуализированный документ.
- Используйте метод
renderTo(
device) для преобразования HTML в XPS.
1// Add custom page margins, header, and footer using CSS @page rules in Aspose.HTML for Java
2
3// Initialize a configuration object
4Configuration configuration = new Configuration();
5
6// Get the User Agent Service
7IUserAgentService userAgent = configuration.getService(IUserAgentService.class);
8
9// Set a style of custom margins and create marks on it
10userAgent.setUserStyleSheet(
11 "@page {\n" +
12 " /* Page margins should be not empty in order to write content inside the margin-boxes */\n" +
13 " margin-top: 1cm;\n" +
14 " margin-left: 2cm;\n" +
15 " margin-right: 2cm;\n" +
16 " margin-bottom: 2cm;\n" +
17 " /* Page counter located at the bottom of the page */\n" +
18 " @bottom-right {\n" +
19 " -aspose-content: \"Page \" currentPageNumber() \" of \" totalPagesNumber();\n" +
20 " color: green;\n" +
21 " }\n" +
22 " /* Page title located at the top-center box */\n" +
23 " @top-center {\n" +
24 " -aspose-content: \"Hello, World Document Title!!!\";\n" +
25 " vertical-align: bottom;\n" +
26 " color: blue;\n" +
27 " }\n" +
28 "}");
29// Initialize an HTML document
30HTMLDocument document = new HTMLDocument("<div>Hello, World!!!</div>", ".", configuration);
31
32// Initialize an output device
33XpsDevice device = new XpsDevice("output.xps");
34
35// Send the document to the output device
36document.renderTo(device);Рекомендации
- Используйте префиксы поставщиков экономно и только для необходимых функций, поскольку современные браузеры все больше стандартизируют свойства CSS.
- Протестируйте свой CSS в разных браузерах, чтобы убедиться в единообразии поведения, особенно при использовании свойств с префиксами.
Вы можете загрузить полные примеры и файлы данных по адресу GitHub.