Should CSS be a constraint system instead?

The problem with a constraint system is that it would likely be even more subject to performance problems than the current setup.

IMO what CSS layout really needs is:

1. A "proportion of available space" unit. That is, something like the fr unit in CSS grid except applicable to the width/height properties so it can be used in all layout modes and without an implying content-based minimum size (like fr does).

2. A new "display: stack" (name provisional) layout mode that simply stacks boxes one after the other like "display: block" but that works in both axes, and doesn't have quirks of block layout (margin-collapsing, floats, inline-block splitting, etc).

When combining 1 and 2 you'd have a much more intutive layout system that would still give you most of the power of Flexbox and could be implemented with much better performance.

(and you'd still be able to use the existing layout modes if/when you needed to extra power)

Why would it be subject to more performance problems?

My understanding is that constraint based layout performance is heavily dependant on providing lots of constraints so that the solver doesn't have too much work to do. But that the reason people like constraint-based layout models is that they don't have to provide many constraints.

Couple those together and you get poor performance. Or more specifically, unpredictable performance with lots of performance pitfalls that are hard to debug. Apple's AutoLayout is the real-world case study for this.

A constraint like "make the top of this 20px below the top of the screen" should be no more computationally expensive than "margin-top: 20px". I'm not familiar with Apple's Auto-layout but why is it so slow? Maybe you have an example of what you're thinking of.

My guess is provides the power to do layouts that are difficult to do in CSS and also more computationally expensive, so it's not that constraints are slower, but that doing more complex layout requires more computation.

Edit: https://microsoft.github.io/apple-ux-guide/Layout.html (FWIW, by Microsoft?) seems to confirm this. Performance for normal layouts is normal, doing complex things with lots of chained, dependent constraints that modify many things is slow.

So, I don't think this is a good argument against constraint systems. People can do crazy things with more power. In fact, they already do crazy things because they can use Javascript which is ultimately powerful. Adding one more powerful system isn't going to change things. Companies do have limits for loading/rendering times for websites they publish, as loose as they are.

It's constraints like "line up the left side of widget A with the right side of widget B" that can be slow. In this case no width is provided for each widget, so the constraint solver has to find one (which likely involves calling into the widgets to size themselves, adjusting the sizes according to some algorithm and then laying out those widgets again with the final size).

These are also the kind of cases where CSS layout ends up being slow. But a constraint solver based layout gives you more power to shoot yourself in the foot with.

> but that doing more complex layout requires more computation.

It's exactly this. The question is whether that makes for an ergonomic system to use for the developer. My assertion is that if there is no feedback when you create a slow layout, then it is not actually an easy system to use, and you're better off with something more constrained that guides you into the pit of success.

(1) could be answered with container query units. Set `container-type: inline-size;` on the parent element (falls back to the whole viewport if unset), then use, e.g., `width: 50cqw; height: 50cqh` in children. The value is a percentage of the given axis

>It's constraints like "line up the left side of widget A with the right side of widget B" that can be slow. In this case no width is provided for each widget, so the constraint solver has to find one (which likely involves calling into the widgets to size themselves, adjusting the sizes according to some algorithm and then laying out those widgets again with the final size).

this problem somewhat already exists with layout thrashing https://web.dev/articles/avoid-large-complex-layouts-and-lay...

And given how layout thrashing and similar problems work I feel that you can code CSS in a constraint manner at least part of the time.

I don't think that works if you want to mix "proportion of available space" units with siblings that have a fixed size (a super-common use case for flexbox - having a fixed size box followed by another box that takes up "the rest of the space").

Isn't size of the parent element, what the percent values are relative to?

What CSS needs (opinion, caveat, really far away in advanced features) is:

- A way to get values from sliders (type="range") (and style and modify them easily). Really, a way to get "value" from any <input> element.

- A way to have radio / checkboxes or labels inside labels work for multiple choices (or something other than making enormous arrays of radio selections and CSS choices)

- A way to have indexed arrays of numbers / choices (other than using a crazy complicated animation timing trick)

- String concatenation thats not so incredibly finicky and difficult to implement correctly

- Some way to retain the final "state" of a condition without resorting to playing an animation on "forwards" mode. Also, related, some way to not require the hidden checkbox hack everywhere.

- (Advanced, lower priority) A way to force var() calculation and optimizations other than making a zillion @property statements. "This expensive trig calculation is used a hundred times later on, better make it a separate ... nvm, it gets regex placed into every other calculation on the entire page ... " ¯\_(-_')_/¯

- If() and Function() ... wait, /inappropriate_swear, we're actually getting these after a quarter century.

It looks like HTML may be getting the ability to manipulate the class/attributes of elements in response to clicks (declaratively, without JS). Which would solve a lot of the interactivity issues (checkbox hack, etc).

See: https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Com...

Thanks. Saw this, thought it looked cool. Just could not find what it can do other than "popover" "popovertarget" without using JS.

The examples provided for custom events all seem to use JS anyways. Ex:

  <button commandfor="the-image" command="--rotate-landscape">

  ...

  if ( event.command == "--rotate-landscape" ) { image.style.rotate = "-90deg" }

Agree it would be cool, it just doesn't seem to do a lot. Generalized "popovertarget" except that basically means +modal <dialog> in most of the examples. And all the modal dialogs are almost always "popover". And you can already make "popover" appear over "popover" with multiple onscreen. Maybe there's something with looking. [1]

[1] https://developer.chrome.com/blog/command-and-commandfor

Edit: Here's an example of the overlapping popover functionality. https://araesmojo-eng.github.io/

Main Page -> General Tests Menu -> Open Popover 1 | Open Popover 2

Should both open popovers simultaneously on top of each other while dismissing neither, and also change the state of elements on the page at the same time.