Re: New feature. Content templates

On 3/15/2012 5:06 PM, Benjamin Hawkes-Lewis wrote:
> On Thu, Mar 15, 2012 at 10:37 PM, Alexander Shpack<shadowkin@gmail.com>  wrote:
>>> That's an interesting idea. I'd use text() rather than pattern() though.
>> Pattern may contain not text only.
>>
>>> A real world example could be a text preview of a form/email being sent...
>>> something that needs its content to be updated live. Maybe one of those
>>> "fill-a-word" forms.
>>> This can all be done in easy and simple javascript though, so I don't
>>> actually see much *use* for it, but I still think it's an excellent idea.
>>>
>> Another example: Error messages near invalid inputs or boxes.
>>
>> Basic HTML
>>
>> <label class="handleEmptyErr">  Login<input type="text"></label>
>> <label class="handleEmptyErr">  Pass<input type="password"></label>
>> <label class="handleEmptyErr handleMatchErr">  Pass again<input
>> type="password"></label>
>>
>> Basic CSS
>>
>> .handleEmptyErr::after
>> {
>>   content: pattern(emptyErrMsg);
>> }
>> .handleMatchErr::after
>> {
>>   content: pattern(matchErrMsg);
>> }
>>
>> When user sent this form via AJAH, in error case server should
>> response just patterns
>>
>> <div style="display:none" id="response">
>>   <div id="emptyErrMsg"><span class="errMsg">This field is required</span></div>
>>   <div id="matchErrMsg"><span class="errMsg">Doesn't match</span></div>
>> </div>
>>
>> And, if I need to clear error messages, I just remove #response container.
> It is fundamental to the design of the web platform that CSS is just a
> skinning/styling layer. CSS is not suitable as a DOM templating
> language, as content should not be dependent on the styling layer. How
> would users who (for accessibility reasons or otherwise) apply their
> own stylesheets or their user agents default styles to your content,
> rather than the styles you provided, read your error messages?
>

The author would use aria-invalid to signal a form is invalid.
Yes, they ought to be using aria-live somewhere.

<label aria-invalid="true"> Login <input type="text" /></label>
<style>label[aria-invalid="true"]::after { content: "* Fix this"; color: 
darkred; content: text(#genericBrokenContent); }

The CSS counter attribute adds some presentational markup that would be 
nice to have accessible.
<code></code> code::before { content: "Example " counter(code); }

The Web Components proposal plucks even more content options out of 
DOM's reach.

It's up to the authors to use these features appropriately, and to test. 
They may indeed use all of this in a way that confuses decorative
APIs with semantic ones.

For example:

.handleMatchErr::after
{
  content: "This field is required";
}



-Charles

Received on Saturday, 17 March 2012 00:58:04 UTC