DEV Community

Danish Kamal
Danish Kamal

Posted on β€’ Edited on

5

πŸ“’ Some New CSS Properties. πŸŽ‰

Hello fellow developers! We are excited to announce some fantastic updates and new features in CSS that will enhance your web development experience. Let's dive right in! πŸ’ͺ

1️⃣ Custom Properties (Variables) 🎨
CSS now supports custom properties, allowing you to define your own variables and reuse them throughout your stylesheets. This helps in creating more flexible and maintainable code. Here's an example:

:root {
  --primary-color: #ff0000;
}

.button {
  background-color: var(--primary-color);
}
Enter fullscreen mode Exit fullscreen mode

2️⃣ Grid Layout πŸ“
CSS Grid Layout provides a powerful two-dimensional grid system for creating complex layouts. It allows you to easily divide your page into regions and position elements with precision. Check out this snippet:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ Flexbox Enhancements 🀩
Flexbox has received some exciting enhancements to make it even more versatile. Now, you can use gap property to add spacing between flex items and use gap and row-gap in flex containers. Take a look:

.container {
  display: flex;
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

4️⃣ Scroll Snapping πŸ“œ
Scroll snapping enables smooth scrolling behavior, allowing you to control where the scroll position stops within a container. It's great for creating engaging scrolling experiences. Use the following code to enable scroll snapping:

.container {
  scroll-snap-type: y mandatory;
}
Enter fullscreen mode Exit fullscreen mode

5️⃣ Dark Mode Support πŸŒ™
CSS now has built-in support for dark mode with the prefers-color-scheme media query. You can easily adapt your styles based on the user's preferred color scheme. Check it out:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111111;
    color: #ffffff;
  }
}
Enter fullscreen mode Exit fullscreen mode

These are just a few highlights from the latest CSS updates and new features. We hope you find them useful in your web development projects. Let your creativity flow and enjoy building beautiful websites! 😊

Happy coding! πŸ’»πŸŽ¨πŸš€
~By Danish

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here β†’

Top comments (3)

Collapse
 
not-ethan profile image
Ethan β€’

I think its also worth noting for variable they can be local ones with in a single ruleset like:

<selector> {
  --<var name>: <value>
  <style>: --<var name>
}
/* That would be valid CSS  but if we tried to use that var in a diffrent ruleset it would not be valid*/ 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
araaranomi profile image
Ara Ara no Mi β€’

CSS Variables have been around since 2017 though, they are not new CSS properties.

Collapse
 
diomed profile image
May Kittens Devour Your Soul β€’

some new css properties

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video