Skip to content

Commit 7a8467f

Browse files
jamesnwjamesnw
authored
Add background-blend-mode and mix-blend-mode (#1648)
1 parent 2733751 commit 7a8467f

7 files changed

+144
-0
lines changed

‎features/background-blend-mode.yml

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
name: background-blend-mode
2+
description: The `background-blend-mode` CSS property blends an element's background image and background color using blend modes like `multiply`, `difference`, or `color`.
3+
spec: https://drafts.fxtf.org/compositing-2/#background-blend-mode
4+
caniuse: css-backgroundblendmode
5+
group: blend-mode
6+
compat_features:
7+
- css.properties.background-blend-mode
8+
- css.types.blend-mode

‎features/background-blend-mode.yml.dist

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Generated from: background-blend-mode.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2020-01-15
7+
baseline_high_date: 2022-07-15
8+
support:
9+
chrome: "35"
10+
chrome_android: "59"
11+
edge: "79"
12+
firefox: "30"
13+
firefox_android: "54"
14+
safari: "8"
15+
safari_ios: "8"
16+
compat_features:
17+
# baseline: high
18+
# baseline_low_date: 2020-01-15
19+
# baseline_high_date: 2022-07-15
20+
# support:
21+
# chrome: "35"
22+
# chrome_android: "35"
23+
# edge: "79"
24+
# firefox: "30"
25+
# firefox_android: "30"
26+
# safari: "8"
27+
# safari_ios: "8"
28+
- css.properties.background-blend-mode
29+
30+
# ⬇️ Same status as overall feature ⬇️
31+
# baseline: high
32+
# baseline_low_date: 2020-01-15
33+
# baseline_high_date: 2022-07-15
34+
# support:
35+
# chrome: "35"
36+
# chrome_android: "59"
37+
# edge: "79"
38+
# firefox: "30"
39+
# firefox_android: "54"
40+
# safari: "8"
41+
# safari_ios: "8"
42+
- css.types.blend-mode

‎features/isolation.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: isolation
2+
description: The `isolation` CSS property creates a new stacking context, which impacts `z-index` ordering and blend modes.
3+
spec: https://drafts.fxtf.org/compositing-2/#isolation
4+
group: blend-mode
5+
compat_features:
6+
- css.properties.isolation

‎features/isolation.yml.dist

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Generated from: isolation.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2020-01-15
7+
baseline_high_date: 2022-07-15
8+
support:
9+
chrome: "41"
10+
chrome_android: "41"
11+
edge: "79"
12+
firefox: "36"
13+
firefox_android: "36"
14+
safari: "8"
15+
safari_ios: "8"
16+
compat_features:
17+
- css.properties.isolation

‎features/mix-blend-mode.yml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: mix-blend-mode
2+
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`.
3+
spec: https://drafts.fxtf.org/compositing-2/#mix-blend-mode
4+
caniuse: css-mixblendmode
5+
group: blend-mode
6+
status:
7+
compute_from: css.properties.mix-blend-mode
8+
compat_features:
9+
- css.properties.mix-blend-mode
10+
- css.properties.mix-blend-mode.plus-darker
11+
- css.properties.mix-blend-mode.plus-lighter
12+
- css.properties.mix-blend-mode.svg_elements

‎features/mix-blend-mode.yml.dist

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Generated from: mix-blend-mode.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2020-01-15
7+
baseline_high_date: 2022-07-15
8+
support:
9+
chrome: "41"
10+
chrome_android: "41"
11+
edge: "79"
12+
firefox: "32"
13+
firefox_android: "32"
14+
safari: "8"
15+
safari_ios: "8"
16+
compat_features:
17+
# ⬇️ Same status as overall feature ⬇️
18+
# baseline: high
19+
# baseline_low_date: 2020-01-15
20+
# baseline_high_date: 2022-07-15
21+
# support:
22+
# chrome: "41"
23+
# chrome_android: "41"
24+
# edge: "79"
25+
# firefox: "32"
26+
# firefox_android: "32"
27+
# safari: "8"
28+
# safari_ios: "8"
29+
- css.properties.mix-blend-mode
30+
31+
# baseline: low
32+
# baseline_low_date: 2022-04-05
33+
# support:
34+
# chrome: "100"
35+
# chrome_android: "100"
36+
# edge: "100"
37+
# firefox: "99"
38+
# firefox_android: "99"
39+
# safari: "9.1"
40+
# safari_ios: "9.3"
41+
- css.properties.mix-blend-mode.plus-lighter
42+
43+
# baseline: false
44+
# support:
45+
# chrome: "41"
46+
# edge: "79"
47+
# firefox: "32"
48+
# firefox_android: "32"
49+
- css.properties.mix-blend-mode.svg_elements
50+
51+
# baseline: false
52+
# support:
53+
# safari: ≤13.1
54+
# safari_ios: ≤13.4
55+
- css.properties.mix-blend-mode.plus-darker

‎groups/blend-mode.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# https://drafts.fxtf.org/compositing-1/
2+
# Blend modes control how parts of an element are composited, or visually mixed.
3+
name: Blend mode
4+
parent: css

0 commit comments

Comments
 (0)