DEV Community

Danish Kamal
Danish Kamal

Posted on Edited on

📢 Some New CSS Properties. 🎉

#css #beginners #webdev #html

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
 
diomed profile image
May Kittens Devour Your Soul •

some new css properties

Collapse
 
araaranomi profile image
Ara Ara no Mi •

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