Skip to content
Article

Beyond HTML 5 and CSS 3: Sample of Suggestions

Since HTML 5 and CSS 3 are still in the working drafts, I thought I would propose a few ideas I’ve been cooking up that would make my life easier and perhaps add an edge to the constantly evolving standards. Although, I hope these ideas never become a piece of proprietary junk that Internet Explorer or Mozilla latches onto on their own. I would hate to aid non-standards.

I realize some of my ideas may go beyond the so-called “scope” of the original intentions of CSS and HTML/XHTML. But my hope, like all “

I’ll begin with HTML first, since semantic markup is the most important:

1. 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 have proposed the same. 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 of who uses what, I still feel these names are presentational and HTML is for content not for its appearance or layout.

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. Specifically it allows you to separate your styles with semantic element names and giving them unique rules with really low specificity instead of making them arbitrary div’s. Simply put, this will give you more control with id’s when they’re needed.

But what I’m proposing is that instead of giving set element names that will always be debated on their semantic merit, 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 open 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.”

2. Definition List Item

I can’t recall where I saw the <di> element once, but I’ve been unable to relocate it through my web searches.XHTML 2’s working draft describes a definition list item, 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 that this would be a good addition because it provides one more “hook” for styling and more meaning as well. 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.

3. CSS Snap Declaration

My third proposal is for a CSS 3 style declaration called “snap.” This can replace the need to use javascript to snap elements to 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 warranted. What if I wanted to “snap” one element in the lower portion of the document to another element that was completely unrelated? 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.

4. 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.

5. 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 intention. 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.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

Are there differences in application architecture that are important for the cloud?
It is important to build applications and workloads specifically for the cloud. You will want to carefully consider what services the cloud provider of your choice has to offer and how your application leverages those services.
Learn More about Are there differences in application architecture that are important for the cloud?
Are there any drawbacks to cloud hosting?
Yes, there will always be some risks associated with any hosting option. You are relying on the resiliency and engineering of infrastructure that has scaled at an astounding rate.
Learn More about Are there any drawbacks to cloud hosting?
What’s the benefit of hosting in the cloud vs. traditional options?
Reasons not to host in the cloud are few and far between. If you don't host in the cloud, you will spend more in both CapEx and OpEx to manage your applications or websites in a traditional environment.
Learn More about What’s the benefit of hosting in the cloud vs. traditional options?
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More about How can I improve the performance of my application?
Should I move my application to the cloud?
The answer is ‘probably yes’. There aren’t many reasons for an application to be hosted elsewhere, aside from occasional compliance standards, or requirements to integrate with local services that would require large amounts of data to move from on-premise to cloud.
Learn More about Should I move my application to the cloud?
Where should my application be hosted?
There are many different options for hosting, but most applications would do well with one of the cloud providers -- Amazon Web Services, Google Cloud Platform, Microsoft Azure.
Learn More about Where should my application be hosted?