How can you conditionally load resources using the media attribute in the <link> element?

The media attribute allows resources to be loaded based on specific media conditions.

The media attribute in the <link> element specifies the media type or query that must be true for the resource to be loaded. This is particularly useful for stylesheets, enabling different styles to be applied based on the device's characteristics, such as screen size or resolution. By using media queries, developers can ensure that only the necessary resources are loaded, optimizing performance.

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