W3C home > Mailing lists > Public > www-style@w3.org > April 2004

Re: content: url() is bad

From: Ian Hickson <ian@hixie.ch>
Date: Tue, 13 Apr 2004 20:38:09 +0000 (UTC)
To: Mikko Rantalainen <mira@cc.jyu.fi>
Cc: www-style@w3.org
Message-ID: <Pine.LNX.4.58.0404132015270.25979@dhalsim.dreamhost.com>

On Tue, 13 Apr 2004, Mikko Rantalainen wrote:
>>
>> One of my requirements is "be able to describe <img> in CSS easily".
>>
>> Using my suggestion, it's:
>>
>>    img { content: attr(src, uri), attr(alt), none;
>>          width: attr(width, px); height: attr(height, px); }
>>
>> ...which basically means one reasonably simple extension to 'content', and
>> the use of 'attr()', which will be introduced in CSS3 Values and Units.
>
>     img { content: attr(src, uri), attr(alt), none; }
>     img::nth-anonymous-child(1) { width: attr(width, px);
>           height: attr(height, px);}

Blimey. This is supposed to be simpler?


> My model has an additional problem that existing style sheets having
> rules like img { width: 100%; } wouldn't scale the linked image. I'm not
> sure if that's a problem.

This is a big problem, yes, since it would mean CSS3 was not backwards
compatible with CSS1, and would imply that all existing user agents were
suddenly made non-compliant, which, as bz recently pointed out, is not an
acceptable situation.


> Perhaps add the display: replaced (as I suggested earlier) to workaround
> this problem?

I don't see that adding a pseudo-element _and_ then adding a new display
value to work around the problem is better than having neither and simply
making the 'content' property "do the right thing".


> In addition, considering that there was wishes to allow the content to
> have multiple linked resources having only one width/height pair to set
> is unacceptable. For example:
>
> #index h1 { content: url(logo) url(fancyindex); }
>
> Now, if I, as a style sheet author, would want to specify the size
> for the logo *and* for the fancy prerendered index text, I'd still
> need something better than modifying width and height of the above
> h1 element.

If it's only two, you could do:

   #index h1::before { content: url(logo); height: 1em; width: 1em; }
   #index h1 { content: none; }
   #index h1::after { content: url(fancyindex); height: 1em; width: 2em; }

...but that is limited to just 2. (Actually with the current proposal as
published, you could do any number of images, but we're going to be
cutting that from the next draft, in favour of XBL, where you would be
able to do all of this much more explicitly and clearly.)


> There are some open questions: if I have markup like
>
> <div>foo</div>
>
> and I specify style
>
> div { display: table; width: 50%; }
>
> then, according to CSS spec[1] (if I've understood correctly) the
> div should contain an anonymous table-row element containing an
> anonymous table-cell element containing an anonymous inline element
> with text "foo".

Correct.


> How do I select the anonymous table-cell element to modify it's
> vertical-align property?

You can't, currently.

You _could_, in CSS3, do it like this:

   div::outside { display: table; width: 50%; }
   div { display: table-cell; vertical-align: top; }

...or, if you want more control, you could use XBL to insert a shadow
element into the tree to act as the cell:

   div { binding: url(wrap-contents-in-a-block.xml); }
   div { display: table; width: 50%; }
   div > block { display: table-cell; vertical-align: top; }

...with that xml file containing something like:

   <xbl:xbl xmlns:xbl="http://www.w3.org/2004/xbl">
    <xbl:definition>  <!-- define a new XBL binding -->
     <xbl:template applyAuthorSheets="true">
                      <!-- define the shadow content template for it -->
                      <!-- the attribute is needed to say that the
                           stylesheet above should apply to the following
                           content, otherwise only the styles in the XBL
                           file itself are applied -->
      <block>         <!-- our shadow block element -->
       <xbl:content/> <!-- insert all the children nodes here -->
      </block>
     </xbl:template>
    </xbl:definition>
   </xbl:xbl>

The advantage with the XBL technique is that you avoid having to have any
pseudo-elements, and you only have to have the XBL written once (or you
can have a library of XBL bindings that you use).

-- 
Ian Hickson                                      )\._.,--....,'``.    fL
U+1047E                                         /,   _.. \   _\  ;`._ ,.
http://index.hixie.ch/                         `._.-(,_..'--(,_..'`-.;.'
Received on Tuesday, 13 April 2004 16:38:19 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:29 GMT