The latest CSS release is CSS View Transitions Level 1, which became a Candidate Recommendation on September 5, 20231. This specification defines a way to create smooth transitions between different views of the same document, such as tabs, slides, or pages2. Some of the features of this specification are:
viewproperty, which allows you to define a named view for an element and its descendants.
view-transitionproperty, which allows you to specify the duration, timing function, and delay of the transition between views.
view-transition-endpseudo-classes, which allow you to style the elements before and after the transition.
view-transition-cancelpseudo-class, which allows you to style the elements when the transition is canceled by the user or the script.
view-transition-eventinterface, which allows you to listen to events related to the transition, such as
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 children3.
- Style queries, which allow you to query the style values of a parent container using CSS custom properties3.
- :has() selector, which allows you to select elements that contain other elements that match the selector you pass into :has()4.
- nth-of microsyntax, which allows you to use more complex expressions to select elements based on their position in a list or a grid4.
- text-wrap: balance, which allows you to distribute text evenly across multiple lines4.
- initial-letter, which allows you to create drop caps and initial letters for the first letter of a paragraph or a block4.
- 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 vmax4.
- Wide-gamut color spaces, which allow you to use more colors than the standard sRGB color space4.
- color-mix(), which allows you to mix two or more colors using different color models and weights4.
- Nesting, which allows you to nest style rules inside other style rules using the @nest rule4.
- Cascade layers, which allow you to create layers to represent different styling concerns and reorder the cascade of layers in an explicit way4.
- Scoped styles, which allow you to limit the scope of a style sheet to a specific subtree of the document using the scoped attribute4.
- Trigonometric functions, which allow you to use mathematical functions like sin(), cos(), tan(), etc. in CSS values4.
- Individual transform properties, which allow you to specify the individual components of a transform function, such as translate, rotate, scale, etc.4.
- popover anchor positioning, which allows you to position a popover element relative to an anchor element using the anchor and anchor-align properties4.
- selectmenu, which allows you to create a custom select menu element using the <selectmenu> tag4.
- Discrete property transitions, which allow you to specify the transition behavior for properties that have discrete values, such as display, visibility, etc.4.
- 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 rule4.
- View transitions, which allow you to create transitions between different views of the same document using the view property and the view-transition pseudo-classes4.
These are some of the best new CSS features for 2023. I hope you find them useful and interesting. 😊