Need conditional comments for assets #2906

Closed
exromany opened this Issue Mar 28, 2014 · 36 comments

Comments

Projects
None yet
8 participants
@exromany

Need an options in AssetBundle for generating something like this

<!--[if lt IE 9]>
    <link rel="stylesheet" href="css/grid-old-ie.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="css/grid.css">
<!--<![endif]-->
@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

Also you can use body classes instead of embedding scripts in conditions:

<!--[if lt IE 7]> <body class="ie6"> <![endif]--> 
<!--[if IE 7]> <body class="ie7"> <![endif]--> 
<!--[if IE 8]> <body class="ie8"> <![endif]--> 
<!--[if !IE]>--> <body> <!--<![endif]-->
Member

samdark commented Mar 28, 2014

Also you can use body classes instead of embedding scripts in conditions:

<!--[if lt IE 7]> <body class="ie6"> <![endif]--> 
<!--[if IE 7]> <body class="ie7"> <![endif]--> 
<!--[if IE 8]> <body class="ie8"> <![endif]--> 
<!--[if !IE]>--> <body> <!--<![endif]-->
@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

Still need it?

Member

samdark commented Mar 28, 2014

Still need it?

@exromany

This comment has been minimized.

Show comment
Hide comment
@exromany

exromany Mar 28, 2014

yep, it still convenient way to include html5shim and others to older browsers

yep, it still convenient way to include html5shim and others to older browsers

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member
  1. How would you like it to be specified?
  2. How to resolve dependencies of normal bundle A on ie8 bundle B?
  3. How to resolve dependencies of ie8 bundle A on normal bundle B?
  4. Can bundle include scripts for both ie6, ie7 and normal ones?
Member

samdark commented Mar 28, 2014

  1. How would you like it to be specified?
  2. How to resolve dependencies of normal bundle A on ie8 bundle B?
  3. How to resolve dependencies of ie8 bundle A on normal bundle B?
  4. Can bundle include scripts for both ie6, ie7 and normal ones?
@exromany

This comment has been minimized.

Show comment
Hide comment
@exromany

exromany Mar 28, 2014

how about specify condition per file

public $js = [
    'main.js',
    'html5shiv.js' => 'lt IE 9',
    'respond.js' => 'lt IE 9',
];

or

public $js = [
    'main.js',
    'lt IE 9' => [
        'html5shiv.js',
        'respond.js',
    ],
];

how about specify condition per file

public $js = [
    'main.js',
    'html5shiv.js' => 'lt IE 9',
    'respond.js' => 'lt IE 9',
];

or

public $js = [
    'main.js',
    'lt IE 9' => [
        'html5shiv.js',
        'respond.js',
    ],
];

@cebe cebe added the type:feature label Mar 28, 2014

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

OK, what about dependencies?

Member

samdark commented Mar 28, 2014

OK, what about dependencies?

@exromany

This comment has been minimized.

Show comment
Hide comment
@exromany

exromany Mar 28, 2014

i think that dependency resolution should remain unchanged

i think that dependency resolution should remain unchanged

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

OK so you assume each dependency will be rendered in HTML in its own separate conditional comment like the following?

<link rel="stylesheet" href="css/grid.css">
<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/grid-ie.css">
<!--<![endif]-->
<!--[if eq IE 9]><!-->
    <link rel="stylesheet" href="css/grid-ie8.css">
<!--<![endif]-->
<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/all-ie.css">
<!--<![endif]-->
Member

samdark commented Mar 28, 2014

OK so you assume each dependency will be rendered in HTML in its own separate conditional comment like the following?

<link rel="stylesheet" href="css/grid.css">
<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/grid-ie.css">
<!--<![endif]-->
<!--[if eq IE 9]><!-->
    <link rel="stylesheet" href="css/grid-ie8.css">
<!--<![endif]-->
<!--[if lt IE 8]>
    <link rel="stylesheet" href="css/all-ie.css">
<!--<![endif]-->
@exromany

This comment has been minimized.

Show comment
Hide comment
@exromany

exromany Mar 28, 2014

yep, i think so

yep, i think so

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

OK, the only question left is compression and combining assets. How to handle dependencies in this case?

i.e. assets with different conditions could not be combined + order matters.

Member

samdark commented Mar 28, 2014

OK, the only question left is compression and combining assets. How to handle dependencies in this case?

i.e. assets with different conditions could not be combined + order matters.

@qiangxue

This comment has been minimized.

Show comment
Hide comment
@qiangxue

qiangxue Mar 28, 2014

Member

I don't think we should support it.

Such code are best directly written in the main layout file rather than being registered through asset bundles.

Member

qiangxue commented Mar 28, 2014

I don't think we should support it.

Such code are best directly written in the main layout file rather than being registered through asset bundles.

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Mar 28, 2014

Member

Probably but the issue pops up fairly often and the only obstacle currently is combining assets.

Member

samdark commented Mar 28, 2014

