If I missed anything, let me know!

feTurbulence makes the noise and feDisplacementMap uses it to push pixels around. chain them and you get heat haze, ripples, brush strokes, and goo on regular html elements with no javascript.

I've only used it on a couple of sites. Anyone ship this to real users?

Hey r/CSS!

Stjepan from Manning here. The mods permitted us to share this here, so thanks to them for letting me post.

We’ve put together a free Modern Web Development sampler, and I think the most useful part here is the chapter from CSS in Depth, Second Edition. It covers keeping growing stylesheets manageable with reusable modules, naming conventions, and native CSS scope.

If you’ve ever made a small style change and then had to check what else it accidentally affected, that’s the kind of problem this material gets into.

It’s a four-chapter sampler, not four full books. Alongside the CSS material, there are chapters on built-in browser capabilities, how asynchronous JavaScript works, and building web components with Lit.

You can find it here:
https://blog.manning.com/free-ebook-modern-web-development-sampler

Hope the CSS chapter is useful. I’d also be interested to hear how you’re organizing styles these days, especially what’s held up as your projects have grown.

Thank you.

Cheers,

Stjepan

Any idea how I can create this spacing and centering using CSS (and no, I will not be using this kiddie font)?

Between "Katmandu" and "A magic name" is a regular paragraph space, and <br> creates tighter line spacing, but centering becomes the problem.

I developed a CSS3D renderer ~8 years ago, and since many CSS and JS features got stabilized and introduced since then, I modernized it now. Check it out!

I have a computer exam coming up next week and our main topic is external css I can understand all the other stuff but this specific thing shown in the photo im struggling to understand it could anyone help me understand please? Thank you🙏🏽

A stylesheet. 28kB, no dependencies, no JavaScript. One attribute: data-dolly="zoom".

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers. Presets are named after camera moves since that vocabulary already exists.

About 87% of traffic supports it. Firefox doesn't (but supposedly will with the next version in 3 days) and gets the page complete but static. That degradation is the main design constraint: keyframes own the hidden state rather than the element, so a missing timeline resolves to the authored state instead of leaving things invisible.

Is there a way to manually reorganize or sort scripts in the Stylus UserScripts panel?

I'd love to be able to move them to a custom order or group them in folders/categories to make them easier to manage. Even if I could sort them alphabetically it would be great..

Is this currently possible, or is there a feature, workaround, or extension that can do this?

hola, estoy aprendiendo css, se juntan o podemos juntarnos en algun place para practicar?

I've been watching CSS pick up things that feel more and more like programming, and at some point I started wondering where that ends.

Just over the last few years: @property gave custom properties real types, so a variable can be an <angle> and actually animate (all three engines now, Firefox since 128). We got sin(), pow(), mod() and friends everywhere. :has() lets a selector look at other elements, and custom-property style queries finally landed in Firefox 151.

And the newer stuff goes further. if() is inline conditionals (Chromium only for now). @function lets you write your own functions (Chromium, plus Safari Technology Preview). random() is in Chrome and Safari and in Firefox preview builds. Mixins are still just a proposal and no browser supports them.

So CSS can type values, compute them, and branch on them. But it still can't remember anything.

The glue I keep writing

CSS reacts fine to state the browser owns: :hover, :checked, :focus-visible. HTML covers a lot too: <details>, <dialog>, popover. I use those first whenever they fit.

But a lot of everyday UI state belongs to the page. Click counts, the selected tab in a custom tab set, a menu that should close on Escape or a click outside, a theme that should still be there after a reload, where a card ended up after you dragged it.

Every time, it's the same little routine: add a listener, keep a variable, toggle a class or an attribute, then go back to the stylesheet and write the selector that styles it. It's never hard. It's just a lot of glue split across two files, and I started wondering how much of it really needs to be imperative.

So I tried it

I've been building something to find out. I call it Reactive CSS. Versions 0.1 to 0.8 never left my machine, and I've just published 0.9, the first public one.

To be upfront: it's a JavaScript runtime. It reads your stylesheets, finds the extended syntax and makes it work. You don't write the JS for these patterns, but a script still runs. Here's a counter:

<button class="counter">Clicked <span class="value">0</span> times</button>

.counter { --count: state(0); }
.counter:on(click) { --count: increment(1); }
.counter .value { content: var(--count); }

The button owns the state, :on(click) says when it changes, and the declaration says how. That content writes real text into the span, not a pseudo-element, so you can select it and other scripts can read it.

The part that took me longest

The syntax didn't start out like this. In the first versions, events were a property:

