From 48c1541180ae5c9c73bc6707c8c67b6fb10483e9 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Thu, 19 Sep 2024 12:00:33 -0700 Subject: [PATCH 1/6] Adds multi-column layout --- features/column-fill.yml | 9 ++++ features/column-fill.yml.dist | 38 +++++++++++++ features/column-span.yml | 8 +++ features/column-span.yml.dist | 43 +++++++++++++++ features/multi-column.yml | 19 +++++++ features/multi-column.yml.dist | 98 ++++++++++++++++++++++++++++++++++ 6 files changed, 215 insertions(+) create mode 100644 features/column-fill.yml create mode 100644 features/column-fill.yml.dist create mode 100644 features/column-span.yml create mode 100644 features/column-span.yml.dist create mode 100644 features/multi-column.yml create mode 100644 features/multi-column.yml.dist diff --git a/features/column-fill.yml b/features/column-fill.yml new file mode 100644 index 00000000000..8ecd804cb0c --- /dev/null +++ b/features/column-fill.yml @@ -0,0 +1,9 @@ +name: column-fill +description: The `column-fill` CSS property sets the distribution of content across columns in a multi-column layout. +spec: https://drafts.csswg.org/css-multicol-1/#filling-columns +group: layout +compat_features: + - css.properties.column-fill + - css.properties.column-fill.auto + - css.properties.column-fill.balance + - css.properties.column-fill.balance-all diff --git a/features/column-fill.yml.dist b/features/column-fill.yml.dist new file mode 100644 index 00000000000..2d3f587e9a3 --- /dev/null +++ b/features/column-fill.yml.dist @@ -0,0 +1,38 @@ +# Generated from: column-fill.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: {} +compat_features: + # baseline: high + # baseline_low_date: 2017-03-07 + # baseline_high_date: 2019-09-07 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.column-fill + + # baseline: high + # baseline_low_date: 2020-07-28 + # baseline_high_date: 2023-01-28 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: ≤72 + # firefox_android: "79" + # safari: "9" + # safari_ios: "9" + - css.properties.column-fill.auto + - css.properties.column-fill.balance + + # ⬇️ Same status as overall feature ⬇️ + # baseline: false + # support: {} + - css.properties.column-fill.balance-all diff --git a/features/column-span.yml b/features/column-span.yml new file mode 100644 index 00000000000..ead0bc4d877 --- /dev/null +++ b/features/column-span.yml @@ -0,0 +1,8 @@ +name: column-span +description: The `column-span` CSS property allows a child element to disply across all columns of a multi-column parent. +spec: https://drafts.csswg.org/css-multicol-1/#spanning-columns +group: layout +compat_features: + - css.properties.column-span + - css.properties.column-span.all + - css.properties.column-span.none diff --git a/features/column-span.yml.dist b/features/column-span.yml.dist new file mode 100644 index 00000000000..9824675cab1 --- /dev/null +++ b/features/column-span.yml.dist @@ -0,0 +1,43 @@ +# Generated from: column-span.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2020-07-28 + baseline_high_date: 2023-01-28 + support: + chrome: "50" + chrome_android: "50" + edge: "79" + firefox: "71" + firefox_android: "79" + safari: "9" + safari_ios: "9" +compat_features: + # baseline: high + # baseline_low_date: 2020-07-28 + # baseline_high_date: 2023-01-28 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "71" + # firefox_android: "79" + # safari: "9" + # safari_ios: "9" + - css.properties.column-span + + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-07-28 + # baseline_high_date: 2023-01-28 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "79" + # firefox: "71" + # firefox_android: "79" + # safari: "9" + # safari_ios: "9" + - css.properties.column-span.all + - css.properties.column-span.none diff --git a/features/multi-column.yml b/features/multi-column.yml new file mode 100644 index 00000000000..37deedcccb9 --- /dev/null +++ b/features/multi-column.yml @@ -0,0 +1,19 @@ +name: Multi-column layout +description: Multi-column layout flows an element's content across one or more vertical content areas in a single row, without affecting the `display` properties of its children. +spec: https://drafts.csswg.org/css-multicol-1/ +group: layout +caniuse: multicolumn +compat_features: + - css.properties.align-content.multicol_context + - css.properties.column-count + - css.properties.column-count.auto + - css.properties.column-width + - css.properties.columns + - css.properties.column-gap + - css.properties.column-gap.multicol_context + - css.properties.column-gap.multicol_context.calc_values + - css.properties.column-gap.multicol_context.percentage_values + - css.properties.column-rule + - css.properties.column-rule-color + - css.properties.column-rule-style + - css.properties.column-rule-width diff --git a/features/multi-column.yml.dist b/features/multi-column.yml.dist new file mode 100644 index 00000000000..f4a786529eb --- /dev/null +++ b/features/multi-column.yml.dist @@ -0,0 +1,98 @@ +# Generated from: multi-column.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "123" + chrome_android: "123" + edge: "123" +compat_features: + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "1" + # chrome_android: "18" + # edge: "12" + # firefox: "1.5" + # firefox_android: "4" + # safari: "3" + # safari_ios: "2" + - css.properties.column-gap + + # baseline: high + # baseline_low_date: 2016-11-15 + # baseline_high_date: 2019-05-15 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "50" + # firefox_android: "50" + # safari: "9" + # safari_ios: "9" + - css.properties.column-width + + # baseline: high + # baseline_low_date: 2017-03-07 + # baseline_high_date: 2019-09-07 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.column-count + - css.properties.column-rule + - css.properties.column-rule-color + - css.properties.column-rule-style + - css.properties.column-rule-width + - css.properties.columns + + # baseline: high + # baseline_low_date: 2017-03-07 + # baseline_high_date: 2019-09-07 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "10" + # safari_ios: "10" + - css.properties.column-gap.multicol_context + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "79" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.column-count.auto + + # baseline: false + # support: + # chrome: "66" + # chrome_android: "66" + # edge: "16" + # firefox: "61" + # firefox_android: "61" + - css.properties.column-gap.multicol_context.calc_values + - css.properties.column-gap.multicol_context.percentage_values + + # baseline: false + # support: + # chrome: "123" + # chrome_android: "123" + # edge: "123" + # safari: "17.4" + # safari_ios: "17.4" + - css.properties.align-content.multicol_context From 6f069bd451618c787d1983708fa5863425649103 Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Thu, 19 Sep 2024 14:19:49 -0700 Subject: [PATCH 2/6] Update features/column-span.yml Co-authored-by: James Stuckey Weber --- features/column-span.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/column-span.yml b/features/column-span.yml index ead0bc4d877..8d62e891a0a 100644 --- a/features/column-span.yml +++ b/features/column-span.yml @@ -1,5 +1,5 @@ name: column-span -description: The `column-span` CSS property allows a child element to disply across all columns of a multi-column parent. +description: The `column-span` CSS property displays a child element across all columns of a multi-column parent. spec: https://drafts.csswg.org/css-multicol-1/#spanning-columns group: layout compat_features: From add7cee1b2f810d392d78586f94a9e8683bfab16 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Fri, 20 Sep 2024 08:35:10 -0700 Subject: [PATCH 3/6] Addresses feedback --- features/column-fill.yml | 4 +++- features/column-fill.yml.dist | 15 ++++++++++++--- features/column-span.yml | 2 +- features/multi-column.yml | 7 ++++--- features/multi-column.yml.dist | 15 +++++++++++---- groups/multi-column.yml | 3 +++ 6 files changed, 34 insertions(+), 12 deletions(-) create mode 100644 groups/multi-column.yml diff --git a/features/column-fill.yml b/features/column-fill.yml index 8ecd804cb0c..176de6f7e52 100644 --- a/features/column-fill.yml +++ b/features/column-fill.yml @@ -1,7 +1,9 @@ name: column-fill description: The `column-fill` CSS property sets the distribution of content across columns in a multi-column layout. spec: https://drafts.csswg.org/css-multicol-1/#filling-columns -group: layout +group: multi-column +status: + compute_from: css.properties.column-fill compat_features: - css.properties.column-fill - css.properties.column-fill.auto diff --git a/features/column-fill.yml.dist b/features/column-fill.yml.dist index 2d3f587e9a3..e1fe5482340 100644 --- a/features/column-fill.yml.dist +++ b/features/column-fill.yml.dist @@ -2,9 +2,19 @@ # Do not edit this file by hand. Edit the source file instead! status: - baseline: false - support: {} + baseline: high + baseline_low_date: 2017-03-07 + baseline_high_date: 2019-09-07 + support: + chrome: "50" + chrome_android: "50" + edge: "12" + firefox: "52" + firefox_android: "52" + safari: "9" + safari_ios: "9" compat_features: + # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2017-03-07 # baseline_high_date: 2019-09-07 @@ -32,7 +42,6 @@ compat_features: - css.properties.column-fill.auto - css.properties.column-fill.balance - # ⬇️ Same status as overall feature ⬇️ # baseline: false # support: {} - css.properties.column-fill.balance-all diff --git a/features/column-span.yml b/features/column-span.yml index 8d62e891a0a..643358b0d9a 100644 --- a/features/column-span.yml +++ b/features/column-span.yml @@ -1,7 +1,7 @@ name: column-span description: The `column-span` CSS property displays a child element across all columns of a multi-column parent. spec: https://drafts.csswg.org/css-multicol-1/#spanning-columns -group: layout +group: multi-column compat_features: - css.properties.column-span - css.properties.column-span.all diff --git a/features/multi-column.yml b/features/multi-column.yml index 37deedcccb9..456b9ec6bcb 100644 --- a/features/multi-column.yml +++ b/features/multi-column.yml @@ -1,8 +1,9 @@ name: Multi-column layout -description: Multi-column layout flows an element's content across one or more vertical content areas in a single row, without affecting the `display` properties of its children. +description: Multi-column layout flows an element's content across one or more content areas in a single row, without affecting the `display` properties of its children. spec: https://drafts.csswg.org/css-multicol-1/ -group: layout -caniuse: multicolumn +group: multi-column +status: + compute_from: css.properties.columns compat_features: - css.properties.align-content.multicol_context - css.properties.column-count diff --git a/features/multi-column.yml.dist b/features/multi-column.yml.dist index f4a786529eb..13f58da0020 100644 --- a/features/multi-column.yml.dist +++ b/features/multi-column.yml.dist @@ -2,11 +2,17 @@ # Do not edit this file by hand. Edit the source file instead! status: - baseline: false + baseline: high + baseline_low_date: 2017-03-07 + baseline_high_date: 2019-09-07 support: - chrome: "123" - chrome_android: "123" - edge: "123" + chrome: "50" + chrome_android: "50" + edge: "12" + firefox: "52" + firefox_android: "52" + safari: "9" + safari_ios: "9" compat_features: # baseline: high # baseline_low_date: 2015-07-29 @@ -34,6 +40,7 @@ compat_features: # safari_ios: "9" - css.properties.column-width + # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2017-03-07 # baseline_high_date: 2019-09-07 diff --git a/groups/multi-column.yml b/groups/multi-column.yml new file mode 100644 index 00000000000..2e10cf78c0c --- /dev/null +++ b/groups/multi-column.yml @@ -0,0 +1,3 @@ +# CSS layout features which flow content into multiple columns +name: multi-column +parent: layout From d7c4a8850c2209e08b62b07e4d20923047775027 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Wed, 25 Sep 2024 08:54:52 -0700 Subject: [PATCH 4/6] Address description feedback --- features/multi-column.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/multi-column.yml b/features/multi-column.yml index 456b9ec6bcb..0374502fcd1 100644 --- a/features/multi-column.yml +++ b/features/multi-column.yml @@ -1,5 +1,5 @@ name: Multi-column layout -description: Multi-column layout flows an element's content across one or more content areas in a single row, without affecting the `display` properties of its children. +description: Multi-column layout flows an element's content across one or more columns in a single row, without affecting the `display` property of its children. spec: https://drafts.csswg.org/css-multicol-1/ group: multi-column status: From 560edea4d46845acf89c40b89676e3de386c2d1d Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Mon, 30 Sep 2024 13:19:45 -0700 Subject: [PATCH 5/6] Applies suggestion to column-span.yml description Co-authored-by: Daniel D. Beck --- features/column-span.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/column-span.yml b/features/column-span.yml index 643358b0d9a..b899ad0a25f 100644 --- a/features/column-span.yml +++ b/features/column-span.yml @@ -1,5 +1,5 @@ name: column-span -description: The `column-span` CSS property displays a child element across all columns of a multi-column parent. +description: The `column-span` CSS property controls whether a child element extends across all columns of a multi-column parent. spec: https://drafts.csswg.org/css-multicol-1/#spanning-columns group: multi-column compat_features: From 99894bb2df1d0ac15ccf6854076030806ccc5170 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 9 Oct 2024 13:29:48 -0400 Subject: [PATCH 6/6] Update dist --- features/column-fill.yml.dist | 12 ------------ features/column-span.yml.dist | 26 +------------------------- features/multi-column.yml.dist | 14 +------------- 3 files changed, 2 insertions(+), 50 deletions(-) diff --git a/features/column-fill.yml.dist b/features/column-fill.yml.dist index e1fe5482340..54bde3f7d3e 100644 --- a/features/column-fill.yml.dist +++ b/features/column-fill.yml.dist @@ -27,18 +27,6 @@ compat_features: # safari: "9" # safari_ios: "9" - css.properties.column-fill - - # baseline: high - # baseline_low_date: 2020-07-28 - # baseline_high_date: 2023-01-28 - # support: - # chrome: "50" - # chrome_android: "50" - # edge: "12" - # firefox: ≤72 - # firefox_android: "79" - # safari: "9" - # safari_ios: "9" - css.properties.column-fill.auto - css.properties.column-fill.balance diff --git a/features/column-span.yml.dist b/features/column-span.yml.dist index 9824675cab1..475d670a2c8 100644 --- a/features/column-span.yml.dist +++ b/features/column-span.yml.dist @@ -8,36 +8,12 @@ status: support: chrome: "50" chrome_android: "50" - edge: "79" + edge: "12" firefox: "71" firefox_android: "79" safari: "9" safari_ios: "9" compat_features: - # baseline: high - # baseline_low_date: 2020-07-28 - # baseline_high_date: 2023-01-28 - # support: - # chrome: "50" - # chrome_android: "50" - # edge: "12" - # firefox: "71" - # firefox_android: "79" - # safari: "9" - # safari_ios: "9" - css.properties.column-span - - # ⬇️ Same status as overall feature ⬇️ - # baseline: high - # baseline_low_date: 2020-07-28 - # baseline_high_date: 2023-01-28 - # support: - # chrome: "50" - # chrome_android: "50" - # edge: "79" - # firefox: "71" - # firefox_android: "79" - # safari: "9" - # safari_ios: "9" - css.properties.column-span.all - css.properties.column-span.none diff --git a/features/multi-column.yml.dist b/features/multi-column.yml.dist index 13f58da0020..e5ba66014c4 100644 --- a/features/multi-column.yml.dist +++ b/features/multi-column.yml.dist @@ -53,6 +53,7 @@ compat_features: # safari: "9" # safari_ios: "9" - css.properties.column-count + - css.properties.column-count.auto - css.properties.column-rule - css.properties.column-rule-color - css.properties.column-rule-style @@ -72,19 +73,6 @@ compat_features: # safari_ios: "10" - css.properties.column-gap.multicol_context - # baseline: high - # baseline_low_date: 2020-01-15 - # baseline_high_date: 2022-07-15 - # support: - # chrome: "50" - # chrome_android: "50" - # edge: "79" - # firefox: "52" - # firefox_android: "52" - # safari: "9" - # safari_ios: "9" - - css.properties.column-count.auto - # baseline: false # support: # chrome: "66"