Skip to content

[css-logical] Flow-relative syntax for margin-like shorthands #1282

@fantasai

Description

@fantasai

CSS currently assigns the values in the margin/padding/border shorthand to their physical longhands, i.e.

 margin: 1em 2em 3em 4em; 

is equivalent to

 margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 4em; 

I'm pretty sure we want some equivalent syntax for assigning into the logical longhands instead, but what should that be?

The current proposal is to put a keyword in front of the 4 values, like

 margin: relative 1em 2em 3em 4em; 

Another possibility is to use a !keyword:

 margin: 1em 2em 3em 4em !relative; 

or to create a new property in its place:

 margin-relative: 1em 2em 3em 4em; 

or use some entirely as-yet-unused symbol or syntax.

And of course the exact keyword, if one is used, is up for debate as well; shorter would be better. People will be drawing up entire style sheets that use almost exclusively flow-relative properties, so this needs to be designed for comfort under frequent use.

Ideas welcome~

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    Thursday Morning

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions