DEV Community

Cover image for 10 Underutilized CSS Properties Every Developer Should Know
Mainul Hasan
Mainul Hasan

Posted on • Updated on • Originally published at blog.stackademic.com

10 Underutilized CSS Properties Every Developer Should Know

Developers now have more options than ever before for customizing websites’ appearance. But in the rush of daily tasks and amidst the clatter of countless lines of code, many of us fall back on what we already know.

We often forget that different CSS properties can take our designs from good to visually appealing. Today, let’s explore 10 of these underutilized CSS properties that can give your designs a new appearance.

1. clip-path — Visual Shapeshifter

The clip-path property shapes web elements like cookies. You can shape an element to match an SVG or to seem unique. It’s that simple and creative!



.circle {
    clip-path: circle(50% at 50% 50%);
}


Enter fullscreen mode Exit fullscreen mode

With the power of the clip-path property, you have the ability to create cool animations and transitions, all without using heavy images or overly complex scripts.

2. object-fit — Perfect Fit Every Time

Think of object-fit as the tailor of the web. It defines how <img> or <video> elements resize themselves within their containers.



img {
    object-fit: cover;
}


Enter fullscreen mode Exit fullscreen mode

When resizing media, it maintains the original aspect ratio. No more odd cropping or stretching.

3. backdrop-filter — Background Magician

With the backdrop-filter, you can add effects like blurs or color changes to the backgrounds of your elements, making them dynamic and vibrant.



.backdrop {
    backdrop-filter: blur(5px);
}


Enter fullscreen mode Exit fullscreen mode

Use effects like glossy glass to make your website look better. It’s a great way to make things like pop-ups or sidebars stand out.

4. calc() — Calculator for Style

You can do math in your stylesheets with the calc() function. This means you can adjust sizes or positions when needed.



.container {
    width: calc(100% - 20px);
}


Enter fullscreen mode Exit fullscreen mode

At its best, flexibility. Adjust sizes, positions, and margins. This is very beneficial for designs that require responsiveness.

5. contain — Element Isolator

Some parts of a website can stand on their own thanks to the contain feature.



.independent {
    contain: content;
}


Enter fullscreen mode Exit fullscreen mode

Performance is key. By highlighting non-impacting elements, you improve browsing speed and experience.

6. mix-blend-mode — Digital Painter’s Delight

Think of your content as paint on a canvas. With mix-blend-mode, you can decide how this “paint” works with layers below it.



.blend {
    mix-blend-mode: multiply;
}


Enter fullscreen mode Exit fullscreen mode

Get creative by stacking web elements in new ways. This can give your designs a richer, more interactive look.

7. writing mode — Typography’s Flexible Friend

Flipping the script, literally. Writing mode changes your text’s direction, making it horizontal or vertical.



.vertical-text {
    writing-mode: vertical-rl;
}


Enter fullscreen mode Exit fullscreen mode

It’s not simply for languages that write vertically. This property gives titles, pull quotes, and sidebar notes a new, eye-catching design look.

8. grid-template-areas — Making Layouts Intuitive

With the help of this feature, you can give each grid space a name, giving you a bird’s-eye view of your layout.



.grid {
    grid-template-areas: 
    "header header"
    "sidebar content"
    "footer footer";
}


Enter fullscreen mode Exit fullscreen mode

Design becomes more intuitive. It simplifies managing responsive designs and makes your grid structures easy to grasp at a glance.

9. will-change — Future Predictor

Give browsers a heads-up about changes you’ll make to an element. It’s like telling a friend to expect a surprise so they’re better prepared.



.animation-target {
    will-change: transform, opacity;
}


Enter fullscreen mode Exit fullscreen mode

By hinting at what will change, browsers can prep themselves, ensuring smooth animations and transitions with fewer jerks or delays.

10. :is() — Simplifying Selectors

The :is() will-change helps tidy up your styles. It groups similar things together, so you don’t have to repeat yourself.



:is(h1, h2, h3) {
    margin-top: 0;
}


Enter fullscreen mode Exit fullscreen mode

Efficiency and cleanliness are the future of coding. When you streamline your stylesheets, you make your code tidier and ensure you follow the DRY principle.

Conclusion

Web designers are like artists, but our canvas is digital. Trying new tools can lead to amazing discoveries. So, dive into these CSS properties; they might inspire your next design.

Are you an early adopter who has used some of these properties? Or Perhaps you’ve discovered other CSS gems on your design journey?

We’d love to hear from you! Share your insights, experiences, and tips in the comments below.

If you found this article useful or have more insights on the topic, feel free to connect with me on Twitter and LinkedIn. Let’s continue the conversation there!

Before you dive back into code, please take a moment to give this article a ❤️ or 🦄, drop a comment below, or share it with your fellow devs. Your feedback helps me craft more insightful tech content!

Read Next...

Top comments (10)

Collapse
 
mackfitz profile image
Maciek Fitzner

Ooh, thanks for reminding me of will-change! Of the list above I use clip-path, mix-blend-modes, filters, :is and calcs all the time. Speaking of which, calcs are a thing to keep an eye on - with trigonometric functions finally having received general support across browsers earlier this year, and pow(), sqrt() and hypot() on the horizon (currently only supported by Safari and Firefox, which were also the first adopters of trigs)

Collapse
 
mainulspace profile image
Mainul Hasan

Absolutely! I’m thrilled to hear that you’re making good use of so many CSS properties. Thanks for pointing out the newer additions and their browser support. Keep experimenting and pushing the boundaries of CSS! ✨🚀

Collapse
 
mackfitz profile image
Maciek Fitzner

Then you'll be horrified that I mostly use those for inconsequential experimental demos on Codepen ;)

Still, I absolutely LOVE coding those

Thread Thread
 
mainulspace profile image
Mainul Hasan

Haha, every great masterpiece starts with a doodle! 😄 Codepen is a fantastic playground for trying out and showcasing those little experiments. Who knows? One of those 'inconsequential' demos might spark an idea for something bigger. Keep experimenting and having fun with CSS! 🎨🖌️

Collapse
 
wraith profile image
Jake Lundberg

thanks for this! i discovered a few new tools to play with!

Collapse
 
mainulspace profile image
Mainul Hasan

You're welcome! I'm glad you found some new tools to explore. Feel free to ask if you have any questions or need further tips as you play around with them. Happy coding! 😊🛠️

Collapse
 
ghadzhigeorgiev profile image
Georgi Hadzhigeorgiev

Nice selection, thank you!

Collapse
 
mainulspace profile image
Mainul Hasan

Thank you! I'm glad you found it helpful. Let me know if there's anything else you'd like to know or explore. Happy coding! 😊

Collapse
 
techthatconnect profile image
TechThatConnect

Great list I use a few of these but also learned some new ones. You repeated the same sentence in #5 just so you know. Over all good work

Collapse
 
mainulspace profile image
Mainul Hasan • Edited

I'm glad that you find the article helpful. I removed the duplicated sentence. Thanks for reading and pointing out the errors.