Tiffany B. Brown

Posts in: HTML, HTML5, XHTML, etc.

HTML5: Determining which validation constraint triggered an error
When working with custom error messages and HTML5 forms, it helps to know which validation constraint rule was broken so that we can provide a tailored error message. When a form field’s input is invalid, the browser fires an invalid event on that field. Let’s say that we have the following form with a required […] [23 Mar 2014]
Subtitles and captions with WebVTT
One drawback of HTML5 multimedia is accessibility. For hearing impaired users, audio and video content is nearly-useless without an alternative. This is where the track element and WebVTT come in handy. What WebVTT looks like when combined with @font-face. WebVTT, short for Web Video Text Tracks, can be used to provide timed subtitles and/or captions […] [14 Dec 2013]
Date input in HTML5: Restricting dates, and a thought for working around limitations
You probably know that HTML5 introduced a date input type, which constrains the value to a valid date string. <input type=”date”> largely eliminates the need for JavaScript-based date pickers such as the one found in jQuery UI. In browsers that support the type, we can pick a date using the browser’s native widget. Below is […] [24 Oct 2013]
Use IDL attributes to test <input type=""> support
HTML5 input control types still have a ways to go before every type is supported in every browser. In the meantime, you may still find that you need to feature-test whether a particular type is supported. Do this by checking the value of the type IDL attribute. IDL attributes are defined by the HTML5 specification […] [23 Oct 2013]
Range controls and padding in IE10+
While working on a video player for a forthcoming book, I noticed a peculiar spacing issue with <input type=”range”> that affected the layout of this player. Internet Explorer does something a little weird that no other browser does: it throws several pixels of padding along the top and bottom of the range element by default […] [15 Oct 2013]
Meet the datalist element
UPDATE: Browsers vary a bit in how they render datalists based on the type of form input. Eiji Kitamura has a demo that illustrates how they all work. One of my favorite parts of HTML5 forms is the datalist element. Opera added support in version 9.0. Support in Firefox and Internet Explorer followed. Today, datalist […] [8 Nov 2012]
input type="range" and Android’s stock browser.
Android’s stock browser supports the range input type, but in versions 3.x4.x and below (not sure about Android 4.x), it doesn’t actually display the UI. It does, however, support parts of the Shadow DOM. That means we can style this element, and give our users a visible control. The image below shows a rather garish […] [7 Feb 2012]
input type="url", validation and user interfaces
Recently a friend messaged me about the url input type, and how to prevent Opera from automatically prepending http:// to the value of a URL input field if it is missing. I think I’ve found a workaround, but first, I want to discuss the url input type, and how different browsers handle it. HTML5 introduces […] [3 Jan 2012]
What is HTML5?
My super-short post that attempts to answer this question as completely and accurately as possible in three presentation-friendly bullet points. HTML5 … re-imagines HTML as an API with objects, events, interfaces, and methods or a collection of interfaces. defines an algorithm for generating a consistent, cross-browser friendly DOM tree, regardless of the quality of the […] [26 Oct 2011]
Looping video in browsers that don’t yet support the loop attribute
To date, Firefox does not yet support the loop attribute of the <video> element. This snippet is a simple work-around. Once the video’s ended event is fired, it calls the play method. For more, consult the media events section of the HTML5 specification. [4 Oct 2011]