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" />
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
order attribute as every time I've checked that hasn't been a thing. Is it something new?
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.
You can find the detailed answer here.
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.
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:
css/styles-m.css
Magento_Theme::css/home/slider.css
css/styles-l.css
css/print.css
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:
css/styles-m.css
css/styles-l.css
css/print.css
Magento_Theme::css/home/slider.css
