[
  {
    "title": "Break Properties",
    "description": "Properties for defining the break behavior between and within boxes",
    "specification": "https://www.w3.org/TR/css-break-3/#breaking-controls",
    "specificationId": "break-properties",
    "stage": 4,
    "caniuse": "multicolumn",
    "example": "a {\n  break-inside: avoid;\n  break-before: avoid-column;\n  break-after: always;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/shrpne/postcss-page-break"
      }
    ]
  },
  {
    "title": "Cascade `all` Property",
    "description": "A property for defining the reset of all properties of an element",
    "specification": "https://www.w3.org/TR/css-cascade-3/#all-shorthand",
    "specificationId": "css-cascade-all-shorthand",
    "stage": 4,
    "caniuse": "css-all",
    "example": "a {\n  all: initial;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/maximkoretskiy/postcss-initial"
      }
    ]
  },
  {
    "title": "Color Functional Notation",
    "description": "A space and slash separated notation specifying colors",
    "specification": "https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0",
    "specificationId": "css-color-functional-notation",
    "stage": 2,
    "example": "em {\n  background-color: hsl(120deg 100% 25%);\n  box-shadow: 0 0 0 10px hwb(120deg 100% 25% / 80%);\n  color: rgb(0 255 0);\n}"
  },
  {
    "title": "Color `#RRGGBBAA` Notation",
    "description": "A 4 & 8 character hex notation for color to include the opacity level",
    "specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
    "specificationId": "css-color-hex-notation",
    "stage": 3,
    "caniuse": "css-rrggbbaa",
    "example": "section {\n  background-color: #f3f3f3f3;\n  color: #0003;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-color-hex-alpha"
      }
    ]
  },
  {
    "title": "Color `color-mod()` Function",
    "description": "A function used to modify a color",
    "specification": "https://www.w3.org/TR/css-color-4/#modifying-colors",
    "specificationId": "css-color-modifying-colors",
    "stage": 3,
    "example": "p {\n  color: color-mod(black alpha(50%));\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-color-mod-function"
      }
    ]
  },
  {
    "title": "Color `gray()` Function",
    "description": "A function used to create fully desaturated colors",
    "specification": "https://www.w3.org/TR/css-color-4/#grays",
    "specificationId": "css-color-grays",
    "stage": 3,
    "example": "p {\n  color: gray(red);\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-color-gray"
      }
    ]
  },
  {
    "title": "Color `hwb()` Function",
    "description": "A function used to specify colors, similar to HSL, but often even easier for humans to work with",
    "specification": "https://www.w3.org/TR/css-color-4/#the-hwb-notation",
    "specificationId": "css-color-hwb-notation",
    "stage": 3,
    "example": "p {\n  color: hwb(120, 44%, 50%);\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-color-hwb"
      }
    ]
  },
  {
    "title": "Color `rebeccapurple`",
    "description": "A particularly lovely shade of purple in memory of Rebecca Alison Meyer",
    "specification": "https://www.w3.org/TR/css-color-4/#valdef-color-rebeccapurple",
    "specificationId": "css-color-valdef-color-rebeccapurple",
    "stage": 3,
    "caniuse": "css-rebeccapurple",
    "example": "html {\n  color: rebeccapurple;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-color-rebeccapurple"
      }
    ]
  },
  {
    "title": "Custom Properties",
    "description": "A syntax for defining custom values accepted by all CSS properties",
    "specification": "https://www.w3.org/TR/css-variables-1/",
    "specificationId": "css-variables",
    "stage": 4,
    "caniuse": "css-variables",
    "example": "img {\n  --some-length: 32px;\n\n  height: var(--some-length);\n  width: var(--some-length);\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-custom-properties"
      }
    ]
  },
  {
    "title": "Custom Property Sets",
    "description": "A syntax for storing properties in a named variable, referenceable in other style rules",
    "specification": "https://tabatkins.github.io/specs/css-apply-rule/",
    "specificationId": "css-apply-rule",
    "stage": -1,
    "caniuse": "css-apply-rule",
    "example": "img {\n  --some-length-styles: {\n    height: 32px;\n    width: 32px;\n  };\n\n  @apply --some-length-styles;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/pascalduez/postcss-apply"
      }
    ]
  },
  {
    "title": "Custom Selectors",
    "description": "An at-rule defining aliases representing selectors",
    "specification": "https://drafts.csswg.org/css-extensions/#custom-selectors",
    "specificationId": "css-extensions-custom-selectors",
    "stage": 2,
    "example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-custom-selectors"
      }
    ]
  },
  {
    "title": "Element Queries",
    "description": "A syntax for container-style element queries",
    "specification": "https://tomhodgins.github.io/element-queries-spec/element-queries.html",
    "specificationId": "elementqueries",
    "stage": 0,
    "example": "@element html and (min-width: 500px) {\n  body {\n    background: lime;\n  }\n}",
    "polyfills": [
      {
        "type": "JavaScript Library",
        "link": "https://github.com/eqcss/eqcss"
      }
    ]
  },
  {
    "title": "Font `font-variant` Property",
    "description": "A property defining the usage of alternate glyphs in a font",
    "specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
    "specificationId": "css-fonts-propdef-font-variant",
    "stage": 4,
    "caniuse": "font-variant-alternates",
    "example": "h2 {\n  font-variant-caps: small-caps;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-font-variant"
      }
    ]
  },
  {
    "title": "Font `system-ui` Family",
    "description": "A generic font intended to match the default user interface",
    "specification": "https://www.w3.org/TR/css-fonts-4/#system-ui-def",
    "specificationId": "css-fonts-system-ui-def",
    "stage": 3,
    "caniuse": "font-family-system-ui",
    "example": "body {\n  font-family: system-ui;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/JLHwung/postcss-font-family-system-ui"
      }
    ]
  },
  {
    "title": "Grid Layout",
    "description": "A syntax for using a grid concept to lay out content",
    "specification": "https://www.w3.org/TR/css-grid-1/",
    "specificationId": "css-grid",
    "stage": 4,
    "caniuse": "css-grid",
    "example": "section {\n  display: grid;\n  grid-template-columns: 100px 100px 100px;\n  grid-gap: 10px;\n}"
  },
  {
    "title": "Image `image-set()` Function",
    "description": "A function for delivering the most appropriate image for a user’s device",
    "specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
    "specificationId": "css-images-image-set-notation",
    "stage": 3,
    "caniuse": "css-image-set",
    "example": "p {\n  background-image: image-set(\n    \"foo.png\" 1x,\n    \"foo-2x.png\" 2x,\n    \"foo-print.png\" 600dpi\n  );\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/SuperOl3g/postcss-image-set-polyfill"
      }
    ]
  },
  {
    "title": "Logical Properties and Values",
    "description": "Flow-relative (LTR or RTL) properties and values",
    "specification": "https://www.w3.org/TR/css-logical/",
    "specificationId": "css-logical",
    "stage": 3,
    "caniuse": "css-logical-props",
    "example": "span:first-child {\n  float: inline-start;\n  margin-inline-start: 10px;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-logical-properties"
      }
    ]
  },
  {
    "title": "Media Queries Custom Media Queries",
    "description": "An at-rule defining aliases representing media queries",
    "specification": "https://drafts.csswg.org/mediaqueries-5/#custom-mq",
    "specificationId": "mediaqueries-custom-mq",
    "stage": 2,
    "example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-custom-media"
      }
    ]
  },
  {
    "title": "Media Queries Ranges",
    "description": "A syntax defining media query ranges using ordinary mathematical comparison operators",
    "specification": "https://www.w3.org/TR/mediaqueries-4/#mq-ranges",
    "specificationId": "mediaqueries-mq-ranges",
    "stage": 3,
    "example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-media-minmax"
      }
    ]
  },
  {
    "title": "Media Queries `media()` Function",
    "description": "A function matching media queries within values",
    "specification": "https://jonathantneal.github.io/media-expressions-spec/",
    "specificationId": "media-expressions",
    "stage": 0,
    "example": "p {\n  font-size: media(\n    16px,\n    (min-width:  600px) 20px,\n    (min-width: 1000px) 40px,\n    (min-width: 1400px) 60px\n  );\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-media-fn"
      }
    ]
  },
  {
    "title": "Nesting",
    "description": "A syntax for nesting relative rules inside another",
    "specification": "https://tabatkins.github.io/specs/css-nesting/",
    "specificationId": "css-nesting",
    "stage": 1,
    "example": "article {\n  & p {\n    color: #333;\n  }\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-nesting"
      }
    ]
  },
  {
    "title": "Selector Attribute Case-Sensitivity",
    "description": "An attribute selector matching attribute values case-insensitively",
    "specification": "https://www.w3.org/TR/selectors4/#attribute-case",
    "specificationId": "selectors-attribute-case",
    "stage": 3,
    "caniuse": "css-case-insensitive",
    "example": "[frame=hsides i] {\n  border-style: solid none;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/Semigradsky/postcss-attribute-case-insensitive"
      }
    ]
  },
  {
    "title": "Selector `:any-link` Pseudo-Class",
    "description": "A pseudo-class matching anchor elements independent of whether they have been visited",
    "specification": "https://www.w3.org/TR/selectors4/#the-any-link-pseudo",
    "specificationId": "selectors-any-link-pseudo",
    "stage": 3,
    "caniuse": "css-any-link",
    "example": "nav :any-link > span {\n  background-color: yellow;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-pseudo-class-any-link"
      }
    ]
  },
  {
    "title": "Selector `:dir` Pseudo-Class",
    "description": "A pseudo-class matching elements based on their directionality",
    "specification": "https://www.w3.org/TR/selectors4/#the-dir-pseudo",
    "specificationId": "selectors-dir-pseudo",
    "stage": 3,
    "caniuse": "css-dir-pseudo",
    "example": ".example:dir(rtl) {\n  margin-right: 10px;\n}\n\n.example:dir(ltr) {\n  margin-left: 10px;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-dir-pseudo-class"
      }
    ]
  },
  {
    "title": "Selector `:focus-visible` Focus-Indicated Pseudo-Class",
    "description": "A pseudo-class matching elements with `:focus` that would also make focus evident",
    "specification": "https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo",
    "specificationId": "selectors-focus-visible-pseudo",
    "stage": 3,
    "caniuse": "css-focus-visible",
    "example": ":focus:not(:focus-visible) {\n  outline: 0;\n}",
    "polyfills": [
      {
        "type": "JavaScript Library",
        "link": "https://github.com/WICG/focus-visible"
      },
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-focus-visible"
      }
    ]
  },
  {
    "title": "Selector `:focus-within` Focus Container Pseudo-Class",
    "description": "A pseudo-class matching elements that either themselves match `:focus` or that have descendants which match `:focus`",
    "specification": "https://www.w3.org/TR/selectors-4/#the-focus-within-pseudo",
    "specificationId": "selectors-focus-within-pseudo",
    "stage": 3,
    "caniuse": "css-focus-within",
    "example": "form:focus-within {\n  background: rgba(0, 0, 0, 0.3);\n}",
    "polyfills": [
      {
        "type": "JavaScript Library",
        "link": "https://github.com/jonathantneal/focus-within"
      },
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/jonathantneal/postcss-focus-within"
      }
    ]
  },
  {
    "title": "Selector `:matches()` Matches-Any Pseudo-Class",
    "description": "A pseudo-class matching elements in a selector list",
    "specification": "https://www.w3.org/TR/selectors4/#matches",
    "specificationId": "selectors-matches-pseudo",
    "stage": 3,
    "caniuse": "css-matches-pseudo",
    "example": "p:matches(:first-child, .special) {\n  margin-top: 1em;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-selector-matches"
      }
    ]
  },
  {
    "title": "Selector `:not()` Selector List Negation Pseudo-Class",
    "description": "A pseudo-class ignoring elements in a selector list",
    "specification": "https://www.w3.org/TR/selectors4/#negation",
    "specificationId": "selectors-negation-pseudo",
    "stage": 3,
    "caniuse": "css-not-sel-list",
    "example": "p:not(:first-child, .special) {\n  margin-top: 1em;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/postcss/postcss-selector-not"
      }
    ]
  },
  {
    "title": "Sizing `aspect-ratio` Property",
    "description": "A property for defining the aspect ratio of an element",
    "specification": "https://tomhodgins.github.io/aspect-ratio-spec/aspect-ratio.html",
    "specificationId": "aspect-ratio",
    "stage": 0,
    "example": "div {\n  aspect-ratio: 16/9;\n  width: 200px;\n}",
    "polyfills": [
      {
        "type": "JavaScript Library",
        "link": "https://github.com/tomhodgins/aspect-ratio-spec"
      }
    ]
  },
  {
    "title": "Text `overflow-wrap` Property",
    "description": "A property for defining whether to insert line breaks within words to prevent overflowing",
    "specification": "https://www.w3.org/TR/css-text-3/#overflow-wrap-property",
    "specificationId": "css-text-overflow-wrap-property",
    "stage": 3,
    "caniuse": "wordwrap",
    "example": "p {\n  overflow-wrap: break-word;\n}",
    "polyfills": [
      {
        "type": "PostCSS Plugin",
        "link": "https://github.com/mattdimu/postcss-replace-overflow-wrap"
      }
    ]
  },
  {
    "title": "When/Else Rules",
    "description": "At-rules defining conditional rules and unifying the disparate conditional rules into a single grammar",
    "specification": "https://tabatkins.github.io/specs/css-when-else/",
    "specificationId": "css-when-else",
    "stage": 1,
    "example": "@when media(width >= 640px) and (supports(display: flex) or supports(display: grid)) {\n  /* A */\n} @else media(pointer: coarse) {\n  /* B */\n} @else {\n  /* C */\n}"
  }
]