Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more Caniuse keys #2476

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions features/ambient-light.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
1 change: 1 addition & 0 deletions features/array-includes.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions features/beacons.yml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions features/ch.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions features/console.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 3 additions & 1 deletion features/container-queries.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions features/cors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 1 addition & 0 deletions features/fixed-positioning.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 1 addition & 2 deletions features/hanging-punctuation.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
1 change: 1 addition & 0 deletions features/min-max-clamp.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions features/named-color.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there also a caniuse entry for named colors? If not, is it ok to only have a caniuse entry that corresponds to a sub-part of our feature, or is there a risk that this would be confusing?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is not a caniuse entry for named colors. It's a valid question, though. For the main use case of caniuse adding a Baseline banner to rebeccapurple, it would not be confusing. But are there other potential uses of a caniuse key that this would break?

Copy link
Collaborator Author

@jamesnw jamesnw Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our docs say Setting a caniuse value says that a feature is approximately equivalent to or a superset of a Can I Use feature. Since named-colors contains rebeccapurple on web-features, this is okay. I'll open a separate PR with another set of similar situations I identified, but in many cases, it looks like the subfeature that caniuse has as a standalone feature has a distinct support story.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going back through my list, most of the superset features have significant discrepancies, so I ended up just adding caniuse for display, events, and font-kerning on this branch. Apologies for adding after the approval!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, maybe I can give a better idea of when we ought to map to caniuse. We should map to a feature when both of these criteria are satisfied:

  • The web-features entry is equivalent to or a superset of the caniuse feature. This caniuse mapping is fine here.

  • The web-features headline status is correct for the feature on caniuse. This caniuse mapping is fine here.

    Theoretically, we should make sure the keystone versions line up, but we should do that in the course of some automation, like Automatically report on discrepancies with caniuse #1880.

That said, we should probably not map to a caniuse feature when caniuse should or intends to represent a web-features entry separately of a corresponding caniuse feature (e.g., if Alexis told us he wanted to have a feature for named colors, we should break link to caniuse). This seems fine for now, but it's a bit conditional. Alexis may choose to import unmapped features into caniuse, so if/when that starts happening we may want to unwind some mappings (this seems like a likely candidate).

On the whole, I think this mapping is fine—it's helpful to caniuse users today—but I don't think it's set in stone.

status:
compute_from: css.types.color.named-color
compat_features:
Expand Down
1 change: 1 addition & 0 deletions features/opacity.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
2 changes: 2 additions & 0 deletions features/safe-area-inset.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions features/selectors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions features/text-justify.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading