Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS now has an if() conditional function

caniuse.com

Post reply on HN
Print view View original

61–70 of 245 posts

Re: CSS now has an if() conditional function

#61

Post by Galanwe »

zkmon wrote: post #42

Give it enough time, every declarative language becomes a programming language. This is happening with all config files, markup languages, data formats. The distinction between code, config and data is being erased. Everything is a soup now. Data is application, configuration is code. Code is an intermediate, volatile thing that is generated on the fly and executed in the temporary lambda containers.

This is so true, I have seen it happen with so many projects. It always starts with a cute declarative DSL, and inevitably imperative / flow control structures emerge, at which point you wonder why they didn't use a real programming language in the first place and save you the hassle or learning a half baked imperative DSL.

- Puppet

- CMake

- Terraform

- ...

All these started with pure declarative DSL then incrementally created a nightmarish imperative monstrosity.

Re: CSS now has an if() conditional function

#62

Post by account42 »

mikestorrent wrote: post #36
mmis1000 wrote: post #23

Earlier quoted context omitted.

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...

How hard would it be to use JS for progressive enhancement instead making your website depend on it to display simple text and images.

Re: CSS now has an if() conditional function

#63

Post by Derbasti »

Galanwe wrote: post #61
zkmon wrote: post #42

Give it enough time, every declarative language becomes a programming language. This is happening with all config files, markup languages, data formats. The distinction between code, config and data is being erased. Everything is a soup now. Data is application, configuration is code. Code is an intermediate, volatile thing that is generated on the fly and executed in the temporary lambda containers.

This is so true, I have seen it happen with so many projects. It always starts with a cute declarative DSL, and inevitably imperative / flow control structures emerge, at which point you wonder why they didn't use a real programming language in the first place and save you the hassle or learning a half baked imperative DSL. - Puppet - CMake - Terraform - ... All these started with pure declarative DSL then incrementa…

- Visual Studio project files are XML files that are interpreted line by line, and can contain variables, branches, and loops. Hell on earth.

Re: CSS now has an if() conditional function

#64

Post by tovej »

thwarted wrote: post #44
zkmon wrote: post #42

Give it enough time, every declarative language becomes a programming language. This is happening with all config files, markup languages, data formats. The distinction between code, config and data is being erased. Everything is a soup now. Data is application, configuration is code. Code is an intermediate, volatile thing that is generated on the fly and executed in the temporary lambda containers.

We can blame von Neumann (et al) and his infernal architecture, where memory stores both instructions and data.

von Neumann did not invent the von Neumann architecture. Not even a little bit.

If you want to reason that the hardware is at fault, you should be blaming the Eckert-Mauchley architecture.

Re: CSS now has an if() conditional function

#65

Post by tanin »

Nice. I've built desktop apps in a few other frameworks e.g. Java Swing, JavaFX, JetBrains Compose, SwiftUI, QT. Nothing is as easy as JS/HTML/CSS. I've realized that the main reason is its robust capabilities e.g rich auto-layouting/positioning capabilities.

Meanwhile in other UI frameworks, you either don't do it or you draw the damn things yourself lol. So, most of the times I'd just not do it.

Adding if is great. It would reduce the need for JS a bit more, which would make the code more maintainable.

Re: CSS now has an if() conditional function

#66

Post by mseepgood »

zkmon wrote: post #42

Give it enough time, every declarative language becomes a programming language. This is happening with all config files, markup languages, data formats. The distinction between code, config and data is being erased. Everything is a soup now. Data is application, configuration is code. Code is an intermediate, volatile thing that is generated on the fly and executed in the temporary lambda containers.

So why do people still design declarative languages?

Re: CSS now has an if() conditional function

#67

Post by lionkor »

mseepgood wrote: post #66
zkmon wrote: post #42

Give it enough time, every declarative language becomes a programming language. This is happening with all config files, markup languages, data formats. The distinction between code, config and data is being erased. Everything is a soup now. Data is application, configuration is code. Code is an intermediate, volatile thing that is generated on the fly and executed in the temporary lambda containers.

So why do people still design declarative languages?

Wishful thinking? Maybe they are tired of all this and want to make something good again, and so the cycle continues.

Re: CSS now has an if() conditional function

#69

Post by chipx86 »

I'm pretty happy to see this, as conditionals can really help keep code manageable when trying to define CSS variables or other properties based on combinations of light mode, dark mode, high-contrast, contextual state in a document or component, etc.

if() isn't the only way to do this, though. We've been using a technique in Review Board that's roughly equivalent to if(), but compatible with any browser supporting CSS variables. It involves:

1. Defining your conditions based on selectors/media queries (say, a dark mode media selector, light mode, some data attribute on a component, etc.).

2. Defining a set of related CSS variables within those to mark which are TRUE (using an empty value) and which are FALSE (`initial`).

3. Using those CSS variables with fallback syntax to choose a value based on which is TRUE (using `var(--my-state, fallback)` syntax).

I wrote about it all here, with a handful of working examples: https://chipx86.blog/2025/08/08/what-if-using-conditional-cs...

Also includes a comparison between if() and this approach, so you can more easily get a sense of how they both work.

Re: CSS now has an if() conditional function

#70

Post by 6031769 »

bawolff wrote: post #29
themafia wrote: post #4

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…

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

If we've learned anything from the history of CSS, JS and the semantic web it is that 99% of the time a feature will be used in ways that were not intended. There is no reason to suppose that this will be any different.
Post reply on HN