[csswg-drafts] [css-content] Allow replaced elements to be substituted by text

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

== [css-content] Allow replaced elements to be substituted by text ==
The [`content` 
property](https://drafts.csswg.org/css-content/#content-property) does
 not apply to all elements  in general and only to select 
pseudo-elements. 

> Applies to:   `::before`, `::after`, `::marker`, and page margin 
boxes. Image and url values can apply to all elements.

I think it did apply to (almost) all in a previous draft, which made 
it easy to substitute text for an image, e.g. in a user stylesheet:

    img[alt].emoji {content: attr(alt);}

With the current syntax, authors are limited to provide the 
[alternative for speech 
synthesis](https://drafts.csswg.org/css-content/#alt) after a slash, 
but cannot use this string for visual display.

> Value:        `[ <image> ',' ]* [ normal | none | <content-list> ] 
[/ <string> ]?`

    img {content: attr(src url) / attr(alt);}

-----

Asides:

> `<content-list>`
> `[ <string> | contents | <uri> | <quote> | document-url | <target> |
 leader() ]+`
>
> `<image> = <url> | <image()> | <image-set()> | <element()> | 
<cross-fade()> | <gradient>`

- “url value” seems to be a subset of both, `<image>`  and 
`<content-list>`.
- `document-url` only appears here.
- `contents`, `document-url` and `leader()` are not linked to their 
definitions.

_____

Authors can also not use pseudo-elements instead, 

    img {content: none;}
    img::before {content: attr(alt)}

because there is no way – as far as I can tell – to make a replaced 
element non-replaced, so `::before` and `::after` are not available.

> If the computed value of the part of the `content` property that 
ends up being used is a single URI, then the element or pseudo-element
 is a replaced element. The box model defines different rules for the 
layout of replaced elements than normal elements. Replaced elements do
 not have '::before' and '::after' pseudo-elements; the `content` 
property in the case of replaced content replaces the entire contents 
of the element’s box.

Replaced *pseudo*-elements, however, can coexist with a parent 
non-replaced element.

There is even an example in the spec (8) which assumes that string and
 image can be mixed for a normal, non-replaced element like `h1`:

> `h1 { content: url(welcome), "Welcome to: " url(logo); }`

People are replacing element content – replaced or not – through 
scripting all the time. I don’t see why the use case of replacing 
images by their alternative text should not be possible at all in 
plain CSS.

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

Received on Thursday, 17 November 2016 16:53:21 UTC