Demystifying Screen Readers: Accessible Forms & Best Practices

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.

@view-transition {
  navigation: auto;
}

That goes right in your stylesheet and it’s the most basic of basic view transitions. The effect is a cross-fade between two pages.

The Chrome team had initially released a meta tag we could …

:where(ul, li, menu) {
  list-style: "";
}

The more “correct” approach is to set list-style to none but that has a latent consequence of Safari no longer recognizing the element as a proper list, semantically speaking. We could fix …