Chris Casciano’s Place Name Here

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.

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.

With some recent projects — like the redesign of Hike New Jersey and a little Flickr View Larger tool — I’ve had the opportunity to try a few bleeding edge techniques as a means of enhancing the look of a site while keeping code and maintenance down. In his recent book Handcrafted CSS, Dan Cederholm calls this ‘progressive enrichment’ — or providing a little extra spice in the visuals for the few browsers that can follow along, while functionality, page structure, and general styling rules remain at some stated baseline across browsers. While working with these new properties like box-shadow and rgba colors I hit a few quirks that I thought I’d share.

A little while back I mentioned that I had reclaimed an old domain of mine and was looking for something to do with it. It took about two months to pull the free time together to design and build it, but I’ve just relaunched the site: Hike New Jersey.

Some of the most powerful CSS2 and CSS3 selectors defined in the specs are avoided by web developers because they’re not supported by commonly used web browsers. Sometimes in order to work around these shortfalls solutions with large overhead such as javascript libraries are used or code becomes littered with many specialized classes and sites become difficult to maintain.

Over time I’ve developed the habit of using specifically named class attributes to represent exactly where a pseudo-class would have applied. To aid in clarity and maintenance these classes are named with the same text as the name of the pseudo-class being represented.