A property for defining the reset of all properties of an element

a {
+  all: initial;
+}

A pseudo-class for matching anchor elements independent of whether they have been visited

nav :any-link > span {
+  background-color: yellow;
+}

A pseudo-class for matching form elements when they are empty

input:blank {
+  background-color: yellow;
+}

Properties for defining the break behavior between and within boxes

a {
+  break-inside: avoid;
+  break-before: avoid-column;
+  break-after: always;
+}

An attribute selector matching attribute values case-insensitively

[frame=hsides i] {
+  border-style: solid none;
+}

A space and slash separated notation for specifying colors

em {
+  background-color: hsl(120deg 100% 25%);
+  box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);
+  color: rgb(0 255 0);
+}

An at-rule for defining aliases that represent media queries

@custom-media --narrow-window (max-width: 30em);
+
+@media (--narrow-window) {}

A syntax for defining custom values accepted by all CSS properties

img {
+  --some-length: 32px;
+
+  height: var(--some-length);
+  width: var(--some-length);
+}

An at-rule for defining aliases that represent selectors

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
+
+article :--heading + p {}

A pseudo-class for matching elements based on their directionality

blockquote:dir(rtl) {
+  margin-right: 10px;
+}
+
+blockquote:dir(ltr) {
+  margin-left: 10px;
+}

A syntax for using two positions in a gradient.

.pie_chart {
+  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
+}

A syntax for using custom values accepted by CSS globally

@media (max-width: env(--brand-small)) {
+  body {
+    padding: env(--brand-spacing);
+  }
+}

A pseudo-class for matching focused elements that indicate that focus to a user

:focus:not(:focus-visible) {
+  outline: 0;
+}

A pseudo-class for matching elements that are either focused or that have focused descendants

form:focus-within {
+  background: rgba(0, 0, 0, 0.3);
+}

A property for defining the usage of alternate glyphs in a font

h2 {
+  font-variant: small-caps;
+}

Properties for defining gutters within a layout

.grid-1 {
+  gap: 20px;
+}
+
+.grid-2 {
+  column-gap: 40px;
+  row-gap: 20px;
+}

A function for specifying fully desaturated colors

p {
+  color: gray(50);
+}

A 4 & 8 character hex color notation for specifying the opacity level

section {
+  background-color: #f3f3f3f3;
+  color: #0003;
+}

A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it

p {
+  color: hwb(120 44% 50%);
+}

A function for specifying image sources based on the user’s resolution

p {
+  background-image: image-set(
+    "foo.png" 1x,
+    "foo-2x.png" 2x,
+    "foo-print.png" 600dpi
+  );
+}

A function for specifying colors expressed in the CIE Lab color space

body {
+  color: lab(240 50 20);
+}

A function for specifying colors expressed in the CIE Lab color space with chroma and hue

body {
+  color: lch(53 105 40);
+}

Flow-relative (left-to-right or right-to-left) properties and values

span:first-child {
+  float: inline-start;
+  margin-inline-start: 10px;
+}

A pseudo-class for matching elements in a selector list

p:matches(:first-child, .special) {
+  margin-top: 1em;
+}

A syntax for defining media query ranges using ordinary comparison operators

@media (width < 480px) {}
+
+@media (480px <= width < 768px) {}
+
+@media (width >= 768px) {}

A syntax for nesting relative rules within rules

article {
+  & p {
+    color: #333;
+  }
+}

A pseudo-class for ignoring elements in a selector list

p:not(:first-child, .special) {
+  margin-top: 1em;
+}

A property for defining `overflow-x` and `overflow-y`

html {
+  overflow: hidden auto;
+}

A property for defining whether to insert line breaks within words to prevent overflowing

p {
+  overflow-wrap: break-word;
+}

Properties for defining alignment within a layout

.example {
+  place-content: flex-end;
+  place-items: center / space-between;
+  place-self: flex-start / center;
+}

A media query to detect if the user has requested the system use a light or dark color theme

body {
+  background-color: white;
+  color: black;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: black;
+    color: white;
+  }
+}

A particularly lovely shade of purple in memory of Rebecca Alison Meyer

html {
+  color: rebeccapurple;
+}

A generic font used to match the user’s interface

body {
+  font-family: system-ui;
+}