DEV Community

Cover image for CSS Tricks That Feel Illegal but Work - 2
Samanyu Pritish
Samanyu Pritish

Posted on

CSS Tricks That Feel Illegal but Work - 2

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

Ever had random stacking issues?

.parent {
  isolation: isolate;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)