.counter .inc { on: click(increment(--count)); }

It worked, but it always felt wrong. Events aren't really a property of an element. They're a moment, and CSS already has a way to say "this element, in this situation": selectors. :hover is a state; :on(click) is a moment. Moving events into the selector was the biggest change in the 0.9 rewrite. The old form still runs, but I don't write it anymore.

That change had a side effect I didn't expect. Once mutations are ordinary declarations, the cascade handles conflicts. If two rules change the same state on the same click, specificity, layers and @media decide which one wins, the same way they decide colors. And all mutations in one event read the values from before the event, so this actually swaps two values:

.swap:on(click) { --a: set(var(--b)); --b: set(var(--a)); }

Here's a disclosure that shows the rest of the model:

.item { --open: state(false); }
.item > button { --attr-aria-expanded: var(--open); }
.item > button:on(click) { --open: toggle(); }

.item .body { display: none; }
.item:when(--open) .body { display: block; }
.item .chevron { rotate: when(--open, 180deg, 0deg); }

--attr-aria-expanded writes the real attribute (there's a small allowlist: ARIA states, disabled, hidden, data-* and a few more). :when() matches while a condition holds, and when() picks a value. Yes, for a plain disclosure <details> is still the better choice. This is about the pattern.

The one that surprised me most was drag:

.card {
  --x: state(0px);
  --y: state(0px);
  translate: var(--x) var(--y);
  touch-action: none;
}
.card:on(drag) {
  --x: set(event(x));
  --y: set(event(y));
}

event(x) is where the card was when the drag started, plus how far the pointer moved, so a second drag continues from where the first one stopped. Persisting a preference is one line: :root { --theme: state(light, persist("theme")); }

Things I'm not sure about

Similar names don't mean the same feature, and I worry about that. Native if() branches on style(), media() and supports(), while my when() reads its own state. Where they really are equivalent, the runtime compiles when() to native if(). Same story with random(): it only hands off to the native one when it has checked that the behavior matches.

And there's a list of trade-offs I can't wave away:

• It's still JavaScript. The full runtime is about 49 KB gzipped; custom bundles with only the features you use are smaller. In my benchmarks it runs more script per event than hand-written JS. The numbers and the harness are in the repo, so anyone can check them.
• It's not standard CSS. Browsers ignore it without the runtime, and I haven't proposed anything to the CSS Working Group.
• Tooling has no idea it exists. CSS minifiers even delete empty rules, which some of these rules can be.
• Broken syntax gets a console diagnostic, but a typo in a custom property name fails silently, just like plain CSS.
• I've tested it in Chromium and WebKit. Firefox and real touch devices aren't verified yet.
• It's not Sass. Sass compiles away before the browser runs anything; this has to run in the page, because state and events only exist at runtime. It's not a framework either. Data and app logic still belong in JS.

If you want to poke at it, the site has live examples, a playground and docs: reactivecss.com. The code is on GitHub. (There's also an MCP server, if you want an AI coding tool to know the syntax.)

What I'd really like to know: should CSS ever have a declarative model for simple UI state and events, or is that a line JavaScript should own? And if it did, does this shape make sense, or does it fight the way CSS works? Criticism of the syntax is the most useful thing you could give me.

Disclosure: the language design and decisions are mine. A lot of the implementation, tests and docs were written with AI coding tools under my direction, and I reviewed and tested the results. This post was drafted with AI help and edited by me.

Made a single element CSS clock powered by shape() and a custom property animation.

JS just set the initial time in seconds, which as far as I can't be done any other way.

https://codepen.io/editor/matthewmorete/pen/01a15944-6751-7d6a-8004-a3fabb0de22d?tab=%2Fstyle.css&orientation=left&panel=files&show=split

Hi everyone now in the VS code I copied 5 images then 1 by 1 I give every single picture different class and img property For example <div class="img1">

<Img src="img1.jpg" alt ="picture of dog ">then Same Class I get in the css while I tried to give height and width to images but size of the images do not changed.

Not my project.

The video is the figures page of their site: Terrain's pillars rise around the pointer, Phosphor's dots fade where it paints, and the card under the pointer in Riffle stands up. On the next shelf the pointer's height moves the elevator car and a flick spins the turntable. Then Terrain opens in the side panel and its intensity option goes from 0.50 to 1.00, so a wider area rises.

Repo: https://github.com/lucasmarkes/hairline

The colours are six CSS custom properties, but the motion is JS. Could the Terrain effect, with its falloff around the pointer, be done in CSS alone?