New features in the latest CSS release CSS4

The latest CSS release is CSS 4, which is still in development and not fully supported by all browsers. However, some of the new features that have been introduced or are coming soon are:

  • Cascade layers: This feature allows you to create layers of styles that can be reordered and combined without changing the selectors or specificity within each layer. This can make it easier to work with multiple style sources and themes1.
  • The inert attribute: This attribute can be used to make any element non-interactive and invisible to assistive technologies. This can be useful for creating modal dialogs or hiding elements that are not relevant to the current context2.
  • The :has pseudo-class: This selector can be used to match an element based on the existence of a descendant element that matches a given selector. For example, div:has(p) will match any div that contains a paragraph element. This can enable more complex and dynamic styling of elements based on their content3.
  • Grid layout and subgrid: Grid layout is a powerful way to create two-dimensional layouts using rows and columns. Subgrid is a new feature that allows a grid item to inherit the grid lines of its parent grid container. This can make it easier to align nested grids and create complex layouts4.
  • The accent-color option: This property allows you to specify a custom color for the built-in UI elements of a form control, such as checkboxes, radio buttons, and sliders. This can help you create more consistent and appealing forms that match your design theme5.
  • Scroll snap: Scroll snap is a feature that allows you to control the scrolling behavior of a container and its children. You can specify where the scroll container should stop after a scroll operation, such as snapping to the edges or centers of its child elements. This can create a smoother and more intuitive scrolling experience for the user.
  • CSS Logical Properties: CSS Logical Properties are a set of properties that allow you to define the layout and positioning of elements based on the writing mode and direction of the document, rather than the physical dimensions of the screen. For example, instead of using width and height, you can use inline-size and block-size, which will adapt to the horizontal or vertical orientation of the text. This can make your styles more responsive and accessible to different languages and scripts.
  • Container queries: Container queries are a new feature that allow you to apply styles to an element based on the size and style of its parent container, rather than the viewport. This can enable more flexible and responsive design of components that can adapt to different layouts and contexts.
  • @when and @else: These are new conditional rules that allow you to apply styles based on the evaluation of a boolean expression. For example, you can use @when (prefers-color-scheme: dark) { ... } to apply styles only when the user prefers a dark color scheme. You can also use @else to provide an alternative style for the opposite case.
  • Three new color palettes: CSS 4 introduces three new color palettes that can be used to create more diverse and expressive colors. These are:
    • Lab: This is a color space that is based on human perception of lightness, hue, and chroma. It can create more natural and realistic colors that are independent of the device or medium.
    • LCH: This is a cylindrical representation of the Lab color space, where the hue is expressed as an angle, and the chroma and lightness are expressed as distances from the center. It can create more vivid and saturated colors that are easier to manipulate and adjust.
    • color-mix(): This is a new function that allows you to create a color by mixing two or more colors in a specified color space. For example, you can use color-mix(in lch, red 50%, blue 50%) to create a purple color that is a 50/50 mix of red and blue in the LCH color space.

These are some of the new features that are available or coming soon in CSS 4. You can learn more about them and see some examples in the links provided. I hope you find them useful and interesting. 😊

Leave a Comment

Your email address will not be published. Required fields are marked *

error: Sorry Content is protected !!!