Post by account_disabled on Sept 16, 2023 9:19:35 GMT 1
Cascading Style Sheets (CSS), which appeared in 1996, continues to evolve as an essential part of the web development stack. Like all actively used languages, CSS is constantly releasing new features in response to real-world environments. Due to this rapid pace of development, it is easy for even developers who mainly work with CSS to miss new features. Let's take a look at the most useful new features coming to CSS this year.
ⓒ Getty Image Bank
cascade layer
Cascade layers further refine the Phone Number List specificity of CSS and how inheritance works . It's a bit abstract to understand, but it's also the basics of CSS. A layer is a type of logical space that is embedded into the algorithm that the CSS engine uses to determine which style to apply to an element based on cascading, specificity, and inheritance.
The primary use case for layers is to easily combine multiple style sources into one project. Multiple CSS source libraries can be combined into named themes that do not conflict internally, making it easier for multiple teams to collaborate on large, diverse CSS codebases.
The main syntax added is the @layer rule and related programming elements. Within a style set declared with @layer , all styles are cascaded together. Conflicts that occur on the consuming page are resolved according to the order of imported layers. The specifications for the cascade layer provide the following explanation:
Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other style-related matters, without having to change selectors or specialties within each layer or resolve conflicts between layers by relying on source order. You can reorder the layer cascade in an optional way.
For example, you can define two layer styles: @main and @library . If you import these two, the priority of the styles is determined by the layer import order. Cascade layers allow you to resolve style conflicts at the layer level without having to go into the main layer and resolve conflicts at the style level.
inactive attribute
Currently, most browsers, including Chrome, Edge, and Safari, support inert . It will be added to Firefox 112 in the future. The inert attribute is a global attribute that can be used on any element to indicate that it is not interactive . It has some similarities to the generalized disabled attribute. In fact , inert has the same effect when applied or inherited by a button-like control. The inert attribute also makes the element invisible to assistive technologies such as screen readers. In summary, while previously the active part had to be defined positively, inert allows you to define the inactive part of the user interface negatively.
:has pseudo class
The added :has pseudo-class is interesting in terms of selectors in CSS . As of the time the article was written, all major browsers except Firefox support it, and in the case of Firefox, it can be used by setting layout.css.has-selector.enabled to true. According to
the MDN documentation , :has is “ a method of selecting a parent element or previous sibling element with respect to a referenced element by taking as an argument a list of relative selectors .” Basically : has allows you to select an element that contains other elements. For example, to select all <div> s that contain <span> , you can use the :has selector as shown in <Example 1> . <Example 1> Using :has pseudo-class (Example 1)
div:has(span)
This is quite useful as a way to select elements in a selector chain, but it's not all . For example, as you can see in <Example 2>, you can select all <div>s that have a paragraph immediately after them.
ⓒ Getty Image Bank
cascade layer
Cascade layers further refine the Phone Number List specificity of CSS and how inheritance works . It's a bit abstract to understand, but it's also the basics of CSS. A layer is a type of logical space that is embedded into the algorithm that the CSS engine uses to determine which style to apply to an element based on cascading, specificity, and inheritance.
The primary use case for layers is to easily combine multiple style sources into one project. Multiple CSS source libraries can be combined into named themes that do not conflict internally, making it easier for multiple teams to collaborate on large, diverse CSS codebases.
The main syntax added is the @layer rule and related programming elements. Within a style set declared with @layer , all styles are cascaded together. Conflicts that occur on the consuming page are resolved according to the order of imported layers. The specifications for the cascade layer provide the following explanation:
Authors can create layers to represent element defaults, third-party libraries, themes, components, overrides, and other style-related matters, without having to change selectors or specialties within each layer or resolve conflicts between layers by relying on source order. You can reorder the layer cascade in an optional way.
For example, you can define two layer styles: @main and @library . If you import these two, the priority of the styles is determined by the layer import order. Cascade layers allow you to resolve style conflicts at the layer level without having to go into the main layer and resolve conflicts at the style level.
inactive attribute
Currently, most browsers, including Chrome, Edge, and Safari, support inert . It will be added to Firefox 112 in the future. The inert attribute is a global attribute that can be used on any element to indicate that it is not interactive . It has some similarities to the generalized disabled attribute. In fact , inert has the same effect when applied or inherited by a button-like control. The inert attribute also makes the element invisible to assistive technologies such as screen readers. In summary, while previously the active part had to be defined positively, inert allows you to define the inactive part of the user interface negatively.
:has pseudo class
The added :has pseudo-class is interesting in terms of selectors in CSS . As of the time the article was written, all major browsers except Firefox support it, and in the case of Firefox, it can be used by setting layout.css.has-selector.enabled to true. According to
the MDN documentation , :has is “ a method of selecting a parent element or previous sibling element with respect to a referenced element by taking as an argument a list of relative selectors .” Basically : has allows you to select an element that contains other elements. For example, to select all <div> s that contain <span> , you can use the :has selector as shown in <Example 1> . <Example 1> Using :has pseudo-class (Example 1)
div:has(span)
This is quite useful as a way to select elements in a selector chain, but it's not all . For example, as you can see in <Example 2>, you can select all <div>s that have a paragraph immediately after them.