Re: [csswg-drafts] [css-pseudo-4] new generated content pseudo :between/:separator

I fat-fingered the delete button of a previous comment, basically I said that I misread the proposal and that the code with `::contents` needs some small modifications:

```css
ul.recycler > * {
  & { display: contents }
  &::contents { display: block }
  & + ::before { /* ... */ }
}
```

It's true that proper hit-testing may need some refinements, like using `ul.recycler > ::contents:hover` instead of just `ul.recycler > :hover`, or playing with `pointer-events`. But I think it's mostly doable.

This table summarizes the relationships between the related proposals:

<table>
  <thead>
    <tr>
      <th rowspan="2">Feature</th>
      <th colspan="4">Can be simulated with</th>
    </tr>
    <tr>
      <th><code>::between</code></th>
      <th><code>::contents</code></th>
      <th><code>::wrapper</code></th>
      <th><code>::outer-before</code> / <code>::outer-after</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><code>::between</code></th>
      <td>-</td>
      <td>Yes, with <code>display: contents</code> and <code>::before</code> / <code>::after</code>.</td>
      <td>Only if <code>::wrapper::before</code> / <code>::wrapper::after</code> are allowed.</td>
      <td>Yes.</td>
    </tr>
    <tr>
      <th><code>::contents</code></th>
      <td>Mostly not.</td>
      <td>-</td>
      <td>Only for use-cases without <code>::before</code> nor <code>::after</code></td>
      <td>Mostly not.</td>
    </tr>
    <tr>
      <th><code>::wrapper</code></th>
      <td>Mostly not.</td>
      <td>Only for use-cases without <code>::before</code> nor <code>::after</code></td>
      <td>-</td>
      <td>Mostly not.</td>
    </tr>
    <tr>
      <th><code>::outer-before</code> / <code>::outer-after</code></th>
      <td>Mostly not.</td>
      <td>Yes, with <code>display: contents</code> and <code>::before</code> / <code>::after</code>.</td>
      <td>Only if <code>::wrapper::before</code> / <code>::wrapper::after</code> are allowed.</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

IMO the best and most complete one is `::contents`. `::wrapper` may be good enough if pseudo-element nesting is allowed, but this would allow generating arbitrarily-deep structures which I suspect will be more difficult to implement.

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

Received on Sunday, 5 August 2018 17:57:30 UTC