Re: [CSS21][css-content] Resizing pseudo-elements with content: url()

On Wed, Feb 18, 2015 at 04:58:25PM +0800, Daniel Tan wrote:
> As far as I'm aware, it is not possible to resize an image that is
> rendered using content: url() on a ::before or ::after pseudo-element:
> 
> .foo::before {
>   content: url(http://placehold.it/500x500);
>   width: 200px;
>   height: 200px;
> }
> 
> The image is rendered as-is, with its intrinsic dimensions as specified
> by the contents of the resource, if any. The width and height properties
> do not apply even though it appears to result in a replaced element.
> Section 3 of css-content states the following, which is in line with
> what I would expect:
> 
> >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 above text might represent a mistake in css-content.
In the current Editors' Draft of css-content, one part of the document
has been changed to add a qualification of (what I'd guess means) "other than
after the last comma":

  # For URIs other than URIs in the last comma separated section of the value,
  # if the URI is available and the format is supported, then the element or
  # pseudo-element becomes a replaced element [...]

and instead adds

  # If the URI is part of the last comma separated value in the list, [...]
  # then an anonymous replaced inline element is inserted [if the image is
  # available]

Whereas the part that Daniel quoted is still unchanged, which looks to
me like an error.

I would guess that the reason for treating the last element of the
comma-separated list specially is because this last element is a <content-list>
rather than just a <uri>, so it might have multiple pieces of content.
E.g. consider what behaviour you'd expect in the following case:

  .foo::before {
    content: url(500x500) " and " url(300x300);
    width: 200px;
    height: 200px;
  }

and then consider what change you'd most likely expect if you started
with this example and then removed the string and the url(300x300).

So I suspect that the intent is that the part that Daniel quoted should be
changed from "is a single URI" to something about one of the URIs before the
last comma-separated section.

(Once css-content is mature and widely implemented, an author could write
 "content: url(500x500), none; width 200px; ..." to size the replaced box if
 the image is available.  Though so far, I believe css-content is still only
 a working draft.)

> However, CSS2.1 says nothing at all about replaced elements in the
> section on content: url() ... not appear to be documented explicitly in CSS2.1.

Yes.  I'll let someone else comment on how CSS 2.x issues are being handled.

pjrm.

Received on Wednesday, 18 February 2015 13:47:12 UTC