DEV Community

Danish Kamal
Danish Kamal

Posted on • Updated on

📢 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

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