Во фреймворке нет встроенных средств для подключения CSS файлов в проект. Предполагается, что это должно происходить также, как и при работе с обычным HTML. Для простых проектов это вполне подходит, т.к. работа со стилями в них чаще всего заключается в подключении 1 - 2 CSS файлов, но при создании крупного проекта, разработчик сталкивается с тем, что в проекте могут быть десятки CSS файлов, подключение которых происходит в зависимости он наличия определенных элементов на странице.

Задачу по созданию централизованной системы подключения CSS скриптов можно разделить на следующие этапы:

• запоминание всех используемых на странице css файлов
• перехват HTML кода страницы перед отправкой её в браузер
• вывод списка css файлов в нужном месте страницы

Чтобы запомнить список всех файлов из разных мест приложения, я использую класс конфигурации. Добавить значение в массив конфигурации из любого места приложения можно так:

[code] get_instance()->config->config['key'] = 'value'; [/code]

Перед добавлением файла в список файлов требуется проверка, а не был ли такой файл уже добавлен, поэтому эту операцию лучше оформить во вспомогательную функцию (хелпер). Также, не будет лишним предусмотреть то, что добавляться может как локальный файл относительно FCPATH, так и файл из интернета по полному пути. И что еще важно, нужно предусмотреть добавление css файла с условными комментариями Internet Explorer, эта технология сейчас пользуется огромной популярностью.

[code] if (function_exists('css') === FALSE) { function css($file, $base_url = TRUE, $params = array()) {
$ci = & get_instance();

    if ($base_url != FALSE)
    {
        if (function_exists('base_url') === FALSE)
        {
            $ci->load->helper('url');
        }

        $file = base_url().ltrim($file, '/');
    }

    if (isset($ci->config->config['css'][$file]) === FALSE)
    {
        $ci->config->config['css'][$file] = $params;
    }   
}

} [/code]

В функцию js можно передать 3 параметра:

• путь к файлу скрипта включающий название файла
• признак того, передан относительный путь или абсолютный
• дополнительные параметры

Имена дополнительных параметров на данном этапе не важны, но это должен быть одноуровневый ассоциативный массив. После добавления хелпера в автозагрузку приложения, появляется возможность в любом месте приложения сообщить ему о необходимости подключения CSS файла.

[code] css('css/style.css'); [/code]

В предыдущей статье: подключение JS файлов в CodeIgniter я уже рассказал как перехватить код страницы, поэтому сейчас ограничусь кодом хука на рендеринг списка CSS файлов в псевдотег [CSS].

[code] if (function_exists('css_hook') === FALSE) { function css_hook() { $ci = & get_instance();

    $return = '';

    if (isset($ci->config->config['css']) === TRUE)
    {
        foreach($ci->config->config['css'] as $css => $params)
        {
            if (isset(params['lte']) === TRUE)
            {
                $return .= '<'
                    .'!'
                    .'--'.
                    '['.
                    'if lte IE '
                    .$params['lte']
                    .']>'
                    .'<'.
                    'link href="'
                    .$css
                    .'" media="screen" '
                    .'rel="stylesheet" '
                    .'type="text/css" />'
                    .'<'.
                    '!'.
                    '[endif]'.
                    '--'
                    .'>'
                    ."\n";                  
            }
            else           
            {               
                $return .= '<'
                    .'link'
                    .' href="'
                    .$css
                    .'" media="screen" '
                    .'rel="stylesheet" '
                    .'type="text/css" /'
                    .'>'
                    ."\n";
            }

            unset($ci->config->config['css'][$css]);
        }

        if (count($ci->config->config['css']) == 0)
        {
            unset($ci->config->config['css']);
        }           
    }

    $ci->output->set_output(
        str_replace(
            '[CSS]',
            $return,
            $ci->output->get_output()
        )
    );
}

} [/code]

Пример подключения CSS файла в проект:

[code] css('css/style.ie6.css', FALSE, array('lte' => 6)); [/code]

23.09.2010