Media in link style

this is a short story about a little trick that can help us to separate constraints, optimize performance and have a cool way to insert styles to our pages.

Anyone who made a website knows that there are many ways of include CSS lets talk about the main ones

Inline-style

This kind of insertions of CSS is very popular because of the new trends of js frameworks that use “CSS in js” this can be archived inside of the style attribute, this is great if you have preprocessors to optimize the CSS used or something that can help us to reduce the big content of the main file because the request made through the server will be bigger and bigger and must be downloaded in one file making a huge bad impact in the LCP (Largest content Paint) but also a good impact in CLS( Cumulative Layout Shift) because the render will show the things as they will, based on CSS cascade system.

With vanilla CSS it's impossible to apply media queries inline.

Internal Styles

The other way of include CSS inside the same HTML is with a <style> tag to stylize the web this allows us to organize better the style inside a specific tag and let us use the cascade system to implement the required style and have the same benefits and disadvantages than the use of inline-style with one improvement that is allowing us to use @media queries.

External Styles

Now let's talk about what brought us here the external styles, this normally is made by extracting all CSS in an external .css file that can be linked to the HTML with the link tag but there is a hidden feature here that no everybody knows is separate this files by media query

<link rel="stylesheet" media="screen and (max-width: 767px)" href="css/mobile.css" />

The benefits of these implementations are that if the web is served via a protocol ≥ http2 we can handle the download of those resources in parallel with the HTML and have the performance improved, and allow the browser the capacity to choose which CSS download based on its size or way of showing the content because this media attribute can be set as any of the normal media queries.

That's all for now please let me know if you have any post proposals for the next one.