Page MenuHomePhabricator

TemplateStyles does not allow logical CSS properties
Closed, ResolvedPublicFeature

Description

Steps to replicate the issue (include links if applicable):

  • Try to use logical CSS properties like border-block-end-color, padding-inline, margin-block-start

What happens?:

The CSS can't be saved, with the error Unrecognized or unsupported property.

What should have happened instead?:

The CSS should be accepted.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

MDN page about logical properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties

The main ones which would be useful in templates are the border, margin and padding ones where it should support block, block-start, block-end, inline, inline-start, inline-end where it currently supports left, right, top and bottom.

These are useful for writing CSS which depends on the writing mode and text direction, e.g. border-inline-start is equivalent to border-left for ltr text, border-right for rtl text and border-top for vertical text.

Event Timeline

Izno changed the subtype of this task from "Bug Report" to "Feature Request".Jan 14 2023, 12:57 AM

This requires updating upstream component css-sanitiser with the new logical property values. This should be relatively simple.

The whole of css-sanitzer could really do with an update, but its quite a bit of manual labor to go through all the specs and make sure everything is up to date (I started once, but calculated that going through all the specs and checking everything is up to date would take me some 20+ hours. And that is just for updating property names and values, not introducing new units or other more invasive spec changes.

This requires updating upstream component css-sanitiser with the new logical property values. This should be relatively simple.

The whole of css-sanitzer could really do with an update, but its quite a bit of manual labor to go through all the specs and make sure everything is up to date (I started once, but calculated that going through all the specs and checking everything is up to date would take me some 20+ hours. And that is just for updating property names and values, not introducing new units or other more invasive spec changes.

As I’ve described previously in T162379#4173054, using Autoprefixer can maybe speed it up the list generation if one would leverage it correctly.

Change #1050724 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[css-sanitizer@master] Add support for sizing properties of CSS Logical

https://gerrit.wikimedia.org/r/1050724

Change #1050707 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[css-sanitizer@master] Add support for logical values in float property

https://gerrit.wikimedia.org/r/1050707

Change #1050707 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[css-sanitizer@master] Add support for logical values in float property

https://gerrit.wikimedia.org/r/1050707

Change #1050707 merged by jenkins-bot:

[css-sanitizer@master] Add support for logical values in float and clear properties

https://gerrit.wikimedia.org/r/1050707

Change #1050724 merged by jenkins-bot:

[css-sanitizer@master] Add CSS Logical 1 Properties support

https://gerrit.wikimedia.org/r/1050724