Css Features

Nesting

CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others. Standard CSS selectors can be used, but also the new The & nesting selector.

                
.a {
  /* styles for element with class="a" */
  .b {
    /* styles for element with class="b" which is a descendant of class="a" */
  }
  &.b {
    /* styles for element with class="a b" */
  }
}
                
            

Cascade layers

The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.

                
/* establish a layer order up-front, from lowest to highest priority */
@layer reset, defaults, patterns, components, utilities, overrides;

/* import local stylesheets into a layer */
@import "default.css" layer(defaults);

/* import remote stylesheets into a layer (dot syntax represents nesting) */
@import url('framework.css') layer(components.framework);
                
            

Cross-Document View Transitions

The view transitions that work with @view-transition CSS rule sets. Separate feature from the single-document view transitions.