Probably but the issue pops up fairly often and the only obstacle currently is combining assets.

@qiangxue

This comment has been minimized.

Show comment
Hide comment
@qiangxue

qiangxue Mar 28, 2014

Member

I don't like introducing a new syntax that is designed to support a feature which is being deprecated.

If this is really of such a great importance and the alternative solution I described is absolutely unacceptable, we should introduce special options in AssetBundle::jsOptions rather than "contaminating" the format of AssetBundle::js. We may then enhance Html::jsFile() to render these special options as conditional comments. This means you should not mix different conditional comments in the same asset bundle, which prevents the asset combining issue.

Member

qiangxue commented Mar 28, 2014

I don't like introducing a new syntax that is designed to support a feature which is being deprecated.

If this is really of such a great importance and the alternative solution I described is absolutely unacceptable, we should introduce special options in AssetBundle::jsOptions rather than "contaminating" the format of AssetBundle::js. We may then enhance Html::jsFile() to render these special options as conditional comments. This means you should not mix different conditional comments in the same asset bundle, which prevents the asset combining issue.

@egorpromo

This comment has been minimized.

Show comment
Hide comment
@egorpromo

egorpromo Mar 29, 2014

Contributor

I don't like introducing a new syntax that is designed to support a feature which is being deprecated.

+1

Contributor

egorpromo commented Mar 29, 2014

I don't like introducing a new syntax that is designed to support a feature which is being deprecated.

+1

@qiangxue qiangxue added this to the 2.0 RC milestone Apr 16, 2014

@yiqing-95

This comment has been minimized.

Show comment
Hide comment
@yiqing-95

yiqing-95 Apr 26, 2014

if this issue have been settled ? i meet it today and want to know how you guys deal with it .

if this issue have been settled ? i meet it today and want to know how you guys deal with it .

@exromany

This comment has been minimized.

Show comment
Hide comment
@exromany

exromany Apr 26, 2014

In my project, I do this:

  1. extend yii\web\View::registerJsFile method to wrap script in conditional commnets
  2. in AssetBundle specify 'condition' jsOption

https://gist.github.com/exromany/11320865

In my project, I do this:

  1. extend yii\web\View::registerJsFile method to wrap script in conditional commnets
  2. in AssetBundle specify 'condition' jsOption

https://gist.github.com/exromany/11320865

@qiangxue qiangxue closed this in 4fcd500 Apr 27, 2014

@qiangxue

This comment has been minimized.

Show comment
Hide comment
@qiangxue

qiangxue Apr 27, 2014

Member

@exromany Thank you for your code. I have made some changes and fixed this issue.

Member

qiangxue commented Apr 27, 2014

@exromany Thank you for your code. I have made some changes and fixed this issue.

Alex-Code added a commit to Alex-Code/yii2 that referenced this issue Apr 28, 2014

Fixes #2906: Added support for using conditional comments for js and…
… css files registered through asset bundles and Html helper
@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 28, 2014

this code does not work:
public $js = [
'main.js',
'html5shiv.js' => 'lt IE 9',
'respond.js' => 'lt IE 9',
];

use this code produces an error - the argument can not be an array
public $js = [
'main.js',
'lt IE 9' => [
'html5shiv.js',
'respond.js',
],
]

this code does not work:
public $js = [
'main.js',
'html5shiv.js' => 'lt IE 9',
'respond.js' => 'lt IE 9',
];

use this code produces an error - the argument can not be an array
public $js = [
'main.js',
'lt IE 9' => [
'html5shiv.js',
'respond.js',
],
]

@samdark

This comment has been minimized.

Show comment
Hide comment
@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 28, 2014

Clearly, thanks!
Another question: how to specify different jquery version for different versions of browsers?

Clearly, thanks!
Another question: how to specify different jquery version for different versions of browsers?

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Oct 28, 2014

Member

You should use separate asset bundles for these.

Member

samdark commented Oct 28, 2014

You should use separate asset bundles for these.

@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 29, 2014

Could you give an example?

Could you give an example?

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Oct 29, 2014

Member
  1. Create IE6JqueryAsset with corresponding conditional comments.
  2. Create IE7JqueryAsset with corresponding conditional comments.
  3. Via config modify original JqueryAsset. Include dependencies on IE6JqueryAsset and IE7JqueryAsset.
Member

samdark commented Oct 29, 2014

  1. Create IE6JqueryAsset with corresponding conditional comments.
  2. Create IE7JqueryAsset with corresponding conditional comments.
  3. Via config modify original JqueryAsset. Include dependencies on IE6JqueryAsset and IE7JqueryAsset.
@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 30, 2014

As in the third paragraph to indicate the condition does ie8 or another?

As in the third paragraph to indicate the condition does ie8 or another?

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Oct 30, 2014

Member

No. Conditions are set per bundle i.e. in 1 and 2. In 3 you only specifying these as dependencies.

Member

samdark commented Oct 30, 2014

