How to add/remove browser specific JS and CSS in Magento2 using layout xml

Within your own default_head_blocks.xml file do the following:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="name.css"/>
    </head>
</page>

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove


You can add browser specific css like below:

<page>   
<head>
        <css src="css/ie-9.css" ie_condition="IE 9" />
    </head>
</page>

You can remove js and css like below:

    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
        <!-- Remove local resources -->
        <remove src="css/styles-m.css" />
        <remove src="my-js.js"/>
        <remove src="Magento_Catalog::js/compare.js" />

    <!-- Remove external resources -->
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"/>
        <remove src="http://fonts.googleapis.com/css?family=Montserrat" /> 
   </head>

Please, refer official document : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css


There is no way to do this in in layout.xml. Here is a list of layout instructions available in Magento 2

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-instructions.html

If browser compatibility is what you are aiming for, you should take advantage of the modrnizr.js library that comes included in core magento (lib/web/modernizr/modernizr.js)

Tags:

Magento2

Js Css

Recent Posts