Битрикс
Битрикс. Подключение дополнительных стилей CSS
В 1С-Битрикс функция:
ShowCSS()используется для подключения CSS-файлов шаблона сайта и дополнительных стилей страницы.
Что делает ShowCSS()
Функция:
$APPLICATION->ShowCSS()выводит:
- основные CSS шаблона;
- стили компонентов;
- дополнительные CSS-файлы;
- стили подключенные через SetAdditionalCSS().
Где используется ShowCSS()
Обычно:
ShowCSS()вызывается в:
header.phpшаблона сайта.
Например:
<head>
<?$APPLICATION->ShowHead();?>
</head>Внутри:
ShowHead()уже вызывается:
- ShowCSS();
- ShowHeadStrings();
- ShowHeadScripts();
В своих проектах я использую серверную инфраструктуру Timeweb Cloud
VPS и облачные решения для стабильной работы сайтов на PHP и 1С-Битрикс — от корпоративных сайтов до интернет-магазинов и высоконагруженных веб-проектов.
Перейти на Timeweb CloudПодключение дополнительного CSS
Для подключения отдельного CSS-файла используется:
$APPLICATION->SetAdditionalCSS()Пример подключения CSS
<?
$APPLICATION->SetAdditionalCSS(
"/bitrix/templates/demo/additional.css"
);
?>Что делает SetAdditionalCSS()
Метод:
SetAdditionalCSS()добавляет CSS-файл в очередь подключения Битрикс.
После этого:
ShowCSS()автоматически выведет:
<link rel="stylesheet" ... >Где удобно использовать
- отдельные страницы;
- лендинги;
- страницы услуг;
- кастомные компоненты;
- временные стили;
- дополнительные библиотеки CSS.
Пример подключения в component_epilog.php
<?
$APPLICATION->SetAdditionalCSS(
SITE_TEMPLATE_PATH . "/css/custom.css"
);
?>Подключение нескольких CSS-файлов
Можно подключать несколько файлов:
<?
$APPLICATION->SetAdditionalCSS("/css/page.css");
$APPLICATION->SetAdditionalCSS("/css/catalog.css");
$APPLICATION->SetAdditionalCSS("/css/mobile.css");
?>Преимущества SetAdditionalCSS()
- стили подключаются централизованно;
- не нужно писать <link> вручную;
- Битрикс управляет очередью подключения;
- корректно работает композит;
- учитывается оптимизация CSS.
Важно про абсолютный путь
Лучше использовать:
SITE_TEMPLATE_PATHили:
$_SERVER["DOCUMENT_ROOT"]чтобы избежать проблем при переносе сайта.
Пример через SITE_TEMPLATE_PATH
<?
$APPLICATION->SetAdditionalCSS(
SITE_TEMPLATE_PATH . "/css/style.css"
);
?>Когда лучше не использовать link вручную
Вместо:
<link rel="stylesheet" href="/style.css">в Битрикс лучше использовать:
SetAdditionalCSS()так как это:
- вписывается в архитектуру Битрикс;
- лучше для композита;
- удобнее для поддержки.
Итог
Функция:
ShowCSS()выводит все CSS-файлы, зарегистрированные в Битрикс.
А для подключения дополнительных стилей удобно использовать:
$APPLICATION->SetAdditionalCSS()
Комментарии