[csswg-drafts] [css-page] [css-variables-2] Allow use of css-variables in page contexts (#4761)

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

== [css-page] [css-variables-2] Allow use of css-variables in page contexts ==
Propagating an old idea of Shinyu Murakami from the mailing list to Github issues, because I think it's the gem of a great idea. I want to make sure it's available as a starting point for discussion.

The intended goal is to allow some page-based variation of fragments, of the type commonly requested in print workflows, eg:
* switching from single column to two column after the first page
* changing border-radius values depending on whether the page was left or right
-----

Hello,

I would like to propose another approach: Use [CSS Variables](http://www.w3.org/TR/css-variables-1) with @page :left/:right.

An example:

```css
  @page :left {
    var-foo: 2em 0.5em 0.5em 2em;
  }
  @page :right {
    var-foo: 0.5em 2em 2em 0.5em;
  }
```
```html
  div {
    border-radius: var(foo);
  }
```
The problem here is that the `var(foo)` cannot refer the custom property 'var-foo' value set in the @page context according to the current spec.
We need to allow this usage, or to define another notation to refer the custom property values set in the @page context, e.g.:
```html
  div {
    border-radius: from-page-context(var-foo);
  }
```
Here the from-page-context() function retrieves the property value that the argument matches the property name, which can be custom (var-*) or normal properties, e.g.:
```css
  @page :left {
    color: blue;
    var-foo: 2em 0.5em 0.5em 2em;
  }
  @page :right {
    color: green;
    var-foo: 0.5em 2em 2em 0.5em;
  }
```
```html
  div {
    color: from-page-context(color);
    border-radius: from-page-context(var-foo);
  }
```
The concept of the from-page-context() function is similar to the `from-page-master-region()` function defined in the [XSL-FO](http://www.w3.org/TR/xsl/), although this XSL-FO's function only accepts very limited properties, and no custom properties, for now.

Regards,

Shinyu Murakami
Antenna House

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

Received on Saturday, 8 February 2020 13:31:14 UTC