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" />
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

  • 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 '18 at 11:26
  • the order attribute is available in v 2.0 – PЯINCƏ Mar 13 '18 at 11:31
  • @Prince Can you please share some document for "order" attributre ? – Dhaval Solanki Mar 13 '18 at 12:09
  • I saw it a long time ago on github – PЯINCƏ Mar 13 '18 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. – Rajeev K Tomy Mar 14 '18 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, privacy policy and cookie policy

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