Ability to specify link media attribute

[espositofulvio]

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

[alecandido]

I guess in your Describe the problem you had some tags that have been compiled...

Try to use backticks to mark them as code: <style></style> (generated from `<style></style>`).

[alecandido]

However, the <style></style> tags inside a page component (a .svelte file inside src/routes, by default) it's already compiled to something like:

<link rel="stylesheet" href="/_app/assets/pages/<path/to/your/page>.svelte-<hash>.css">

and the corresponding stylesheet (I obtained it using adapter-static, but I guess you'd obtain the same just setting prerendering).

So, I guess, your proposal boils down to just preserve the media attribute, moving that from the compiled <style></style> to the generated <link>.

[espositofulvio]

Yes you've got the point but mine is just a suggestion because I just have a vague idea of how css is generated and I'm not sure if that's really feasible. Maybe that css can be merged in a single file with other styles and conflicting media attributes. I don't know, but I guess it would be something in the direction of accessibility anyway.

…

On Fri, 24 Dec 2021, 10:05 Alessandro Candido, ***@***.***> wrote: However, the <style></style> tags inside a page component (a .svelte file inside src/routes, by default) it's already compiled to something like: <link rel="stylesheet" href="/_app/assets/pages/<path/to/your/page>.svelte-<hash>.css"> and the corresponding stylesheet. So, I guess, your proposal boils down to just preserve the media attribute, moving that from the compiled <style></style> to the generated <link>. — Reply to this email directly, view it on GitHub <#3097 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACYNBMOGOGT3ME7OVZNPKEDUSQZVRANCNFSM5KU44W5Q> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alecandido]

I'm not expert myself, but I just had a look to the compile assets in my kit app, and actually the scheme is the following: any page component <style/> content is transformed into a .css file on its own, with path _app/assets/pages/<path/to/your/page>.svelte-<hash>.css, and linked into the corresponding .html file.

Since to any <style/> there is a corresponding <link/>, than I guess it's doable. It's just a matter of will, maybe people prefer to keep <style/> attributes to those from the HTML specs, in which you can propose another syntax to achieve the same (even though personally I would prefer to be a tag attribute, and so your suggestion is the most sensible one).

[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!