What are the new features in the latest CSS release?

The latest CSS release is CSS View Transitions Level 1, which became a Candidate Recommendation on September 5, 2023¹. This specification defines a way to create smooth transitions between different views of the same document, such as tabs, slides, or pages². Some of the features of this specification are:

• The view property, which allows you to define a named view for an element and its descendants.
• The view-transition property, which allows you to specify the duration, timing function, and delay of the transition between views.
• The view-transition-start and view-transition-end pseudo-classes, which allow you to style the elements before and after the transition.
• The view-transition-cancel pseudo-class, which allows you to style the elements when the transition is canceled by the user or the script.
• The view-transition-event interface, which allows you to listen to events related to the transition, such as viewtransitionstart, viewtransitionend, and viewtransitioncancel.

You can see some examples of how to use these features in this demo.

Some other new features that are coming soon or have recently landed in CSS are:

• Container queries, which allow you to query a parent element’s size and style to determine the styles which should be applied to any of its children³.
• Style queries, which allow you to query the style values of a parent container using CSS custom properties³.
• :has() selector, which allows you to select elements that contain other elements that match the selector you pass into :has()⁴.
• nth-of microsyntax, which allows you to use more complex expressions to select elements based on their position in a list or a grid⁴.
• text-wrap: balance, which allows you to distribute text evenly across multiple lines⁴.
• initial-letter, which allows you to create drop caps and initial letters for the first letter of a paragraph or a block⁴.
• Dynamic viewport units, which allow you to use the actual size of the viewport instead of the initial containing block size for units like vw, vh, vmin, and vmax⁴.
• Wide-gamut color spaces, which allow you to use more colors than the standard sRGB color space⁴.
• color-mix(), which allows you to mix two or more colors using different color models and weights⁴.
• Nesting, which allows you to nest style rules inside other style rules using the @nest rule⁴.
• Cascade layers, which allow you to create layers to represent different styling concerns and reorder the cascade of layers in an explicit way⁴.
• Scoped styles, which allow you to limit the scope of a style sheet to a specific subtree of the document using the scoped attribute⁴.
• Trigonometric functions, which allow you to use mathematical functions like sin(), cos(), tan(), etc. in CSS values⁴.
• Individual transform properties, which allow you to specify the individual components of a transform function, such as translate, rotate, scale, etc.⁴.
• popover anchor positioning, which allows you to position a popover element relative to an anchor element using the anchor and anchor-align properties⁴.
• selectmenu, which allows you to create a custom select menu element using the <selectmenu> tag⁴.
• Discrete property transitions, which allow you to specify the transition behavior for properties that have discrete values, such as display, visibility, etc.⁴.
• Scroll-driven animations, which allow you to create animations that are driven by the scroll position of the document or an element using the @scroll-timeline rule⁴.
• View transitions, which allow you to create transitions between different views of the same document using the view property and the view-transition pseudo-classes⁴.

These are some of the best new CSS features for 2023. I hope you find them useful and interesting. 😊