CSS Container Queries

The CSS ::view-transition pseudo-element is the top-level — or “root” — containing all animated transitions defined as CSS view transitions on the page.

::view-transition {
  position: fixed;
  inset: 0;
}

The :defined pseudo-class selector is part of CSS Selectors Level 4 specification allowing you to target custom elements created with the Web Components API and defined in JavaScript. Also, this selector matches any standard element built into the browser.…

The CSS ::details-content pseudo-element provides a way to select and apply styles to the inner parts of a <details> element without leaking styles to the <summary>.

details::details-content {
  background-color: hsl(0 0% 0%);
}

<element-selector::details-content {}

We say …

Declaring the CSS anchor-name property on an element registers it as an “anchor” that we can use to position as a reference for positioning other elements.

.anchor {
  anchor-name: --my-anchor;
}

The property is one part of CSS Anchor Positioning, …

The CSS view-timeline-name property allows us to identify and reference an element we want to animate based on its scroll position when it enters the visible area (i.e., scrollport) of a scroll container (also called the “source”).

.element {
  view-timeline-name: 

The CSS view-transition-name property uniquely identifies an element that can be used in a view transition.

card {
  view-transition-name: card-transition;
}

We give the element a name (i.e., <custom-ident) that we reference or set the property to none to …

The CSS container property is a shorthand that combines the container-name and container-type properties into a single declaration.

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

The container property is a …

The CSS container-type property is part of the Container Queries feature used to register an element as a container that can apply styles to other elements when it meets certain conditions.

.parent {
  container-type: inline-size;
}

@container (width < 500px) 

The CSS container-name property is used to register an element as a container that applies styles to other elements based on the container’s size and styles.

.parent {
  container-name: cards;
  container-type: inline-size;
}

@container cards (width 800px) {
  .child {
    

/* Case sensitive */
a[href*='css-tricks' s] {}

/* Case insensitive */
a[href*='css-tricks' i] {}

Adding an s makes the selector case-sensitive and i makes it case-insensitive.