diff --git a/features/column-fill.yml b/features/column-fill.yml new file mode 100644 index 00000000000..176de6f7e52 --- /dev/null +++ b/features/column-fill.yml @@ -0,0 +1,11 @@ +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: multi-column +status: + compute_from: css.properties.column-fill +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..54bde3f7d3e --- /dev/null +++ b/features/column-fill.yml.dist @@ -0,0 +1,35 @@ +# Generated from: column-fill.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + 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 + # support: + # chrome: "50" + # chrome_android: "50" + # edge: "12" + # firefox: "52" + # firefox_android: "52" + # safari: "9" + # safari_ios: "9" + - css.properties.column-fill + - css.properties.column-fill.auto + - css.properties.column-fill.balance + + # 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..b899ad0a25f --- /dev/null +++ b/features/column-span.yml @@ -0,0 +1,8 @@ +name: column-span +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: + - 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..475d670a2c8 --- /dev/null +++ b/features/column-span.yml.dist @@ -0,0 +1,19 @@ +# 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: "12" + firefox: "71" + firefox_android: "79" + safari: "9" + safari_ios: "9" +compat_features: + - css.properties.column-span + - 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..0374502fcd1 --- /dev/null +++ b/features/multi-column.yml @@ -0,0 +1,20 @@ +name: Multi-column layout +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: + compute_from: css.properties.columns +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..e5ba66014c4 --- /dev/null +++ b/features/multi-column.yml.dist @@ -0,0 +1,93 @@ +# Generated from: multi-column.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + 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: + # 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 + + # ⬇️ Same status as overall feature ⬇️ + # 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-count.auto + - 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: 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 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