Timeless CSS gems

The CSS ::view-transition-image-pair pseudo-element is part of the View Transitions API that lets us select the “before-and-after” snapshots in a view transition.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

The CSS ::view-transition-image-new pseudo-element is part of the View Transitions API that lets us select the “new” snapshot that is transitioned to in a view transition.

::view-transition-image-new(*) {
  animation-duration: 700ms;
}

The CSS ::view-transition-image-old pseudo-element is part of the View Transitions API that lets us select the “before” snapshot in a view transition.

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

The CSS :popover-open pseudo-class is part of the Popover API that selects a popover element and styles the popover when it is in its “open” state.

/* Select any open popover */
:popover-open {
  /* Styles */
}

/* Select 

The ::view-transition-group pseudo-element selects one or more containers that group the pieces of an individual view transition.

::view-transition-group(transition-name) {
  animation-timing-function: ease-in-out;
}

See that transition-name identifier in the pseudo-element’s argument? That’s how we can select a particular view transition. View …

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 …