2

If we include CSS in layout XML as below, Magento includes it after style-l.css and style-m.css.

<css src="Magento_Theme::css/home/custom.css" media="all" />

But if we include CSS as below then Magento includes it before style-l.css and style-m.css. So what is the reason for the same ?

<css src="Magento_Theme::css/home/custom.css" />

2 Answers 2

1

it is important to know that :

style-m.css generates basic and mobile-specific styles,

style-l.css generates desktop-specific styles (for 768px width screen and higher)

This means, when you open a Magento in mobile device, Magento load only styles compiled from the styles-m.less file, the Extra styles from the second file styles-l.less are compiling and loading only if the screen width is 768px or higher.

So when you add media="all" you target all devices and your file will be loaded in all devices, this why Magento place it after style-l.css, style-m.css

8
  • 1
    Do you have any info about the order attribute as every time I've checked that hasn't been a thing. Is it something new?
    – Ben Crook
    Mar 13, 2018 at 11:26
  • the order attribute is available in v 2.0
    – PЯINCƎ
    Mar 13, 2018 at 11:31
  • @Prince Can you please share some document for "order" attributre ? Mar 13, 2018 at 12:09
  • I saw it a long time ago on github
    – PЯINCƎ
    Mar 13, 2018 at 12:15
  • 1
    @BenCrook for css, there is no order property allowed. if you use it, magento will show an exception since it violates schema definition. If you want to know further about this, please ask a new question, then I will happily provide a detailed answer. Mar 14, 2018 at 5:14
1

You can find the detailed answer here.

The short answer is:

Magento load all css assets into asset groups. Asset groups are created based on the css properties and which is what stands crucial for the rendering order of css assets.

An asset property is an an array of attribute values other than src attribute.

Example 1: Without media="all"

Suppose the css are configured in the below order in a layout configuration:

<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>

<css src="Magento_Theme::css/home/slider.css" />

Then the asset grouping will be like this:

1. Asset Group ([]) Holds:

css/styles-m.css

Magento_Theme::css/home/slider.css

2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:

css/styles-l.css

3. Asset Group (["media" => "print"]) Holds:

css/print.css

and hence the css rendering order will be:

  1. css/styles-m.css

  2. Magento_Theme::css/home/slider.css

  3. css/styles-l.css

  4. css/print.css


Example 2: With medial="all"

Now if our css are configured in the below order:

<css src="css/styles-m.css"/>

<css src="css/styles-l.css" media="screen and (min-width: 768px)"/>

<css src="css/print.css" media="print"/>

<css src="Magento_Theme::css/home/slider.css" media="all" />

Then the asset grouping will be like this:

1. Asset Group ([]) Holds:

css/styles-m.css

2. Asset Group (["media" => "screen and (min-width: 768px)"]) Holds:

css/styles-l.css

3. Asset Group (["media" => "print"]) Holds:

css/print.css

4. Asset Group (["media" => "all"]) Holds:

Magento_Theme::css/home/slider.css

and hence the css rendering order will be:

  1. css/styles-m.css

  2. css/styles-l.css

  3. css/print.css

  4. Magento_Theme::css/home/slider.css

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.