diff --git a/features/background-blend-mode.yml b/features/background-blend-mode.yml new file mode 100644 index 00000000000..cf01597e4eb --- /dev/null +++ b/features/background-blend-mode.yml @@ -0,0 +1,8 @@ +name: background-blend-mode +description: The `background-blend-mode` CSS property blends an element's background image and background color using blend modes like `multiply`, `difference`, or `color`. +spec: https://drafts.fxtf.org/compositing-2/#background-blend-mode +caniuse: css-backgroundblendmode +group: blend-mode +compat_features: + - css.properties.background-blend-mode + - css.types.blend-mode diff --git a/features/background-blend-mode.yml.dist b/features/background-blend-mode.yml.dist new file mode 100644 index 00000000000..3c3f7e5892a --- /dev/null +++ b/features/background-blend-mode.yml.dist @@ -0,0 +1,42 @@ +# Generated from: background-blend-mode.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: "35" + chrome_android: "59" + edge: "79" + firefox: "30" + firefox_android: "54" + safari: "8" + safari_ios: "8" +compat_features: + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "35" + # chrome_android: "35" + # edge: "79" + # firefox: "30" + # firefox_android: "30" + # safari: "8" + # safari_ios: "8" + - css.properties.background-blend-mode + + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "35" + # chrome_android: "59" + # edge: "79" + # firefox: "30" + # firefox_android: "54" + # safari: "8" + # safari_ios: "8" + - css.types.blend-mode diff --git a/features/isolation.yml b/features/isolation.yml new file mode 100644 index 00000000000..a18a1947d6a --- /dev/null +++ b/features/isolation.yml @@ -0,0 +1,6 @@ +name: isolation +description: The `isolation` CSS property creates a new stacking context, which impacts `z-index` ordering and blend modes. +spec: https://drafts.fxtf.org/compositing-2/#isolation +group: blend-mode +compat_features: + - css.properties.isolation diff --git a/features/isolation.yml.dist b/features/isolation.yml.dist new file mode 100644 index 00000000000..0ac6c18986a --- /dev/null +++ b/features/isolation.yml.dist @@ -0,0 +1,17 @@ +# Generated from: isolation.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: "41" + chrome_android: "41" + edge: "79" + firefox: "36" + firefox_android: "36" + safari: "8" + safari_ios: "8" +compat_features: + - css.properties.isolation diff --git a/features/mix-blend-mode.yml b/features/mix-blend-mode.yml new file mode 100644 index 00000000000..5c45cf34001 --- /dev/null +++ b/features/mix-blend-mode.yml @@ -0,0 +1,12 @@ +name: mix-blend-mode +description: The `mix-blend-mode` CSS property blends an element's content with its background or parent elements using blend modes like `multiply`, `difference`, or `color`. +spec: https://drafts.fxtf.org/compositing-2/#mix-blend-mode +caniuse: css-mixblendmode +group: blend-mode +status: + compute_from: css.properties.mix-blend-mode +compat_features: + - css.properties.mix-blend-mode + - css.properties.mix-blend-mode.plus-darker + - css.properties.mix-blend-mode.plus-lighter + - css.properties.mix-blend-mode.svg_elements diff --git a/features/mix-blend-mode.yml.dist b/features/mix-blend-mode.yml.dist new file mode 100644 index 00000000000..bf62fd8f171 --- /dev/null +++ b/features/mix-blend-mode.yml.dist @@ -0,0 +1,55 @@ +# Generated from: mix-blend-mode.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: "41" + chrome_android: "41" + edge: "79" + firefox: "32" + firefox_android: "32" + safari: "8" + safari_ios: "8" +compat_features: + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "41" + # chrome_android: "41" + # edge: "79" + # firefox: "32" + # firefox_android: "32" + # safari: "8" + # safari_ios: "8" + - css.properties.mix-blend-mode + + # baseline: low + # baseline_low_date: 2022-04-05 + # support: + # chrome: "100" + # chrome_android: "100" + # edge: "100" + # firefox: "99" + # firefox_android: "99" + # safari: "9.1" + # safari_ios: "9.3" + - css.properties.mix-blend-mode.plus-lighter + + # baseline: false + # support: + # chrome: "41" + # edge: "79" + # firefox: "32" + # firefox_android: "32" + - css.properties.mix-blend-mode.svg_elements + + # baseline: false + # support: + # safari: ≤13.1 + # safari_ios: ≤13.4 + - css.properties.mix-blend-mode.plus-darker diff --git a/groups/blend-mode.yml b/groups/blend-mode.yml new file mode 100644 index 00000000000..09253e72ea5 --- /dev/null +++ b/groups/blend-mode.yml @@ -0,0 +1,4 @@ +# https://drafts.fxtf.org/compositing-1/ +# Blend modes control how parts of an element are composited, or visually mixed. +name: Blend mode +parent: css