Using the Link Tag to Update the Page

I am working on a problem related to site development at work, specifically in regards to displaying different versions of the same page. The process I want to use involves the <link> tag with its rel attribute set to “alternate” with the media attribute also present, but I cannot seem to make it work with my test code.

HTML code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="alternate stylesheet" media="only screen and (min-width: 600 px)" href="stylesheet.css">
    <p>If you can read this the site is displaying correctly.</p>
    <div id="test"></div>

CSS Code:

#test {
    width: 200px;
    height: 200px;
    border: 5px solid black;

This is very simplistic code, but I would like to confirm that I have written everything correctly, and that <link> can do what I am asking it.

I have confirmed that the CSS works when the <link> tag’s rel attribute is set to “stylesheet.”

Thank you very much for your time!

Hey Andrew,

I think alternate isn’t doing what you expect it to do:

Provides a link to an alternate version of the document (i.e. print page, translated or mirror).

I created a small example:

Seems to work when you resize the window, changing from red to blue and vice-versa.

1 Like

Thank you very much, based on your code I assume forgoing “alternate” altogether is the best way to handle this.

Yes, I also think there are not that many uses cases where you actually need to separate multiple stylesheets.

Having a look at the dev tools network tab, it seems both CSS files get loaded anyway. For small apps this approach maybe works, but when you start with some frontend library work like React or Vue, it will become a hassle to have multiple CSS files for multiple components and just increase complexity.

To be fair this is actually for separating mobile and desktop versions, but I’ll look into a different way of handing the distinction.
Thank you very much!