Atlantic BT » CSS

Beyond HTML 5 and CSS 3: Sample of Suggestions

Mark Caron — Tue, 12 May 2009 17:03:15 +0000

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 “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 provide more advantages to CSS.

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:


		
			
				section : div;
				dialog : div;
				menu : ul;
				masthead : div;
				newelementname : baseelementbehavior;

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 elements, elements, elements, and more, replacing the annoying

and more nested, loosely based “classitis.”

2. Definition List Item

~~I can’t recall where I saw the 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 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.

CSS 2.1 Selector Specificity

Mark Caron — Fri, 08 May 2009 12:46:40 +0000

I’m probably the 100th person to write about CSS 2.1′s selector specificity, but I’m going to take a stab at it anyway since it seems to be such a stumbling block for so many people.

Specificity Wars by Andy Clarke

I’m not writing this to take away from the brilliant explanations of Andy Clarke, Patrick Griffiths, Eric Meyer, or Molly E. Holzschlag, but to merely supplement their posts with, perhaps, another angle. Many people feel the need to re-explain this topic in layman’s terms rather than enduring W3C’s overly technical explanation about specificity.

What is specificity?

To be brief, it’s the applied calculation of the priorities of CSS selectors and how they cascade through a stylesheet. Simply put, selectors with a higher specificity will overrule other selectors in the cascading order.

How it works

There are two ways to determine specificity — the “right” way and the “quick and dirty” way. According to W3C, the specificity is officially calculated using four numbers concatenated, like: a, b, c, d . The “quick and dirty” technique is to assign values to each type of selector and add the values up. For example, general elements have a value of 1, classes have a value of 10, ID’s have a value of 100, and inline styles have a value of 1000. However, this value-based “quick addition” technique is a bit misleading because it presumes that 10 of any value will override the next highest selector. Following that logic if you have 10 ID’s in a style declaration those will override an inline style, because 10 ID’s are worth 100 x 10 which equals 1000 — inline styles being worth 1000. This statement is far from true. However, it can still be used as an easy way to get an idea of the specificity of a particular selector in a declaration; but it should never be fully relied upon.

The W3C states that Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity. This is the correct method to rely on. The reason is because it separates the values into 4 categories: a, b, c, & d. The variable a is reserved for the number of inline styles and has the highest priority. While b is for the number of ID’s, c is for the number of other attributes (including class, but not ID’s) and pseudo-classes, and d is the number of elements. This is the correct order of specificity and pseudo-elements are to be ignored.

Let’s focus on b and c since these are the subjects of confusion. ID selectors (b) are the most valuable asset to CSS, so they are given the second highest priority, next to inline styles (a). ID selectors are written with a # in front of the name given to the ID. So, #content is referencing

which has a value of 100 using the “quick and dirty” method. These selectors, like all selectors, can be used in combination with any other selectors. For instance, #main-area #content would add up to 200.

Class selectors and other attribute selectors are assigned the variable c. These are each given a value of 10 using the “quick and dirty” method. Class selectors are denoted with a dot (.) before the name of the class, like .box. Attribute selectors are declared with the attribute name inside a set of brackets — a[rel="friend"]. It is not necessary to include the value of the attribute. Additionally, the = can be replaced with ~=, *=, ^=, or $= depending on how you’re equating the value. A better concept of these equations can be found on 456 Berea St’s CSS 3 selectors explained post.

Note: Attribute selectors of CSS 2.1 are supported by most modern browsers, and when I say modern browsers I do not mean Internet Explorer 6.

Initially what confused me about attribute selectors and their specificity was whether or not using class= or id= in the attribute selector made it behave like the # (ID) or . (class) of its CSS 2 predecessors. After doing some testing and reading, I found that the attribute selector has the exact same specificity as the class selector (.), regardless of whether it says id= within its little brackets. It will always have a value of 10. Thus, div[id="content"] is less specific than div#content.

Here’s an easy way to visualize all of this (in a poorly misunderstood table element):

example	inline `style`	ID selectors	class/attribute selectors	element/type selectors	“quick and dirty” value
`style=""`	1,	0,	0,	0	1000
`p`	0,	0,	0,	1	1
`p em`	0,	0,	0,	2	2
`p.whatever`	0,	0,	1,	1	11
`p[id="whatever"]`	0,	0,	1,	1	11
`p[href="whatever"]`	0,	0,	1,	1	11
`#whatever p`	0,	1,	0,	1	101
`#whatever p.whatever`	0,	1,	1,	1	111
`#whatever1 #whatever2 p.whatever`	0,	2,	1,	1	211

If you haven’t seen any specificity charts before I hope my interpretation helped explain it further. Be sure to check out the other explanations too, because Andy Clarke has an awesome example using siths from Star Wars. Maybe I’ll make a diagram of my own someday.