Luckily, CSS Modules are starting to land in multiple browsers. Firefox added support behind a flag, and it might ship in 145.
So you'll be able to import the CSS from your JS modules, and apply it to the document:
import extras from 'css-extras' with {type: 'css'};
if (!document.adoptedStyleSheets.includes(extras)) {
document.adoptedStyleSheets.push(extras);
}
this.shadowRoot.adoptedStyleSheets.push(extras);Is preprocessed CSS faster? Yes. Is it meaningfully faster? Probably not.
In the context of animations, I'd intuit the latter but would be open to hearing why.
(I work with CSS browser performance, although animations is not my primary field)
Kinda clever, actually.
CSS in general is Turing complete if you allow running multiple frames, although it requires ugly hacks. See e.g. https://codepen.io/propjockey/pen/dywNyBQ, which is quite insane IMO.
This project is based on just one new proposed rule which won't be available in all mainstream browsers until 2027-28, and won't be safe for production use until close to the end of the decade.
Of note from 2023: subgrids, :has, container queries, nesting... And in 2022, cascade layers (plus <style scoped>, I mean @scope, I mean :scope).
And maybe there are some really compelling ones... I think the only really useful one I see here is `--abs`, which really should just be built-in.
https://developer.mozilla.org/en-US/docs/Web/CSS/abs
There are also other non-custom math functions like round() which can be very useful.
(I'm not weighing in on the validity of this position, just reporting what I perceive the position itself to be.)
On the contrary. CSS functions and mixins may make a lot of current cruft unnecessary.
Is anything really necessary? Not snark: almost nothing is necessary in life but many things are convenient.
They also happen to be a great attack vector! You and your users are much better off not using them for anything but toys.
Your particular circumstances might not require it (maybe you're just temporarily camping or you only store non-perishable food) but that doesn't mean that fridges, in general, are unnecessary or less convenient than just storing food in a cupboard. Even if you only eat in restaurants and you don't need a fridge, the restaurant does.
This being packaged won't prevent it from being delivered from a CDN. It will actually make it easier to automatically deploy all versions to CDNs as they are published, like in https://www.jsdelivr.com/, while being CDN-only is less convenient when you actually need the many affordances that a package manager provides.
If I already have a package manager and do:
yarn add css-extras
import 'css-extras';
I’m glad I don’t work on browser engines for a living. CSS is getting more complex and spaghetti-capable by the day.
> Currently only supported in Chrome 141+. The @function rule is going through the W3C standardization process and will be available in other browsers soon.
Also, pretty tired of Chrome effectively front-running standards as a not-so-subtle means of cramming them through.
Every feature sounds great in isolation, but in aggregate they become a moloch.
Then people say “modern CSS is great, you just have to pick the ‘good subset’.”, but then nobody can agree what that subset should be, and everybody else uses a different subset.
LLMs also contribute to this, as 90% of what’s available on the web is considered outdated now, but that is the majority of training data.
Although, yes, CSS is getting more complex because everything on the web is. What's the last standard feature to really be taken away after actually existing in the wild for a while? XHTML and Flash (effectively a standard if not in reality)?
Is there still a real-world use case for XHTML/"XML syntax for HTML", or is this just exhibit A that no standard can actually be removed from browsers?
Re: XSLT, back in the everything-is-XML days I desperately wanted to like XSLT, it seemed so useful (I was that annoying co-worker telling everyone it's supposed to be pronounced "exalt"). But it was such a disaster to actually write or read and no real debugging was possible, I had to use a LOT of conditional bgcolor=red to figure anything out. It didn't take very long to come to the conclusion that XPath was the only useful part.
XSLT is a W3C standard:
If I need the markup of a page to not contain any structural errors, I often use XHTML for testing at least because, though it's a little more verbose, if there's a nesting error, for example, the browser will flat out refuse to render it and show some sort of stacktrace error page instead. So it's quite a good built-in "tool" for checking that your markup is clean.
With HTML, everything goes and the browser will happily render broken markup, which is probably the correct default for the web as a whole. After all, you surely don't want a page like Wikipedia to show an error message to its users because a developer forgot to close a tag somewhere.