JaneOri

The hack does 3 things:

1) make an api request from CSS that responds with data encoded into height and width

2) use container queries and tan(atan2()) in CSS to read the dimensions of the response into 16 bit integers

3) a CSS hack that allows the document :root to capture and hold --var-data computed from several layers of nested DOM, hoisting it back up and holding it in a paused animation

Chrome desktop only for now

JaneOri

3 anni fadiscuss

I've been inventing CSS tricks for a while. Like my Space Toggle, the latest one blows the lid off of what's possible in 100% CSS.

It's cyclic --var computation. Under normal circumstances any cyclic var would be forced into its initial state. I figured out a way around it with two animations that, one, capture output then, two, hoist it back up as input.

Part of the trick is to sequence the playing state of capture and hoist animations:

  running paused
  paused paused
  paused running
  paused paused

There's a number of ways to ensure this play state sequence but, notably, animations aren't supposed to be able to directly control the state of other animations, so we have to rely on tricks there too.

The other clue in the trick is that a paused animation's value won't change if input changes because animation state overrides static state even when paused.

  Static:
  --in: 1;
  --out: calc(var(--in) + 1);

  capture:
  --held: var(--out);

  hoist:
  --in: var(--held);

That's the basics!

// Jane Ori

JaneOri

6 anni fadiscuss

I realize this is an absurd thing to do, but it was fun and I wanted to test the limits of CSS again so I could share the results!

I linked to the README since any web devs that see this will probably want to know how buuut here's a link to the game if you want to go hands on:

https://propjockey.github.io/css-sweeper/#randommenu

It's all open source, and I discuss some details of how to do it in that readme, but I am more than happy to answer any questions!

Thanks for checking it out!

Submissions

Hack demonstration: 100% CSS (no JavaScript) – Get user's –IP-Address on:root

Show HN: Breakout programmed in CSS (no JavaScript)

Infinite 42x42 Generations, Game of Life Simulation and It's 100% CSS

Show HN: MineSweeper implemented in 100% CSS and HTML – no JavaScript

Show HN: A completely different way to write responsive, vanilla, CSS

Show HN: Cyberpunk web design made easy, really easy

comments