Content property (again)

After some thinking about the result of the discussion for specifying
replaced content in CSS (see
http://www.bath.ac.uk/~py8ieh/internet/wwwstyle.html#replaced), I am not
totally satisfied.

The first problem that I thought of was that it is not possible to
declare that every image that is a link should have a border around it.
Such a rule would also apply to the ALT text that is displayed if the
image cannot be accessed.
Another problem is that when "content" is overwritten by another
declaration (afterwards or before by !important), the width and height
values should also not be used. So an implicit dependency between
different properties exists, and I would rather make this explicit.

I therefore suggest a different syntax that makes it possible to set
some properties only if a certain other property can be set.
Of course this is not backwards compatible with CSS2, but any forward
compatible parser will just ignore the rule, and the replaced content
syntax would be illegal anyway for a CSS2 parser.

I suggest the creation of a "@try" rule. After the "@try" follows a
single declaration (that contains an uri). If this declaration can be
fulfilled (is not overwritten by a rule afterwards or before, and the
uri can be read and shown), all the declarations in the block apply,
otherwise not.
Multiple @try's are possible and are evaluated one after the other (or
combined if they contain the same declaration), but if a declaration for
the same property without a @try follows, it removes all @try's before.

Examples:

IMG
{
    content:attr(alt);
    @try content:replaced(attr(src))
    {
        width:attr(width); height:attr(height);
    }
}

A[href] IMG
{
    @try content:replaced(attr(src))
    {
        border:solid thin blue;
    }
}

OBJECT
{
    @try content:replaced(attr(data))
    {
        border:solid thin black; /* draw a border only if it is really a
replaced object */
    }
}

IFRAME
{
    @try content:replaced(attr(src))
    {
        border:solid 1px black;
        overflow:scroll;
    }
    @try content:replaced(attr(longdesc))
    {
        border:double 3px black;
        overflow:scroll;
        tooltip:attr(src) " could not be accessed";
    }
}

A[HREFLANG|=de]:before
{
    content:"in German: ";
    color:green;
    @try content:uri(german.gif)
    {
        color:inherit;
        padding-right:1em;
    }
}

#TITLE
{
    content:"Welcome to CSS!!";
    @try content:replaced("welcome_and_logo.mov")
    {
        width:256px;    height:64px;
    }
    @try content:replaced("welcome_and_logo.jpg")
    {
        width:300px;    height:80px;
    }
    @try content:"Welcome to " url(logo.gif) " !!"
    {
        height:58px;
    }
}

And an aural example:
H1
{
    volume:120%;
    @try cue:uri(headline.au)
    {
        volume:inherit; /* no need to speak louder if the sound suggests
that it is a headline */
    }
}

This syntax always offers a (simple) CSS2 solution (before the @try
blocks), so that a certain backwards compatibility is given.
I think this is a) much more flexible than the other solution, b) it is
easier to read what should apply in which case than with comma-seperated
values, although it is longer, and c) it won't be that much different to
implement, as dependency (of width and height) would have to be analysed
anyway.

Christian Kaufhold

Received on Sunday, 15 November 1998 10:05:50 UTC