class-Attribut + :after -> content

**Jukka K. Korpela** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Michael Schuerig <michael@schuer ig.de> wrote:
[color=blue]
> I'd like to mark input elements with class "invalid" by appending
> something, say a "?". My understanding is that it should work like
> this:
>
> input.invalid:a fter {
> content:"?";
> }
>
> However, at least in Firefox (1.0.4) and Konqueror (3.4.1) it does
> not work. Is there something I'm missing here or is this an error
> in both implementations ?[/color]

The :after element and generated content (the content property) are
poorly supported at present. I guess Opera is the only relatively
widespread browser that supports them.

On the other hand, I would say that the idea of flagging fields that
way is not robust at all. Remember the CSS caveats: CSS is just for
optional suggestions on presentation; they can be ignored or
overridden. Since it is presumably essential to the user to know which
fields have incorrect content, this should be expressed in actual
content, not generated content.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

**Michael Schuerig** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Jukka K. Korpela wrote:
[color=blue]
> Michael Schuerig <michael@schuer ig.de> wrote:
>[color=green]
>> I'd like to mark input elements with class "invalid" by appending
>> something, say a "?". My understanding is that it should work like
>> this:
>>
>> input.invalid:a fter {
>> content:"?";
>> }
>>
>> However, at least in Firefox (1.0.4) and Konqueror (3.4.1) it does
>> not work. Is there something I'm missing here or is this an error
>> in both implementations ?[/color]
>
> The :after element and generated content (the content property) are
> poorly supported at present. I guess Opera is the only relatively
> widespread browser that supports them.[/color]

The surprising thing is that the individual pieces of CSS rule all work.
[color=blue]
> On the other hand, I would say that the idea of flagging fields that
> way is not robust at all. Remember the CSS caveats: CSS is just for
> optional suggestions on presentation; they can be ignored or
> overridden. Since it is presumably essential to the user to know which
> fields have incorrect content, this should be expressed in actual
> content, not generated content.[/color]

It's only meant for flagging client-side validation errors. If that
doesn't work, there is server-side validation and accompanying
notification to fall back to.

Michael

--
Michael Schuerig Nothing is as brilliantly adaptive
mailto:michael@ schuerig.de as selective stupidity.
http://www.schuerig.de/michael/ --A.O. Rorty, The Deceptive Self

**Spartanicus** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Michael Schuerig <michael@schuer ig.de> wrote:
[color=blue]
>I'd like to mark input elements with class "invalid" by appending
>something, say a "?". My understanding is that it should work like
>this:
>
>input.invalid: after {
> content:"?";
>}
>
>However, at least in Firefox (1.0.4) and Konqueror (3.4.1) it does not
>work. Is there something I'm missing here or is this an error in both
>implementation s?[/color]

Works in Opera and Mozilla 1.5. Not in FF 1.0.4 (bug).

--
Spartanicus

**David Håsäther** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Jukka K. Korpela <jkorpela@cs.tu t.fi> wrote:
[color=blue]
> The :after element and generated content (the content property)
> are poorly supported at present. I guess Opera is the only
> relatively widespread browser that supports them.[/color]

Actually, Gecko has supported it for quite some time. I just tested it
in Firefox 1.05, and this seems to be a bug specifically to the input
element type. What's weird is that the generated content shows up when
using only :after but not when using input:after.

--
David Håsäther

**Pawel Knapik** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

"Michael Schuerig" <michael@schuer ig.de> wrote:[color=blue]
>
> I'd like to mark input elements with class "invalid" by appending
> something, say a "?". My understanding is that it should work like
> this:
>
> input.invalid:a fter {
> content:"?";
> }
>
> However, at least in Firefox (1.0.4) and Konqueror (3.4.1) it does not
> work. Is there something I'm missing here or is this an error in both
> implementations ?
>[/color]

You should find out how does generated content work and where is it placed.
In W3C CSS2 and CSS2.1 documents you can read: "As their names indicate,
the :before and :after pseudo-elements specify the location of content
before and after an element's document tree content."
That means:
<element> [:before] original content [:after] </element>

so, where do you think the content should be placed in:
<element /> ?

I have tested with <input /> and like Spartanicus have noticed it works in
Opera, but IMHO it is Opera's missinterpretat ion (I don't want to say
"bug").

So in yor case you'll need to use:
<parent class="invalid" > <input /></parent>

And the CSS

parent.invalid: after {
content:"?";
}

The generated content will be placed after parent element content, so after
the input element.
Won't work in any IE version, but should in CSS2 compliant browsers.

**Spartanicus** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

"Pawel Knapik" <pawel.knapik@g mail.com> wrote:
[color=blue]
>You should find out how does generated content work and where is it placed.
>In W3C CSS2 and CSS2.1 documents you can read: "As their names indicate,
>the :before and :after pseudo-elements specify the location of content
>before and after an element's document tree content."
>That means:
><element> [:before] original content [:after] </element>
>
>so, where do you think the content should be placed in:
><element /> ?[/color]

Good point. On reflection I agree that the content should not be
generated after the element as Opera and Mozilla 1.5 do. Neither would
it be correct to generate the content inside the input element since it
has no document tree content.

--
Spartanicus

**Christoph Päper** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Pawel Knapik:[color=blue]
> <element> [:before] original content [:after] </element>
>
> so, where do you think the content should be placed in:
> <element /> ?[/color]

I tend to agree that empty elements, which do not generate a box, should
also not generate '::before' and '::after' boxes, but replaced elements,
like 'input', 'img' and even 'br' in HTML, should. That are only my
expectations, though, I have not yet checked the actual wording in the
CSS 2.0 and 2.1 specs.

**Jukka K. Korpela** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Michael Schuerig <michael@schuer ig.de> wrote:
[color=blue][color=green]
>> On the other hand, I would say that the idea of flagging fields
>> that way is not robust at all. Remember the CSS caveats: CSS is
>> just for optional suggestions on presentation; they can be ignored
>> or overridden. Since it is presumably essential to the user to
>> know which fields have incorrect content, this should be expressed
>> in actual content, not generated content.[/color]
>
> It's only meant for flagging client-side validation errors. If that
> doesn't work, there is server-side validation and accompanying
> notification to fall back to.[/color]

But this still means that with client-side scripting enabled and style
sheets disabled the user fails to get essential information, and is not
notified about this.

If you do client-side validation, it would be logical to make it
indicate errors in a manner that does not rely on CSS. For example, by
modifying the document's content to contain "?".

--
Yucca, http://www.cs.tut.fi/~jkorpela/

**Michael Schuerig** · Jul 21 '05, 02:04 AM

Re: class-Attribut + :after -> content

Jukka K. Korpela wrote:
[color=blue]
> But this still means that with client-side scripting enabled and style
> sheets disabled the user fails to get essential information, and is
> not notified about this.[/color]

For the general case of a web app in the wild that's true. I'm currently
concerned only with a defined set of browsers in a closed, in-house
environment.
[color=blue]
> If you do client-side validation, it would be logical to make it
> indicate errors in a manner that does not rely on CSS. For example, by
> modifying the document's content to contain "?".[/color]

Agreed, that's what I'm doing right now as there are other advantages,
too.

Michael

--
Michael Schuerig Face reality and stare it down
mailto:michael@ schuerig.de --Jethro Tull, Silver River Turning

Michael Schürig | Sentenced to making sense

http://www.schuerig.de/michael/

class-Attribut + :after -> content

class-Attribut + :after -> content

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment