You must have heard the phrase "CSS is a render-blocking resource" but there is more to the story if we have some CSS which is not of immediate use then we can make it a non-bocking resource using media attribute.

media attribute

media attribute is used to specify the condition(s) on which this stylesheet is applicable, its value could be media type or media query, there are various media types and endless media query combinations that can be created, you can refer to this article for more info.

If we have a stylesheet that is only applicable when printing then we can use media="print" to it which will ensure that during loading and parsing of that file, it will not block the rendering of the content.

Similarly, if we have a stylesheet that is only applicable when our device is in portrait mode then we can apply media="(orientation: portrait)" to it so if our device is in landscape mode then it will not block the rendering of the content.

you can read this article on FOUC to understand how stylesheets can affect the growth and conversion of a business.

Thanks for reading.