News

Add new post

A Propusal for A New Pseudo Element Called :icon

Take a look to this HTML5 code as shown here:

<menu type="toolbar">
	<command type="radio" radiogroup="alignment" checked="checked"
		label="Left" icon="icons/alL.png" onclick="setAlign('left')">
	<command type="radio" radiogroup="alignment"
		label="Center" icon="icons/alC.png" onclick="setAlign('center')">
	<command type="radio" radiogroup="alignment"
		label="Right" icon="icons/alR.png" onclick="setAlign('right')">
<hr>
	<command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>

The question is: Isn’t icon="" attribute here a presentation attribute?
You might say yes, and it should be set using CSS like this:

command.align-right{icon: '....'}

However, this presentation attribute in turn needs presentation attributes! (position, padding…).

So, we need something in between: A Pseudo Element.
A Pseudo Element is simply an attribute has attributes.

<command class="page-about"...></command>
<command class="domain-settings"...></command>

.page-about:icon {
	content: char(ℹ);
	font: 10pt RichStyle;
	icon-position: top;
}

.domain-settings:icon {
	content: char(⚙);
	font: 10pt RichStyle;
	icon-position: top;
}

Thus, icon="" as an HTML attribute for <command> should be deprecated.

The Shameless Plug Tag

Particularly with the rise in self promotional activities around Social Networks there is a need for a self promotional meta tag – distinct from factual content descriptive meta tags.

<meta name=”shameless” content=”Insert Shameless Plug Here”</>

<shameless>Insert Shameless Plug Here</shameless>

When A Form Should Start Validation?

Let’s take a look to this simple demo form:
http://www.richstyle.org/demo-form.html

I use the following code to style the validation issue:

input:required + output::after,
textarea:required + output::after { content: '*'; }

input:invalid + output::after,
textarea:invalid + output::after { content: '⨉';color: maroon }

input:valid + output::after,
textarea:valid + output::after { content: '✓';color: green }

The only thing looks unacceptable, is that the form validation process starts just when the form is loaded, whilst, it’s much better to start it in each input field independently, as user starts write something in it.

So, I thought of inventing a new attribute called “start-validation” with the following values:

form {
	start-validation: on-load | on-focus | on-type | on-blur | on-submit;
}

Let’s free A and HREF!

Take a look to this example:

<nav class="toolbar">
<ul>
	<li><a herf="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="downloads.html">Downloads</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="javascript:bookmark()">Bookmark</a></li>
</ul>	
</nav>

Isn’t better if it was possible to be written like this:

<toolbar>
	<li herf="index.html">Home</li>
	<li href="about.html">About</li>
	<li href="downloads.html">Downloads</li>
	<li href="contact.html">Contact</li>
	<li href="javascript:bookmark()">Bookmark</li>	
</toolbar>

or even:

<toolbar>
	<command herf="index.html">Home</command>
	<command href="about.html">About</command>
	<command href="downloads.html">Downloads</command>
	<command href="contact.html">Contact</command>
	<command href="javascript:bookmark()">Bookmark</command>	
</toolbar>

I mean why should I have to add <a> tag to every object/tag I want to link to something? Isn’t better if I were able to add href="" attribute to this object/tag without using <a> tag?

Why don’t we use href="" as a global attribute?

Likewise, think of using <a> tag without href="" when the link name = the link address:

<p>
.., you can download it from <a>http://example.com/downloads/</a>.
</p>

instead of:

<p>
.., you can download it from <a href="http://example.com/downloads/">http://example.com/downloads/</a>.
</p>

A Unified Naming Attribute for Everything

Hi all,

I’m glad to participate with the first post in this group :)

Has anyone thought of using label="" as a unified naming attribute; as an alternative to all naming tags and attributes:

<caption> , <label>, <legend>, alt="", for="", title="", summary="".

title="" attribute could be deprecated in favor of a CSS attribute called title: with the following values:

{ title: attr(label) | attr(accesskey) | attr(label) attr(accesskey) | none }

The typical way for label="" presentation is to use :before and :after pseudo elements; beside the title: CSS attribute.