Logical properties

features/logical-properties.yml

@@ -0,0 +1,73 @@
+name: Logical properties
+description: The logical CSS properties control borders, size, margin, and padding with directions and dimensions relative to the writing mode. For example, in a left to right, top to bottom writing mode, `block-end` refers to the bottom. Also known as flow relative.
+spec: https://drafts.csswg.org/css-logical-1/
+caniuse: css-logical-props
+group: css
+# Picked to match caniuse- clear and float came 2 years later, but don't warrant separate features.
+status:
+  compute_from: css.properties.border-end-end-radius
+compat_features:
+  - css.properties.block-size
+  - css.properties.border-block
+  - css.properties.border-block-color
+  - css.properties.border-block-end
+  - css.properties.border-block-end-color
+  - css.properties.border-block-end-style
+  - css.properties.border-block-end-width
+  - css.properties.border-block-start
+  - css.properties.border-block-start-color
+  - css.properties.border-block-start-style
+  - css.properties.border-block-start-width
+  - css.properties.border-block-style
+  - css.properties.border-block-width
+  - css.properties.border-end-end-radius
+  - css.properties.border-end-start-radius
+  - css.properties.border-inline
+  - css.properties.border-inline-color
+  - css.properties.border-inline-end
+  - css.properties.border-inline-end-color
+  - css.properties.border-inline-end-style
+  - css.properties.border-inline-end-width
+  - css.properties.border-inline-start
+  - css.properties.border-inline-start-color
+  - css.properties.border-inline-start-style
+  - css.properties.border-inline-start-width
+  - css.properties.border-inline-style
+  - css.properties.border-inline-width
+  - css.properties.border-start-end-radius
+  - css.properties.border-start-start-radius
+  - css.properties.clear.inline-end
+  - css.properties.clear.inline-start
+  - css.properties.float.inline-end
+  - css.properties.float.inline-start
+  - css.properties.inline-size
+  - css.properties.inset
+  - css.properties.inset.auto
+  - css.properties.inset-block
+  - css.properties.inset-block.auto
+  - css.properties.inset-block-end
+  - css.properties.inset-block-end.auto
+  - css.properties.inset-block-start
+  - css.properties.inset-block-start.auto
+  - css.properties.inset-inline
+  - css.properties.inset-inline.auto
+  - css.properties.inset-inline-end
+  - css.properties.inset-inline-end.auto
+  - css.properties.inset-inline-start
+  - css.properties.inset-inline-start.auto
+  - css.properties.margin-block
+  - css.properties.margin-block-end
+  - css.properties.margin-block-start
+  - css.properties.margin-inline
+  - css.properties.margin-inline-end
+  - css.properties.margin-inline-start
+  - css.properties.max-block-size
+  - css.properties.max-inline-size
+  - css.properties.min-block-size
+  - css.properties.min-inline-size
+  - css.properties.padding-block
+  - css.properties.padding-block-end
+  - css.properties.padding-block-start
+  - css.properties.padding-inline
+  - css.properties.padding-inline-end
+  - css.properties.padding-inline-start

features/logical-properties.yml.dist

