Ability to specify link media attribute

Describe the problem

For accessibility and performance it would be good to have a way to specify the media attribute for the generated CSS. I mean that all the

<link rel="stylesheet" href="_app/index.012930190.css">

could be actually something like

<link rel="stylesheet" href="_app/index.012930190.css" media="screen">

thus many screen or braille readers, etc., could avoid downloading the stylesheets.

Describe the proposed solution

I’m not sure what a good a good solution would be but I guess I would prefer having a default media=“screen” if nothing specified and maybe the ability in sfc files to do something like:

<style media="screen"> <!-- or print etc. -->
</style>

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

[Rich-Harris]

Screen readers rely on the browser’s accessibility tree, which takes things like display: none and pseudo elements into account. My understanding is that media="screen" stylesheets are still generally used (they are screen readers, after all), so this would have no effect; if stylesheets were excluded then the accessibility tree would likely be incorrect.

In short, the media attribute should only be used if it was specified by the CSS author. What would be cool is if stylesheets were split up based on media query, i.e. this…

.foo { color: red; }

@media (screen) {
  .bar { color: green; }
}

@media (print) {
  .baz { color: blue; }
}

…resulted in this…

<link rel="stylesheet" href="/_app/assets/abc123.css">
<link rel="stylesheet" href="/_app/assets/def456.css" media="screen">
<link rel="stylesheet" href="/_app/assets/ghi789.css" media="print">

…but I expect that would require cooperation from Vite.

[espositofulvio]

I can see your idea of splitting based on the media query is actually better, surely I second that!