Re: Display Property Suggestion

Ian Hickson wrote:
>On Fri, 30 Oct 1998, Gabriel Paiz III wrote:
>>> The display property should be extended to also take a url() in
>>> conjunction with one of the keywords, thus:
>>>
>>>   [ inline | block | list-item | run-in | compact |
>>>     marker | table | inline-table | table-row-group |
>>>     table-header-group | table-footer-group | table-row |
>>>     table-column-group | table-column | table-cell |
>>>     table-caption ] <uri>? | none | inherit
>>>
>> Can <uri>? be replaced with:
>>  [[<uri>, ]*  [missing | <some other defaults> | none]]?
>> to handle MIA replaced content?
>The multiple <uri> seems like a good idea, certainly. I think the
>"missing" keyword is a bit redundant, since it prevents the
>alternative content from being drawn. Better would be to put the
>"missing" picture into the final content property (see last example
>below).
[...]
>Alternatively:
>
> img:before { display: inline url(attr(src)); content: url("mia.png");
>              width: auto; height: auto; }
> img[alt]:before { display: inline url(attr(src)); content: attr(alt);
>                   width: auto; height: auto; }
>
>...would do what you describe.
I would suggest rather than to use "display" to set the url (image) to
show, to use "content".
I think it makes more sense to say:
img
{
    display: block;
    content: url(attr(src)), attr(alt);
}
In this way I would allow "content" to be used not only for :before and
:after, but also for the real element (which should be empty so that its
content is not lost), which means that the browser tries to read the url
(one after the other), and
if that fails, displays the rest of the content.
Maybe the keyword "auto" or even "element" could be used to display the
HTML element's content in cases like
  <OBJECT data="logo.mpeg" "type="application/mpeg">
    <OBJECT data="logo.gif" type="image/gif">
      Firm XYZ
    </OBJECT>
  </OBJECT>
would use the stylesheet
object
{
    content:url(attr(data)), element;
}

This solution makes it also very easy to turn of image display:
img { content:attr(alt)!important; }

Also it doesn't turn "display" into a "pseudo-shorthand" property that
takes both the display-mode, and the url to display, and which might
therefore make problems in terms of the cascade (what happens when a
user has set "img { display:inline!important }" ?).

Christian Kaufhold

Received on Friday, 30 October 1998 17:53:47 UTC