Skip to content

Proposal: Shorthand syntax for external stylesheets (<style src="...">) #11240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
bburns opened this issue Apr 21, 2025 · 6 comments
Open

Proposal: Shorthand syntax for external stylesheets (<style src="...">) #11240

bburns opened this issue Apr 21, 2025 · 6 comments
Labels
addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest

Comments

@bburns
Copy link

bburns commented Apr 21, 2025 •
edited
Loading

What problem are you trying to solve?

It's difficult to go from inline stylesheets to external stylesheets - the syntax goes from this

<style>foo</style>

to this

<link rel="stylesheet" href="/styles.css" />

which is hard to remember.

It's also inconsistent with inline vs external <script> elements, where you go from this

<script type="module">foo</script>

to this

<script type="module" src="/main.js"></script>

which is unfortunately not self-closing.

What solutions exist today?

None?

How would you solve it?

Add syntax to go from

<style>foo</style>

to

<style src="/styles.css" />

Anything else?

Even if it's not possible to do, I'm curious about why/why not, and wanted to add it to this repo for reference. Maybe there are discussions on old mailing lists?
@bburns bburns added addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest labels Apr 21, 2025
@nektro
Copy link
Member

nektro commented Apr 21, 2025

While this would be nice if this form was being designed from scratch, it's unlikely to be viable due to the Web's backwards compatibility commitment. That is to say, removing <link rel="stylesheet" is off the table and given that fact, adding <style src="" to do semantically the exact same thing doesn't have as strong of an argument imo.

additionally, if it made it in it would have to be <style src="/styles.css"></style> since whether or not <style> is a void tag can't change based on context.

@bburns
Copy link
Author

bburns commented Apr 22, 2025 •
edited
Loading

Not proposing to remove the <link> syntax, just to add more consistent and memorable syntax.

I've been making websites on and off for 30 years and still have to search how to import a stylesheet...🤦‍♂️

@trusktr
Copy link

trusktr commented May 1, 2025

I like the idea of DX improvements.

This seems like it would be benign right? Or are there a bunch of userland libs that are handle <style src... which this would break?

@tabatkins
Copy link
Contributor

It's unlikely to be problematic from a back-compat perspective, it's just of extremely minimal value. Arguably it's script that got this wrong; the fact that the text contents of a script aren't executed if it has a src attribute is a perennial source of confusion for new authors. It should have been <link rel=script href=...> originally, matching style/link.

@1jj
Copy link

1jj commented May 9, 2025 •
edited
Loading

It's difficult to go from inline stylesheets to external stylesheets - the syntax goes from this

<style>foo</style>

to this

<link rel="stylesheet" href="/styles.css" />

which is hard to remember.

... ...

What solutions exist today?

<style> @import "styles.css"; </style>

@bburns
Copy link
Author

bburns commented May 10, 2025

It's unlikely to be problematic from a back-compat perspective, it's just of extremely minimal value.

Arguably it's script that got this wrong; the fact that the text contents of a script aren't executed if it has a src attribute is a perennial source of confusion for new authors. It should have been <link rel=script href=...> originally, matching style/link.

It's the fact that it's a source of confusion for new authors (and those who have been doing this for 30 years!) that led me to suggest this.

It's more to have some consistency - ideally would have -

Element Inline External
html <html>foo</html> <html src="foo.html"></html>
style <style>foo</style> <style src="foo.css"></style>
script <script>foo</script> <script src="foo.js"></script>

as mentioned here - #2791 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest
Milestone
No milestone
Development

No branches or pull requests
5 participants
@trusktr @bburns @tabatkins @nektro @1jj