HTML 5 and CSS 3 Propositions
August 17, 2007
Since HTML 5 and CSS 3 are still in the working drafts, I figured I'd propose several ideas I have. Ideas that would make my life easier and perhaps add an edge to the constantly evolving standards. I hope they never become only a piece of proprietary junk that Internet Explorer or Mozilla latches onto by themselves. I would hate to aid non-standards.
With that, I realize some of my ideas might escape the so-called "scope" of what CSS is meant for and the same for HTML/XHTML. But, my hope, like all standardistas is to get a focused set of standards for all browsers to comply with (does such a Utopia exist?) and for these standards to give more power to semantic markup and more advantages to CSS.
I'll begin with HTML first, since semantic markup is the most important:
Custom Elements
I've read some of the working draft for HTML 5 and I must say that I'm impressed with some of the ideas that have been added. It's going to give more meaning to HTML code, which is precisely what web developers need! However, I did cringe at the proposed "header" and "footer" elements. I understand their purpose, but aren't the words header and footer presentational? For instance, what if at first I designed the footer to be at the bottom of the document. In the markup, perhaps it is. But later (for some odd reason) the client decides he/she wants that info to be moved to the top? Would this still be considered the "footer?" I'm sure there are several sides to the argument, but I've also read accounts where people, like Andy Clarke, propose the same notion. Footers should be "siteinfo" and headers should be "branding" or "masthead". In contrast, Dan Cederholm and Andy Budd still use "header" and "footer" on their personal sites. But, regardless to the latter two, I still feel these names are a bit presentational.
I really like most of the other elements like "menu," "section," "dialog," "aside," "datagrid," etc. They really give more meaning to the markup in place of the generic div's with id's. This will definitely give more power to CSS and more meaning to the document at the same time, allowing you to separate your styles with semantic element names, giving them unique rules with really low specificity, instead of making them arbitrary div's. This will give more control with id's when they're needed.
But my proposal is that instead of giving set element names that will always be up to debate on what's more semantic, why not give that power over to the developer? If a developer could declare his/her own elements in the head of the document, he/she could have more control. I envision it working something like this:
<head>
<elements type="elements/text">
section : div;
dialog : div;
menu : ul;
masthead : div;
newelementname : baseelementbehavior;
</elements>
</head>
In this element named "elements" the code would be handled by the browser. It would read each line, separated by a semi-colon, and take note of the custom elements being declared and determine their base behavior off of the base element listed after the colon. For instance, the first custom item "section" would behave like a "div." This would give ultimate control to the developer to make his/her document follow its purpose semantically. This will also give way, opening up the possibilities for more microformats! A developer could utilize this to create <tel> elements, <adr> elements, <product> elements, and more, replacing the annoying <div class="product"> and more nested, loosely based classitis.
Definition List Item
I forget where I saw the <di> element once, but I've been unable to relocate it through my searching online. But I wonder why this element is still not supported well, if at all. And I didn't see any proposed plans for it in the HTML 5 working drafts. I feel, though, that this would be a good addition because it provides one more "hook" for styling and a bit more meaning. The definition item would separate definition terms and their descriptions from others. If I was creating a list of definitions, each term and its description or descriptions should be separated logically from its siblings. Thus the <di> element would encase and separate each item.
CSS Snap Declaration
My third proposal is for a CSS 3 style declaration called "snap." This may replace the need to use javascript to snap certain elements to certain non-parental elements. This snapping has been done via javascript on many old versions of dropdown menus. Now with CSS and better standards, the snap is no longer needed for menus. But the need for snap in other presentational ways is still around. What if I wanted to "snap" one element in the lower portion of the document to another element that was completely un-related? I could simply add it to the style rule:
#snapping-element {
display: block;
width: 300px;
snap: #host-element;
left: 0; top: 10px;
…
}
In this example, the element with the id "snapping-element" will be snapped to the element with the id of "host-element." Host-element, however, probably should be positioned relative; And the snapping-element's position will be based off host-element's relative state. Much like how absolute works, except that absolute is limited to basing itself off of ancestral elements.
Column Hovers
Placing a hover on a table row is a cinch. But what if I wanted to create a triangulation effect for the rows and columns with a different hover state color? I can't! I've seen others mention it in posts, but I haven't seen any plans to integrate this into CSS. Why not? This would provide another layer of accessibility/legibility to users with a simple col:hover rule. Of course the colgroup elements must all be declared in order for this to work.
Javascript-type Psuedo-classes
My last proposal to CSS 3 is probably the most CSS-scope-defying of them all; what if there were more pseudo-classes available other than just visited, hover, active, focus, etc? Why not onclick? I realize focus is currently a bit of a Mozilla proprietary state, but it's a really good one! If javascript already handles onmouseover (hover) and onblur and onfocus (focus), why not onclick?! Man would this be powerful! All javascript toggling could be handled in CSS! But this event catching is a bit more daring for CSS's scope of just styling. But why not, eh?
Conclusion
Perhaps some of this has been mentioned before me. I'm not sure. If not, then I'm glad to be able to provide some recommendations. If so, I apologize for assuming credit, that's not my intentions. I do however feel that these would provide a lot more meaning to HTML 5 and more power and control for the visual and presentational experience to CSS 3.
Any comments, suggestions, critiques are happily welcomed. Just some food for thought.
- HTML 5 and CSS 3 [...]
- August 17, 2007
- 1 comment
Comments
1 comment
Canadian Tar Heel said...
Interesting post. Thanks.Fri, 17 Aug 2007 14:11:00 EST