Re: [csswg-drafts] [css-images] [css-gcpm] Overloaded definitions of element()

So far I see four different solutions for this conflict:

## 1. Define running elements in HTML
Instead of CSS, [running elements](https://drafts.csswg.org/css-gcpm/#running-elements) could be defined within HTML, e.g. via a `<running>` element, as they have some associated semantic.

Doing so would allow to style them without the need for the `running()` and `element()` functions currently defined in the CSS GCPM Module.

Example:
```html
<running position="top-center">
  <h1>My awesome title</h1>
  <h2>With a great subtitle</h2>
</running>
```

```css
@page {
  @top-center { color: #808080; }
}
```

## 2. Rename the `element()` function
If defining the element outside of CSS is not an option, another solution would be to simply rename the `element()` function defined in the CSS GCPM Module. It could even be renamed to `running()`, so definition and usage would be consistent.

Example:
```css
@page {
  @top { content: running(header); }
}

h1 { position: running(header); color: #808080; }
```

## 3. Let one definition of `element()` serve both use cases
Only define `element()` once, e.g. just let it take `<id-selector>`s. This would make the `running()` function redundant, because the element would be identified by the selector instead of a custom identifier.

Example:
```css
@page {
  @top-center { content: element(#header); color: #808080; }
}
```

## 4. Define the element within the margin at-rule instead via `content`
Instead of defining the contents of the page margins via the `content` property they could be defined as value for the margin at-rule.

Examples:
```css
@page {
  @top-center #header { color: #808080; }
}
```

```css
@page {
  @top-center "My awesome title" { color: #808080; }
}
```

Sebastian

-- 
GitHub Notification of comment by SebastianZ
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1981#issuecomment-344450083 using your GitHub account

Received on Wednesday, 15 November 2017 00:51:35 UTC