Программирование, веб-кодинг

Добавить дополнительный атрибут при подключении css файлов в Yii2

Иногда нужно применить другие css-стили для вывода страницы на печать. Тогда в теге подключения css надо указать атрибут media="print"

Добавить дополнительный атрибут при подключении css файлов в Yii2

В Yii2 файлы css и js подключаются через класс AppAsset.php или его наследников. Но таким образом нельзя для каждого отдельного подключаемого файла стилей указывать дополнительные атрибуты.

<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $sourcePath = '@app/assets/inspire';
    public $css = [
                'themes/inspire/css/clean-blog.css',
                'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css',
                'http://fonts.googleapis.com/css?family=Lora&subset=latin,cyrillic:400,700,400italic,700italic',
                'http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic&subset=cyrillic,latin',
                //'http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800',
                'http://fonts.googleapis.com/css?family=Open+Sans:800,700,600,400,300&subset=cyrillic-ext,cyrillic',
    ];
        public $cssOptions = [
            'type' => 'text/css'
        ];

То есть вместо желаемого

<link href="themes/inspire/css/clean-blog.css" type="text/css" media="print" rel="stylesheet"/>

Мы получаем

<link href="themes/inspire/css/clean-blog.css" rel="stylesheet"/>

Что же делать?

1. Можно зарегистрировать файл css отдельно в нужном виде, добавив 3-м 2-м параметром массив с атрибутом 'media'

$this->registerCssFile('/css/style-print.css', ['media' => 'print'], []); 

2. Можно вынести в отдельный ассет, добавив зависимость от основного в свойстве $depends. И в свойстве $cssOptions задать атрибут 'media', но cssOptions применяется ко всем подключаемым css файлам в бандле.

<?php

namespace app\assets;

use yii\web\AssetBundle;

class InspireAssetsBundle extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $sourcePath = '@app/assets/inspire';
    public $css = [
                'themes/inspire/css/clean-blog.css',
    ];
        public $cssOptions = [
            'type' => 'text/css',
            'media' => 'print'
        ];
        public $js = [
            'scripts/index.js',
        ];
        public $jsOptions = [
        ];
    public $depends = [
        'app\assets\AppAsset',
    ];
}



Читайте также