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.
How hard would it be to have a response header that tells the browser "don't display anything at all until we ask you to from JS when we're ready"?
Considering the kinds of crap that have been done with headers...
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.
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
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...
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.
css definitely shouldn't have backwards branches (loops/recursive functions), but adding a little more power can clean up expression a ton and make reading/applying that much faster
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.
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.
This is missing a "if variable equals" imho. Right now it seems like pure syntactic sugar for a media query.
>This is missing a "if variable equals" imho.
This is exactly what it does not need. SASS style conditional CSS is a complete nightmare to maintain. The declarative nature is one of its greatest strengths.
Did you guys read the docs? It literally does have this albeit the syntax is a bit odd:
if(style(--foo: bar): baz)
Is how you test if variable --foo is equal to "bar"
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..
[flagged]
> How did this happen?
That's pretty simple - Google has poured tons of money into Chrome and Mozilla. Google is not a charity so this was a strategic investment.
> You should go over to the CSS working group and let them know
That wouldn't work, money is what ultimately matters there.
[flagged]
lol. What other browser vendors? Whatwg is just google is a trench coat. Edge is chrome. Firefox is funded by Google. So I guess apple who's main contribution is being years behind and having half their stuff be broken
If Google controls everything, why is if() only supported on 59% traffic? Do you think any serious company will let their site break on 40% of clients? Do you think Apple's opinion is unimportant?
> And the other browser vendors with conflicitng interests just go along with it?
When there's a conflict of interest they don't (Apple refuses to implement some APIs that would help making their walled garden app store more obsolete). But just maintaining a duopoly (Mozilla is funded by Google) is not a conflicting interest itself.
> Did you come to that opinion after engaging in the discussions with them?
With employees? There's no point. If you have a well paid job you will never accept the fact that what you're doing might not be so good after all..
> When there's a conflict of interest they don't (Apple refuses to implement some APIs that would help making their walled garden app store more obsolete). But just maintaining a duopoly (Mozilla is funded by Google) is not a conflicting interest itself.
What makes you think Apple wants to maintain any sort of duopoly? Do you think they're happy that Edge became a Chrome skin?
> With employees? There's no point. If you have a well paid job you will never accept the fact that what you're doing might not be so good after all..
Damn, so you haven't even tried discussing your issues with the people responsible? You seem to have a really strong opinion on something you haven't engaged with at all.
This support has appeared in the new W3C specification.
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.
How hard would it be to have a response header that tells the browser "don't display anything at all until we ask you to from JS when we're ready"?
Considering the kinds of crap that have been done with headers...
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.
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...
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.
css definitely shouldn't have backwards branches (loops/recursive functions), but adding a little more power can clean up expression a ton and make reading/applying that much faster
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...
This is missing a "if variable equals" imho. Right now it seems like pure syntactic sugar for a media query.
>This is missing a "if variable equals" imho.
This is exactly what it does not need. SASS style conditional CSS is a complete nightmare to maintain. The declarative nature is one of its greatest strengths.
Did you guys read the docs? It literally does have this albeit the syntax is a bit odd:
if(style(--foo: bar): baz)
Is how you test if variable --foo is equal to "bar"
See 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..
[flagged]
> How did this happen?
That's pretty simple - Google has poured tons of money into Chrome and Mozilla. Google is not a charity so this was a strategic investment.
> You should go over to the CSS working group and let them know
That wouldn't work, money is what ultimately matters there.
[flagged]
lol. What other browser vendors? Whatwg is just google is a trench coat. Edge is chrome. Firefox is funded by Google. So I guess apple who's main contribution is being years behind and having half their stuff be broken
There's this really cool site where you can see how well supported a feature is: https://caniuse.com/?search=if
If Google controls everything, why is if() only supported on 59% traffic? Do you think any serious company will let their site break on 40% of clients? Do you think Apple's opinion is unimportant?
> And the other browser vendors with conflicitng interests just go along with it?
When there's a conflict of interest they don't (Apple refuses to implement some APIs that would help making their walled garden app store more obsolete). But just maintaining a duopoly (Mozilla is funded by Google) is not a conflicting interest itself.
> Did you come to that opinion after engaging in the discussions with them?
With employees? There's no point. If you have a well paid job you will never accept the fact that what you're doing might not be so good after all..
> When there's a conflict of interest they don't (Apple refuses to implement some APIs that would help making their walled garden app store more obsolete). But just maintaining a duopoly (Mozilla is funded by Google) is not a conflicting interest itself.
What makes you think Apple wants to maintain any sort of duopoly? Do you think they're happy that Edge became a Chrome skin?
> With employees? There's no point. If you have a well paid job you will never accept the fact that what you're doing might not be so good after all..
Damn, so you haven't even tried discussing your issues with the people responsible? You seem to have a really strong opinion on something you haven't engaged with at all.
This support has appeared in the new W3C specification.
[dead]