DEV Community: Samanyu Pritish

CSS Tricks That Feel Illegal but Work - 2

Samanyu Pritish — Fri, 13 Feb 2026 13:29:34 +0000

1️⃣ `:has()` -- The Parent Selector We Waited For

For years, we couldn't select a parent based on a child.

Now we can.

.card:has(img) {
  border: 2px solid lime;
}

CSS can now say:

"If this element has a child matching this selector..."

It feels illegal.
It's revolutionary.

2️⃣ `scroll-snap` -- Smooth Native Carousels

You don't always need JavaScript sliders.

.container {
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

Native snapping scroll behaviour.
Smooth. Fast. Zero JS.

3️⃣ `isolation: isolate` -- Fix Weird Z-Index Bugs

Ever had random stacking issues?

.parent {
  isolation: isolate;
}

It creates a new stacking context.
Suddenly... z-index starts behaving.

4️⃣ `accent-color` -- Style Native Inputs Instantly

Styling checkboxes used to be painful.

Now:

input {
  accent-color: hotpink;
}

Your checkbox, radio button, and progress bar now match your theme.
No hacks. No SVG. No pain.

Is it done?

Yes, now your website's CSS code will be shorter and easier to use. These tricks don't decrease the performance. They increase the performance of the website. Use it, and please follow me.

CSS Tricks That Feel Illegal But Work

Samanyu Pritish — Thu, 12 Feb 2026 14:26:05 +0000

Sometimes CSS feels boring.

And then you discover properties that feel like they shouldn't work...
But they do.

Here are some CSS tricks that feel illegal --- but are completely valid
and insanely useful.

1️⃣ `pointer-events: none` -- Click Through Elements

Ever wanted to put something on top of everything... but still allow
clicks underneath?

.overlay {
  pointer-events: none;
}

Now the element becomes visually present, but completely ignores mouse
interaction.

🔥 Use Cases:

Floating gradients
Decorative layers
Custom cursor effects
Non-blocking overlays

2️⃣ `aspect-ratio` -- Finally No More Padding Hacks

Remember the old padding-bottom trick for maintaining aspect ratio?
Yeah. Forget that.

.card {
  aspect-ratio: 16 / 9;
}

No wrappers. No hacks. No math.

It just works.

3️⃣ `clamp()` -- Responsive Magic in One Line

This one feels like cheating.

font-size: clamp(1rem, 2vw, 2rem);

Minimum → 1rem\
Preferred → 2vw\
Maximum → 2rem

Your text now scales smoothly without media queries.

Final Thoughts

CSS isn't limited.
Most developers just don't explore it deeply enough.
The cleanest solutions often require less code --- not more.
Now, You know the 60% of the tricks, 40% main tricks in the next part.
Which CSS trick felt the most illegal to you?

Your Website Doesn't need more animations.

Samanyu Pritish — Sun, 08 Feb 2026 13:51:54 +0000

Fades, slides, and micro-interactions are all examples of animations.
However, the majority of websites feel slower rather than better.

Animation isn't the problem.
Animation is being used to cover up poor design.

Animations Are Not a Feature

UX is not automatically enhanced by animations.

Frequently, they

interaction delays

users' distraction

make simple tasks seem laborious

Usability is already compromised if clicking seems slower.

Motion Should Not Decorate, But Explain

Change is explained by good animation:

the source of the content

what just took place

Things to Pay Attention to

If taking away an animation doesn't improve comprehension, it wasn't necessary.

Performance Is UX

Too many animations indicate:

dropped frames.

janky scrolling

bad mobile experience.

A slow, animated interface is always inferior to a quick, static one.

Always be subtle.

The fastest animations are the best.

Silent

Modification

where the content originates

What just took place

What to Pay Attention to

An animation wasn't necessary if cutting it out doesn't alter comprehension.

UX is performance.

An excessive number of animations indicates:

dropped frames

Janky scrolling

bad mobile experience

A quick, static interface is always preferable to a slow, animated one.

The subtlety always wins.

The most effective animations are quick.

silent

dependable

Good user interfaces don't flaunt themselves.
It moves aside.

When Animation Is Beneficial

Make use of animation to:

provide feedback

direct attention

elucidate transitions

Never to hide a misunderstanding.

Your Chrome needs these

Samanyu Pritish — Sun, 08 Feb 2026 13:40:24 +0000

Although browser extensions are meant to simplify your life, most users either install the incorrect ones or too many.

Flashy features and trendy tools are not the focus of this list.
It's about extensions that genuinely enhance your regular browsing experience, whether it's through time savings, friction reduction, or just making Chrome more enjoyable to use.

I've separated these extensions into two distinct groups:

Tools that address actual issues and become practically necessary once you use them are needed.
Good-looking extensions are ones that not only function well but also improve the peace, order, and enjoyment of your workflow.

Not much fanfare. No long lists.
There are only five Chrome extensions that are truly worthy of being installed on your browser.

WhatFont

Ever landed on a website and thought, “Which font is this?”
WhatFont answers that question instantly.

Just hover over any text, and it tells you the font family, weight, and style — no DevTools, no inspecting elements, no guesswork. It’s fast, simple, and does exactly one thing really well.

If you care about UI, typography, or even basic visual consistency, this extension saves you unnecessary friction every single day.

GoFullPage

Taking screenshots shouldn’t be complicated — and GoFullPage keeps it that way.

With a single click, it captures an entire webpage from top to bottom. No manual scrolling, no stitching images together, no broken sections. What you see is exactly what you get.

It’s perfect for documentation, design inspiration, audits, or sharing layouts with others. Once you use GoFullPage, normal screenshots start to feel incomplete.

If you ever need to capture a webpage properly, this extension is a no-brainer.

AdBlock

Ads don’t just distract — they slow things down.

AdBlock removes unnecessary clutter from the web, making pages load faster and layouts cleaner. Once ads are gone, you start noticing how much noise they were adding in the first place.

This isn’t about convenience anymore—it’s about control.
A cleaner web simply feels better to use.

Reflect New Tab

Every new tab doesn’t need to scream for attention.

Reflect replaces the default Chrome new tab with something calm and minimal. It gives you space to think, jot down notes, or simply pause before jumping to the next task.

It’s not aggressive productivity.
It’s quiet focus — and that’s exactly why it works.

Dark Reader

Bright white pages at night are a problem Dark Reader quietly solves.

It applies a consistent dark theme across websites, with control over brightness, contrast, and colours. Unlike forced dark modes, it actually respects readability.

This extension isn’t just about looks—it’s about comfort.
Once your eyes get used to it, going back feels painful.

DEV Community: Samanyu Pritish

CSS Tricks That Feel Illegal but Work - 2

1️⃣ :has() -- The Parent Selector We Waited For

2️⃣ scroll-snap -- Smooth Native Carousels

3️⃣ isolation: isolate -- Fix Weird Z-Index Bugs

4️⃣ accent-color -- Style Native Inputs Instantly