Recently I read about
media attribute for
<link> tag. Immediately I thought it would be a great idea to separate all the media queries into separate files and link them only when the website is opened on mobile device not to block the dom render on desktop etc. Something like this:
<link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width:768px)">
However I don't really see anyone using this attribute, is there any reason behind that, is it still faster to just load one bigger file?