7 New CSS Features You Need to Know

CSS is constantly evolving, with new features being added all the time. In this post, we'll take a look at 7 of the most exciting new CSS features that you need to know about. These features will help you create more modern, responsive, and user-friendly websites.

1. Light-dark() function

The light-dark() function allows you to easily create styles that adapt to the user's preferred color scheme. For example, you can use it to set different background and text colors for light and dark modes.

    body {
      background-color: light-dark(white, black);
      color: light-dark(black, white);
    }

2. New CSS pseudo-classes: :user-valid and :user-invalid

These new pseudo-classes allow you to style form elements based on whether the user has entered valid or invalid data. This can be used to provide real-time feedback to the user and make forms more user-friendly.

    input:user-valid {
      border-color: green;
    }
    input:user-invalid {
      border-color: red;
    }

3. interpolate-size property

The interpolate-size property makes it easy to animate the size of elements. This can be used to create smooth transitions and make your designs more dynamic.

    panel {
      interpolate-size: height 0.5s ease;
    }
    panel.open {
      height: auto;
    }

4. align-content property

The align-content property can be used to center elements in block layouts. This can be used to create more balanced and visually appealing layouts.

    my-element {
      display: block;
      align-content: center;
    }

5. @property at-rule

The @property at-rule allows you to define custom CSS properties. This can be used to create more modular and maintainable CSS code.

    @property --rotation {
      syntax: '';
      inherits: false;
      initial-value: 0deg;
    }
    div {
      transform: rotate(var(--rotation));
    }

6. @starting-style rule

The @starting-style rule allows you to define the initial state of an element. This can be used to create smooth transitions and avoid the Flash of Unstyled Content (FOUC).

    @starting-style {
      .modal {
        opacity: 0;
        visibility: hidden;
      }
    }
    .modal {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

7. Advanced CSS math functions

CSS now supports a number of advanced math functions, such as round(), mod(), and rem(). These functions can be used to create more complex and dynamic layouts.

    .box {
      margin: round(2.5px); /* Rounds to 3px */
    }
    .stripe:nth-child(odd) {
      left: calc(var(--index) * 50px mod 200px);
    }
    .circle {
      width: rem(10px, 3px); /* Outputs 1px */
    }

These are just a few of the many new CSS features that are available. By using these features, you can create more modern, responsive, and user-friendly websites.

25 February Tags : coding , css , frontend