CSS4 is still a broad concept, because the development of CSS is usually carried out through a series of gradually improved modules, rather than launching a brand new “fourth generation” all at once. Many so-called “CSS4” features are actually CSS modules that are under development or already in the draft stage, and they may be officially adopted in future CSS specifications.
Selector 4:
- The
:is()and:where()pseudo-classes allow dynamic selection of a group of elements. - The
:has()pseudo-class selector allows the selection of parent elements based on child elements. - The
:scopepseudo-class is used to select elements in Shadow DOM.
Variables and custom properties:
- The var() function allows the use of variables in CSS.
- –* named custom properties provide more powerful variable support.
Color module:
- More color spaces, such as HSLA, HSV, color functions, etc.
- The color-adjust property allows the adjustment of colors for printing.
Layout module:
- CSS Grid Layout provides two-dimensional grid layout.
- Enhancements to CSS Flexbox, such as more fine-grained control.
- CSS Multi-column Layout for creating newspaper-style multi-column layouts.
Animations and Transitions:
- Enhancements to the @keyframes rule to support more animation options.
- will-change property for optimizing animation performance.
Text Module:
- font-display controls font loading behavior.
- New values for text-decoration, such as underline-offset and text-underline-position.
Borders and Backgrounds:
- clip-path allows for the creation of complex shapes.
- mask and mask-image for image masking.
Filters and Lighting:
- Extensions to filter functionality, including blur, brightness, contrast, and more.
- backdrop-filter applies filters to elements behind an element.
CSS Scoping:
- Shadow DOM provides local CSS scoping.
CSS Houdini:
- A set of experimental APIs that allow direct manipulation of CSS internals, such as the Paint API, Layout API, and Animation Worklet.
CSS Container Queries
- Container Queries: This is a long-awaited feature that allows CSS to change based on the size, orientation, or other properties of its container, rather than relying on the viewport size. This provides more powerful adaptability for componentized design, allowing components to be responsively adjusted independently of the layout of the rest of the page.
CSS Grid Layout Enhancements
- Subgrid: CSS Grid Level 2 introduces the subgrid feature, allowing the grid inside the grid item to also follow the row and column layout of the outer grid, which is very useful for the alignment and consistency of nested grid layouts.
CSS Shapes
- Shape-Outside: Allows text around an element to flow into a specific shape, not just a rectangle or square, increasing the creativity and flexibility of the design.
Scroll Snap
- Scroll Snap Points: This feature allows developers to control scrolling behavior, so that content “snaps” when scrolling to a specific point, suitable for creating smooth scrolling galleries, carousels and other interactions.
CSS Color Level 5
- Color Functions: Added more advanced color operation functions, such as color mixing (color-mix()), color adjustment (lch(), lab() color space), etc., to make color processing more flexible and precise.
CSS Font Loading
- Font Display Strategies: Provides more options for controlling font loading and display methods, helping to improve text flickering and loading experience.
CSS Box Alignment
- Alignment in Depth: With the popularity of Flexbox and Grid layouts, CSS alignment functions are also expanding, providing more alignment options, such as cross-axis alignment, adaptive alignment, etc., making layout design more flexible.
CSS Nesting
- Nested Rules: Although currently available through preprocessors, native CSS nested rules are under discussion, which will allow more intuitive nesting of rules inside selectors, reduce code duplication and improve readability.
CSS Environmental Variables
- Environment Variables: Allows CSS to access some environmental information, such as user preference colors, theme colors, etc., so that the style can be automatically adjusted according to the user’s system settings, enhancing the personalization of the user experience.
CSS Logical Properties
- Logical Properties and Values: These properties determine the layout based on the direction of the text (ltr or rtl) and the writing mode (horizontal or vertical), making international layout design simpler and more consistent.
