При разработке компонентов и шаблонов в 1С-Битрикс часто возникает задача: подключить CSS-файл, но только если он ещё не подключён. Двойное подключение одного и того же стиля приводит к избыточным HTTP-запросам, увеличивает время загрузки страницы и в некоторых случаях вызывает конфликты стилей. В этой статье разберём, как правильно проверить, подключён ли определённый CSS-файл, прежде чем добавлять его на страницу.
Проблема двойного подключения CSS в Битрикс
В Битрикс нередко несколько компонентов на одной странице используют одну и ту же библиотеку стилей — например, Font Awesome, Bootstrap или собственный корпоративный CSS. Если каждый компонент подключает файл без проверки, браузер получит его несколько раз. Это влечёт:
- лишние сетевые запросы и замедление загрузки
- дублирование CSS-правил в DOM
- потенциальные конфликты при каскадировании стилей
- проблемы при кэшировании на стороне CDN или прокси
Правильное решение — проверять наличие файла в списке уже подключённых стилей перед добавлением.
Метод через $APPLICATION->GetCSSArray()
Глобальный объект $APPLICATION в Битрикс предоставляет метод GetCSSArray(), который возвращает массив всех CSS-файлов, зарегистрированных для текущей страницы на момент вызова.
|
1 2 3 4 |
$css = $APPLICATION->GetCSSArray(); if (!is_array($css) || !in_array("/bitrix/css/main/font-awesome.css", $css)) { $APPLICATION->SetAdditionalCSS("/bitrix/css/main/font-awesome.css"); } |
Разбор кода
$APPLICATION->GetCSSArray()— возвращает массив путей к CSS-файлам, добавленных черезSetAdditionalCSS()is_array($css)— проверяем, что метод вернул массив (на ранних этапах загрузки он может вернутьfalseилиnull)in_array(...)— ищем нужный файл в списке подключённых стилей- Если файл не найден — подключаем его через
SetAdditionalCSS()
Обратите внимание: путь в in_array() должен точно совпадать с тем, как файл был зарегистрирован ранее — включая регистр символов и слеши.
Использование в шаблоне компонента с HTML-выводом
Если нужно вывести тег напрямую в строку (например, в $strReturn), код выглядит так:
|
1 2 3 4 |
$css = $APPLICATION->GetCSSArray(); if (!is_array($css) || !in_array("/bitrix/css/main/font-awesome.css", $css)) { $strReturn .= '<link href="' . CUtil::GetAdditionalFileURL("/bitrix/css/main/font-awesome.css") . '" type="text/css" rel="stylesheet" />' . "\n"; } |
Здесь CUtil::GetAdditionalFileURL() формирует корректный URL с учётом настроек CDN и кэшбастинга, прописанных в конфигурации Битрикс.
Альтернативный метод через Asset Manager
В современных версиях Битрикс рекомендуется использовать Asset Manager для управления CSS и JS-файлами. Это более высокоуровневый подход, который автоматически дедублирует файлы:
|
1 2 |
// Подключение через Asset Manager (Битрикс D7) \Bitrix\Main\Page\Asset::getInstance()->addCss("/bitrix/css/main/font-awesome.css"); |
Asset Manager самостоятельно отслеживает, какие файлы уже добавлены, и не допускает дублирования. Метод addCss() идемпотентен — его можно вызывать несколько раз без последствий.
Практический пример в компоненте
Ниже — полноценный пример использования проверки в шаблоне компонента Битрикс:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) { die(); } global $APPLICATION; // Проверяем и подключаем Font Awesome только если не подключён $cssFiles = $APPLICATION->GetCSSArray(); $faPath = "/bitrix/css/main/font-awesome.css"; if (!is_array($cssFiles) || !in_array($faPath, $cssFiles)) { $APPLICATION->SetAdditionalCSS($faPath); } // Для D7 — предпочтительный способ \Bitrix\Main\Page\Asset::getInstance()->addCss($faPath); ?> |
Лучшие практики управления CSS в Битрикс
- Используйте Asset Manager в проектах на D7 — он обеспечивает автоматическую дедупликацию
- Стандартизируйте пути к CSS-файлам: всегда используйте абсолютные пути от корня сайта, начиная с
/ - Выносите общие стили в шаблон сайта (
header.php), а не в каждый компонент отдельно - Не смешивайте методы: если используете
SetAdditionalCSS(), не добавляйте тот же файл черезAddHeadString() - Проверяйте через DevTools вкладку Network, чтобы убедиться в отсутствии дублирующихся запросов CSS
Итог
Метод $APPLICATION->GetCSSArray() — простой и надёжный способ проверить, подключён ли CSS-файл в Битрикс до его добавления. Для новых проектов на Битрикс D7 предпочтительнее использовать \Bitrix\Main\Page\Asset::getInstance()->addCss(), который решает проблему дублирования автоматически. Правильное управление подключением стилей ускоряет загрузку страниц и предотвращает конфликты CSS в сложных проектах.
