Container conditionals and conditional sizes

[cbontems]

Hi,

For my personal use, I have extended the radius conditional smart use of clamp() to container queries. This is pretty straightforward swapping viewport units to cqi.

I have also extended this to conditional sizes, mainly for using them with margin-block.

This way, my sections, cards, etc. have no radius, and touch each other when full width, but get both a radius and vertical spacing when not full width. Here is what it looks like: https://codepen.io/cbontems/pen/poGYjGK

Would this be an interesting addition to the library?

I am trying to figure if something more generic like this could avoid creating a bunch of combinations:

* {
  --size-if-not-full-viewport-width: clamp(0px, calc(100vi - 100%) * 1e5, var(--apply-this-size, 0px));
  --size-if-not-full-container-width: clamp(0px, calc(100cqi - 100%) * 1e5, var(--apply-this-size, 0px));
  --radius-if-not-full-viewport-width: clamp(0px, calc(100vi - 100%) * 1e5, var(--apply-this-radius, 0px));
  --radius-if-not-full-container-width: clamp(0px, calc(100cqi - 100%) * 1e5, var(--apply-this-radius, 0px));
}

.element {
  --apply-this-size: var(--size-5);
  --apply-this-radius: var(--radius-3);
  margin-block: var(--radius-if-not-full-viewport-width);
  border-radius: var(--radius-if-not-full-viewport-width);
}

[argyleink]

nice, these are very cool, would fit nicely in here! thanks for sharing 🙂

here's what we have today
(for reference in this issue while we chat implementation details)

:where(html) {
  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}

my gut is thinking it'd be simpler (but obviously more KBs) to premake conditional sizes in addition to radii, then also add viewport and container contextual additions, also adding another set to border radii. somethin like this:

:where(html) {
  /* new name and is now logical */
  --radius-vi-conditional-1: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-1));
  --radius-vi-conditional-2: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-2));
  --radius-vi-conditional-3: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-3));
  --radius-vi-conditional-4: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-4));
  --radius-vi-conditional-5: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-5));
  --radius-vi-conditional-6: clamp(0px, calc(100vi - 100%) * 1e5, var(--radius-6));

  /* new set, container radii */
  --radius-cqi-conditional-1: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-1));
  --radius-cqi-conditional-2: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-2));
  --radius-cqi-conditional-3: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-3));
  --radius-cqi-conditional-4: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-4));
  --radius-cqi-conditional-5: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-5));
  --radius-cqi-conditional-6: clamp(0px, calc(100cqi - 100%) * 1e5, var(--radius-6));

  /* new set, viewport conditional sizes */
  --size-vi-conditional-1: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-1));
  --size-vi-conditional-2: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-2));
  --size-vi-conditional-3: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-3));
  --size-vi-conditional-4: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-4));
  --size-vi-conditional-5: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-5));
  --size-vi-conditional-6: clamp(0px, calc(100vi - 100%) * 1e5, var(--size-6));
  /* ... 15 etc */

  /* new set, container conditional sizes */
  --size-cqi-conditional-1: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-1));
  --size-cqi-conditional-2: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-2));
  --size-cqi-conditional-3: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-3));
  --size-cqi-conditional-4: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-4));
  --size-cqi-conditional-5: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-5));
  --size-cqi-conditional-6: clamp(0px, calc(100cqi - 100%) * 1e5, var(--size-6));
  /* ... 15 etc */
}

during this addition lets def update to logical viewport units 👍🏻 good call there.

thoughts?

---

I'm also working on Open Props v2, and there's a utilities stylesheet, and i think these would fit right into there and be a bit more dynamic (like you show, we can pass props as params and put all these props on *). No rush on that, but def something I'll note for v2.

[argyleink]

1e5 calcs are buggy in firefox, noting here to switch to 1e4 to avoid issues

https://github.com/argyleink/open-props/issues/448

UPDATE only broken in firefox 120, non issue in firefox 121