Scoped styling (@scope)

The CSS scoped styles `@scope` is a new rule that confines styles to specific DOM subtrees, addressing the issue of global pollution in traditional CSS. Its basic syntax includes a scoped root element and optional boundary limits. A simple example demonstrates how to restrict styles within a component. Compared to Shadow DOM, `@scope` does not alter the DOM structure and is implemented purely in CSS, making it more lightweight. It supports nested usage and affects specificity calculations, making it suitable for scenarios like component isolation and theme switching. It can also be combined with CSS variables. Currently, browser support is limited but can be progressively enhanced. Performance considerations include avoiding excessive nesting. Compared to BEM and CSS Modules, it offers a more concise solution, supports dynamic scoping and media queries, and may evolve in the future to provide finer control and tool integration.

Layer upon layer (@layer)

The stacking layer is an important feature in CSS3 that allows developers to more precisely control style precedence and avoid conflicts by declaring stacking contexts. It enables the definition of multiple style layers, where later-defined layers have higher priority. The precedence of stacking layers is determined by the order of declaration and the internal rule sequence. It supports anonymous layers and nested layers, with special behavior when interacting with `!important` rules. This feature is suitable for isolating third-party library styles and implementing theme systems. Modern browsers widely support it, and it can be used alongside preprocessors. During debugging, developer tools display the layer to which styles belong. Best practices include planning layer structures reasonably, controlling the number of layers, using meaningful names, avoiding overuse of `!important`, and coordinating with other CSS features like `@import` and `@media`.

Container query

Container queries are a significant feature in CSS3 that allows developers to apply styles based on an element's own dimensions rather than the viewport size. By declaring a parent element as a container, child elements can adjust their styles based on changes in the container's dimensions. Container types include `size`, `inline-size`, and `normal`. Practical applications include adaptive card components and responsive navigation menus. CSS3 introduces container query units like `cqw` and `cqh`. Compared to media queries, container queries enable more granular component-level control. For performance optimization, avoid excessive nesting and choose container types wisely. Browser compatibility must be considered, with fallback solutions provided. Advanced techniques include combining CSS variables and nested container queries. Debugging tips involve using developer tools and JavaScript to detect container states.

Native nesting rules

Native nesting is a CSS feature that allows developers to write styles for one selector inside another, making the code easier to maintain and understand. The basic syntax involves placing child selectors within the curly braces of a parent selector, supporting combinators like descendant, child, adjacent sibling, and general sibling. The `&` symbol represents the parent selector. Media queries and other rules can also be nested, and the nesting of pseudo-classes and pseudo-elements makes the code more intuitive. However, excessive nesting should be avoided as it can impact performance. Compared to preprocessors, native nesting is parsed directly by browsers without requiring compilation, making it particularly suitable for component-based development and scenarios with clear parent-child relationships. It can be combined with methodologies like BEM. Modern browsers support native nesting, though older versions may require prefixes. Debugging tools in browsers display the nested structure. Nesting promotes modular CSS writing. When migrating existing code, gradual refactoring is recommended. Compared to CSS-in-JS, native nesting does not require a JavaScript runtime, offering better performance. Best practices include limiting nesting depth, using meaningful names, avoiding over-reliance on nesting, managing specificity, and combining it with CSS custom properties.

Scoped styling

CSS scoped styling addresses the issue of global pollution in traditional CSS by limiting the scope of style application. Modern front-end technologies offer various implementation approaches: CSS Modules uses build tools to generate unique hashed class names for isolation; Shadow DOM provides native encapsulation; Vue adds data attribute selectors via the `scoped` attribute; CSS-in-JS generates unique class names at runtime; BEM simulates scoping through naming conventions; preprocessors support nested rules. Scoped styling requires consideration of performance impact, and debugging demands familiarity with transformed class names. Real-world projects often mix global and scoped styles, with different frameworks featuring distinct implementations. Historically, CSS evolved from global styles to modern solutions. Best practices recommend selecting solutions based on project needs, while future trends may introduce native CSS scoping rules.

