[csswg-drafts] [css-logical] support flow-relative directions for gradients

jonathantneal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-logical] support flow-relative directions for gradients ==
When writing right-to-left CSS, I’ve noticed I sometimes need to flip presentational images (usually symbols, like "left" or "right" arrows) and gradients. I’m not sure how to solve the former issue, but I have an idea of how I could solve the later.

I propose this addition to CSS Logical Properties and Values that would allow myself and others to write flow-relative gradients.

The linear gradient syntax is:

```
linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
    <color-stop-list>
)
```

And the physical and flow-relative values for `<side-or-corner>` would be:

```
<side-or-corner> = [left | right | inline-start | inline-end] || [top | bottom | block-start | block-end]
```

Using this syntax, I could write:

```css
header {
  background-image: linear-gradient(to inline-end, yellow 0%, blue 100%);
}
```

And left-to-right page progressions would see the equivalent to:

```css
header {
  background-image: linear-gradient(to right, yellow 0%, blue 100%);
}
```


While right-to-left page progressions would see the equivalent to:

```css
header {
  background-image: linear-gradient(to left, yellow 0%, blue 100%);
}
```

I’ve put this into a (probably poorly written) spec: https://jonathantneal.github.io/logical-gradients-spec/

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1724 using your GitHub account

Received on Wednesday, 16 August 2017 00:07:37 UTC