Re: [css3-content] sizing of images inserted using the content property

On Mon, Nov 21, 2011 at 4:44 AM, Florian Rivoal <> wrote:
> Section "8. Replaced content" says that when the content introduced by
> content: is a single url, then the element or pseudo element is a replaced
> element.
> Given what the box model says about replaced elements, I understand it to
> mean that both of these should insert an image and size it to 42 x 42
> pixels.
> #foo {content: url("bar.jpg"); width : 42px; height:42px;}
> #foo::before {content: url("bar.jpg"); width: 42px; height:42px;}
> Chrome resizes the first one, but uses the intrinsic dimensions of the image
> for the second
> firefox and ie don't support the first, and use intrinsic dimensions for the
> second
> opera uses intrinsic dimensions for both cases
> So we have interoperability but (obsolete) spec violation when replacing
> content on pseudo elements. For non-pseudos, Opera choses to be consistent
> with pseudos, while Chrome decides to follow the spec it just ignored.
> Any idea about how to resolve this?

As Boris is saying, the 2.1 processing model for images in 'content'
is to render them as an anonymous inline box in the element.  They are
then unsizeable by traditional means.

Content 3 is *way* out of date here (if you're looking at the ED, it
has that big obsoletion notice on it).  The correct solution, when I
or someone else has time to pick the spec up, is to add another value
to 'content', something like:

::before { content: replaced url("foo"); }

which would make the element into a replaced element.


Received on Monday, 21 November 2011 15:51:52 UTC