@@ -0,0 +1,163 @@
+# Generated from: logical-properties.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2021-09-20
+  baseline_high_date: 2024-03-20
+  support:
+    chrome: "89"
+    chrome_android: "89"
+    edge: "89"
+    firefox: "66"
+    firefox_android: "66"
+    safari: "15"
+    safari_ios: "15"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "57"
+  #   chrome_android: "57"
+  #   edge: "79"
+  #   firefox: "41"
+  #   firefox_android: "41"
+  #   safari: "12.1"
+  #   safari_ios: "12.2"
+  - css.properties.block-size
+  - css.properties.inline-size
+  - css.properties.max-block-size
+  - css.properties.max-inline-size
+  - css.properties.min-block-size
+  - css.properties.min-inline-size
+
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "69"
+  #   chrome_android: "69"
+  #   edge: "79"
+  #   firefox: "41"
+  #   firefox_android: "41"
+  #   safari: "12.1"
+  #   safari_ios: "12.2"
+  - css.properties.border-block-end
+  - css.properties.border-block-end-color
+  - css.properties.border-block-end-style
+  - css.properties.border-block-end-width
+  - css.properties.border-block-start
+  - css.properties.border-block-start-color
+  - css.properties.border-block-start-style
+  - css.properties.border-block-start-width
+  - css.properties.border-inline-end
+  - css.properties.border-inline-end-color
+  - css.properties.border-inline-end-style
+  - css.properties.border-inline-end-width
+  - css.properties.border-inline-start
+  - css.properties.border-inline-start-color
+  - css.properties.border-inline-start-style
+  - css.properties.border-inline-start-width
+  - css.properties.margin-block-end
+  - css.properties.margin-block-start
+  - css.properties.margin-inline-end
+  - css.properties.margin-inline-start
+  - css.properties.padding-block-end
+  - css.properties.padding-block-start
+  - css.properties.padding-inline-end
+  - css.properties.padding-inline-start
+
+  # baseline: high
+  # baseline_low_date: 2021-04-26
+  # baseline_high_date: 2023-10-26
+  # support:
+  #   chrome: "87"
+  #   chrome_android: "87"
+  #   edge: "87"
+  #   firefox: "63"
+  #   firefox_android: "63"
+  #   safari: "14.1"
+  #   safari_ios: "14.5"
+  - css.properties.inset-block
+  - css.properties.inset-block-end
+  - css.properties.inset-block-start
+  - css.properties.inset-inline
+  - css.properties.inset-inline-end
+  - css.properties.inset-inline-start
+
+  # baseline: high
+  # baseline_low_date: 2021-04-26
+  # baseline_high_date: 2023-10-26
+  # support:
+  #   chrome: "87"
+  #   chrome_android: "87"
+  #   edge: "87"
+  #   firefox: "66"
+  #   firefox_android: "66"
+  #   safari: "14.1"
+  #   safari_ios: "14.5"
+  - css.properties.border-block
+  - css.properties.border-block-color
+  - css.properties.border-block-style
+  - css.properties.border-block-width
+  - css.properties.border-inline
+  - css.properties.border-inline-color
+  - css.properties.border-inline-style
+  - css.properties.border-inline-width
+  - css.properties.inset
+  - css.properties.margin-block
+  - css.properties.margin-inline
+  - css.properties.padding-block
+  - css.properties.padding-inline
+
+  # baseline: high
+  # baseline_low_date: 2021-04-26
+  # baseline_high_date: 2023-10-26
+  # support:
+  #   chrome: "87"
+  #   chrome_android: "87"
+  #   edge: "87"
+  #   firefox: ≤72
+  #   firefox_android: "79"
+  #   safari: "14.1"
+  #   safari_ios: "14.5"
+  - css.properties.inset-block-end.auto
+  - css.properties.inset-block-start.auto
+  - css.properties.inset-block.auto
+  - css.properties.inset-inline-end.auto
+  - css.properties.inset-inline-start.auto
+  - css.properties.inset-inline.auto
+  - css.properties.inset.auto
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2021-09-20
+  # baseline_high_date: 2024-03-20
+  # support:
+  #   chrome: "89"
+  #   chrome_android: "89"
+  #   edge: "89"
+  #   firefox: "66"
+  #   firefox_android: "66"
+  #   safari: "15"
+  #   safari_ios: "15"
+  - css.properties.border-end-end-radius
+  - css.properties.border-end-start-radius
+  - css.properties.border-start-end-radius
+  - css.properties.border-start-start-radius
+
+  # baseline: low
+  # baseline_low_date: 2023-10-13
+  # support:
+  #   chrome: "118"
+  #   chrome_android: "118"
+  #   edge: "118"
+  #   firefox: "55"
+  #   firefox_android: "55"
+  #   safari: "15"
+  #   safari_ios: "15"
+  - css.properties.clear.inline-end
+  - css.properties.clear.inline-start
+  - css.properties.float.inline-end
+  - css.properties.float.inline-start