Meet the New Dialog Element

Keith Grant discusses how HTML 5.2 has introduced a peculiar new element: <dialog>. This is an absolutely positioned and horizontally centered modal that appears on top of other content on a page. Keith looks at how to style this new element, the basic opening/closing functionality in JavaScript and, of course, the polyfills that we’ll need to get cross-browser support right.

Also, I had never heard of the ::backdrop pseudo element before. Thankfully the MDN documentation for this pseudo element digs into it a little bit more.

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up:

Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of their applications.


Editing the W3C HTML5 spec

Bruce Lawson has been tapped to co-edit the W3C HTML5 spec and, in his announcement post, clarified the difference between that and the WHATWG spec:

The WHATWG spec is a future-facing document; lots of ideas are incubated there. The W3C spec is a snapshot of what works interoperably – authors who don’t care much about what may or may not be round the corner, but who need solid advice on what works now may find this spec easier to use.

I was honestly unfamiliar with the WHATWG spec and now I find it super interesting to know there are two working groups pushing HTML forward in distinct but (somewhat) cooperative ways.

Kudos to you, Bruce! And, yes, Vive open standards!

The HTML5 progress Element

The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.


HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user's Twitter avatar, Facebook avatar, or Gravatar. That's a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is good for engagement.

Let's create a page where a user can update their avatar with as little friction as possible: they just drop an image anywhere on the page and it's done.


HTML 5 vs. XHTML 2: An Article Roundup and Poll

Much like CSS3, widespread adoption for the next-gen web languages is a distant mirage. Still, it is important to stay educated on these things and even participate in these early stages while things are still malleable. Rather than re-hash everything here, here is a roundup of articles talking about the two major new "competing" formats.

There is also a new poll in the sidebar where you can cast your vote as to which one you prefer at this point, or if you just don't care.