If you are looking for guidance on how how to format your code, you could do worse than to base it this coding standards styleguide.

“CASCADING STYLE SHEETS Level 2 Revision 1 (CSS 2.1) Specification (or CSS 2.1 to its friends) has become a real boy, with W3C stamping its seal of approval and making the spec a W3C Recommendation. But in an age of rapidly iterating browsers that are already working hard to win the race regarding CSS3 compatibility, is the W3C now an anachronism? Standard[s] advocates don’t seem to think so.”

—Craig Grannell, .net magazine, 9 June 2011 It’s official: W3C finalises CSS 2.1

Code Standards | Isobar

Captured from Twitter, here is Tom Henrich’s partial reconstruction of my conversation with Tantek Çelik, Glenda Bautista, Andy Rutledge and others on the merits of self-hosting social content and publishing to various sites rather than aggregating locally from external sources.

via Own Your Data / technophilia

David made a comment on Twitter about some markup he was working on:

Feels dirty setting id’s on main HTML5 page header and footer, but overriding inheritance they cause seems needlessly laborious.

I know the feeling. I don’t like using IDs at all, unless I want part of a document to be addressable through the fragment identifier portion of the URL. While I think it’s desirable to use the id attribute to create in-document permalinks, I don’t think it’s desirable to use the id attribute just as a styling hook. Its high specificity may seem a blessing but, in my experience, it quickly leads to duplicated CSS. IDs are often used as a substitute for understanding the cascade.

Nicole feels the same way about ID selectors, and she knows a thing or two about writing efficient CSS.

Back to David’s dilemma. Let’s say you’re targetting header and footer elements used throughout your document in sections, articles, etc. All you need to use is an element selector:

header {
// regular header styles
}

But what about the document-level header and footer? They’re probably styled very differently from the headings of sections and articles.

You could try using a child selector:

body > header

But there’s no guarantee that the document header will be a direct child of the body element. Hence the use of the id attribute—header id="ID":

header#ID {
// page header styles
}

There is another way. In HTML5 you can, for the first time, use ARIA roles and still have a valid document. ARIA landmark roles add an extra layer of semantics onto your document, distinguishing them as navigational landmarks for assistive technology.

Some of these landmark roles—like IDs—are to be used just once per document:

Within any document or application, the author SHOULD mark no more than one element with

banner
main
contentinfo

That’s useful for two reasons. One, the existence of role="main" means it is not necessary for HTML5 to provide an element whose only semantic is to say “this is the main content of the document.”

A lot of people have asked for such an element in HTML5. “We’ve got header, footer and aside,” they say. “Why not maincontent too?”

But whereas header, footer and aside can and should be used multiple times per document, a maincontent element would, by necessity, only be used once per document. There are very few elements in HTML that are like that: the html element itself, the title element, head and body (contrary to popular opinion—likely spread by SEO witch-doctors—the h1 element can be used more than once per document).

Now the desired functionality of semantically expressing “this is the main content of the document” can be achieved, not with an element, but with an attribute value: role="main".

The rough skeleton of your document might look like this:

<header role="banner"></header>
<div role="main"></div>
<footer role="contentinfo"></footer>

Now you can see the second advantage of these one-off role values. You can use an attribute selector in your CSS to target those specific elements:

header[role="banner"] {
// page header styles
}

Voila! You can over-ride the default styling of headers and footers without resorting to the heavy-handed specificity of the ID selector.

And, of course, you get the accessibility benefits too. ARIA roles are supported in JAWS, NVDA and Voiceover

Tagged with
html5
css
aria
accessibility
standards
semantics

Now we have something else to be thankful for. Nathan Smith of Sonspring has created a library that gives designers and developers “some measure of control over form elements, without changing them so drastically as to appear foreign in a user’s operating system.” Smith calls his new library Formalize CSS:

I’ve attempted to bridge the gap between various browsers and OS’s, taking the best ideas from each, and implementing what is possible across the board. For the most part, this means most textual form elements have a slight inset, and all buttons look consistent, including the button tag.

For more, including demos, options, screenshots, thanks, and the library itself, read Smith’s write-up at SonSpring | Formalize CSS. Hat tip and happy Thanksgiving to my good friend Aaron Gustafson for sharing this gem.

Learn to love vendor prefixes and create full-screen backgrounds that resize to fit the viewport in Issue No. 309 of A List Apart for people who make websites:

Prefix or Posthack
by ERIC MEYER

Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.

Supersize that Background, Please!
by BOBBY VAN DER SLUIS

Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.

Illustration by Kevin Cornell for A List Apart Magazine.

In Issue No. 302 of A List Apart for people who make websites, Joe Clark explains what E-book designers can learn from 10 years of standards-based web design, and Daniel Mall tells designers what they can do besides bicker over formats.

Web Standards for E-books

by Joe Clark

E-books aren’t going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That’s great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.

Flash and Standards: The Cold War of the Web

by Daniel Mall

You’ve probably heard that Apple recently released the iPad. The absence of Flash Player on the device seems to have awakened the HTML5 vs. Flash debate. Apparently, it’s the final nail in the coffin for Flash. Either that, or the HTML5 community is overhyping its still nascent markup language update. The arguments run wide, strong, and legitimate on both sides. Yet both sides might also be wrong. Designer/developer Dan Mall is equally adept at web standards and Flash; what matters, he says, isn’t technology, but people.

Illustration by Kevin Cornell for A List Apart.

In Issue No. 290 of A List Apart, for people who make websites…

The Case for Content Strategy—Motown Style

by MARGOT BLOOMSTEIN

Over the past year, the content strategy chatter has been building. Jeffrey MacIntyre gave us its raison d’être. Kristina Halvorson wrote the call to arms. Panels at SXSW, presentations at An Event Apart, and regional meetups continue to build the drum roll. But how do you start humming the content strategy tune to your own team and to your prospective clients? Listen up and heed Aretha Franklin. No, really.

JavaScript MVC

by JONATHAN SNOOK

As JavaScript takes center stage in our web applications, we need to produce ever more modular code. MVC (Model-View-Controller) may hold the key. MVC is a design pattern that breaks an application into three parts: the data (Model), the presentation of that data to the user (View), and the actions taken on any user interaction (Controller). Discover how MVC can make the JavaScript that powers your web applications more reusable and easier to maintain.

How Twitter Works in Theory (Kevin Marks) -- very nice summary about the conceptual properties of Twitter that let it work. Both Google and Twitter have little boxes for you to type into, but on Google you're looking for information, and expecting a machine response, whereas on Twitter you're declaring an emotion and expecting a human response. This is what leads to unintentionally ironic newspaper columns bemoaning public banality, because they miss that while you don't care what random strangers feel about their lunch, you do if its your friend on holiday in Pompeii.
Army To Test Wiki-Style Changes to The 7 Manuals -- In early July the Army will conduct a 90-day online test using seven existing manuals that every soldier, from private to general officer, will have the opportunity to read and modify in a “wiki”-style environment. (via timoreilly on Twitter)
MobWrite -- converts forms and web applications into collaborative environments. Create a simple single-user system, add one line of JavaScript, and instantly get a collaborative system. (via Simon Willison)
Open Data Standards Don't Apply To The Military -- It’s that last particular point that should be the most disturbing to the administration. Apparently all geospatial data being developed and utilized by the USAFA would be unusable without a sole software vendor. This causes concern over broader interoperability with other agencies and organizations, access to important national information, and archivability and retrievability. Expose of the single-source "standard" vendor lockin in US military geosoftware and geodata. (via johnmscott on Twitter)