EN
Forum

Methodology

Toolbox

Platform

Building a separate bundle for IE

If your project has styles that only apply to IE, place them in a separate file with the special extension .ie*.css:

To build a separate bundle for IE, you need to:

blocks/
└── block/
    ├── block.css
    ├── block.ie.css
    └── block.ie6.css
node.addTechs([
   [CSSTech], // for the main CSS
   [CSSTech]  // for IE
]);
node.addTechs([
    [CSSTech],
    [CSSTech, { target: '?.ie6.css' }]  // IE 6
]);
node.addTargets(['?.css', '?.ie6.css']);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <!--[if gt IE 9]><!-->            <link rel="stylesheet" href="index.css"/>        <!--<![endif]-->
        <!--[if lte IE 9]>
            <link rel="stylesheet" href="index.ie.css"/>
        <![endif]-->
    </head>
    <body>

Note. In BEM projects, styles are usually connected using conditional comments.

It is important that the file for IE includes all the styles for the entire page, in addition to the styles specific to IE.

To get a file like this, use the sourceSuffixed option to expand the list of suffixes.

node.addTechs([
    [stylusTech],
    [stylusTech, {
        target: '?.ie6.css',
        sourceSuffixes: [
            'css',     // General styles
            'ie.css',  // Styles for IE < 9
            'ie6.css'  // Styles for IE 6
        ]
    }]
]);
node.addTargets(['?.css', '?.ie6.css']);

The result is the .enb/make.js configuration file:

var CSSTech = require('enb-css/techs/css'),
    FileProvideTech = require('enb/techs/file-provider'),
    bemTechs = require('enb-bem-techs');

module.exports = function(config) {
    config.node('bundle', function(node) {
        // getting the list of files (FileList)
        node.addTechs([
            [FileProvideTech, { target: '?.bemdecl.js' }],
            [bemTechs.levels, { levels: ['blocks'] }],
            [bemTechs.deps],
            [bemTechs.files]
        ]);

        // Building CSS files
        node.addTechs([
            [CSSTech],
            [CSSTech, {
                target: '?.ie6.css',
                sourceSuffixes: [
                    'styl', 'css',          // General styles
                    'ie.styl', 'ie.css',    // Styles for IE < 9
                    'ie6.styl', 'ie6.css'   // Styles for IE 6
                ]
            }]
        ]);
        node.addTargets(['?.css', '?.ie6.css']);
    });
};
Rate the article
Report an error on GitHub or correct using prose.io.