Website logo

HTML Link media attribute

Author's avatar
José Miguel Álvarez VañóNovember 28, 2022

I have recently learned that HTML Link tags accept a media attribute to conditionally load resources. This can be used to, for example, load a different stylesheet for a print media or for a specific screen size.

HTML Link media attribute example

I have created a page where I'm loading a different stylesheet depending on the width of the viewport. In the example I have a stylesheet for the base styles, which are always loaded. I have another stylesheet which is only loaded on mobile screen sizes, another one for tablet and, finally, one for desktop.

You can see it in action here.

Check the <link> tags of the page and see how the stylesheets are loaded depending on the viewport width.


GitHub profileTwitter profileLinkedIn profile
José Miguel Álvarez Vañó
© 2023