From eb9e27492a3d680849ccde314f771dd9cd9b1e7c Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 9 Sep 2024 16:41:53 -0400 Subject: [PATCH 1/2] Add environment variables group --- features/environment-variables.yml | 7 +++++++ features/environment-variables.yml.dist | 17 +++++++++++++++++ features/safe-area-inset.yml | 8 ++++++++ features/safe-area-inset.yml.dist | 20 ++++++++++++++++++++ features/titlebar-area.yml | 9 +++++++++ features/titlebar-area.yml.dist | 14 ++++++++++++++ groups/environment-variables.yml | 3 +++ 7 files changed, 78 insertions(+) create mode 100644 features/environment-variables.yml create mode 100644 features/environment-variables.yml.dist create mode 100644 features/safe-area-inset.yml create mode 100644 features/safe-area-inset.yml.dist create mode 100644 features/titlebar-area.yml create mode 100644 features/titlebar-area.yml.dist create mode 100644 groups/environment-variables.yml diff --git a/features/environment-variables.yml b/features/environment-variables.yml new file mode 100644 index 00000000000..6d0710eb681 --- /dev/null +++ b/features/environment-variables.yml @@ -0,0 +1,7 @@ +name: CSS environment variables +description: The `env()` CSS function inserts an environment variable from the device with an optional fallback value. +spec: https://drafts.csswg.org/css-env-1/#env-function +caniuse: css-env-function +group: environment-variables +compat_features: + - css.properties.custom-property.env diff --git a/features/environment-variables.yml.dist b/features/environment-variables.yml.dist new file mode 100644 index 00000000000..0c233fce875 --- /dev/null +++ b/features/environment-variables.yml.dist @@ -0,0 +1,17 @@ +# Generated from: environment-variables.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2020-01-15 + baseline_high_date: 2022-07-15 + support: + chrome: "69" + chrome_android: "69" + edge: "79" + firefox: "65" + firefox_android: "65" + safari: "11.1" + safari_ios: "11.3" +compat_features: + - css.properties.custom-property.env diff --git a/features/safe-area-inset.yml b/features/safe-area-inset.yml new file mode 100644 index 00000000000..31f20c64982 --- /dev/null +++ b/features/safe-area-inset.yml @@ -0,0 +1,8 @@ +name: Safe area inset environment variables +description: The `safe-area-inset-*` CSS environment variables represent an area of a non-rectangular screen that will not be cut off. 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 +compat_features: + - css.properties.custom-property.env.safe-area-inset-bottom + - css.properties.custom-property.env.safe-area-inset-left + - css.properties.custom-property.env.safe-area-inset-right + - css.properties.custom-property.env.safe-area-inset-top diff --git a/features/safe-area-inset.yml.dist b/features/safe-area-inset.yml.dist new file mode 100644 index 00000000000..9859cc43b2d --- /dev/null +++ b/features/safe-area-inset.yml.dist @@ -0,0 +1,20 @@ +# Generated from: safe-area-inset.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2020-01-15 + baseline_high_date: 2022-07-15 + support: + chrome: "69" + chrome_android: "69" + edge: "79" + firefox: "65" + firefox_android: "65" + safari: "11.1" + safari_ios: "11.3" +compat_features: + - css.properties.custom-property.env.safe-area-inset-bottom + - css.properties.custom-property.env.safe-area-inset-left + - css.properties.custom-property.env.safe-area-inset-right + - css.properties.custom-property.env.safe-area-inset-top diff --git a/features/titlebar-area.yml b/features/titlebar-area.yml new file mode 100644 index 00000000000..6784166fbca --- /dev/null +++ b/features/titlebar-area.yml @@ -0,0 +1,9 @@ +name: Titlebar area environment variables +description: The `titlebar-area-*` CSS environment variables represent the header area of a Progressive Web App that is not hidden by the system's buttons. For example, ` height:\ env(titlebar-area-height)` sets the element's height to the height of the space reserved for the titlebar. +spec: https://wicg.github.io/window-controls-overlay/#title-bar-area-env-variables +group: environment-variables +compat_features: + - css.properties.custom-property.env.titlebar-area-height + - css.properties.custom-property.env.titlebar-area-width + - css.properties.custom-property.env.titlebar-area-x + - css.properties.custom-property.env.titlebar-area-y diff --git a/features/titlebar-area.yml.dist b/features/titlebar-area.yml.dist new file mode 100644 index 00000000000..e496808541e --- /dev/null +++ b/features/titlebar-area.yml.dist @@ -0,0 +1,14 @@ +# Generated from: titlebar-area.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "93" + chrome_android: "93" + edge: "93" +compat_features: + - css.properties.custom-property.env.titlebar-area-height + - css.properties.custom-property.env.titlebar-area-width + - css.properties.custom-property.env.titlebar-area-x + - css.properties.custom-property.env.titlebar-area-y diff --git a/groups/environment-variables.yml b/groups/environment-variables.yml new file mode 100644 index 00000000000..ab2a91f4548 --- /dev/null +++ b/groups/environment-variables.yml @@ -0,0 +1,3 @@ +name: CSS environment variables +# description: CSS environment variables expose system-specific values using the `env()` function. +parent: css From a3f3b698456400fe6bfefe1d138adaa2a7a886c9 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 10 Sep 2024 11:50:53 -0400 Subject: [PATCH 2/2] Rework environment variables as group only --- features/environment-variables.yml | 7 ------- features/environment-variables.yml.dist | 17 ----------------- features/safe-area-inset.yml | 4 +++- features/safe-area-inset.yml.dist | 1 + features/titlebar-area.yml | 9 --------- features/titlebar-area.yml.dist | 14 -------------- 6 files changed, 4 insertions(+), 48 deletions(-) delete mode 100644 features/environment-variables.yml delete mode 100644 features/environment-variables.yml.dist delete mode 100644 features/titlebar-area.yml delete mode 100644 features/titlebar-area.yml.dist diff --git a/features/environment-variables.yml b/features/environment-variables.yml deleted file mode 100644 index 6d0710eb681..00000000000 --- a/features/environment-variables.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: CSS environment variables -description: The `env()` CSS function inserts an environment variable from the device with an optional fallback value. -spec: https://drafts.csswg.org/css-env-1/#env-function -caniuse: css-env-function -group: environment-variables -compat_features: - - css.properties.custom-property.env diff --git a/features/environment-variables.yml.dist b/features/environment-variables.yml.dist deleted file mode 100644 index 0c233fce875..00000000000 --- a/features/environment-variables.yml.dist +++ /dev/null @@ -1,17 +0,0 @@ -# Generated from: environment-variables.yml -# Do not edit this file by hand. Edit the source file instead! - -status: - baseline: high - baseline_low_date: 2020-01-15 - baseline_high_date: 2022-07-15 - support: - chrome: "69" - chrome_android: "69" - edge: "79" - firefox: "65" - firefox_android: "65" - safari: "11.1" - safari_ios: "11.3" -compat_features: - - css.properties.custom-property.env diff --git a/features/safe-area-inset.yml b/features/safe-area-inset.yml index 31f20c64982..4a2c8523e0f 100644 --- a/features/safe-area-inset.yml +++ b/features/safe-area-inset.yml @@ -1,8 +1,10 @@ name: Safe area inset environment variables -description: The `safe-area-inset-*` CSS environment variables represent an area of a non-rectangular screen that will not be cut off. For example, `top:\ env(safe-area-inset-top);` positions the top of an element below the notch on an iPhone. +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 compat_features: - css.properties.custom-property.env.safe-area-inset-bottom - css.properties.custom-property.env.safe-area-inset-left - css.properties.custom-property.env.safe-area-inset-right - css.properties.custom-property.env.safe-area-inset-top + - css.properties.custom-property.env diff --git a/features/safe-area-inset.yml.dist b/features/safe-area-inset.yml.dist index 9859cc43b2d..75be7723309 100644 --- a/features/safe-area-inset.yml.dist +++ b/features/safe-area-inset.yml.dist @@ -14,6 +14,7 @@ status: safari: "11.1" safari_ios: "11.3" compat_features: + - css.properties.custom-property.env - css.properties.custom-property.env.safe-area-inset-bottom - css.properties.custom-property.env.safe-area-inset-left - css.properties.custom-property.env.safe-area-inset-right diff --git a/features/titlebar-area.yml b/features/titlebar-area.yml deleted file mode 100644 index 6784166fbca..00000000000 --- a/features/titlebar-area.yml +++ /dev/null @@ -1,9 +0,0 @@ -name: Titlebar area environment variables -description: The `titlebar-area-*` CSS environment variables represent the header area of a Progressive Web App that is not hidden by the system's buttons. For example, ` height:\ env(titlebar-area-height)` sets the element's height to the height of the space reserved for the titlebar. -spec: https://wicg.github.io/window-controls-overlay/#title-bar-area-env-variables -group: environment-variables -compat_features: - - css.properties.custom-property.env.titlebar-area-height - - css.properties.custom-property.env.titlebar-area-width - - css.properties.custom-property.env.titlebar-area-x - - css.properties.custom-property.env.titlebar-area-y diff --git a/features/titlebar-area.yml.dist b/features/titlebar-area.yml.dist deleted file mode 100644 index e496808541e..00000000000 --- a/features/titlebar-area.yml.dist +++ /dev/null @@ -1,14 +0,0 @@ -# Generated from: titlebar-area.yml -# Do not edit this file by hand. Edit the source file instead! - -status: - baseline: false - support: - chrome: "93" - chrome_android: "93" - edge: "93" -compat_features: - - css.properties.custom-property.env.titlebar-area-height - - css.properties.custom-property.env.titlebar-area-width - - css.properties.custom-property.env.titlebar-area-x - - css.properties.custom-property.env.titlebar-area-y