u/Blozz12

I made one CSS song as an experiment, then kept going. There are 26 now.

Each video takes one CSS feature and tries to explain it with a short song and an animated example. I've covered container queries, :focus-visible, cascade layers, native nesting, subgrid, field-sizing, and quite a few newer features.

I use AI for parts of the music and production. I still research and edit the technical side, then build the visual demos in Remotion. The hard part is deciding what to cut. A song full of syntax is awful, but cutting too much can make the explanation wrong.

I'm curious whether this format helps anything stick. If you watch one, I'd especially like to know where the explanation becomes unclear or technically shaky.

Paste any public URL and it opens the page in Chrome, explores its interactions, then checks the HTML, CSS, and JavaScript for things that browsers can now handle natively.

It catches patterns such as custom accordions, popovers, dialogs, scroll reveals, JavaScript sticky elements, and older CSS workarounds.

The report includes the code it found, a proposed replacement, browser support, what to verify before changing anything, and a small example towards a codepen to implement it.

It scans ONE page, so it is not a performance, accessibility, security, or full-site audit.

It is free (10 url/day/human) and requires no account.

Don't hesitate to tell me if you find a bug, an UI/UX issue, or any other thing you find weird

The question is in the title.

I've been using devtool in my own personal way for debugging and working with CSS for almost a decade now. But I never really took the time to see how other devs are using it. I'm sure I'm missing on a lot of cool features or ways of doing.

(I saw that Ahmad Shadeed wrote a book about it, but I don't know what to expect from it)

I’m curious about how other frontend developers use browser DevTools for CSS work.

Personally, I rely on it a lot. Not only when something is broken, but also while building the UI. I often tweak spacing, colours, font sizes, layout values, responsive behaviour, etc. directly in DevTools before moving the final values back into my code.

For me, it’s become a real part of the development process, not just a debugging tool.

So I’m curious:

Do you mainly use DevTools to debug CSS issues or do you also use it while designing/building the page?

What does your usual process look like when working on CSS in the browser?

I recently wanted to use CSS Scan, but for my use case it felt a bit too expensive.

What I actually wanted was something simpler:

• hover any element and instantly see its CSS
• click to pin the inspector
• edit CSS directly on the page
• copy the CSS when I’m done
• keep computed styles separate from editable source styles
• support pseudo/media scoped styles where possible
• no account, no subscription, just a small Chrome extension

So I built a free Chrome extension called CSS Explorer.

It’s not trying to be a full DevTools replacement. The goal is more: “I’m working on frontend UI, I want to inspect/edit/copy styles quickly without opening the full DevTools panel.”

It’s still early, and I’m mostly looking for feedback from frontend developers:

• would this actually can interest you?
• what feels missing?
• what would make you use this instead of DevTools?

Hey everyone,

I’m building a chrome extension around a problem I keep running into: I open DevTools, delete a popup, hide a sticky banner, remove a distracting block, tweak some CSS… and then everything is gone after a reload.

The idea is to make those quick browser edits persistent.

So if a website has an annoying newsletter modal, floating ad, cookie banner, sidebar, paywall-style overlay, or any other element you don’t want to see, you could remove it once and have that change come back automatically next time. It could apply only to the current page, or to the whole domain if that makes sense.

The other side of it is for experimenting. Sometimes I’m adjusting spacing, colors, font sizes, classes, or small bits of HTML directly in DevTools just to see what looks better. The extension would keep track of those changes too, so instead of trying to remember “what did I change again?”, you’d have a clear record of the useful tweaks you made in the browser.

So it’s partly a way to clean up websites you visit often, and partly a way to save visual experiments before deciding whether to recreate them properly in your code.

I’m trying to understand if this is actually useful to people, or if it sounds like something that would be nice in theory but not part of your real workflow.

Would you use a tool like this? Do you see any other interesting features I could add?