cssdb
Version:
A comprehensive list of CSS features and their positions in the process of becoming implemented web standards
1,604 lines • 72.1 kB
JavaScript
export default [
{
"id": "all-property",
"title": "`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",
"stage": 4,
"browser_support": {
"and_chr": "37",
"and_ff": "27",
"android": "37",
"chrome": "37",
"edge": "79",
"firefox": "27",
"ios_saf": "9.3",
"oculus": "5.0",
"op_mob": "24",
"opera": "24",
"safari": "9.1",
"samsung": "3.0",
"webview_ios": "9.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/all"
},
"example": "a {\n all: initial;\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/maximkoretskiy/postcss-initial"
}
],
"vendors_implementations": 3
},
{
"id": "any-link-pseudo-class",
"title": "`:any-link` Hyperlink Pseudo-Class",
"description": "A pseudo-class for matching anchor elements independent of whether they have been visited",
"specification": "https://www.w3.org/TR/selectors-4/#any-link-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "18",
"and_ff": "4",
"android": "37",
"chrome": "1",
"edge": "79",
"firefox": "1",
"ios_saf": "1",
"oculus": "5.0",
"op_mob": "14",
"opera": "15",
"safari": "3",
"samsung": "1.0",
"webview_ios": "1"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link"
},
"example": "nav :any-link > span {\n background-color: yellow;\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-pseudo-class-any-link"
}
],
"vendors_implementations": 3
},
{
"id": "blank-pseudo-class",
"title": "`:blank` Empty-Value Pseudo-Class",
"description": "A pseudo-class for matching form elements when they are empty",
"specification": "https://www.w3.org/TR/selectors-4/#blank",
"stage": 2,
"browser_support": {},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:blank"
},
"example": "input:blank {\n background-color: yellow;\n}",
"polyfills": [
{
"type": "JavaScript Library",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo"
},
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo"
}
],
"vendors_implementations": 0
},
{
"id": "break-properties",
"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",
"stage": 3,
"browser_support": {
"and_chr": "51",
"and_ff": "92",
"android": "51",
"chrome": "51",
"edge": "12",
"firefox": "92",
"oculus": "5.0",
"op_mob": "37",
"opera": "11.1",
"samsung": "5.0"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/break-after"
},
"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"
}
],
"vendors_implementations": 2
},
{
"id": "calc-constants",
"title": "`e`, `pi`, `infinity`, `-infinity` and `NaN` constants for calculation",
"description": "Constants for calculation simplification",
"specification": "https://drafts.csswg.org/css-values-4/#calc-keywords",
"stage": 2,
"browser_support": {
"and_chr": "110",
"and_ff": "114",
"android": "110",
"chrome": "110",
"edge": "110",
"firefox": "114",
"ios_saf": "16",
"op_mob": "74",
"opera": "96",
"safari": "16",
"samsung": "21.0",
"webview_ios": "16"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/calc-keyword"
},
"example": "p {\n font-size: calc(pow(e, pi) * 1rem);\n}",
"interoperable_at": 1686009600,
"vendors_implementations": 3
},
{
"id": "cascade-layers",
"title": "CSS Cascade Layers",
"description": "The `@layer` at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.",
"specification": "https://www.w3.org/TR/css-cascade-5/#layering",
"stage": 2,
"browser_support": {
"and_chr": "99",
"and_ff": "97",
"android": "99",
"chrome": "99",
"edge": "99",
"firefox": "97",
"ios_saf": "15.4",
"oculus": "21.0",
"op_mob": "68",
"opera": "85",
"safari": "15.4",
"samsung": "18.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@layer"
},
"example": "/* Un-layered styles have the highest priority */\na {\n color: mediumvioletred;\n}\n\n@layer defaults {\n a { color: maroon; }\n}",
"interoperable_at": 1647216000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers"
}
],
"vendors_implementations": 3,
"web-feature": "cascade-layers"
},
{
"id": "case-insensitive-attributes",
"title": "Case-Insensitive Attributes",
"description": "An attribute selector matching attribute values case-insensitively",
"specification": "https://www.w3.org/TR/selectors-4/#attribute-case",
"stage": 2,
"browser_support": {
"and_chr": "49",
"and_ff": "47",
"android": "49",
"chrome": "49",
"edge": "79",
"firefox": "47",
"ios_saf": "9",
"oculus": "5.0",
"op_mob": "36",
"opera": "36",
"safari": "9",
"samsung": "5.0",
"webview_ios": "9"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors"
},
"example": "[frame=hsides i] {\n border-style: solid none;\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-attribute-case-insensitive"
}
],
"vendors_implementations": 3
},
{
"id": "clamp",
"title": "`clamp` Function",
"description": "The clamp() CSS function clamps a value between an upper and lower bound. It enables selecting a middle value within a range of values between a defined minimum and maximum.",
"specification": "https://www.w3.org/TR/css-values-4/#funcdef-clamp",
"stage": 2,
"browser_support": {
"and_chr": "79",
"and_ff": "79",
"android": "79",
"chrome": "79",
"edge": "79",
"firefox": "75",
"ios_saf": "13.4",
"oculus": "8.0",
"op_mob": "57",
"opera": "66",
"safari": "13.1",
"samsung": "12.0",
"webview_ios": "13.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/clamp"
},
"example": "button {\n font-size: clamp(1rem, 2.5vw, 2rem);\n}",
"interoperable_at": 1595894400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/polemius/postcss-clamp"
}
],
"vendors_implementations": 3
},
{
"id": "color-adjust",
"title": "`color-adjust` Property",
"description": "The color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images",
"specification": "https://www.w3.org/TR/css-color-4/#color-adjust",
"stage": 2,
"browser_support": {
"and_ff": "97",
"firefox": "97",
"ios_saf": "15.4",
"safari": "15.4",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust"
},
"example": ".background {\n background-color:#ccc;\n}\n.background.color-adjust {\n color-adjust: economy;\n}\n.background.color-adjust-exact {\n color-adjust: exact;\n}",
"vendors_implementations": 2
},
{
"id": "color-function",
"title": "`color()` Function",
"description": "A function that allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in.",
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-color",
"stage": 2,
"browser_support": {
"and_chr": "111",
"and_ff": "113",
"android": "111",
"chrome": "111",
"edge": "111",
"firefox": "113",
"ios_saf": "15",
"op_mob": "75",
"opera": "97",
"safari": "15",
"samsung": "22.0",
"webview_ios": "15"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color"
},
"example": "p {\n color: color(display-p3 1 0.5 0);\n color: color(display-p3 1 0.5 0 / .5);\n}",
"interoperable_at": 1683590400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-function"
}
],
"vendors_implementations": 3,
"web-feature": "color-function"
},
{
"id": "color-functional-notation",
"title": "Color Functional Notation",
"description": "A space and slash separated notation for specifying colors",
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-rgb",
"stage": 2,
"browser_support": {
"and_chr": "65",
"and_ff": "52",
"android": "65",
"chrome": "65",
"edge": "79",
"firefox": "52",
"ios_saf": "12.2",
"oculus": "5.0",
"op_mob": "47",
"opera": "52",
"safari": "12.1",
"samsung": "9.0",
"webview_ios": "12.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb#syntax"
},
"example": "em {\n background-color: hsl(120deg 100% 25%);\n color: rgb(0 255 0);\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation"
}
],
"vendors_implementations": 3
},
{
"id": "color-mix",
"title": "`color-mix()` Function",
"description": "A function for mixing colors",
"specification": "https://www.w3.org/TR/css-color-5/#color-mix",
"stage": 2,
"browser_support": {
"and_chr": "111",
"and_ff": "113",
"android": "111",
"chrome": "111",
"edge": "111",
"firefox": "113",
"ios_saf": "16.2",
"op_mob": "75",
"opera": "97",
"safari": "16.2",
"samsung": "22.0",
"webview_ios": "16.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix"
},
"example": "p {\n color: color-mix(in lch, purple 50%, plum 50%);\n}",
"interoperable_at": 1683590400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-mix-function"
}
],
"vendors_implementations": 3,
"web-feature": "color-mix"
},
{
"id": "container-queries",
"title": "Container Queries",
"description": "New container property and container at rule to make changes depending on the container's size",
"specification": "https://www.w3.org/TR/css-contain-3/#container-queries",
"stage": 2,
"browser_support": {
"and_chr": "105",
"and_ff": "110",
"android": "105",
"chrome": "105",
"edge": "105",
"firefox": "110",
"ios_saf": "16",
"op_mob": "72",
"opera": "91",
"safari": "16",
"samsung": "20.0",
"webview_ios": "16"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"
},
"example": ".container {\n contain: layout inline-size;\n}\n\n@container (min-width: 700px) {\n .container {\n /* styles applied when a container is at least 700px */\n }\n}",
"interoperable_at": 1676332800,
"polyfills": [
{
"type": "JavaScript Library",
"link": "https://www.npmjs.com/package/container-query-polyfill"
}
],
"vendors_implementations": 3,
"web-feature": "container-queries"
},
{
"id": "content-alt-text",
"title": "Alt text for `content`",
"description": "Syntax that allows setting alternative text",
"specification": "https://drafts.csswg.org/css-content/#content-property",
"stage": 2,
"browser_support": {
"and_chr": "77",
"and_ff": "128",
"android": "77",
"chrome": "77",
"edge": "79",
"firefox": "128",
"ios_saf": "17.4",
"oculus": "7.0",
"op_mob": "55",
"opera": "64",
"safari": "17.4",
"samsung": "12.0",
"webview_ios": "17.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/content#adding_an_image_with_alternative_text"
},
"example": ".element {\n content: url(tree.jpg) / \"image with a tree\";\n}",
"interoperable_at": 1720483200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-content-alt-text"
}
],
"vendors_implementations": 3
},
{
"id": "contrast-color-function",
"title": "`contrast-color()` Function",
"description": "Dynamically specifying a text color with adequate contrast.",
"specification": "https://drafts.csswg.org/css-color-5/#contrast-color",
"stage": 2,
"browser_support": {},
"docs": {},
"example": "p {\n color: contrast-color( purple max );\n}",
"polyfills": [],
"vendors_implementations": 0
},
{
"id": "custom-media-queries",
"title": "Custom Media Queries",
"description": "An at-rule for defining aliases that represent media queries",
"specification": "https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media",
"stage": 2,
"browser_support": {},
"example": "@custom-media --narrow-window (max-width: 30em);\n\n@media (--narrow-window) {}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media"
}
],
"vendors_implementations": 0
},
{
"id": "custom-properties",
"title": "Custom Properties",
"description": "A syntax for defining custom values accepted by all CSS properties",
"specification": "https://www.w3.org/TR/css-variables-1/",
"stage": 3,
"browser_support": {
"and_chr": "49",
"and_ff": "31",
"android": "50",
"chrome": "49",
"edge": "15",
"firefox": "31",
"ios_saf": "9.3",
"oculus": "5.0",
"op_mob": "36",
"opera": "36",
"safari": "9.1",
"samsung": "5.0",
"webview_ios": "9.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/var"
},
"example": ":root {\n --some-length: 32px;\n\n height: var(--some-length);\n width: var(--some-length);\n}",
"interoperable_at": 1491350400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-properties"
}
],
"vendors_implementations": 3,
"web-feature": "custom-properties"
},
{
"id": "custom-selectors",
"title": "Custom Selectors",
"description": "An at-rule for defining aliases that represent selectors",
"specification": "https://drafts.csswg.org/css-extensions/#custom-selectors",
"stage": 1,
"browser_support": {},
"example": "@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\narticle :--heading + p {}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-selectors"
}
],
"vendors_implementations": 0
},
{
"id": "dir-pseudo-class",
"title": "`:dir` Directionality Pseudo-Class",
"description": "A pseudo-class for matching elements based on their directionality",
"specification": "https://www.w3.org/TR/selectors-4/#dir-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "120",
"and_ff": "49",
"android": "120",
"chrome": "120",
"edge": "120",
"firefox": "49",
"ios_saf": "16.4",
"op_mob": "80",
"opera": "106",
"safari": "16.4",
"samsung": "25.0",
"webview_ios": "16.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"
},
"example": "blockquote:dir(rtl) {\n margin-right: 10px;\n}\n\nblockquote:dir(ltr) {\n margin-left: 10px;\n}",
"interoperable_at": 1701907200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-dir-pseudo-class"
}
],
"vendors_implementations": 3
},
{
"id": "display-two-values",
"title": "Two values syntax for `display`",
"description": "Syntax that allows definition of outer and inner displays types for an element",
"specification": "https://www.w3.org/TR/css-display-3/#the-display-properties",
"stage": 2,
"browser_support": {
"and_chr": "115",
"and_ff": "79",
"android": "115",
"chrome": "115",
"edge": "115",
"firefox": "70",
"ios_saf": "15",
"op_mob": "77",
"opera": "101",
"safari": "15",
"samsung": "23.0",
"webview_ios": "15"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/multi-keyword_syntax_of_display"
},
"example": ".element {\n display: inline flow-root;\n display: inline flex;\n display: block grid;\n}",
"interoperable_at": 1689897600,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-normalize-display-values"
}
],
"vendors_implementations": 3
},
{
"id": "double-position-gradients",
"title": "Double Position Gradients",
"description": "A syntax for using two positions in a gradient.",
"specification": "https://www.w3.org/TR/css-images-4/#color-stop-syntax",
"stage": 2,
"browser_support": {
"and_chr": "72",
"and_ff": "83",
"android": "72",
"chrome": "72",
"edge": "79",
"firefox": "83",
"ios_saf": "12.2",
"oculus": "6.0",
"op_mob": "51",
"opera": "60",
"safari": "12.1",
"samsung": "11.0",
"webview_ios": "12.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient"
},
"example": ".pie_chart {\n background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
"interoperable_at": 1605571200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-double-position-gradients"
}
],
"vendors_implementations": 3
},
{
"id": "environment-variables",
"title": "Custom Environment Variables",
"description": "A syntax for using custom values accepted by CSS globally",
"specification": "https://drafts.csswg.org/css-env-1/",
"stage": 0,
"browser_support": {},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/env"
},
"example": "@media (max-width: env(--brand-small)) {\n body {\n padding: env(--brand-spacing);\n }\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-env-function"
}
],
"vendors_implementations": 0
},
{
"id": "exponential-functions",
"title": "`pow()`, `sqrt()`, `hypot()`, `log()`, `exp()` exponential functions",
"description": "Compute various exponential functions with their arguments",
"specification": "https://www.w3.org/TR/css-values-4/#exponent-funcs",
"stage": 2,
"browser_support": {
"and_chr": "120",
"and_ff": "118",
"android": "120",
"chrome": "120",
"edge": "120",
"firefox": "118",
"ios_saf": "15.4",
"op_mob": "80",
"opera": "106",
"safari": "15.4",
"samsung": "25.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/exp"
},
"example": "p {\n font-size: calc(pow(10, 12) * 1rem);\n font-size: calc(sqrt(100) * 1rem);\n font-size: calc(hypot(3, 4) * 1rem);\n font-size: calc(log(10) * 1rem);\n font-size: calc(exp(10) * 1rem);\n}",
"interoperable_at": 1701907200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-exponential-functions"
}
],
"vendors_implementations": 3
},
{
"id": "fangsong-font-family",
"title": "`fangsong` Font Family",
"description": "A generic font used for Fang Song (仿宋) typefaces in Chinese",
"specification": "https://www.w3.org/TR/css-fonts-4/#fangsong-def",
"stage": 2,
"browser_support": {},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Syntax"
},
"example": "body {\n font-family: fangsong;\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/JLHwung/postcss-font-family-fangsong"
}
],
"vendors_implementations": 0
},
{
"id": "float-clear-logical-values",
"title": "Logical Values in float and clear",
"description": "Flow-relative (inline-start and inline-end) values for float and clear",
"specification": "https://www.w3.org/TR/css-logical-1/",
"stage": 2,
"browser_support": {
"and_chr": "118",
"and_ff": "55",
"android": "118",
"chrome": "118",
"edge": "118",
"firefox": "55",
"ios_saf": "15",
"op_mob": "79",
"opera": "104",
"safari": "15",
"samsung": "25.0",
"webview_ios": "15"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/float"
},
"example": "span:first-child {\n float: inline-start;\n}",
"interoperable_at": 1697155200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-float-and-clear"
}
],
"vendors_implementations": 3
},
{
"id": "focus-visible-pseudo-class",
"title": "`:focus-visible` Focus-Indicated Pseudo-Class",
"description": "A pseudo-class for matching focused elements that indicate that focus to a user",
"specification": "https://www.w3.org/TR/selectors-4/#focus-visible-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "86",
"and_ff": "85",
"android": "86",
"chrome": "86",
"edge": "86",
"firefox": "85",
"ios_saf": "15.4",
"oculus": "12.0",
"op_mob": "61",
"opera": "72",
"safari": "15.4",
"samsung": "14.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"
},
"example": ":focus:not(:focus-visible) {\n outline: 0;\n}",
"interoperable_at": 1647216000,
"polyfills": [
{
"type": "JavaScript Library",
"link": "https://github.com/WICG/focus-visible"
},
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-visible"
}
],
"vendors_implementations": 3,
"web-feature": "focus-visible"
},
{
"id": "focus-within-pseudo-class",
"title": "`:focus-within` Focus Container Pseudo-Class",
"description": "A pseudo-class for matching elements that are either focused or that have focused descendants",
"specification": "https://www.w3.org/TR/selectors-4/#focus-within-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "60",
"and_ff": "52",
"android": "60",
"chrome": "60",
"edge": "79",
"firefox": "52",
"ios_saf": "10.3",
"oculus": "5.0",
"op_mob": "44",
"opera": "47",
"safari": "10.1",
"samsung": "8.0",
"webview_ios": "10.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within"
},
"example": "form:focus-within {\n background: rgb(0 128 0);\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "JavaScript Library",
"link": "https://github.com/jsxtools/focus-within"
},
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-focus-within"
}
],
"vendors_implementations": 3
},
{
"id": "font-format-keywords",
"title": "Font `format()` Keywords",
"description": "A syntax for specifying font format as a keyword in `@font-face` rule’s `format()` function",
"specification": "https://www.w3.org/TR/css-fonts-4/#font-format-values",
"stage": 2,
"browser_support": {
"and_chr": "108",
"android": "108",
"chrome": "108",
"edge": "108",
"ios_saf": "5",
"op_mob": "73",
"opera": "94",
"safari": "4",
"samsung": "21.0",
"webview_ios": "5"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"
},
"example": "@font-face {\n src: url(file.woff2) format(woff2);\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/valtlai/postcss-font-format-keywords"
}
],
"vendors_implementations": 2
},
{
"id": "font-variant-property",
"title": "`font-variant` Property",
"description": "A property for defining the usage of alternate glyphs in a font",
"specification": "https://www.w3.org/TR/css-fonts-3/#propdef-font-variant",
"stage": 4,
"browser_support": {
"and_ff": "34",
"firefox": "34",
"ios_saf": "9.3",
"safari": "9.1",
"webview_ios": "9.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant"
},
"example": "h2 {\n font-variant: small-caps;\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/postcss/postcss-font-variant"
}
],
"vendors_implementations": 2
},
{
"id": "gamut-mapping",
"title": "Gamut mapping for CSS color functions",
"description": "Gamut map css colors to fit display specific gamuts.",
"specification": "https://www.w3.org/TR/css-color-4/#gamut-mapping",
"stage": 2,
"browser_support": {},
"example": "@media (color-gamut: rec2020) {\n\tp {\n\t\tcolor: oklch(40% 0.234 0.39 / 0.5);\n\t}\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gamut-mapping"
}
],
"vendors_implementations": 0
},
{
"id": "gap-properties",
"title": "Gap Properties",
"description": "Properties for defining gutters within a layout",
"specification": "https://www.w3.org/TR/css-grid-1/#gutters",
"stage": 3,
"browser_support": {
"and_chr": "66",
"and_ff": "61",
"android": "66",
"chrome": "66",
"edge": "16",
"firefox": "61",
"ios_saf": "12",
"oculus": "5.0",
"op_mob": "47",
"opera": "53",
"safari": "12",
"samsung": "9.0",
"webview_ios": "12"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gap"
},
"example": ".grid-1 {\n gap: 20px;\n}\n\n.grid-2 {\n column-gap: 40px;\n row-gap: 20px;\n}",
"interoperable_at": 1537142400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gap-properties"
}
],
"vendors_implementations": 3
},
{
"id": "gradients-interpolation-method",
"title": "Gradients Interpolation Method",
"description": "Define the interpolation method for gradients",
"specification": "https://www.w3.org/TR/css-images-4/#color-interpolation",
"stage": 2,
"browser_support": {
"and_chr": "111",
"and_ff": "127",
"android": "111",
"chrome": "111",
"edge": "111",
"firefox": "127",
"ios_saf": "16.2",
"op_mob": "75",
"opera": "97",
"safari": "16.2",
"samsung": "22.0",
"webview_ios": "16.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#syntax"
},
"example": ".pie_chart {\n background-image: conic-gradient(in oklch, yellowgreen 40%, gold 0deg 75%, #f06 0deg);\n}",
"interoperable_at": 1718064000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-gradients-interpolation-method"
}
],
"vendors_implementations": 3
},
{
"id": "grid-layout",
"title": "Grid Layout",
"description": "A syntax for using a grid concept to lay out content",
"specification": "https://www.w3.org/TR/css-grid-1/",
"stage": 3,
"browser_support": {
"and_chr": "57",
"and_ff": "52",
"android": "57",
"chrome": "57",
"edge": "16",
"firefox": "52",
"ios_saf": "10.3",
"oculus": "5.0",
"op_mob": "43",
"opera": "44",
"safari": "10.1",
"samsung": "6.0",
"webview_ios": "10.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/grid"
},
"example": "section {\n display: grid;\n grid-template-columns: 100px 100px 100px;\n grid-gap: 10px;\n}",
"interoperable_at": 1508198400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/postcss/autoprefixer"
}
],
"vendors_implementations": 3
},
{
"id": "has-pseudo-class",
"title": "`:has()` Relational Pseudo-Class",
"description": "A pseudo-class for matching ancestor and sibling elements",
"specification": "https://www.w3.org/TR/selectors-4/#has-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "105",
"and_ff": "121",
"android": "105",
"chrome": "105",
"edge": "105",
"firefox": "121",
"ios_saf": "15.4",
"op_mob": "72",
"opera": "91",
"safari": "15.4",
"samsung": "20.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
},
"example": "a:has(> img) {\n display: block;\n}",
"interoperable_at": 1702944000,
"polyfills": [
{
"type": "JavaScript Library",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
},
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/css-has-pseudo"
}
],
"vendors_implementations": 3,
"web-feature": "has"
},
{
"id": "hexadecimal-alpha-notation",
"title": "Hexadecimal Alpha Notation",
"description": "A 4 & 8 character hex color notation for specifying the opacity level",
"specification": "https://www.w3.org/TR/css-color-4/#hex-notation",
"stage": 2,
"browser_support": {
"and_chr": "62",
"and_ff": "49",
"android": "62",
"chrome": "62",
"edge": "79",
"firefox": "49",
"ios_saf": "9.3",
"oculus": "5.0",
"op_mob": "47",
"opera": "49",
"safari": "10",
"samsung": "8.0",
"webview_ios": "9.3"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Syntax_2"
},
"example": "section {\n background-color: #f3f3f3f3;\n color: #0003;\n}",
"interoperable_at": 1579046400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-hex-alpha"
}
],
"vendors_implementations": 3
},
{
"id": "hwb-function",
"title": "`hwb()` Function",
"description": "A function for specifying colors by hue and then a degree of whiteness and blackness to mix into it",
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-hwb",
"stage": 2,
"browser_support": {
"and_chr": "101",
"and_ff": "96",
"android": "101",
"chrome": "101",
"edge": "101",
"firefox": "96",
"ios_saf": "15",
"oculus": "22.0",
"op_mob": "70",
"opera": "87",
"safari": "15",
"samsung": "19.0",
"webview_ios": "15"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb"
},
"example": "p {\n color: hwb(120 44% 50%);\n}",
"interoperable_at": 1651104000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function"
}
],
"vendors_implementations": 3
},
{
"id": "ic-unit",
"title": "`ic` length unit",
"description": "Equal to the used advance measure of the \"水\" (CJK water ideograph, U+6C34) glyph found in the font used to render it",
"specification": "https://www.w3.org/TR/css-values-4/#ic",
"stage": 2,
"browser_support": {
"and_chr": "106",
"and_ff": "97",
"android": "106",
"chrome": "106",
"edge": "106",
"firefox": "97",
"ios_saf": "15.4",
"op_mob": "72",
"opera": "92",
"safari": "15.4",
"samsung": "20.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#dimensions"
},
"example": "p {\n text-indent: 2ic;\n}",
"interoperable_at": 1664755200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-ic-unit"
}
],
"vendors_implementations": 3,
"web-feature": "ic"
},
{
"id": "image-set-function",
"title": "`image-set()` Function",
"description": "A function for specifying image sources based on the user’s resolution",
"specification": "https://www.w3.org/TR/css-images-4/#image-set-notation",
"stage": 2,
"browser_support": {
"and_chr": "25",
"and_ff": "89",
"android": "4.4",
"chrome": "21",
"edge": "79",
"firefox": "89",
"ios_saf": "14",
"oculus": "5.0",
"op_mob": "14",
"opera": "15",
"safari": "14",
"samsung": "1.5",
"webview_ios": "17"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/image/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}",
"interoperable_at": 1622505600,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function"
}
],
"vendors_implementations": 3
},
{
"id": "in-out-of-range-pseudo-class",
"title": "`:in-range` and `:out-of-range` Pseudo-Classes",
"description": "A pseudo-class for matching elements that have range limitations",
"specification": "https://www.w3.org/TR/selectors-4/#range-pseudos",
"stage": 2,
"browser_support": {
"and_chr": "18",
"and_ff": "16",
"android": "2.2",
"chrome": "10",
"edge": "13",
"firefox": "29",
"ios_saf": "5",
"oculus": "5.0",
"op_mob": "11",
"opera": "11",
"safari": "5.1",
"samsung": "1.0",
"webview_ios": "5"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range"
},
"example": "input:in-range {\n background-color: rgb(0 255 0 / 0.25);\n}\ninput:out-of-range {\n background-color: rgb(255 0 0 / 0.25);\n border: 2px solid red;\n}",
"interoperable_at": 1447286400,
"vendors_implementations": 3
},
{
"id": "is-pseudo-class",
"title": "`:is()` Matches-Any Pseudo-Class",
"description": "A pseudo-class for matching elements in a selector list",
"specification": "https://www.w3.org/TR/selectors-4/#matches-pseudo",
"stage": 2,
"browser_support": {
"and_chr": "88",
"and_ff": "82",
"android": "88",
"chrome": "88",
"edge": "88",
"firefox": "82",
"ios_saf": "14",
"oculus": "14.0",
"op_mob": "63",
"opera": "74",
"safari": "14",
"samsung": "15.0",
"webview_ios": "14"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/:is"
},
"example": "p:is(:first-child, .special) {\n margin-top: 1em;\n}",
"interoperable_at": 1611187200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-is-pseudo-class"
}
],
"vendors_implementations": 3,
"web-feature": "is"
},
{
"id": "lab-function",
"title": "`lab()` Function",
"description": "A function for specifying colors expressed in the CIE Lab color space",
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-lab",
"stage": 2,
"browser_support": {
"and_chr": "116",
"and_ff": "113",
"android": "116",
"chrome": "116",
"edge": "116",
"firefox": "113",
"ios_saf": "16.2",
"op_mob": "78",
"opera": "102",
"safari": "16.2",
"samsung": "24.0",
"webview_ios": "16.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lab"
},
"example": "body {\n color: lab(80% 50 20);\n}",
"interoperable_at": 1692576000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function"
}
],
"vendors_implementations": 3,
"web-feature": "lab"
},
{
"id": "lch-function",
"title": "`lch()` Function",
"description": "A function for specifying colors expressed in the CIE Lab color space with chroma and hue",
"specification": "https://www.w3.org/TR/css-color-4/#funcdef-lch",
"stage": 2,
"browser_support": {
"and_chr": "116",
"and_ff": "113",
"android": "116",
"chrome": "116",
"edge": "116",
"firefox": "113",
"ios_saf": "16.2",
"op_mob": "78",
"opera": "102",
"safari": "16.2",
"samsung": "24.0",
"webview_ios": "16.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/lch"
},
"example": "body {\n color: lch(53% 105 40);\n}",
"interoperable_at": 1692576000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-lab-function"
}
],
"vendors_implementations": 3,
"web-feature": "lab"
},
{
"id": "light-dark-function",
"title": "`light-dark()` Function",
"description": "React to the current used `color-scheme` value",
"specification": "https://drafts.csswg.org/css-color-5/#light-dark",
"stage": 2,
"browser_support": {
"and_chr": "123",
"and_ff": "120",
"android": "123",
"chrome": "123",
"edge": "123",
"firefox": "120",
"ios_saf": "17.5",
"op_mob": "82",
"opera": "109",
"safari": "17.5",
"samsung": "27.0",
"webview_ios": "17.5"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark"
},
"example": "body {\n color: light-dark(cyan, magenta);\n}",
"interoperable_at": 1715558400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function"
}
],
"vendors_implementations": 3
},
{
"id": "logical-overflow",
"title": "Logical Overflow",
"description": "Flow-relative `overflow` properties",
"specification": "https://www.w3.org/TR/css-overflow-3/#overflow-control",
"stage": 2,
"browser_support": {
"and_chr": "135",
"and_ff": "79",
"android": "135",
"chrome": "135",
"edge": "135",
"firefox": "69"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-block"
},
"example": "div {\n overflow-block: scroll;\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overflow"
}
],
"vendors_implementations": 2
},
{
"id": "logical-overscroll-behavior",
"title": "Logical Overscroll Behavior",
"description": "Flow-relative `overscroll-behavior` properties",
"specification": "https://www.w3.org/TR/css-overscroll-1/#overscroll-behavior-longhands-logical",
"stage": 2,
"browser_support": {
"and_chr": "77",
"and_ff": "79",
"android": "77",
"chrome": "77",
"edge": "79",
"firefox": "73",
"ios_saf": "16",
"oculus": "7.0",
"op_mob": "55",
"opera": "64",
"safari": "16",
"samsung": "12.0",
"webview_ios": "16"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-block"
},
"example": "div {\n overscroll-behavior-block: scroll;\n}",
"interoperable_at": 1662940800,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-overscroll-behavior"
}
],
"vendors_implementations": 3
},
{
"id": "logical-properties-and-values",
"title": "Logical Properties and Values",
"description": "Flow-relative (left-to-right or right-to-left) properties and values",
"specification": "https://www.w3.org/TR/css-logical-1/",
"stage": 2,
"browser_support": {
"and_chr": "89",
"and_ff": "66",
"android": "89",
"chrome": "89",
"edge": "89",
"firefox": "66",
"ios_saf": "15",
"oculus": "15.0",
"op_mob": "63",
"opera": "75",
"safari": "15",
"samsung": "15.0",
"webview_ios": "15"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values"
},
"example": "span:first-child {\n margin-inline-start: 10px;\n}",
"interoperable_at": 1632096000,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical"
}
],
"vendors_implementations": 3
},
{
"id": "logical-resize",
"title": "Logical values in the `resize` property",
"description": "Flow-relative (block or inline) values in resize",
"specification": "https://www.w3.org/TR/css-logical-1/",
"stage": 2,
"browser_support": {
"and_chr": "118",
"and_ff": "63",
"android": "118",
"chrome": "118",
"edge": "118",
"firefox": "63",
"op_mob": "79",
"opera": "104",
"safari": "16",
"samsung": "25.0"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/resize"
},
"example": "area {\n resize: inline;\n}",
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-resize"
}
],
"vendors_implementations": 2
},
{
"id": "logical-viewport-units",
"title": "Logical Viewport Units",
"description": "Flow-relative (horizontal or vertical) Viewport Units",
"specification": "https://www.w3.org/TR/css-values-4/#viewport-relative-units",
"stage": 2,
"browser_support": {
"and_chr": "108",
"and_ff": "101",
"android": "108",
"chrome": "108",
"edge": "108",
"firefox": "101",
"ios_saf": "15.4",
"op_mob": "73",
"opera": "94",
"safari": "15.4",
"samsung": "21.0",
"webview_ios": "15.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/length#vb"
},
"example": "span:first-child {\n width: 5vi; height: 10vb; \n}",
"interoperable_at": 1670198400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical-viewport-units"
}
],
"vendors_implementations": 3,
"web-feature": "viewport-unit-variants"
},
{
"id": "media-queries-aspect-ratio-number-values",
"title": "Aspect-Ratio number values",
"description": "Support `<ratio>` values with `<number>` components in `@media`",
"specification": "https://www.w3.org/TR/css-values-4/#ratio-value",
"stage": 2,
"browser_support": {
"and_chr": "110",
"and_ff": "79",
"android": "110",
"chrome": "110",
"edge": "110",
"firefox": "78",
"ios_saf": "16.4",
"safari": "16.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/ratio"
},
"example": "@media (aspect-ratio: 1.77) {\n html {\n background-color: cyan;\n }\n}",
"interoperable_at": 1679875200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values"
}
],
"vendors_implementations": 3
},
{
"id": "media-query-ranges",
"title": "Media Query Ranges",
"description": "A syntax for defining media query ranges using ordinary comparison operators",
"specification": "https://www.w3.org/TR/mediaqueries-4/#range-context",
"stage": 3,
"browser_support": {
"and_chr": "104",
"and_ff": "102",
"android": "104",
"chrome": "104",
"edge": "104",
"firefox": "102",
"ios_saf": "16.4",
"oculus": "23.0",
"op_mob": "71",
"opera": "90",
"safari": "16.4",
"samsung": "20.0",
"webview_ios": "16.4"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#Syntax_improvements_in_Level_4"
},
"example": "@media (width < 480px) {}\n\n@media (480px <= width < 768px) {}\n\n@media (width >= 768px) {}",
"interoperable_at": 1679875200,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-minmax"
}
],
"vendors_implementations": 3,
"web-feature": "media-query-range-syntax"
},
{
"id": "nested-calc",
"title": "Nested `calc()`",
"description": "Nest calc functions with the calc function name",
"specification": "https://www.w3.org/TR/css-values-4/#calc-func",
"stage": 2,
"browser_support": {
"and_chr": "51",
"and_ff": "48",
"android": "51",
"chrome": "51",
"edge": "16",
"firefox": "48",
"ios_saf": "11",
"oculus": "5.0",
"op_mob": "41",
"opera": "38",
"safari": "11",
"samsung": "5.0",
"webview_ios": "11"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/calc"
},
"example": "p {\n padding: calc(1px + calc(4 / 3));\n}",
"interoperable_at": 1508198400,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nested-calc"
}
],
"vendors_implementations": 3
},
{
"id": "nesting-rules",
"title": "Nesting Rules",
"description": "A syntax for nesting relative rules within rules",
"specification": "https://www.w3.org/TR/css-nesting-1/",
"stage": 2,
"browser_support": {
"and_chr": "120",
"and_ff": "117",
"android": "120",
"chrome": "120",
"edge": "120",
"firefox": "117",
"ios_saf": "17.2",
"op_mob": "80",
"opera": "106",
"safari": "17.2",
"samsung": "25.0",
"webview_ios": "17.2"
},
"docs": {
"mdn": "https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector"
},
"example": "article {\n & p {\n color: #333;\n }\n}",
"interoperable_at": 1702252800,
"polyfills": [
{
"type": "PostCSS Plugin",
"link": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting"
}
],
"vendors_implementations": 3,
"web-feature": "nesting"
},
{
"id": "not-pseudo-class",
"title": "`:not()` Negation Lis