Conditional rule group

In CSS3, conditional rule groups enhance the adaptability of stylesheets by applying different style rules based on specific conditions. Media queries are the most commonly used conditional rule groups, capable of detecting viewport width, device orientation, resolution, and other parameters. Feature queries check browser support for specific CSS properties to achieve progressive enhancement. Document rules apply styles based on the document URL, but browser support is limited. Conditional rule groups can be nested to create complex logic. Custom media queries allow defining reusable conditions. In practice, they are often used for responsive design breakpoints and high-DPI device optimization, with performance considerations to avoid excessive redundant conditions. Combining them with CSS preprocessors can improve the writing experience. Future developments include container queries and richer feature detection.

Variables and theme switching

CSS3 custom properties (CSS Variables) provide a flexible and efficient solution for theme switching. By defining variables on the root element and modifying their values in different scenarios, dynamic theme switching can be easily achieved without duplicating large amounts of style code. CSS variables start with a double hyphen (--) and are invoked via the `var()` function, supporting default value settings. Modifying root element variable values with JavaScript enables real-time theme switching. The article details foundational usage, dynamic switching implementation, multi-theme management systems, responsive adaptation, performance optimization, animation effects, browser compatibility, component library applications, and user experience considerations. It also explores advanced techniques, including variable grouping management, preprocessor usage, transition animation design, persistent storage, system preference detection, and dynamic theme generation. This comprehensive guide offers developers practical insights into theme-switching implementations.

Attribute selector

The CSS3 attribute selectors provide seven matching patterns through square bracket syntax, including the existence selector to check attribute presence, the equality selector for exact value matching, the inclusion selector for space-separated words, the prefix selector for matching beginnings, the suffix selector for matching endings, the substring selector for matching any position, and the hyphen selector for handling specific formats. These selectors can be combined, support case sensitivity control, and integrate with features like pseudo-classes and CSS variables. They are practically applied in scenarios such as form enhancement, link hints, and image processing. When using them, attention should be paid to performance optimization and browser compatibility. They are also applicable in JavaScript. The CSS4 draft proposes new matching patterns for attribute selectors, significantly improving the precision and flexibility of style control.

Pseudo-classes and pseudo-elements

In CSS, pseudo-classes and pseudo-elements are essential tools for style control. Pseudo-classes, denoted by a single colon, are used to select specific states of an element, such as user interaction states (link, visited, hover, focus) or document structure positions (first-child, nth-child, etc.). Pseudo-elements, denoted by double colons, are used to create virtual elements that do not exist in the DOM, such as inserting content before or after, styling the first letter or line of text, or text selection highlights. Both can be combined to achieve complex effects, such as custom checkboxes, breadcrumb navigation, etc. In practical applications, attention must be paid to performance optimization and browser compatibility. Pseudo-elements must have the `content` property set and are inline by default. Pseudo-classes like `hover` may behave differently on touch devices. Creative applications include gradient underlines, custom list markers, and complex shape creation. Pseudo-elements can also be combined with CSS variables to dynamically generate content. Proper use of these features can enhance visual effects while keeping the code concise.

Counter and list styles

The CSS3 counter feature provides flexible control for numbering list items by initializing counters with `counter-reset`, incrementing values with `counter-increment`, and displaying counts with the `content` property. It supports multi-level nested numbering, list-style-type extensions including custom characters and predefined values like Hebrew numbering or Chinese counting. Combined with multi-column properties, it can create newspaper-style lists. Using `@counter-style` rules, custom counting systems can be fully defined, even enabling animated counting effects. It allows setting appropriate numbering systems for different languages, creating multi-level numbering for legal documents, controlling list-style positioning, and adapting styles responsively based on viewports. Automatic numbering can be added before table rows, and print optimization ensures visibility across page breaks. Understanding counter scopes enables creative markers using CSS gradients and shapes. These techniques offer rich possibilities for web list design.