Ancestors

Toot

Written by 𒀭Wiiお姉さん 💜 🏳️‍⚧️ on 2025-01-22 at 09:38

The fact that I can't do --col-count: round(down, calc(calc(100vw / 1920px) * 8)) is actually kind of ridiculous.

[#]css #webdev

=> More informations about this toot | More toots from darkwiiplayer@tech.lgbt

Descendants

Written by Roma Komarov on 2025-01-22 at 11:41

@darkwiiplayer You can, but you'll need to use https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j by @JaneOri (and first assign the 100vw to a registered custom property as otherwise browsers have bugs with it inside atan2(), see https://blog.kizu.dev/captured-custom-properties/#working-around-type-limitations)

(also, division with stripping units already works in the latest Safari, hopefully other browsers will implement this soon as well)

=> More informations about this toot | More toots from kizu@front-end.social

Written by 𒀭Wiiお姉さん 💜 🏳️‍⚧️ on 2025-01-22 at 13:04

@kizu That's an amazing hack but it's also extremely questionable why it is even needed :blobcatgiggle:

Thanks for the link though :bunhdheart:

=> More informations about this toot | More toots from darkwiiplayer@tech.lgbt

Written by 𒀭Wiiお姉さん 💜 🏳️‍⚧️ on 2025-01-22 at 13:36

@kizu @JaneOri I just tried it out and it actually does exactly what I want 😁

Here's what I came up with: https://codepen.io/darkwiiplayer/pen/VYZEKLN?editors=1100

The columns attribute defines how many columns the table should have at a reference width, and it then shrinks (or grows) the column count proportionally according to the size of the container.

This could of course be even cooler using attr() whenever that becomes widely available.

=> More informations about this toot | More toots from darkwiiplayer@tech.lgbt

Written by Fen (spooky out of spite) on 2025-01-22 at 13:49

@darkwiiplayer @kizu @JaneOri attr() has been looking so useful, cannot wait for that 🥺

=> More informations about this toot | More toots from _luna@stranger.social