Add more Caniuse keys (#2476)

jamesnw · web-flow · commit 2ee45bec1bde · 2025-03-10T10:38:07.000+01:00
* Add caniuse matches

* Add more caniuse keys

* Add cq units

* Revise comment

* Add more caniuse

* Add canisue to background
diff --git a/features/ambient-light.yml b/features/ambient-light.yml
@@ -1,6 +1,7 @@
 name: Ambient light sensor
 description: The `AmbientLightSensor` interface returns the current light level in lux of the ambient light level around the device.
 spec: https://w3c.github.io/ambient-light/
+caniuse: ambient-light
 group: sensors
 compat_features:
   - api.AmbientLightSensor
diff --git a/features/array-includes.yml b/features/array-includes.yml
@@ -3,6 +3,7 @@ description: The `includes()` method of arrays and typed arrays returns whether
 spec:
   - https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.includes
   - https://tc39.es/ecma262/multipage/indexed-collections.html#sec-%25typedarray%25.prototype.includes
+caniuse: array-includes
 snapshot: ecmascript-2016
 group:
   - arrays
diff --git a/features/background.yml b/features/background.yml
@@ -2,6 +2,7 @@ name: background
 description: The `background` CSS property is a shorthand that sets several background properties at once.
 spec: https://drafts.csswg.org/css-backgrounds-3/#background
 group: background
+caniuse: multibackgrounds
 compat_features:
   - css.properties.background
   - css.properties.background.multiple_backgrounds
diff --git a/features/beacons.yml b/features/beacons.yml
@@ -1,5 +1,6 @@
 name: Beacons
 description: The `navigator.sendBeacon()` method asynchronously sends an HTTP POST request with a limited amount of data, typically for app state, events, and analytics data. The one-way beacon is guaranteed to be initiated before the browser unloads the page, but the sender does not get to handle the response.
 spec: https://w3c.github.io/beacon/
+caniuse: beacon
 compat_features:
   - api.Navigator.sendBeacon
diff --git a/features/ch.yml b/features/ch.yml
@@ -2,5 +2,6 @@ name: ch unit
 description: The `ch` CSS length unit is a font-relative length based on the width of the zero (0) character.
 spec: https://drafts.csswg.org/css-values-4/#font-relative-lengths
 group: units
+caniuse: ch-unit
 compat_features:
   - css.types.length.ch
diff --git a/features/console.yml b/features/console.yml
@@ -2,6 +2,7 @@ name: Console
 description: The `console` API logs debugging messages to the browser development tools' console.
 spec: https://console.spec.whatwg.org/#console-namespace
 group: html-elements
+caniuse: console-basic
 status:
   compute_from: api.console
 compat_features:
diff --git a/features/container-queries.yml b/features/container-queries.yml
@@ -2,7 +2,9 @@ name: Container queries
 description: Container size queries with the `@container` at-rule apply styles to an element based on the dimensions of its container.
 spec: https://drafts.csswg.org/css-conditional-5/#container-queries
 group: container-queries
-caniuse: css-container-queries
+caniuse:
+  - css-container-queries
+  - css-container-query-units
 status:
   compute_from: css.at-rules.container
 compat_features:
diff --git a/features/cors.yml b/features/cors.yml
@@ -2,6 +2,7 @@ name: CORS
 description: Cross-Origin Resource Sharing is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. Also known as CORS.
 spec: https://fetch.spec.whatwg.org/#http-cors-protocol
 group: security
+caniuse: cors
 status:
   compute_from: http.headers.Access-Control-Allow-Origin
 compat_features:
diff --git a/features/display.yml b/features/display.yml
@@ -2,6 +2,7 @@ name: Display
 description: The `display` CSS property sets the display behavior of an element's box within its layout and sets the layout behavior for its child elements.
 spec: https://drafts.csswg.org/css-display-3/#the-display-properties
 group: css
+caniuse: inline-block
 status:
   compute_from: css.properties.display
 compat_features:
diff --git a/features/events.yml b/features/events.yml
@@ -4,6 +4,7 @@ spec:
   - https://html.spec.whatwg.org/multipage/indices.html#events-2
   - https://dom.spec.whatwg.org/#interface-customevent
   - https://dom.spec.whatwg.org/#interface-eventtarget
+caniuse: addeventlistener
 status:
   compute_from: api.EventTarget.addEventListener
 compat_features:
diff --git a/features/fixed-positioning.yml b/features/fixed-positioning.yml
@@ -2,5 +2,6 @@ name: Fixed positioning
 description: "The `position: fixed` CSS declaration removes an element from the normal flow and positions it relative to the viewport or page."
 spec: https://drafts.csswg.org/css-position-3/#abspos-insets
 group: positioning
+caniuse: css-fixed
 compat_features:
   - css.properties.position.fixed
diff --git a/features/font-kerning.yml b/features/font-kerning.yml
@@ -2,5 +2,6 @@ name: font-kerning
 description: The `font-kerning` CSS property sets whether kerning data from a font is used to adjust the space between letters.
 spec: https://drafts.csswg.org/css-fonts-4/#font-kerning-prop
 group: font-features
+caniuse: font-kerning
 compat_features:
   - css.properties.font-kerning
diff --git a/features/hanging-punctuation.yml b/features/hanging-punctuation.yml
@@ -1,8 +1,7 @@
 name: Hanging punctuation
 description: The `hanging-punctuation` CSS property puts punctuation characters outside of the box to align the text with the rest of the document.
 spec: https://drafts.csswg.org/css-text-4/#hanging-punctuation-property
-# TODO: Enable once  https://github.com/Fyrd/caniuse/issues/7184 is resolved.
-# caniuse: css-hanging-punctuation
+caniuse: css-hanging-punctuation
 compat_features:
   - css.properties.hanging-punctuation
   - css.properties.hanging-punctuation.allow-end
diff --git a/features/min-max-clamp.yml b/features/min-max-clamp.yml
@@ -2,4 +2,5 @@ name: min(), max(), and clamp()
 description: The `min()` and `max()` CSS functions return the minimum or maximum of the arguments, while `clamp()` clamps a value to a given range.
 spec: https://drafts.csswg.org/css-values-4/#comp-func
 # TODO: partial support (min() and max()) in Safari 11.1.
+caniuse: css-math-functions
 group: css
diff --git a/features/named-color.yml b/features/named-color.yml
@@ -2,6 +2,7 @@ name: Named colors
 description: Some CSS color values can be referenced by name, such as `red` or `limegreen`. They stand in for specific RGB color values.
 spec: https://drafts.csswg.org/css-color-4/#named-colors
 group: color-types
+caniuse: css-rebeccapurple
 status:
   compute_from: css.types.color.named-color
 compat_features:
diff --git a/features/opacity.yml b/features/opacity.yml
@@ -2,6 +2,7 @@ name: opacity
 description: The `opacity` CSS property sets the transparency of an element.
 spec: https://drafts.csswg.org/css-color-3/#transparency
 group: css
+caniuse: css-opacity
 status:
   compute_from: css.properties.opacity
 compat_features:
diff --git a/features/safe-area-inset.yml b/features/safe-area-inset.yml
@@ -2,6 +2,8 @@ name: Safe area inset environment variables
 description: The `safe-area-inset-` CSS environment variables represent a rectangle that cannot cut off content within a non-rectangular screen. For example, `top:\ env(safe-area-inset-top);` positions the top of an element below the notch on an iPhone.
 spec: https://drafts.csswg.org/css-env-1/#safe-area-insets
 group: environment-variables
+# Caniuse is for env(), and this was the first env var that was supported.
+caniuse: css-env-function
 compat_features:
   - css.properties.custom-property.env.safe-area-inset-bottom
   - css.properties.custom-property.env.safe-area-inset-left
diff --git a/features/selectors.yml b/features/selectors.yml
@@ -2,6 +2,7 @@ name: Selectors (core)
 description: CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.
 spec: https://drafts.csswg.org/selectors-4/
 group: selectors
+caniuse: css-sel2
 compat_features:
   - css.selectors.child
   - css.selectors.class
diff --git a/features/text-justify.yml b/features/text-justify.yml
@@ -2,6 +2,7 @@ name: text-justify
 description: "The `text-justify` CSS property sets the justification method of text when `text-align: justify` is set."
 spec: https://drafts.csswg.org/css-text-4/#text-justify-property
 group: text
+caniuse: css-text-justify
 compat_features:
   - css.properties.text-justify
   - css.properties.text-justify.auto
