This repository contains a collection of CSS features that are added to baseline since 2022. The goal is to provide a comprehensive overview of the latest advancements in CSS, showcasing new properties, values, and techniques that can enhance web design and development.
The subgrid feature allows a grid item to inherit the grid layout of its parent grid container. This means that the child grid item can align its content according to the grid lines defined by its parent, making it easier to create complex layouts.
Nesting allows you to write CSS rules inside other CSS rules, creating a more organized and hierarchical structure. This feature is particularly useful for managing complex stylesheets and improving readability.
Layers allow you to group CSS rules into separate layers, enabling better control over the order in which styles are applied. This feature can help prevent style conflicts and improve maintainability by allowing you to organize styles based on their purpose or context.
Container queries allow you to apply styles to an element based on the size of its container rather than the viewport. This enables more responsive designs that adapt to different screen sizes and layouts.
Container query units are new length units that are relative to the size of a container. They allow you to create responsive designs that adapt to the size of their parent container.
The min(), max(), and clamp() functions allow you to perform calculations with CSS values. These functions enable you to create responsive designs that adapt to different screen sizes and conditions. The min() function returns the smallest value, the max() function returns the largest value, and the clamp() function constrains a value between a minimum and maximum value.
Stepped value functions allow you to create stepped values for CSS properties. The round() function rounds a value to the nearest integer, the mod() function calculates the remainder of a division operation, and the rem() function converts a value to a relative unit based on the root element's font size. These functions can be useful for creating consistent spacing and layout across different screen sizes.
CSS trigonometric functions allow you to perform trigonometric calculations directly in CSS. This feature is useful for creating complex animations and transformations based on trigonometric functions.
CSS color spaces and functions provide a way to define colors using different color models, such as HSL, LAB, and LCH. This allows for more precise color manipulation and better color representation across different devices.
Media query range allows you to define a range of values for media queries, making it easier to create responsive designs that adapt to different screen sizes and orientations.
The @starting-style at-rule allows you to define a set of styles that should be applied when an element is first rendered. This feature can be useful for creating initial styles for elements before any JavaScript or user interaction occurs.
The :has() pseudo-class allows you to select elements based on their descendants. This enables more complex and dynamic styling based on the presence of child elements.
The :is() and :where() pseudo-classes allow you to group multiple selectors together, making it easier to apply styles to a set of elements without repeating code.
The complex nth-child() pseudo-classes allow you to select elements based on more complex patterns, such as odd/even combinations or specific intervals. This provides greater flexibility in targeting elements for styling.
The :user-valid() and :user-invalid() pseudo-classes allow you to style form elements based on their validity state. This feature can help improve user experience by providing visual feedback on form input.
Lazy loading offscreen iframes allows you to defer the loading of iframes that are not currently visible in the viewport. This can improve page load times and overall performance by reducing the number of resources loaded initially.
Content visibility allows you to control the rendering of offscreen content, improving performance by skipping the rendering of elements that are not currently visible. This feature can help reduce the amount of work the browser needs to do when rendering a page, leading to faster load times and improved performance.
The scrollbar gutter and width properties allow you to control the space reserved for scrollbars in a layout. This can help prevent content from shifting when scrollbars appear or disappear, improving the overall user experience.
CSS scroll-snap allows you to create smooth scrolling experiences by snapping elements into place as the user scrolls. This feature is particularly useful for creating carousels, image galleries, and other scrollable content.
The inert attribute allows you to make an element and its descendants non-interactive, preventing user interaction with the content. This can be useful for managing focus and accessibility in complex layouts or when displaying modal dialogs.