Minimized HTML5 Attributes, Selectors & jQuery

After working with some HTML5 web forms attributes on a small project I have come to the conclusion that for now it is best to…

Use <input required="required"> not <input required>

Some backstory — A few weeks back I was working on a small non-public web site heavy on forms and thought it would be a good fit as an HTML5 test case. For a variety of technical reasons [input formatting in particular] I didn’t go whole hog into it using all the various input type attributes, but did use the required attribute as a hook for JavaScript based form validation and styling. What I found was that generally there was adequate support for styling and selecting based on this new, and unknown to many browsers, required attribute — Yay! we can use this stuff today! However, there were a few browser CSS selector and jQuery 1.3.2 quirks that lead me to the conclusion that it is safest to use the expanded form of the required attribute and not the minimized or shorter form as HTML5 allows. This gives you the most solid and flexible options when choosing selectors in CSS or jQuery code.

Required Attribute Test Cases

I put together a simple test page and did some browser testing. The test cases and results chart are posted here.

Required attribute test cases

What you can see from these tests is that all modern browsers have strong support in CSS for the attribute selector and its use against a possibly unknown attribute. As one would hope hope they select all required fields, both shorthand and long form, based on [required] selector string [green text] and only the long form based on [required=required] [bolded]. Furthermore, Opera 10 also supports selection based on the :required pseudo selector.

The puzzling behavior comes in the few scenarios where the CSS selector behaves properly but the selection of elements via the jQuery library and JavaScript fails for those same selectors. This is seen in the Firefox 3.0/Gecko 1.9.0 based browsers where $("[required]") selects only the case where the attribute has been explicitly given a value.

One of the positive things you’ll see from these tests is that an unknown value for the input type attribute (in this case type="number") did not impact the selector behaviors in any browser.

Some Followup Investigation Needed

The linked test cases were quickly pulled together and I haven’t taken the time to look at what is going on from a more general angle. If any core jQuery or browser selector engine gurus want to chime in there are still a few things I want to chase down…

  • Are the test results different for a minimized attribute like disabled or checked that a non-HTML5 browser may understand?
  • I’d like to run the jQuery test cases against a trunk build or early 1.4 build, and figure out what is a jQuery bug, browser selection bug, and what bugs need to be filed to get the library working more consistently across the platforms it supports, I’d also like to pull jQuery out of the equation and just use the browser’s native selection engines.
  • Check up on the documentation and mailing list discussions to see if there some magical handling of the $(":required") selector coming in some future jQuery build because right now the results are all over the map.
  • I don’t even want to begin to think about how capitalization and attribute case may have an impact across browsers.

Ahhh, ‘web standards’… why do you bring so much pain with your promise?

Wrap Up: Standards-Next NYC

On Friday Nov. 20th, ending a wall to wall week of conferences and general geeking out about web technologies I had the pleasure of both attending and speaking at Standards-Next at the Time-Life building in Manhattan. Industry big shots HÃ¥kon Wium Lie [inventor of CSS! OMG!], Molly Holzschlag, Andy Budd and Pete LePage of Microsoft [sans flak jacket] guided an enthusiastic audience through the tools we’ll be using to build web sites over the next few years.

Andy Budd on CSS3

Andy of UK agency Clear Left and co-author of CSS Mastery, 2nd edition kicked off the day introducing everyone to some of the new toy we have to play with in CSS3. Beyond rounded corners, he demo’d border images, multiple background images and some tricks like those he’s used on the Silverback site [make sure to change your browser width when visiting].

Molly Holzschlag on Color

Molly followed up all that talk of tags and borders with talk of color on the web — both rgba() which extends rgb() with transparency, but also hsl() and hsla() which gives an additional option for defining color based on 360 hues which may make creating color pallets or transitioning colors easier.

A note for those at the event, here’s an example of how to define color so that non-rgba() supporting browsers will display the same shade of “gray”, in some cases with and others without transparency.

body {
background: rgb(255,255,255);
}
div {
background: rgb(204,204,204);
background: rgba(0,0,0,0.2);
}

I use this technique in the footer of Hike NJ.

The Lightning Round!

The audience was prompted for volunteers to join in a series of 5 minute talks to compliment the topic of the day. Among the ones I found most interesting were Mike Taylor on HTML5 web forms support and Paul Irish on JavaScript ‘bridge’ style library Modernizr

I took the opportunity to present some rough ideas on mixing the good parts of CSS2 with new things from CSS3 to create web sites in today’s browser ecosystem that take into account the needs of site owners and communicate the design or brand identity across both old and new browsers. I’ll have more on being clever with the tools we have at our disposal in an eventual follow up blog post.

Pete LePage on The Future of IE

The initial reaction on twitter to the announcements about IE9 earlier in the week seemed mostly hit the “OMG, they’ve finally got rounded corners, thanks for almost catching up” sour note. Though we really didn’t get any more information about IE9 then the rest of the public has Pete did a good job of reminding everyone of some of the other features in IE8 and IE9 that do take us beyond IE6 & IE7. Things like data stores, native JSON support & CSS2.1 selectors. So don’t hate on MS or IE8/9 when you decide not to use a data: uri because IE7 doesn’t support them.

HÃ¥kon Wium Lie on CSS3 and Web’s Future

Starting with a walk down memory lane [and the halls of CERN] father of CSS HÃ¥kon talked about where we had been, where we are now, and then looked to the future in what is on the horizon. His set of photographs from CERN and the creation of the first internet terminals [and jokes to go along with them] were great. After a walk through some CSS3 features like font-face he demo’d some fun things to do with the Opera Unite local browser / peer to peer computing concept.

Next

In the end, I walked away from the event jazzed both about the features of the specifications, but also about the web development community and the enthusiasm on display both by the speakers and by the attendees. If you want to get some of that too, watch the Standards-Next web site for slides [and video?] from the event and for future events about surrounding new web technologies. Also check theMechanism blog for some live blogging and notes from the event.

Again — many, many thanks to the events sponsors Opera and Time for bringing a great & free event to the NYC web community.

Click Three Points – Now In Canvas

Stars 2 Preview

History of a Collaborative Web Project

Once upon a time [or a forest? I forget now] ActionScript was the hot new thing in the Flash community allowing the movement away from the tween and towards a more scripted interaction model. During this time many really smart web coders took to experimenting with everything from recreating physics and motion to mixing vectors and objects to create pure art.

Someone around that time Geoff Stearns [yes, the same Geoff now of SwfObject and YouTube/Google fames] created an interesting little script and pattern for turning user interaction into a graphics generator. He then sent the code framework around the world for other smart people to transform and make it their own. Thus Click Three Points was born.

My old “Dynamic HTML” Port

Remember when we called things that? Now everything done with JavaScript is “AJAX”. Hrmph.

Anywho, not being a Flash developer I was feeling a bit jealous and soon took apart the ActionScript code, ported it to JavaScript and HTML and had my own bit of fun. The results were similar, but I had to hack my way around some of the cooler things others were doing by using images with shapes or animations instead of vectors, etc.

And Now – Canvas

It only took 7 or 8 years for the state of the art in browsers to catch up, but there are now a few browsers [latest Safari, Firefox, Opera] whose current releases include support for the HTML5 Canvas element. A few days ago I had the thought to revisit the old Click 3 Points code and update it as an excuse to work with the canvas tag myself. Above are the results of my first few attempts. Enjoy, hack away at the if you’d like, but most importantly — click!

Obligatory Linky Linky