1. CSS Custom Properties

CSS Custom Properties, also known as CSS variables, allow you to define reusable values that can be used throughout your CSS. This makes it easier to maintain and update styles.

:root {
                          --box-color: #4CAF50;
                        }
                        
                        .box {
                          background-color: var(--box-color);
                          padding: 20px;
                          text-align: center;
                          border-radius: 8px;
                        }

Copy Code

---

2. Logical Properties

Logical properties provide a way to set layout properties based on the directionality of the content. They make your CSS more adaptable to different writing modes (e.g., right-to-left or top-to-bottom).

.container {
                          display: flex;
                          justify-content: start; /* Logical property */
                          padding-inline: 20px; /* Logical property for padding */
                        }

Copy Code

---

3. Container Queries

Container queries allow you to style based on the size of a parent container rather than the viewport. This makes responsive design more flexible.

@container (min-width: 400px) {
                          .box {
                            background-color: lightblue;
                          }
                        }
                        
                        .container {
                          container-type: inline-size;
                          width: 100%;
                          max-width: 600px;
                          padding: 20px;
                        }

Copy Code

---

4. CSS Subgrid

CSS Subgrid allows grid items to align with the grid tracks of their parent grid, enabling nested grid layouts with shared alignment.

.parent {
                          display: grid;
                          grid-template-columns: 1fr 1fr;
                        }
                        
                        .child {
                          display: grid;
                          grid-template-columns: subgrid; /* Inherit columns from parent grid */
                        }
                        
                        .item {
                          background-color: lightcoral;
                          padding: 10px;
                          border: 1px solid #333;
                        }

Copy Code

---

5. CSS Scroll Snap

CSS Scroll Snap helps to create a smooth scrolling experience, making content snap into place when scrolling in certain directions.

.container {
                          display: flex;
                          overflow-x: scroll;
                          scroll-snap-type: x mandatory;
                        }
                        
                        .item {
                          flex: 0 0 auto;
                          width: 200px;
                          height: 150px;
                          background-color: lightgreen;
                          margin-right: 10px;
                          scroll-snap-align: start;
                        }

Copy Code

---

6. CSS Masking

CSS Masking allows you to hide parts of an element, creating more complex visual effects by masking areas with an image or a gradient.

.mask {
                          width: 300px;
                          height: 200px;
                          background-color: #4CAF50;
                          mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
                          -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
                        }

Copy Code