No. Conditions are set per bundle i.e. in 1 and 2. In 3 you only specifying these as dependencies.

@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 30, 2014

How to register in IEJqueryAsset conditional comment?

How to register in IEJqueryAsset conditional comment?

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Oct 30, 2014

Member
namespace common\components;
use Yii;

class IEJqueryAsset extends yii\web\AssetBundle
{
    public $ sourcePath = null;
    public $ js = [
        '//code.jquery.com/jquery-1.11.0.min.js',
    ];
    public $jsOptions = ['condition' => 'lte IE9'];  // <-------- this!
}
Member

samdark commented Oct 30, 2014

namespace common\components;
use Yii;

class IEJqueryAsset extends yii\web\AssetBundle
{
    public $ sourcePath = null;
    public $ js = [
        '//code.jquery.com/jquery-1.11.0.min.js',
    ];
    public $jsOptions = ['condition' => 'lte IE9'];  // <-------- this!
}
@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 30, 2014


'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' =>  [
            'depends' => [
                'common\components\IE_lt_9_JqueryAsset',
            ]
        ],
    ],
],

namespace common\components;
use Yii;
class IE_lt_9_JqueryAsset extends yii\web\AssetBundle
{
    public $ sourcePath = null;
    public $ js = [
        '//code.jquery.com/jquery-1.11.0.min.js',
    ];
    public $cssOptions = ['condition' => 'lt IE 9'];
}

Firefox source code:

........................
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/assets/19b4aafe/jquery.js"></script>
.........................


'assetManager' => [
    'bundles' => [
        'yii\web\JqueryAsset' =>  [
            'depends' => [
                'common\components\IE_lt_9_JqueryAsset',
            ]
        ],
    ],
],

namespace common\components;
use Yii;
class IE_lt_9_JqueryAsset extends yii\web\AssetBundle
{
    public $ sourcePath = null;
    public $ js = [
        '//code.jquery.com/jquery-1.11.0.min.js',
    ];
    public $cssOptions = ['condition' => 'lt IE 9'];
}

Firefox source code:

........................
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/assets/19b4aafe/jquery.js"></script>
.........................

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Oct 30, 2014

Member

jsOptions, not cssOptions ;)

Member

samdark commented Oct 30, 2014

jsOptions, not cssOptions ;)

@LordKino

This comment has been minimized.

Show comment
Hide comment
@LordKino

LordKino Oct 30, 2014

Did not find this option in the documentation, thank you!

Did not find this option in the documentation, thank you!

@samdark

This comment has been minimized.

Show comment
Hide comment

@samdark samdark referenced this issue in samdark/yii2-cookbook Oct 30, 2014

Open

Adding multiple versions of jQuery for IEs #24

@sushil8901

This comment has been minimized.

Show comment
Hide comment
@sushil8901

sushil8901 Jan 5, 2016

This option is not working for me. When I open my page in IE8 still jquery 2.1 is loading and not jquery 1.11

my code:

'yii\web\JqueryAsset' => [
     'depends' => [
         'app\assets\IE8Assets',
    ]
],

IE8Assets.php:

class IE8Assets extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css=[
            'css/ie8.css'
    ];
    public $cssOptions = ['condition' => 'lte IE9'];
    public $js =[
            'js/jquery-1.11.3.min.js',
            'js/jquery-migrate-1.2.1.min.js',
    ]; 
    public $jsOptions = ['condition' => 'lte IE9'];
}

This option is not working for me. When I open my page in IE8 still jquery 2.1 is loading and not jquery 1.11

my code:

'yii\web\JqueryAsset' => [
     'depends' => [
         'app\assets\IE8Assets',
    ]
],

IE8Assets.php:

class IE8Assets extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css=[
            'css/ie8.css'
    ];
    public $cssOptions = ['condition' => 'lte IE9'];
    public $js =[
            'js/jquery-1.11.3.min.js',
            'js/jquery-migrate-1.2.1.min.js',
    ]; 
    public $jsOptions = ['condition' => 'lte IE9'];
}
@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Jan 5, 2016

Member

Have you added another conditional comment for non-IE assets?

Member

samdark commented Jan 5, 2016

Have you added another conditional comment for non-IE assets?

@sushil8901

This comment has been minimized.

Show comment
Hide comment
@sushil8901

sushil8901 Jan 5, 2016

Nope I dont know how to do that.

Nope I dont know how to do that.

@samdark

This comment has been minimized.

Show comment
Hide comment
@samdark

samdark Jan 5, 2016

Member

Same way but specifying !IE as condition. Note that since IE 10 conditional comments aren't supported.

Member

samdark commented Jan 5, 2016

Same way but specifying !IE as condition. Note that since IE 10 conditional comments aren't supported.

@sushil8901

This comment has been minimized.

Show comment
Hide comment
@sushil8901

sushil8901 Jan 6, 2016

Thanks @samdark for the help.

Thanks @samdark for the help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment