It's a great way to make conditional styles without having to use JavaScript; however, having used JS for years to make theme color and icon sets that rely on CSS properties, I'm not sure I particularly like this method. I feel like you have to smear a lot of logic across your CSS whereas with JS you can reduce your theme to a data structure and just have a simple function to setup all the CSS variables based on that.
Javascript always suffer from FOUC problem though (Unless it's server side). Although the if() css function seems to just be syntax suger of standard @media query. So it doesn't really add anything to solve existing problems.
Edited: It seems it can also be toggled from css variable? So it might actually fix some existing problems.
I'm not sure turning CSS into a full blown language is a good idea. With all the cascading in place, it is already a bit hard to determine why certain styles are applied. Now with this, we will be spending more brain cells debugging CSS issues.
On the contrary, a lot of the reason CSS is confusing is because it's full of insane hacks people have to do to get the behaviour they want. A straight-up if statement is much simpler than many of the horrors I've seen.
Yeesh.. I've definitely tried using break-after and being disappointed it didn't work properly. The amount of hoops I had to jump through to get things to print properly on paper...
With the inclusion of branches, is it possible to say that CSS is now even more Turing-Complete? Now we just need to find ways to do recursion/targeted jumps so that it is finally recursive-enumerable
I would say no. I think CSS is a good language and made good choices.
And honestly we already essentially have this with CSS related apis in js. The examples in that article are basically identical to how you set css in js on modern web browsers with slightly different naming conventions.
Probably not. There is a lot of optimizations browsers do to make the stylesheets super fast[1], and I think quite a few of those rely on CSS not being Turing complete.
I'm not really sure I understand this. How is the new if() conditional function different from using @media (width ...) when adapting layouts to browser width?
Its basically the same, just more convinent syntax.
I think if can also do string equality on variable values, which is a bit new but also niche. The main point is just to do @media but inside a property decleration.
Not supported in Firefox and Safari. Also it seems most people forget that the more bloated the web platform is, the more resources are needed to develop and maintain a web browser engine.. Chromium is open-source, but it's already expensive to maintain a fork or even rebuild it..
It's a great way to make conditional styles without having to use JavaScript; however, having used JS for years to make theme color and icon sets that rely on CSS properties, I'm not sure I particularly like this method. I feel like you have to smear a lot of logic across your CSS whereas with JS you can reduce your theme to a data structure and just have a simple function to setup all the CSS variables based on that.
Am I just an old man?
The primary goal is to just have a more concise way to do @media queries. Its not intended as a replacement for most uses of JS
Javascript always suffer from FOUC problem though (Unless it's server side). Although the if() css function seems to just be syntax suger of standard @media query. So it doesn't really add anything to solve existing problems.
Edited: It seems it can also be toggled from css variable? So it might actually fix some existing problems.
I like making static informational pages and don't know the first thing about JavaScript, so this could be handy for me.
Just use SCSS to smear the logic across CSS automatically.
I'm not sure turning CSS into a full blown language is a good idea. With all the cascading in place, it is already a bit hard to determine why certain styles are applied. Now with this, we will be spending more brain cells debugging CSS issues.
On the contrary, a lot of the reason CSS is confusing is because it's full of insane hacks people have to do to get the behaviour they want. A straight-up if statement is much simpler than many of the horrors I've seen.
Far from being ready when only one major browser supports it. If you want this, you should vote for it to be focused on for interop-2026
https://github.com/web-platform-tests/interop/issues
Right now, the leading CSS proposals are `@container style()`, `corner-shape` and `break-after`
https://foolip.github.io/interop-reactions/
The People have spoken, and they want squircles.
Yeesh.. I've definitely tried using break-after and being disappointed it didn't work properly. The amount of hoops I had to jump through to get things to print properly on paper...
With the inclusion of branches, is it possible to say that CSS is now even more Turing-Complete? Now we just need to find ways to do recursion/targeted jumps so that it is finally recursive-enumerable
If we could do it over, knowing that we'd eventually get to this point, would https://en.wikipedia.org/wiki/JavaScript_Style_Sheets have been the better path?
I would say no. I think CSS is a good language and made good choices.
And honestly we already essentially have this with CSS related apis in js. The examples in that article are basically identical to how you set css in js on modern web browsers with slightly different naming conventions.
If I had a time machine I would go back and ensure that DSSSL (https://en.wikipedia.org/wiki/Document_Style_Semantics_and_S...) was the standard that got up.
All hail the embedded Scheme interpreter to apply Style transformations!
Although I feel like we've already explored this with XSL. The XML syntax was perhaps too much to swallow.
You write your markup in an xml syntax, your scripts in a C syntax, and your styles in a lisp syntax... a perfect trio.
Probably not. There is a lot of optimizations browsers do to make the stylesheets super fast[1], and I think quite a few of those rely on CSS not being Turing complete.
1: https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en...
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...
I'm not really sure I understand this. How is the new if() conditional function different from using @media (width ...) when adapting layouts to browser width?
Its basically the same, just more convinent syntax.
I think if can also do string equality on variable values, which is a bit new but also niche. The main point is just to do @media but inside a property decleration.
Not supported in Firefox and Safari. Also it seems most people forget that the more bloated the web platform is, the more resources are needed to develop and maintain a web browser engine.. Chromium is open-source, but it's already expensive to maintain a fork or even rebuild it..
This support has appeared in the new W3C specification.