- From: Mike Bremford via GitHub <sysbot+gh@w3.org>
- Date: Sat, 08 Feb 2020 13:47:32 +0000
- To: public-css-archive@w3.org
The reason I like this is it can be done by extending an existing, well understood part of CSS to offer a great deal of new functionality with no new syntax, and virtually no learning curve.
Simply insert the page context as an ancestor for variable inheritance after the root element. This wouldn't work for everything, of course - most obviously you couldn't expect `page: var(--page)` to inherit from the @page rule, but there are plenty of others you would consider excluding from using the page-context for inheritance (display, break-before, position spring to mind).
However, for a suitably limited list of properties, it offers great things:
```css
:root {
--cols: 2;
}
@page :first {
--cols: 1;
}
div {
column-count: var(--cols);
}
```
```css
page :left {
--radius-right: 50%;
--radius-left: 0;
}
page :right {
--radius-left: 50%;
--radius-right: 0;
}
.box {
border-top-left-radius: --radius-left;
border-bottom-left-radius: --radius-left;
border-top-right-radius: --radius-right;
border-bottom-right-radius: --radius-right;
}
```
--
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4761#issuecomment-583738095 using your GitHub account
Received on Saturday, 8 February 2020 13:48:05 UTC