• Safari, Chrome and Opera will render the font normally without italicizing it.
• Internet Explorer and Firefox will attempt to italicize the font, but Internet Explorer will slant the font at a 20° angle while Firefox implements a 10° slant.

Internet Explorer 6.0	Firefox 3.6	Safari 4/Chrome 5/Opera 10

This inconsistency is quite annoying from a user-experience point of view. However, there is a way of leveling the playing field by using the CSS3 transform property. And even though Internet Explorer doesn’t recognize transform, there is a workaround without using JavaScript using the Matrix Visual Filter.

The CSS

When I was a calligraphy student, I learned that the Italics script was to be written on a 10° angle. Using the CSS3 transform property, this can be achieved by using the skewX() function:

#content h1 em {
    font-family: "Graublau Web Bold", Arial, sans-serif;
    font-style: normal;

    -moz-transform:    skewX(-10deg);
    -o-transform:      skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    transform:         skewX(-10deg);

    display: inline-block;

}
	

The display: inline-block is there since Safari, Chrome and Opera will not allow transformations on an inline element.

But what about Internet Explorer? I could use my cssSandpaper script, but it is really simple to do without it:

#content h1 em {
    font-family: "Graublau Web Bold", Arial, sans-serif;
    font-style: normal;

    -moz-transform:    skewX(-10deg);
    -o-transform:      skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    transform:         skewX(-10deg);

    display: inline-block;

    /* IE8+: must be on one line. */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";

    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(
             M11=1,
             M12=-0.1763269807084645,
             M21=0,
             M22=1,
             SizingMethod='auto expand');
}
	

This is the Microsoft Matrix Filter equivalent of skewX(10deg). Let’s take a look at how this works in all the major browsers:

Internet Explorer 6.0+	Firefox 3.5+	Safari 4+	Chrome 5+	Opera 10.5+

Isn’t that nice and consistent? The screenshots are from the Windows versions of the browsers, but you can expect the same results for Mac and Linux versions as well.

Is This Really Italics?

Not really. Technically, we are creating an oblique variant of this font. The Wikipedia entry for Oblique fonts states that many sans-serif fonts do not have italic variants, so this technique will be a useful one in a web developers toolkit.

Caveats

• If you are going to make a few words in a row oblique, make sure you wrap the <i> and <em> tags around each word. This is because the display: inline-block rule treats multiple words wrapped in one set of these tags as one word, which will cause problems when you want the words to wrap to the next line.
  

  Wrapping multiple words with one <em> tag

  Wrapping multiple words with separate <em> tags

• If the oblique text does not have a solid background color, it will appear “blocky” or “pixely” in IE. To fix this, you must use IE’s Chroma Visual Filter, as described in my last blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together.
• In IE, multiple oblique words may appear to have more white space than the other browsers. In this case you may need to create IE-only CSS rules that implement negative left margin on each word, using a solution like Paul Irish’s Conditional CSS Pattern.

Update (Sept. 3, 2010)

• This article originally has the filter and -ms-filter rules reversed, which is against Microsoft’s best practices for IE8. This error has been corrected.
• Thanks to Zoe Mickley Gillenwater for pointing out that IE8 needs to have all the filter functions (i.e. all the stuff in the double quotes) on one line.

The modern web developer wants to be able to use a variety of CSS3 effects together, but sometimes doing this in IE can be challenging, especially if you don’t want to use JavaScript. Let’s take a look a common problem with IE: blocky text in IE when using IE Visual filters on a block of text. For example, if you’ve ever tried to do the cross-browser CSS opacity trick to implement opacity in IE6, this problem manifests itself when the text is styled with no background color. A developer uses this well-known cross browser CSS-foo to make this work:

#badAntiAliasing {
	opacity: 0.5;

        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

        /* IE 6,7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

And it looks great in every browser, but it looks like crap in Internet Explorer 6 with ClearType turned on. It is especially pronounced when using @font-face embedding with fonts that assume that some sort of anti-aliasing technology is being used. The example below uses Graublau Sans Web with the Alpha filter to illustrate the issue:

Opacity Solution in IE	Opacity Solution in every other browser

This has been a known problem with IE ever since 2006 when ClearType’s product manager, Peter Gurevich, announced on the IEBlog their decision to disable ClearType on elements that use any Visual Filter. If you read the comments on this blog article, you will see many upset developers. I was one of them, since this not only affects the Alpha Filter, but all of IE’s Visual Filters, some of which I use in cssSandpaper to get IE to support CSS3 properties like transform.

Today, however, we can rejoice. There is a usable workaround that will make ClearType rendered fonts look nice when using Visual Filters. In our example above, here is what needs to be done:

body.ie6 #goodAntiAliasing,
body.ie7 #goodAntiAliasing,
body.ie8 #goodAntiAliasing {
	background-color: white;
}

#goodAntiAliasing {
	opacity: 0.5;

        /* IE 8: yes, it is ugly but it has to be on one line. :-( */
        -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

        /* IE 6,7 is more flexible: it can be on multiple lines. */
	filter: progid:DXImageTransform.Microsoft.Chroma(color='white')
                progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

What is going on here?

1. The first rule sets the background color of the container to a color that is represents the color of the majority of the background image on the page. Note that this rule uses Paul Irish’s Conditional CSS Pattern to serve it only to IE.
2. The second rule executes two of IE’s Visual Filters:
   • the Chroma Visual Filter, which tells IE “Please make this color transparent”. The color we choose to make transparent is the one we selected in the first rule.
   • the Alpha Visual Filter, which does the opacity trick

New Opacity Solution in IE	New Opacity Solution in every other browser

These filters must be in the order given, and not the other way around. Note also that care must be given that the color chosen to be transparent should be the average color of what is behind the text being styled, otherwise you will get less than optimal results. If this background is a complex image, just use the colour that’s used most often.

This fixes not only the IE opacity problem, but also issues with other Visual Filters, such as Matrix. I will be updating cssSandpaper to use this trick so that transformed objects in IE won’t look so blocky.

Take a look at the solution in action (make sure you look at it in IE in order to get the full effect)

A remix of Wilhelm von Bezold’s Farbentafel Color Wheel.

I have heard stories about “those people” that see a color and can immediately calculate the RGB hex code in their head, without any tool whatsoever. Since I have never actually met one of “those people”, I don’t think they really exist. However, it would be a nice skill to have, especially when presenting a new design to a client and they say “Perfect! But can make that box a brighter orange, and that do-hickey a less pronounced purple? And can you show us how it would look right now?”

This seemingly impossible task of coming up with color codes off the top of your head can be done using CSS3′s hsl color notation. HSL is a much more “human-friendly” notation than RGB, and with it you can code colors in your head easily without using The GIMP’s or Photoshop’s color-wheel.

Don’t believe me? Read on and I’ll show you. You’ll never want to go back to RGB again. And even though IE 6-8 doesn’t support HSL natively, we will cover how support can be added.

Notation

An HSL color code uses the following CSS3 notation:

#myObject {
    background: hsl(120, 50%, 50%);
}

The first number is the hue, the second number is the saturation, and the third is the lightness. These three terms are what HSL stand for. But how does one manipulate these numbers? Easily.

Step 1: “Young Guys Can Be Messy Rascals”

Memorize this sentence. If you do, you will be to remember the six major colors in the HSV color wheel: Yellow, Green, Cyan, Blue, Magenta and Red. These colors are spaced out by angles of 60 degrees. If you follow the mnemonic, you should be able to remember the diagram on the left very easily.

So, if you want to pick green, you would code:

hsl(120, 100%, 50%)

(Don’t worry about the second and third parameters for now … we will get to that in a second).

Blue would be:

hsl(240, 100%, 50%)

Let’s say you wanted a color that is not on the wheel, like purple. Purple is halfway between blue (240°) and magenta (300°) so we should pick something in between:

Think it should be more blue? Choose an angle closer to blue!

Want more magenta instead? Then choose angle closer to magenta:

Note that you do not put use the deg keyword link in CSS3 Transforms. It seems a little inconsistent, but at least it’s less typing.

Step 2: Choose Your Intensity

The second parameter is the colorfulness, or saturation. The larger the percentage, the more “colorful” this color is. Let’s take a look at what happens when we change green’s (120°) colorfulness:

The more the saturation percentage, the less “gray” it is.

Step 3: Lighten it up

The final step is to lighten up the color to the right level. That can be done with the final parameter:

That’s It!

Try it when you are using color on your next project. You’ll find using the HSL color-space is much easier than using RGB

Browser Support

HSL is supported in almost all the major browsers: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 10+ and Explorer 9.0+. For the browsers that don’t support it, I have updated cssSandpaper to implement HSL with the CSS color property, as well as the border, background family of properties (i.e. border-right, background-color, etc).

Also supported by cssSandpaper is HSLA, which is to HSL, as RGBA is to RGB. It contains a fourth element, the alpha channel, that is a number from 0 to 1. To illustrate how this works, let’s say an HTML element has a grid as a background image. How can you shade that background image so that it looks, say, more green?

The table above is not an image — it is a real example of hsla() in action. Pretty neat, huh? You can also use HSL and HSLA color in gradients. The cssSandpaper library has supported WebKit style gradients with it’s own -sand-gradient property. Now it supports HSLA gradients, like this 80% opaque yellow to 20% opaque blue linear gradient:

Unfortunately, cssSandpaper only supports HSLA for background coloring only, not border or text coloring, but one would just use progressive enhancement to take care of that edge case, since what it does support, in my humble opinion, is rather cool. Download the latest version from the link below and use HSL and HSLA color notation now! You’ll impress your developer friends with your off-the-top-of-your-head color-coding skillz. :-)

Get the latest version of cssSandpaper from the official documentation page

Update (Aug. 6, 2010)

This article has been translated into Korean

Calendars, colour swatches, sliding widgets, client side validation: this is the nirvana that the HTML5 forms module promises. Some would say “So what? I’ve seen this on the web for years!”, and they’d be right. There have been some really brilliant people coding some really interesting widget and validation frameworks, so why should we change?

• Ease the markup learning curve: HTML5 form widgets and validation have been built to be as dead simple to markup as a select box with no JavaScript knowledge required
• It’s a W3C standard: so you know that it’ll work for years to come and if you have problems, you could always ask almost anyone in the web development community for help.
• Cellular phone support: HTML5 form fields will have optimized user interfaces appropriate for the type of device. Blackberry already has optimized versions of the date/time and color widgets and, according to Mark Pilgrim’s article A Form of Madness, the virtual keyboards that appear when using HTML5 form fields are optimized for the data being input.
• Web development tools will have to support it: It’s a safe bet that Aptana, Dreamweaver, and all the other IDEs out there will have HTML5 support.
• It’s HTML5: when you tell your non-techie co-workers that you use it, you will be the envy of all — after all, it must be five times better than regular HTML, right? Your boss will be so impressed that you are now a guru in this futuristic technology with a cool numbered acronym that he or she will give you a big fat raise!!!

  (Okay, okay. Don’t try to laugh too hard … your co-workers will start to worry).

The Support Dilemma

Unfortunately, today’s support for the HTML5 Form Module is spotty with each browser supporting different parts of the specification. Take a look at Wikipedia’s HTML5 Forms comparison chart. You’ll see each browser supporting a different set of features, but the lowest common denominator they all support is rather small.

But I Want To Use It Now!!!

HTML5 Forms started off as WebForms 2.0 back in 2004, so I wasn’t surprised to see that a few developers had already coded some JavaScript implementations. Weston Ruter’s cross browser library, webforms2.js, implements a huge chunk of it, including parts that didn’t make the transition from WebForms 2.0 to HTML5 forms (e.g. Webform 2.0′s Repetition Model).

Since widgets weren’t implemented in webforms2, I created html5Widgets.js. This interface library is independent of webforms2 – if all you want is a cross-browser HTML5 form with validation, then all you need is the original webforms2.js. If you want special widgets that are not available for all browsers, include html5Widgets.js. Since I did not want to re-invent the wheel by creating widgets from scratch, html5Widgets.js uses some really nice third party JavaScript libraries to create them (more on that below). It also uses Modernizr to detect if there is native support for each of the HTML5 form widgets – if not, html5Widgets steps in to put the right widget in place. To save bandwidth, developers only need to include the third party libraries for the widgets they need.

In the rest of this article, I will go over different parts of the HTML5 specification and show how you can use them in your applications today, step-by-step. Each section will state which browser natively supports that part of the specification, and what is needed for browsers that don’t. Eventually, when the browser manufacturers catch up with the standard, you won’t need to use any JavaScript at all.

Form Validation Using the required and pattern Attributes

The required attribute makes an input field mandatory and forces the user to enter in a value in order to submit the form data. The markup is simple

<input type="text" name="firstName" value="" required="required" />

(Note:, you can also just use required on its own if you aren’t trying to be XHTML compliant.)

The pattern attribute forces the user to enter in a value using a specified format. It uses regular expressions to define this format. For example, if you want to force the user to input a U.S. Zip Code inside a form field, you would use the following markup.

<--
     zip code regular expression from
     http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256F6B005294C2
-->
<input type="text" name="zipCode" value=""
   pattern="\d{5}([\-]\d{4})?" required="required"  />

Note that required and pattern are independent from each other. You can have a pattern set on a form field without it being mandatory (i.e. the pattern would only be checked if the user enters in data into the field).

Opera 10+ (mobile and desktop editions) is the only browser that supports the validation routines natively. To use this in all other browsers, all you need is to include the following script tags in the head of your document.

<script type="text/javascript" src="/path/to/archive/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

Let’s take a look at how this looks visually:

Opera 10+ Windows	Firefox 3.6 with webforms2.js

Note the “starred” style of the form field — this is not the default look and feel of the required fields, but something I added with a simple amount of CSS:

input[required], select[required] {
	background: #ffffee url("../images/asterix.gif")  no-repeat left 2px;
	padding-left: 1.5em;
	width: 13.5em !important;
}

(This CSS does not work in Internet Explorer 6. Given that everything else in this article does, I hope the reader will overlook this one oversight considering that this browser should have entered retirement years ago (and have its driving license taken away, and shipped off to some really horrible nursing home watching really crappy talk shows all day and eating bad food …)

See an example of pattern and required in action.

Note that the same validation framework checks the values of inputs of type email, url and number to ensure that the values are in their respective valid formats. As an added bonus, if you are using the iPhone or iPad version of Safari, the virtual keyboard that appears will be optimized for these type of form fields (e.g. when editing a number field, the keyboard that appears contains only digits and the “+”, “-”, and “.” keys. This is native behaviour for iOS, and I hope other mobile browsers, such the Android’s, follow suit.

The autofocus Attribute

The autofocus attribute allows developers to choose which element has focus when the page is loaded. The Google front page has done this via JavaScript, and now, 12 years later, there is finally an HTML attribute to easily handle this.

<input type="text" name="fullName" value=""
  required="required" autofocus="autofocus" />

Safari, Chrome and Opera support it natively. To make it work in other browsers, include the webforms2.js library, as we did in the required and pattern examples.

See an example of autofocus in action

The placeholder Attribute

A placeholder is a great visual cue to communicate any special information about a field (e.g. a description
of the data to be input, if the field is required, etc).

An example of placeholder text. The text disappears when the field has focus or if the user types information into the field.

Syntax is simple:

<input type="text" name="fullName" value="" required="required"
   placeholder="Required information" />

Safari, Chrome and Firefox support this attribute natively. To make it work in other browsers, it is necessary to load the html5Widgets library, with the necessary supporting libraries:

<script type="text/javascript"
   src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

What do these libraries do?

• modernizr is used to detect which HTML5 attributes and tags are supported by the users’ browser
• html5Widgets is what actually does the placeholder logic, with EventHelpers.js providing cross-browser event-handling routines.

See an example of the HTML5 placeholder
tag in action.

The range Input Type and output Tag

Easily my favourite of the HTML5 widgets, range gives developers a sliding control to put inside their forms.

The syntax is simple:

<input type="range"  name="rangeEl" value="" min="0" max="150" step="1" />

The min and max attributes contain the minimum and maximum values, and step denotes by what increments the range slider increments by when moved. Note that you can use these attributes with the number input type as well, but instead of having the fancy interface, it will use the validation engine to ensure the value follows what these attributes dictate.

At the time of this writing, Opera and WebKit based browsers (like Safari and Chrome), support it natively, and html5Widgets uses the Frequency Decoder Slider Widget to implement it in unsupported browsers. To ensure cross-browser HTML5 range element goodness, place the following script tags in your document:

<!-- Needed for Range Element -->
<link type="text/css" rel="stylesheet" href="/path/to/shared/css/slider.css">

<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="/path/to/shared/css/slider_ie.css" />
<![endif]-->

<script type="text/javascript" src="/path/to/shared/js/frequency-decoder.com/slider.js">
</script>

<!-- Needed for Validation -->
<script type="text/javascript" src="/path/to/shared/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

<!-- Need for HTML5Widgets -->
<script type="text/javascript"
  src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

Take a look at the screenshots below. You will see that the way a range field varies among the browsers that natively support it, and even in some of the browsers that use html5Widgets:

	Explorer 6.x+ (html5Widgets support)	Firefox 3.5+ (html5Widgets support)	Safari 4.0+ (native support)	Chrome 3.0+ (native support)	Opera 10.0+ (native support)
Windows
Mac	Not Applicable
Linux	Not Applicable		Not Applicable

The output tag can be used to show the value of a field, or the result of an operation performed on a number of fields, using JavaScript expressions. Although the output tag may calculate fomulas referencing any form fields, it is useful especially for the range input type so users can see what value the range element is pointing to:

<output onforminput="this.value = rangeEl.value">-</output>
<input type="range"  name="rangeEl" value="" min="0" max="150" step="1" />

The contents of the output tag is the default value. Note the this.value syntax – I am not sure why the W3C HTML5 working group decided it was needed (why not just have the formula?), but it is. If there are other types of expressions supported in the final specification, they are not supported by html5Widgets at this time. Note that in order to apply CSS to the output tag in IE, it is necessary to use Remy Sharp’s HTML5 Enabling Script.

See an example of the range input being used with the output tag.

See an example of the output tag being used without a range field.

The datetime, datetime-local, date, week and week Input Types

At the time of this writing, Opera is the only desktop browser that supports HTML5 date fields. To support the other browsers, html5Widgets uses a slightly modified version of DynArch.com‘s Ex-”Coolest” DHTML Calendar (I decided not to use the coolest one because the Ex-Coolest has a more permissive license and it works really well). Now all browsers can support the datetime, datetime-local, date, month and week input fields, and submit these values in a consistent format.

Here are the scripts needed for the browsers that need it:

<!-- Needed for Date/Time Elements -->
<link type="text/css" rel="stylesheet" href="/path/to/shared/js/jscalendar-1.0/calendar-win2k-1.css" />
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/calendar.js"></script>
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/lang/calendar-en.js"></script>
<script type="text/javascript" src="/path/to/shared/js/jscalendar-1.0/calendar-setup.js"></script>

<!-- Needed for Validation -->
<script type="text/javascript" src="/path/to/shared/js/weston.ruter.net/webforms2/webforms2_src.js">
</script>

<!-- What glues all the above together -->

<script type="text/javascript" src="/path/to/shared/js/modernizr.com/modernizr-1.5.min.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/EventHelpers.js">
</script>
<script type="text/javascript" src="/path/to/shared/js/html5Widgets.js">
</script>

Note that the calendar widget uses language packs and that I am using the English one (calendar-en.js. Other language packs are included.

Below is a comparison between Opera’s native date widget vs. the one provided by the DynArch/HTML5Widget combo:

	DateTime Widget	Month Widget
Opera Windows
Opera Mac
Firefox 3.5+ Windows (html5Widgets support)

It looks like the native calendar for Opera for Mac is a smaller than the Windows version – hopefully this is just on my copy of the browser.

The display formats, and they values that they submit to the server, are pretty much the same

See the HTML5 date widgets in action.

Note: In this example, The Opera Mobile Windows Emulator incorrectly displays the datetime and datetime-local calendars in the upper left-hand corner of the screen, but not the other ones. Since this is Opera’s own calendar widget, and not html5Widgets’, this bug will have to fixed by Opera.

Screenshot of Opera Mobile bug

The color Input Type

Currently none of the desktop browser manufacturers support the color input type (although the new WebKit based Blackberry browser seems to have a neat implementation). While we wait to see how the major browser manufacturers decide to implement color, you can use html5Widgets’ implementation which uses Jan Odvarko‘s jscolor. The script has been configured to allow only allow lower case hexadecimal rgb values to be entered, and that a blank value not be allowed, as per the W3C spec.

Here are the script tags needed to implement this in all browsers:

<!-- Needed for Color Element -->
<script type="text/javascript" src="../../shared/js/jscolor/jscolor.js">
</script>

<!-- What glues all the above together -->
<script type="text/javascript" src="../../shared/js/modernizr.com/modernizr-1.5.min.js">
</script>

<script type="text/javascript" src="../../shared/js/EventHelpers.js">
</script>

<script type="text/javascript" src="../../shared/js/html5Widgets.js">
</script>

Below is a comparison between the Blackberry’s implementation (grabbed from the Blackberry Development Blog) and HTML5Widget/jscolor’s.

Blackberry Web Browser	Firefox 3.5 with html5Widgets.js

See HTML5Widget’s implementation of the
color input type.

Note: Like other HTML syntax, color uses the unfortunate American spelling instead of the Queen’s Proper English (i.e. colour). Ensure you spell it incorrectly in order to make this work. ;-)

How Well Do These Libraries Handle the Official Specification?

I have done some testing on some existing examples that use HTML5 forms to ensure that it works the way developers expect. Here are a few examples that I have taken, with the necessary JavaScript added:

• A cool looking payment form by Inayaili de León (originally from her HTML5 forms tutorial)
• An HTML5 Form Demo by Richard Bradshaw (originally from his Fancy Forms: HTML5 + CSS3 – JS article)
• Another cool Example by Anne van Kesteren (originally from his article Improve your forms using HTML5! on the The Opera Developer Community Website).

However, the HTML5 Forms specification is large, and unfortunately, the webforms2 and html5Widgets libraries don’t implement everything … yet!!!! Since I am really motivated with what HTML5 forms can do, I am committed to completing support to most, if not all, of the HTML5 Forms specification. The version of webforms2 in this blog post has been modified from Weston Ruter’s original verison, but it will be merged with the official Google Code version in the next week or so and will include compressed versions of all the library. The html5Widgets library will also have a permanent home there.

Things that I will be working on in the near future are:

• Support for other HTML5 form elements, among other things, datalist, number, keygen, progress, time and meter
• Support for CSS styling of HTML5 form widgets as well as the ability to style form fields according to their validation state (e.g. :valid and :invalid psudo-classes). Opera seems to be the only browser currently supporting this.
• Default styling for some of the new input types, like tel, email, url. Opera for Mac and Opera Mobile are the only browsers I know of that support this for email and url.
  

  email and url form fields in Opera Mac

• Support for customizing the validation look and feel. This is one I would love to do, since I’m sure a lot of developers would want to change how validation errors appear on the screen. Unfortunately, the HTML5 specification doesn’t describe a standard way of doing this. It will be interesting to see how the browser manufacturers deal with this issue (To any browser developer reading this is working on the display form validation errors: I would love to know how you are doing this if you are willing to share. Hint, HINT! ;-))
• In Internet Explorer 7 and lower, the ability to style input types it doesn’t support natively with CSS code like input[type="range"]
• Enabling HTML5 forms validation on the server side to ensure data integrity for browser that don’t support HTML5 forms that have JavaScript disabled.
• Support for internationalization of the error messages used in webforms2. If anyone wants to help in the translation of these error messages, please drop me a line — I need help!

Below is a modified version of the Wikipedia’s HTML5 forms compatibility table and see what how things the support situation stands today.

Integrating With visibleIf To Make Even Cooler Looking Forms

The webforms2 and html5Widgets libraries are designed to co-exist well with visibleIf to create interactive forms with fields that only validate the ones that visibleIf is displaying.

See an example of HTML5 validation working with the visibleIf JavaScript library

Acknowledgments, Shout-outs and Kudos

• Faruk Ates and Paul Irish for the definitive HTML5 and CSS3 feature detector, modernizr.
• Weston Ruter for doing the insane amount of work on webforms2 years ago.
• Brian McAllister: for making the excellent Unobtrusive slider control which I used for the range element.
• Mihai Bazon for keeping the The Ex-“Coolest” DHTML Calendar around even though he has a paid product.
• Jan Odvárko for his rocking jscolor widget.
• Remy Sharp for his fine HTML5 Enabling Script so we can force IE to style things like the output tag.
• Inayaili de Leon, Anne van Kesteren and Richard Bradshaw for allowing me to show how easy it is to make their original HTML5 Form demos work with html5Widgets.

Further Reading

• The W3C HTML5 Forms Specification Working Draft: The Working Draft is in “Last call for comments” status, so there may be some last minute changes.
• A Form of Madness: Chapter 10 of Mark Pilgrim’s great reference on HTML5.
• Web Forms 2.0 Working Draft: The WHATWG spec that the W3C spec is based on. It includes the repetition model which didn’t make it into the W3C spec
• webforms2 -Web Forms 2.0 Cross-Browser Implementation: Weston Ruter’s original script on Google Code. In the next few weeks, this will be the contain the updated script presented here, and will be the official home for html5Widgets.

Download

This archive is the temporary home for html5Widgets. It will soon be hosted at the webforms2 Google Code page.

html5Widgets v. 1.0 and example code (zip format)

When I released cssSandpaper a few months ago, I was disappointed that I couldn’t support CSS3 transform’s translate() function in IE due to a limitation in the DXImageTransform.Microsoft.Matrix CSS filter. However, with the gracious help of Nicola Rizzo (who has already used his Matrix filter skills coding a really cool dojox transformation plugin) and Tomasz Tunik, we now have a version of cssSandpaper that supports it. I also got a few requests to have IE support for CSS3 gradients that can use the rgba() color space, and with the help of information on CSS3 Please, it was easily added.

transform: translate

The CSS transform property allows for 2D translations of a box. What this means is, no matter which way you want to rotate or skew the object, you can move the object horizontally and vertically from the object’s perspective. Some of you may ask “How is this different from changing the object’s top and left properties? Let’s take a look at an example below to see how it differs:

An example of CSS3 transform: translate() using cssSandpaper (click the image above to see it in action)

In the example above you’ll see two white boxes, one without any transforms performed, and the other translated 200 pixels to the right. Just what you would expect. Now take a look at the two red boxes … they are both rotated 45 degrees, but the second one is then translated 200 pixels to the right from the object’s perspective.

The translations are done with some very simple CSS:

/*
 * This object is rotated 45 degrees and then translated 200 pixels to the
 * right and 100 pixels down, with respect to the object's perspective
 */

#o2 {
	-sand-transform: translate(200px, 100px);
}

translate() takes two parameters, the x and y translation offsets (currently, cssSandpaper only supports px units for these offsets). There are also translateX() and translateY() if a developer only wants to translate in one direction.

rgba() Gradients

The rgba color space adds alpha channeling to the rgb color space you know and love. When using it in gradients, developers can make parts of an elements background-color semi-transparent. The two examples below illustrate the effects that be done with rgba().

A few rgba() gradients on top of each other to demonstrate their semi-transparency.

An example of an animation using rgba() gradients (click on the above images to show the examples in action).

The following code illustrates how to perform an rgba() gradient:

/*
 * The following is a horizontal gradient that blends red to blue, with a 50% opacity level
 */

#o2 {
   background-image: -sand-gradient(linear, left top, right top,
      from(rgba(255, 0, 0,  0.5)), to(rgba(0, 0, 255, 0.5)));
}

Note that as before, IE only supports two color gradients that are strictly horizontal or vertical. I hope to support multiple color stops in IE in a future release. Also note that in IE, the alpha channel is removed from an object if you apply a transform on it. This may be a limitation of IE’s Gradient filter, which cssSandpaper uses to implement CSS3 gradients.

In order to translate rgba() notation to ARGB notation with IE’s gradient filter understands (e.g. #aarrggbb, where aa are two hex digits representing the amount of opacity), I modified Stoyan Stefanov‘s RGBColor script (which translates from one color notation to another) and added ARGB support.

For information about the rgba color space, read the CSS3.info’s brief introduction to Opacity and RGBA.

Future Roadmap

There is quite a bit more I would like to see cssSandpaper support, including:

1. solid rgba() background colors: this should be quite easy to support, given it is a special case of an rgba() gradient (i.e. a transition from a color to the same color).
2. CSS3 transitions: performing animations with only a bit of CSS would be sweet for those who are afraid of recursive programming with the JavaScript setTimeout() function.
3. transform-origin: modify the origin for transformations of an element (this would allow, for example, developers to produce an animation of planets rotating around the sun, which would be the transform-origin point for all the planets).
4. border-radius: Firefox and Safari have slightly diffferent methods of rounding corners of a block-level element, and it would be useful to simplify this. It would also be nice to have support for it in any version of IE (there are a few excellent solutions involving VML are out there today, but it would be great if there was one that supported all the features that CSS3 supports, including different radii for each corner, as well as co-existance with the other features of cssSandpaper, which may not be an easy thing to do).
5. CSS3 gradients with multiple color-stops: cssSandpaper uses IE’s Gradient filter, which only supports two color-stops.  It would be great to do some JavaScript magic to emulate multiple color-stops.
6. radial gradients in IE: although IE’s Gradient filter doesn’t support it, VML does (I found a really cool example of an VML radial gradient, but it can only be viewed in IE).
7. better support for other units of measure besides px: I personally love to use em units in my design work, and want cssSandpaper to support this and other units, like cm, in, and percentages.

If anyone would like to help me implement these features or any others in cssSandpaper, please contact me either in the discussion below or at the email address at the top of this page (I can really use any assistance anyone can give). Even if you don’t know JavaScript, any comments you have on this library would be most welcome. Let’s prevent older browsers from keeping us from using CSS3 and doing some really cool design work.

Get the latest version of cssSandpaper from the official documentation page

Cross-Browser Animated CSS Clock Example based on an original WebKit example by Toby Pitman. Click image above to view.

In my first article about CSS3, I introduced a new script, cssSandpaper, which allows developers to sidestep the myriad of vendor specific properties and just use one property to implement properties like transform for all browsers, including IE.

After posting the article, I saw many examples of CSS3 Transform using animations. Toby Pitman’s Old School Clock is an excellent example of how one can use a Webkit’s -webkit-transform to make a small but excellent demo. I wanted to prove that it would be easy to take this example and make it work in all modern browsers, so I did. It took 15 minutes (okay, I had to change cssSandpaper to offer scripting support, but that didn’t take too long either). I then coded a few more examples to show that some really neat things can be done using a small bit of JavaScript.  Here are links to these examples:

• The Cross-Browser CSS Clock based on code by Toby Pitman
• A remixed movie leader countdown (actually, it uses the RCA Indian Head Test Pattern, but whatever …)
• A psychedelic animated gradient

How To Do CSS3 Animated Effects?

If this was the perfect world, all a developer would need to do is use a DOM element’s style property and manipulate the appropriate camel-case CSS property. For example, if a developer wanted to script the rotation of a node, he or she would code the following:

    node.style.transform = "rotate(25deg)";

However, this is not the perfect world — after all, I am not making millions writing this blog and the current flavours of IE in use today don’t support many of the CSS3 properties. However, using cssSandpaper, one could use the following method to do the same thing:

    cssSandpaper.setTransform(node, "rotate(25deg)");

Developers can use cssSandpaper to manipulate opacity, box-shadow, and background gradients, using cssSandpaper.setOpacity(), cssSandpaper.setBoxShadow() and cssSandpaper.setGradient() respectively. All these functions take two parameters: a DOM node, and the appropriate CSS property values as described in the cssSandpaper documentation. For example:

    cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)");
    cssSandpaper.setOpacity(node, 0.3);
    cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc");
    cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));")

For more information, please read the official documentation of cssSandpaper.

Caveats

• When animating using transform‘s scale() function, make sure you avoid scaling objects too much larger than their original size. This is due to the fact that IE scales objects as if they were images, and scaling-up an object will make the result quite pixelated.
• The -sand-gradient() function does not use Firefox’s native -moz-gradient function to produce CSS3 gradients, but a solution using Canvas which works in all Canvas enabled versions of Firefox. I will update cssSandpaper to use -moz-gradient in a future release (if anyone wants to help me get this working, please contact me via the email address at the top of this page, or by leaving a comment below).

Go to the cssSandpaper documentation to download the latest version.

Update (April 6, 2010):

Please see the follow up article on Cross Browser CSS3 Animation which explores scripting CSS3 properties.

The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object.

When I first saw sites using transform, I looked at the underlying code and tried to produce pages using transform in all browsers. Although Firefox, Opera and Webkit based browser support it via vendor-specific prefixes (using -moz-transform, -o-transform and -webkit-transform respectively) Internet Explorer doesn’t support it at all. I didn’t like that, so I took out my JavaScript whip, beat Explorer into submission and made it do my bidding (but not without getting a few mental bruises of my own).

Before I start talking about the details of my solution, let’s take a look at a few examples of it in action.  The following code has been tested with Firefox 3.5, Safari 4,  Chrome 4, Internet Explorer 6 and higher.

1. Rotations Example
2. Skew Example
3. Cube Example, using rotates and skews
4. Another example that looks like a CSS3 version of a Geocities page.

(The examples also work on my copy of Opera 10.5, although I have seen it fail on other installations – I will update this post when I find  out why).

cssSandpaper to the Rescue

I saw the design potential of using CSS transforms and was frustrated at Explorer’s lack of support. I originally tried a non-JavaScript solution which involved creating CSS rules that combine transform with an IE technology that does something similar: the DXImageTransform.Microsoft.Matrix CSS filter.

I then, to steal a phrase from Russel Peters, started to Hurt Real Bad:

• the syntax of transform is very obvious:
  

  #myObject {
     transform: rotate(40deg) scale(2.0);
  }

  but the IE filter code is quite intimidating:

  #myObject {
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
          M11=1.5320888862379554, M12=-1.2855752193730787,
          M21=1.2855752193730796, M22=1.5320888862379558);
  }

  The scary numbers that the DXImageTransform.Microsoft.Matrix filter uses requires knowledge of matrix and vector mathematics. Even though there is a great Wikipedia article on the subject, even the mathematically gifted wouldn’t want to do the calculations to do a simple rotate in CSS (I would like to note here that even though I have a university degree in Mathematics, I hate doing arithmetic inside my head. If you don’t believe me, watch me figure out a tip at a restaurant sometime. I’m not kidding).

• although it is possible to have a list of transformations using transform, the DXImageTransform.Microsoft.Matrix filter only allows one transform matrix. In order to implement multiple transforms using one filter, a designer would have to convert all the transforms into matrices and multiply them together. Again, as ugly as I am when I first wake up in the morning.
• when rotating, skewing, or doing any other transformations on objects using the transform property, the center of the object remains fixed. However, the Matrix filter doesn’t keep the centre of the transformed object fixed, as seen by the illustration below:
  

  Rotate using CSS transform	Rotate using IE Filter

See the above example in action (compare IE with the other browsers to see the difference for yourself)

I was about to give up on my endeavor until I read Weston Ruter’s clever CSS Gradients in Canvas article, which implements gradients in older versions Firefox and Opera. What I really liked was how he used the CSS from a web page to place the canvas gradients in the page (as opposed to using CSS classes to indicate where the gradients should go). I then thought it would be a great idea to do the same with CSS transforms – why not have JavaScript find out which objects are transformed by reading the style sheets containing the transform rules, and if the browser is Internet Explorer, apply the Matrix filter, while translating the image so that the center is maintained. How hard could it be …….. right?

After a few obsessive months of coding, coffee drinking and Asprin popping (as well angrily asking myself on several occasions why the &@$! I would wanted to do this in the first place), I created cssSandpaper.js, a library that implements transform (and some other CSS3 properties) as consistently as possible in all browsers. It uses many ideas from Ruter’s gradient script, as well as sylvester.js, James Coglan’s brilliant matrix and vector math library.

The code is currently in a beta stage, but I think that it’s in good enough shape that developers can start to play around with these really cool effects today and have it work in almost any browser.

Browser Differences

After I finished cssSandpaper and played around with transforms, I found some slight differences in the way browsers handled them:

• If you transform an object with scrollbars, it is possible to scroll the object in most browsers in most cases. However, in the cube page I mocked up, I noticed the following behaviour:
  • the left facing side of the cube isn’t easily accessible in IE.
  • the scrollbars don’t appear at all in Opera.
  • the scrollbars are not quite clear in Chrome for Windows, although one can still scroll the sides if you can guess where they are.
  • Firefox 3.5 for Mac puts the scrollbars in strange places (this has been fixed 3.6).
• In Internet Explorer, the text is selectable but sometimes it takes a few tries to figure out how to do it (try selecting text with IE in my cube mockup and you’ll see what I mean).
• When selecting text within Firefox, the text tends to jump around ever so slightly for some odd reason (this is quite a subtle effect that it is probably not noticeable in most instances).
• It looks like Internet Explorer takes the block of HTML, converts it to an image and then does the transform (I’m not sure .. I’m guessing). As a result, the text in certain situations will look a little blurry, especially if scaling is involved.

As to be expected, the rendering of the transformed text in the other browsers slightly differs:

	Explorer 6.x+	Firefox 3.5+	Safari 4.0+	Chrome 3.0+	Opera 10.0+
Windows
Mac OS X	Not Applicable				Doesn’t support transforms yet (as of version 10.50)
Linux	Not Applicable		Not Applicable		Doesn’t support transforms yet (as of version 10.50)

Using cssSandpaper

After downloading the archive you must put the following tags into the head of your document after all of your style sheet declarations (this is to ensure the JavaScripts will run after the style sheets are loaded):

<script type="text/javascript" src="path/to/js/cssQuery-p.js"></script>
<script type="text/javascript" src="path/to/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="path/to/js/cssSandpaper.js"></script>

You can then use the transform property in your web pages. Note that since the specification for the transform property is finalized by the W3C, I decided to use the vendor-specific prefix -sand- before each CSS3 property it supports.

The following is a description of how to use transform, as well as two other CSS3 properties that cssSandpaper supports, box-shadow and gradient.

Go to the cssSandpaper documentation to download the latest version.

-sand-transform

-sand-box-shadow

-sand-gradient

Other Known Issues

• Currently, when a users changes the font-size in IE, the layout gets a little messed up. This will be fixed in a future release.
• Scripting in IE cannot be done via the usual obj.style.transform. There is, however, an alternative way of scripting the cssSandpaper supported properties which will be outlined in a future blog post (I don’t mean to keep anyone in suspense … it’s just that I feel like I’ve spent too much time on this post and I want to get at least this part out the door :-) ).
• Opera 10.5 sort of works.  It works on my copy, but not on another copy I’ve seen.  I don’t know why yet, but I will find out soon and post and update when I do.
• Weston Ruter’s gradient script has more features.  I will incorporate them in a future release.

Future Work

cssSandpaper will eventually be about more than just transforms – I would like to be able to support other advanced CSS topics (maybe even animations, if it is possible). It probably has a few bugs in it – I would really appreciate anyone letting  me know if you find any (my e-mail address is at the top left part of the page).

If anyone would like to get contribute code or do testing, I would love the help too.  :-)

Acknowledgments

I would like to thank Weston Ruter for his CSS Gradients in Canvas script, since I stole many of his ideas with his permission (I will be implementing more of the advanced features of his script in a future release of CSS3Sandbox).  I would also like to thank  James Coglan for building  Sylvester so I didn’t have to.

Downloads

Go to the cssSandpaper documentation to download the latest version.

Update (Feb 3, 2009):

• A bug in Webkit seems to be the culprit in the permissions form example below not working correctly in Safari 4. The code has been updated to work around this bug and the article below has been updated. Thanks to russbuelt for pointing this out.
• Apparently, an example made by Apple which I reported not working in Safari does work in Safari 4.0.4 for Mac OS X. Thanks for Scott Straker for this information.


Image Credit: Flickr user svartling

HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers. Mozilla, Apple and Microsoft all have pages describing how to use it, but their examples seem to work only in their particular browser (Apple’s example doesn’t even work in their own! Updated, Jan. 11, 2009: Although I have not been able to get this example working on Safari 2.0.4 and 3.1.2 for OS X and 4.0.4 for Windows, I have received word that it works on Safari 4.0.4 on OS X). Remy Sharp’s great article Native Drag and Drop was a good place for me to start — however, the examples didn’t work in Internet Explorer. I also thoroughly enjoyed JavaScript guru Peter-Paul Koch’s humorous and lengthy rant about cross-browser drag and drop headaches where he uses creative and colourful language to describe what he thought of the standard, the browser manufacturers, and the WHAT-WG.

When normal people see the author of the Compatibility Master Tables respond negatively to a web technology, they would probably assume it would be a good sign to stay away from it.

However, I am not normal. With a name like Zoltan, how could I possibly be normal? (and yes, it is my real name).

So, I decided to find out for myself how bad HTML5 Drag and Drop really is. Almost immediately, I understood Koch’s reaction – the browser vendors have not implemented all the same features, and there are even a few quirks in how the features that are implemented work. However, after doing a lot of research, I found a common denominator that works well, with the help of a small bit of JavaScript that smooths out the edges. Despite the implementation flaws, Future-proof HTML5 Drag and Drop is not too hard for developers to use in their own applications. This article will explain how to do this step by step with many examples along the way. By the time you are done, you will be able to write useful drag and drop scripts of your own like in this example:

See an example of HTML5 Drag and Drop in action.

Advantages Over Existing Drag and Drop Implementations

Koch mentioned in his blog post that “Web developers MUST NOT (in the sense of RFC 2119) use HTML 5 drag and drop. They should use old-school scripts instead”. I would argue that developers should use HTML5 drag and drop for the following reasons:

• JavaScript Framework Independent: Most other (but not all) drag and drop implementations are tied into 3rd party frameworks like Dojo, Prototype or jQuery.
• Built-in Browser Support: HTML5 Drag and Drop is supported in Firefox 3.5+, Chrome 3.0+, Safari 3.0+ and Internet Explorer 5.0 (Note: that is not a typo — HTML5 Drag and Drop is based on work done by Microsoft in 1999). Because it is part of HTML5, I assume Opera support should be inevitable.
• Integration With Other Web Applications: the HTML5 specification will allow developers to produce drag and drop scripts that work across frames, and across browser windows.
• Integration With Non-Web Applications: the HTML5 specification also allows users to drag and drop data to and from non-web applications

The Basics of Drag and Drop, Step by Step

In order to save other developers from the headaches I got deciphering cross browser drag and drop, I present the following guide that shows how to do in five easy steps. Every step will describe a set of related concepts, and will show examples, most of which are built on code from previous steps. At the end of each step, I will discuss any issues and interesting bits I came across.

Step 1: Defining a Draggable Object

First you need to define the HTML nodes that you want to drag. Firefox requires that these nodes have their draggable attribute set to "true", Internet Explorer requires that the node must be an <a> tag with (the href attribute set) or an <img> tag.

<a href="#" id="toDrag" draggable="true">This is a draggable item</a>

To show how this works, I have written a very simple page with a the above markup in the <body>:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">

        <title>Test #1: A Simple Draggable Object</title>

      <script type="text/javascript" src="../../shared/js/EventHelpers.js">
      </script>
      <script type="text/javascript" src="../../shared/js/DragDropHelpers.js">
      </script>

        <link rel="stylesheet" type="text/css" media="screen" href=
        "css/test1.css">
    </head>

    <body>
        <h1>Test #1: A Simple Draggable Object</h1>

        <a href="#" id="toDrag" draggable="true">This is a
        draggable item</a>

        <p>Try to drag the red box around. You will see the
        draggable object cloned in every browser except Explorer
        and Chrome.</p>

        <a href=
        "http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/">
        Go back to the User Agent Man HTML5 Drag and Drop
        article</a>
    </body>
</html>

Note that this HTML page has two scripts in the <head>:

• EventHelpers.js: this script implements cross-browser event handling routines without the need for a JavaScript framework. All the examples in this article use it, but feel free to refactor all the code in this article to use a third party framework like Dojo, jQuery or whatever framework you like.
• DragDropHelpers.js: among other things that I will get to later, will activate dragging on draggable="true" objects in Safari and Chrome using a built-in copy of Dean Edwards’ cssQuery. It does this by inserting the following CSS code into the HTML document:
  

  [draggable=true] {
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    -khtml-user-select: none;
    -webkit-user-select: none;
  }

  The first two rules allow the dragging of the draggable="true" nodes, while the last two prevent the user from selecting the text within the node (which can cause some unexpected behavior in Webkit browsers). The -khtml properties work in older versions of Safari, while -webkit ones work in newer versions. Without these CSS properties, these nodes will not be draggable when using the Safari web browser

See Example #1: a draggable object

A couple of notes:

1. You’ll notice that when you hover the mouse pointer over the draggable item, it will change to (i.e. I the “move” cursor). This is not the default behavior of the web browser – it is something I added in DragDropHelpers, since I believe that it’s a nice visual cue to show users that an object is draggable (if you don’t want this behavior, it is possible to turn it off in your own scripts by setting DragDropHelpers.showMouseoverCue to false
2. How draggable objects look in the various browsers varies. Here are screenshots of how it looks in Windows web browsers (Note: although all screenshots were taken using Windows XP, similar results occur when viewing under Windows Vista or Windows 7):
   

   Firefox (Windows XP)	Safari (Windows XP)	Explorer & Chrome (Windows XP)

   Note the differences between these three browsers:

   • Firefox for Windows shows a cloned version of the draggable object underneath the mouse pointer when the object is being dragged, while Safari displays a grey box with the text “This is a draggable item” written inside. Explorer and Chrome don’t show any effect at all (We will address this issue later).
   • Since we have not established where we are going to drag our object, all Windows browsers will change the mouse pointer cursor to (a.k.a. the “not-allowed” mouse pointer). This is the expected behavior, and you will see later that it will help the user know where to drop the object.

   On OS X, Firefox and Safari look similar to Firefox for Windows, except that the “not-allowed” mouse-pointer doesn’t show up:

   Firefox (OS X)	Safari (OS X)	Chrome (OS X)

   The Linux browsers don’t have the “not-allowed” mouse cursor either. Also, the cloned version of the draggable object isn’t transparent using the Linux version of Firefox, and Chrome under Linux behaves pretty much the same as on the other platforms (Note: all Linux testing was done using Ubuntu 9.10 using the standard Gnome window manager).

   Firefox (Ubuntu)	Chrome (Ubuntu)

   The fact that Explorer and Chrome don’t have any visual dragging cues bugged me, so I put a “fix” inside DragDropHelpers.js which can be turned on by setting DragDropHelpers.fixVisualCues to true. Let’s look at a slightly refactored version of Example #1 where we insert the following code in the <head>:

   <!DOCTYPE html>
   <html lang="en">
      <head>
         <title>Test #1: A Simple Draggable Object (with visual cues added to Explorer and Chrome)</title>
         <script type="text/javascript" src="../../shared/js/EventHelpers.js"></script>
         <script type="text/javascript" src="../../shared/js/DragDropHelpers.js"></script>
         <script type="text/javascript">
         <!--
         DragDropHelpers.fixVisualCues=true;
         -->
         </script>
   
         <link rel="stylesheet" type="text/css" media="screen" href="css/test1.css" />
   
      </head>
      <body>
   
         <h1>Test #1: A Simple Draggable Object (with visual cues added to Explorer and Chrome)</h1>
   
         <a href="#" id="toDrag" draggable="true">This is a draggable item</a>
   
         <p>Try to drag the red box around.  You will see the draggable object cloned in all browsers.</p>
   
         <a href="http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/">Go back to the User Agent Man HTML5 Drag and Drop article</a>
   
      </body>
   </html>
   

See Example #1a, a draggable object with visual cue fix for Explorer and Chrome

Voila! The visual cue now shows up. I’ll explain how this works at the end of the article.

Step 2: Setting Events on the Draggable Object

Now that you have defined an object as draggable, you should attach some events to it so the browser knows what to do while it is being dragged. There are three events that a draggable object can fire:

Event name	Description
dragstart	Fires when the user starts dragging of the object.
drag	Fires every time the mouse is moved while the object is being dragged.
dragend	Fires when the user releases the mouse button while dragging an object.

A developer would attach these events the way they would any other JavaScript event – I use EventHelpers.addEvent, but one could use jQuery’s bind() method, prototype’s Event.observe() or whatever you favourite framework provides for event handling. Developers can also use the old school inline events (i.e. <a href="#" id="toDrag" draggable="true" ondragstart="somefunction();">This is a draggable item</a>), but I try to stay away from using those to seperate document structure from behavior.

Let’s take the example in step 1 and change it so we can log when these events happen to the toDrag node:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example #2: a draggable object with events attached </title>
      <script type="text/javascript" src="../../shared/js/sprintf.js"></script>
      <script type="text/javascript" src="../../shared/js/EventHelpers.js"></script>
      <script type="text/javascript" src="../../shared/js/DragDropHelpers.js"></script>

      <script type="text/javascript" src="js/02-dragObjectWithEvent.js"></script>

      <link rel="stylesheet" type="text/css" media="screen" href="css/test1.css" />

   </head>
   <body>

      <h1>Example #2: a draggable object with events attached</h1>

      <p>Try to drag the red box around.  This page will tell you if the
      object is currently dragging, and will log all <code>dragstart</code>
      and <code>dragstop</code> events</p>

      <p><strong>Is dragging:</strong> <span id="dragEventNotice">no</span>

      <p id="eventLog"><strong>Event now firing:</strong><br /><span id="eventNotice"></span>

      <a class="goBack" href="http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/">Go back to the User Agent Man HTML5 Drag and Drop article</a></p>

      <a href="#" id="toDrag" draggable="true">This is a draggable item</a>

   </body>
</html>

In the 02-dragObjectWithEvent.js script, the dragEventNotice node will be used to report whether the user is dragging the object around, and the eventNotice will be used to log what events the user has fired:

var dragObject = new function () {
   var me = this;

   var dragNode;
   var eventNoticeNode, dragEventNoticeNode;

   /* runs when the page is loaded */
   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      /* The node being dragged */
      dragNode=document.getElementById('toDrag');

      /* The nodes that report to the user what is happening to that node*/
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* The drag event handlers */
      EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      EventHelpers.addEvent(dragNode, 'drag', dragEvent);
      EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);
   }

   /*
    * The dragstart event handler logs to the user when the event started.
    */
   function dragStartEvent(e) {
      eventNoticeNode.innerHTML =
         sprintf("<strong>%s</strong>: Drag Event started.<br />%s",
            new Date(),  eventNoticeNode.innerHTML);
   }

   /*
    * The drag event reports to the user that dragging is on.
    */
   function dragEvent(e) {
      dragEventNoticeNode.innerHTML = "Currently dragging.";
   }

   /*
    * The dragend event logs to the user when the event had finished *and*
    * also reports that dragging has now stopped.
    */
   function dragEndEvent(e) {
      eventNoticeNode.innerHTML =
         sprintf("<strong>%s</strong>: Drag Event stopped.<br />%s",
            new Date(), eventNoticeNode.innerHTML);
      dragEventNoticeNode.innerHTML = "Dragging stopped."
   }
}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

Before we get to the drag events, a word about the coding conventions I use for this and all the other code examples in this article:

• the var me = this line ensures that the script doesn’t confuse the this keyword of the object with the this keyword inside an event handler.
• EventHelpers.addPageLoadEvent() (which is part of EventHelpers.js) will execute dragObject.init when the HTML has loaded. addPageLoadEvent() is based on code from Dean Edwards’ article The window.onload Problem – Solved!. It is similar to jQuery’s $(document).ready()method and prototype’s dom:loaded event.
• This code uses a JavaScript version of sprintf() that I had mentioned in a previous blog post. I have used it in all the remaining examples because I think it makes the code a lot easier to read (however, it is not necessary in order to make HTML5 drag and drop work).

Let’s get back to the drag events — you’ll notice that I have set the dragstart, drag and dragend events. When this page is loaded, it will tell you if the draggable object is currently being dragged, and will log all dragstart and dragstop events on-screen. Click on the example link below and see for yourself:

See Example #2, a draggable object with events attached

Step 3: Setting Events on the Target Object

Step 2 showed us how we can drag an object around the screen and know when each drag starts and ends. Now we need to drop the object. Let’s define a drop target to be an object where draggable objects can be dropped. A drop target can have the following event handlers attached to it:

Event name	Description
dragenter	Fires when a draggable object is first dragged inside an object.
dragover	Fires everytime a draggable object is moved inside an object. Note: if you want to allow the draggable object to be dropped inside this object, you must cancel the default behaviour of this event handler.
dragleave	Fires when a draggable object is dragged out of an object.
drop	Fired when a draggable object is dropped into an object.

If you want an object to become a drop target, you must attach both the dragover and drop events to it. You may ask “I understand why I need to implement drop (after all, it is one half of the term “drag and drop”) but why do I need dragover?” As stated in the table above, the drop event will not fire unless you cancel the default behaviour of the event target’s dragover event. This point is really important and your scripts will not work correctly unless you do this.

You may ask “Why is there even a dragover event in the first place? Isn’t drag sufficient?” (In his article, Peter-Paul Koch asked this question a bit more emphatically that I did). The dragover event object does contain some useful information, such as the coordinates of the mouse pointer inside the event target, (When I created DragDropHelpers, this information allowed me to fix Explorer and Chrome’s visual cue issue that I mentioned in step #1). These coordinates are stored in the properties offsetX and offsetY, except in Firefox 3.5 which keeps these values inside of the event properties layerX and layerY. For convenience, DragDropHelpers includes a method called getEventCoords() that will use the appropriate property to get these values (Note: layerX and layerY are only accurate when the drop target’s CSS position propety is set to relative, absolute or fixed).

To show how to add drop functionality to your code, lets take the code from example #2 and add a drop target:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example #3: a dragable object with a drop target</title>
      <script type="text/javascript" src="../../shared/js/sprintf.js"></script>
      <script type="text/javascript" src="../../shared/js/EventHelpers.js"></script>
      <script type="text/javascript" src="../../shared/js/DragDropHelpers.js"></script>

      <script type="text/javascript" src="js/03-dragObjectWithTargetObject.js"></script>

      <link rel="stylesheet" type="text/css" media="screen" href="css/test1.css" />

   </head>
   <body>

      <h1>Example #3: a dragable object with a drop target</h1>

      <p>Try to drag the red box around and dropping it in the target object.</p>

      <p><strong>Is dragging:</strong> <span id="dragEventNotice">no</span>

      <p id="eventLog"><strong>Event now firing:</strong><br /><span id="eventNotice"></span>
      <a class="goBack" href="http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/">Go back to the User Agent Man HTML5 Drag and Drop article</a></p>

      <a href="#" id="toDrag" draggable="true">This is a draggable item</a>
      <div id="dropTarget">This is a "target" object</div>

   </body>
</html>

The drop target will be the <div> with an id of dropTarget. The 03-dragObjectWithTargetObject.js script is the same code in example #2 except we add two event handlers:

• a dragover event that reports where the mouse is inside dropTarget
• a drop event that reports when the drop happened.

var dragObject = new function () {
   var me = this;

   var dragNode, targetNode;
   var eventNoticeNode, dragEventNoticeNode;
   me.init = function () {

   	if (EventHelpers.hasPageLoadHappened(arguments)) {
   		return;
   	}	

   	dragNode=document.getElementById('toDrag');
   	targetNode=document.getElementById('dropTarget');
   	eventNoticeNode = document.getElementById('eventNotice');
   	dragEventNoticeNode = document.getElementById('dragEventNotice');

   	/* These are events for the draggable object */
   	EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
   	EventHelpers.addEvent(dragNode, 'drag', dragEvent);
   	EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);

   	/* These are events for the object to be dropped */
   	EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
   	EventHelpers.addEvent(targetNode, 'drop', dropEvent);

   }

   function dragStartEvent(e) {
   	showMessage("Drag Event started");
   }

   function dragEvent(e) {
   	dragEventNoticeNode.innerHTML = "Currently dragging.<br />";
   }

   function dragEndEvent(e) {
   	showMessage("Drag Event stopped");
   	dragEventNoticeNode.innerHTML = "Dragging stopped."
   }

   function dragOverEvent(e) {
   	var coords = DragDropHelpers.getEventCoords(e);
   	showMessage(sprintf(
   	   "Drag over event happened on node with id %s at coordinate (%d, %d)",
   	   this.id, coords.x, coords.y));
   	EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
   	showMessage("Drop event happened on node with id " + this.id);
   	EventHelpers.preventDefault(e);
   }

   function showMessage(message) {
   	eventNoticeNode.innerHTML =
   		sprintf("<strong>%s</strong>: %s<br />%s",
   			new Date(), message, eventNoticeNode.innerHTML);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

(Note: EventHelpers.preventDefault(e) does what you’d expect: it prevents the default behavior of the event handler, similar to prototype’s Event.stop() or jQuery’s event.preventDefault())

See Example #3: a dragable object with a drop target

Note that in the above example, the time that the draggable object’s dragend event fires and the time that the drag target’s drop event fires is not consistant among browsers. Safari and Chrome fire dragend first, while Firefox and Internet Explorer fire drop first.

The two other drop target events, dragenter and dragleave are not absolutely necessary for every script, but let’s add these events to example #3 anyway to see how they work:

var dragObject = new function () {
   var me = this;

   var dragNode, targetNode;
   var eventNoticeNode, dragEventNoticeNode;
   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      dragNode=document.getElementById('toDrag');
      targetNode=document.getElementById('dropTarget');
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* These are events for the draggable object */
      EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      EventHelpers.addEvent(dragNode, 'drag', dragEvent);
      EventHelpers.addEvent(dragNode, 'dragend', dragEndEvent);

      /* These are events for the object to be dropped */
      EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
      EventHelpers.addEvent(targetNode, 'drop', dropEvent);
      EventHelpers.addEvent(targetNode, 'dragenter', dragEnterEvent);
      EventHelpers.addEvent(targetNode, 'dragleave', dragLeaveEvent);
   }

   function dragStartEvent(e) {
      showMessage("Drag Event started");
   }

   function dragEvent(e) {
      dragEventNoticeNode.innerHTML = "Currently dragging.<br />";
   }

   function dragEndEvent(e) {
      showMessage("Drag Event stopped");
      dragEventNoticeNode.innerHTML = "Dragging stopped.";
   }

   function dragOverEvent(e) {
      var coords = DragDropHelpers.getEventCoords(e);

      showMessage(sprintf(
         "Drag over event happened on node with id %s at coordinate (%d, %d)",
         this.id, coords.x, coords.y));

      EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
      showMessage("Drop event happened on node with id " + this.id);
      EventHelpers.preventDefault(e);

   }

   function dragEnterEvent(e) {
      showMessage("Drag Enter event happened on node with id " + this.id);
   }

   function dragLeaveEvent(e) {
      showMessage("Drag Leave event happened on node with id " + this.id);
   }

   function showMessage(message) {
      eventNoticeNode.innerHTML =
         sprintf("<strong>%s</strong>: %s<br />%s",
            new Date(), message, eventNoticeNode.innerHTML);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

See Example #3a: a drop target with dragenter and dragleave event handlers

(Note that in Firefox 3.5, a dragleave event will fire just before a drop event, which the other browsers don’t fire dragleave when dropping).

Step 4: Passing Data Between the Draggable and Target Objects

Once a draggable object is dropped into a drop target, the two objects can pass information between them using the drop event’s dataTransfer property. This property has two methods, setData() and getData(). In order to pass data between the two, a developer must use setData() during one of the draggable node’s drag events (e.g. dragstart). The drop target can then receive this data during one of it’s events using the getData() method.

Method	Description
setData(dataType, data)	Sets the data that can be shared between the draggable node and the drag target. Parameters dataType – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’. data – The data that is going to be set.
getData(dataType)	Gets the data that was previously set by dataTransfer.setData(). It can also get data that was set by a dataTransfer.setData() call from another page, another browser window, and another vendor’s web browser on the same machine. It also can get data that was set by a drop event of another desktop application (for example, Windows WordPad). Parameters dataType – The type of data that is to be set. So far, the only cross-browser dataTypes that can be set are ‘Text’ and ‘Url’.

setData() takes one string parameter, which is the data you want to share between the draggable object and a drop target.

Let’s take the code from step #3 and mix it up a bit: instead of having one draggable object, let’s make four. I have taken four photos of the Beatles from the Wikmedia Commons and made them draggable.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Test 4: setData() and getData()</title>
      <script type="text/javascript" src="../../shared/js/sprintf.js"></script>
      <script type="text/javascript" src="../../shared/js/helpers.js"></script>
      <script type="text/javascript" src="../../shared/js/DragDropHelpers.js"></script>

      <script type="text/javascript" src="js/04-setDataGetData.js"></script>

      <link rel="stylesheet" type="text/css" media="screen" href="css/test1.css" />

   </head>
   <body>

      <h1>Test 4: <code>setData()</code> and <code>getData()</code></h1>

      <img draggable="true" src="images/george.png" alt="George Harrison" />
      <img draggable="true" src="images/john.png" alt="John Lennon" />
      <img draggable="true" src="images/paul.png" alt="Paul McCartney" />
      <img draggable="true" src="images/ringo.png" alt="Ringo Starr" />

      <div id="dropTarget"><span>Drop an image here to find out more information about it.</span></div>

   </body>
</html>

The script 04-setDataGetData.js uses dataTransfer.setData() and .getData() to copy the <img> of the Beatle being dragged, as well as placing the alt attribute’s contents underneath the image.

var dragObject = new function () {
   var me = this;

   var targetNode;
   var eventNoticeNode, dragEventNoticeNode;

   var dataTransferCommentString;

   me.init = function () {

      if (EventHelpers.hasPageLoadHappened(arguments)) {
         return;
      }   

      targetNode=document.getElementById('dropTarget');
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* These are events for the draggable objects */
      var dragNodes = cssQuery('[draggable=true]');
      for (var i = 0; i < dragNodes.length; i++) {
         var  dragNode=dragNodes[i]
         EventHelpers.addEvent(dragNode, 'dragstart', dragStartEvent);
      }

      /* These are events for the object to be dropped */
      EventHelpers.addEvent(targetNode, 'dragover', dragOverEvent);
      EventHelpers.addEvent(targetNode, 'drop', dropEvent);
   }

   function dragStartEvent(e) {
      e.dataTransfer.setData('Text',
         sprintf('<img src="%s" alt="%s" /><br /><p class="caption">%s</p>',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      EventHelpers.preventDefault(e);
   }

   function dropEvent(e) {
      this.innerHTML = e.dataTransfer.getData('Text');
      EventHelpers.preventDefault(e);
   }

}

// fixes visual cues in IE and Chrome.
DragDropHelpers.fixVisualCues=true;

EventHelpers.addPageLoadEvent('dragObject.init');

See Example #4: using setData() and getData()

As previously mentioned the data that is set in setData() can be read in other applications. If you are in Windows, open up WordPad and drag one of the images into it. You’ll see the data that was given to setData() during the dragstart event.

This interoperability with the operating system will allow developers to do some very interesting things which are out of the scope of this article. I will, however, want to explore this in future postings.

Step 5: Drag and Drop Effects

In a traditional desktop application, you can use drag and drop to copy objects, move objects, and create links to things. You can use the HTML5 drag and drop events to do this as well, but it would be nice to give the user visual cues to show what kind of action a draggable object can do, and what kind of action a drop target can accept. It would also be nice to only allow “copy objects” to only drop on drop targets that are programmed to accept them.

These features can be implemented using e.dataTransfer.effectAllowed on the draggable object and e.dataTransfer.dropEffect()on the drop target:

Method	Description
e.dataTransfer.effectAllowed	Sets the type of effect a draggable object is allowed to make. Valid values are copy, move, link, copyMove, copyLink, linkMove, all, and none.
e.dataTransfer.dropEffect	Sets the type of effect a drop target is allowed to accept. Valid effects include copy, move, and link.

When these are set correctly, drag and drop will only work when the draggable object’s effectAllowed and the drop target’s dropEffect are compatible. To illustrate this, let’s first change the dragstart and dragover events in example #4 to do the copy effect:

   function dragStartEvent(e) {
      e.dataTransfer.effectAllowed="copy"; 

      e.dataTransfer.setData('Text',
         sprintf('<img src="%s" alt="%s" /><br /><p class="caption">%s</p>',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      e.dataTransfer.dropEffect = "copy";
      EventHelpers.preventDefault(e);
   }

Example #5: matching drag and drop effects

Note that unlike example #4, the mouse pointer has changed from the copy icon (in Windows, ) to the move icon ().

Now let’s change the code so that the draggable object and the drop target don’t have matching effects:

   function dragStartEvent(e) {
      e.dataTransfer.effectAllowed="copy"; 

      e.dataTransfer.setData('Text',
         sprintf('<img src="%s" alt="%s" /><br /><p class="caption">%s</p>',
            this.src, this.alt, this.alt
         )
      );
   }

   function dragOverEvent(e) {
      e.dataTransfer.dropEffect = "move";
      EventHelpers.preventDefault(e);
   }

See Example #5a: unmatching drag and drop effects

You’ll see that the user is not able to drop the image on the drop target.

Update (Jan 28, 2010): There is a documented bug in Safari and Chrome for Windows where drag and drop will not occur if effectAllowed and dropEffect are set to move. This bug does not occur in the Mac editions of these browsers.

A More Complex Example

Let’s take all the information we have gathered and make a “real-world” script. Let’s say you were asked to create a “user entitlement” administration widget for a website. The widget will have three entitlement catagories: “Unassigned Users”, “Restricted Users” (e.g. users who have restricted access to the website) and “Power Users” (e.g. users who would have administration access to a website):



Screenshot of the user entitlement screen we want to implement

It should be rather easy for an administrator to drag and drop users back and forth between entitlement “buckets” in order to elevate or lower a users credentials.

Let’s go through the steps we established above to implement this script.

Step 1: Defining a Draggable Objects

First let’s take a look at the table in the HTML:

<table>
    <thead>
        <tr>
            <th>Unassigned Users</th>
            <th>Restricted Users</th>
            <th>Power Users</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td id="unassignedUsers">
            	<a href="#" draggable="true">Moe Howard</a>
		<a href="#" draggable="true">Curly Howard</a>
		<a href="#" draggable="true">Shemp Howard</a>
            	<a href="#" draggable="true">Larry Fine</a>
	    </td>

            <td id="restrictedUsers">
            </td>

            <td id="powerUsers">
            </td>
        </tr>
    </tbody>
    <tfoot>
	<td id="unassignedUsersHelp">
	  Drag a user from this list to another list to change the
	  user's permissions.
	</td>
	<td id="restrictedUsersHelp">
	  Dragging user here will give this user restricted
	  permissions.
	</td>
	<td id="powerUsersHelp" >
	  Dragging a user here will give this user power user access.
	</td>
    </tfoot>
</table>

(Note that the contents in the tfoot node are hidden by CSS).

Step 2: Setting Events on the Draggable Objects

The “users” are draggable objects. In the script, we find all these nodes using Dean Edwards’ cssQuery and set dragstart and dragend event handlers on each of them (Note: cssQuery allows us to select nodes by CSS selector, similar to the built-in functionality inside jQuery).

userNodes = cssQuery('[draggable=true]');
for (var i=0; i<userNodes.length; i++) {
   EventHelpers.addEvent(userNodes[i], 'dragstart', userDragStartEvent);
   EventHelpers.addEvent(userNodes[i], 'dragend', userDragEndEvent);
}

It then keeps track of the current node being dragged in the object variable currentlyDraggedNode and makes that node transparent by making it a member of the draggedUser class, which the page’s stylesheet defines as transparent.

function userDragStartEvent(e) {
   currentlyDraggedNode = this;
   currentlyDraggedNode.className = 'draggedUser';
}

The dragend event removes the transparency of the currentlyDraggedNode:

function userDragEndEvent(e) {
   currentlyDraggedNode.className = '';
}

Step 3: Setting Events on the Target Objects

All the table cells in the <tbody> are drop targets, so we use cssQuery again to grab all those nodes and set the appropriate events.

userListNodes = cssQuery('.userList');

for (var i=0; i<userListNodes.length; i++) {
   var userListNode = userListNodes[i];
   EventHelpers.addEvent(userListNode, 'dragover', cancel);
   EventHelpers.addEvent(userListNode, 'dragleave', userDragLeaveListEvent);
   EventHelpers.addEvent(userListNode, 'drop', userDropListEvent);
   EventHelpers.addEvent(userListNode, 'dragenter', userDragOverListEvent);
}

The most important event is the drop event handler. This event handler takes the currentlyDraggedNode, removes it from its current table cell (using removeChild()) and drops it into the drop target (using appendChild()).

function setHelpVisibility(node, isVisible) {
   var helpNodeId = node.id + "Help";
   var helpNode = document.getElementById(helpNodeId);

   if (isVisible) {
      helpNode.className =  'showHelp';
   } else {
      helpNode.className =  '';
   }
}

function userDropListEvent(e) {
   currentlyDraggedNode.parentNode.removeChild(currentlyDraggedNode);
   this.appendChild(currentlyDraggedNode);
   setHelpVisibility(this, false);
   userDragEndEvent(e);
}

They show the contents of the table cell below it by making it a member of the class showHelp. They also

prevent the dragover default behaviour so that drop events will fire in the drop target.

function userDragOverListEvent(e) {
   setHelpVisibility(this, true);
   EventHelpers.preventDefault(e);
}

The dragleave re-hides the contents of the table cell below it.

function userDragLeaveListEvent(e) {
  setHelpVisibility(this, false);
}

function userDragEndEvent(e) {
   currentlyDraggedNode.className = '';
}

Steps 4 and 5

We do not actually pass any data between the draggable object and the drag target — when the drop event occurs, the draggable object is moved from one column to another without the need of any dataTransfer data. The drag and drop effects were already handled in step 3, so we are all done.

See the above example in action

Drag and Drop Between Frames

Using the above information, it is also possible to drag and drop objects between frames (this is something that I don’t think any old school drag and drop script can do). I made an example below, and I leave it as an exercise to the reader to go through the code and figure out how it works.

See the inter-frame drag and drop example in action

Cross-Browser Issues I Have Seen

These are the cross-browser issues I know of so far. I will update this list with others I find in the future.

• in Firefox 3.5, a dragleave event will fire just before a drop event, which the other browsers don’t fire dragleave when dropping.
• the time that the draggable object’s dragend event fires and the time that the drag target’s drop event fires is not consistant among browsers. Safari and Chrome fire dragend first, while Firefox and Internet Explorer fire drop first.
• According to Francisco Tolmasky, setData() cannot be called during drag events in Firefox. Hopefully this will be fixed in a future release of the browser.
• DragDropHelpers implements a workaround for Explorer so it can drag any object around. However, I did not use this functionality in any of the examples because it exposes a problem with Safari not being able to drag an object correctly when the user initiates the drag on the text inside it. This problem doesn’t happen with text inside of links, but with text inside other nodes (like a <div> tag). I understand this problem has been fixed in the Safari nightly builds, so I left the functionality in the DragDropHelpers library for future use.
• DragDropHelpers.js “fixes” the dragging visual cues in Explorer and Chrome by:
  • making a transparent and absolutely positioned clone of a draggable object when it’s dragstart event is fired
  • moving the cloned object near the mouse when the <body>‘s drag event is fired.
  • destroying the clone when draggable object’s dragend event is fired.

  I didn’t turn it on by default because I am not sure when (or if) this problem will be fixed in Internet Explorer or Chrome. I also doesn’t work well when dragging objects from one window or frame to another, since the cloned visual cue can’t jump from page to page. Feel free to use it (or not) as you see fit.

• As mentioned previously, because of a bug in Webkit, drag and drop will not occur if effectAllowed and dropEffect are set to move in Safari 4.0.4. Hopefully this will be fixed in a future version of Webkit.

Conclusion

HTML5 drag and drop will be an important part of our front-end toolkit. Even though the flavors that browser-vendors offer today are incomplete, it is possible to smooth out these flaws to produce useful web applications. What I have covered here only scratches the surface – there are more properties and methods that some of browsers offer that can be used to further enhance the drag and drop experience. But I have been working on this blog entry way to long, and my wife is giving me that “what the hell are you doing up at this hour” look, so I think I’ll stop here for now.

Download

DragDropHelpers, and all code used in this article can be downloaded below.

DragDropHelpers.js v.1.0a and sample code.

]]> http://www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/feed/ 25 http://www.useragentman.com/blog/2009/11/30/introducing-the-type-rendering-project/ http://www.useragentman.com/blog/2009/11/30/introducing-the-type-rendering-project/#comments Mon, 30 Nov 2009 17:05:58 +0000 zoltan http://www.useragentman.com/blog/?p=412 find ways to make web type look better right now.]]>

Although this blog wasn’t meant to be a forum on just CSS font-embedding, it is a topic of great interest to me and has been the inspiration of a few articles here (my article on JavaScript font-smoothing detection being the latest). As a result, I have been very fortunate in meeting a lot of interesting and like-minded individuals who want to make the web a better place for typography.

One of the more vocal ones, Paul Irish, asked me to join a project that will allow developers to find ways to make web type look better right now. Other members include web font blogger Tim Brown of Nice Web Type and Ethan Dunham of the excellent font resource Font Squirrel. The result is The Type Rendering Project – we’ve set some goals and would like to open up dialogue with you to fulfill them. We’re asking for your participation, and lots of expert advice, to fulfill these intentions. If you are interested and are a Twitter user, follow us – and more importantly, tell folks you care about how type looks on websites.

]]> http://www.useragentman.com/blog/2009/11/30/introducing-the-type-rendering-project/feed/ 0 http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/ http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/#comments Sun, 29 Nov 2009 19:41:50 +0000 zoltan http://www.useragentman.com/blog/?p=338

Interested in making web typography look better?

Read about The Type Rendering Project!



Examples of font-smoothing and subpixel-rendering as performed by technologies like ClearType. Image Credit: Wikimedia Commons users Pandries and Kalan

In an earlier article, I mentioned that Boing-Boing had a few issues when they wanted to use @font-face embedding inside their website. In short, the problem was that some fonts look bad on computer monitors without font-smoothing enabled in the operating system. This brought on a lot of discussion as to whether there was a way to detect whether or not font-smoothing was being used using JavaScript. I initially thought there wasn’t a way, but after seeing a promising but incomplete method of detecting font-smoothing, I spent a few days devising a way to do it.

Internet Explorer Does Something Easily (For a Change)

Paul Irish mentioned to me and a few other colleagues that he came across a page using an Active X control that detects font-smoothing in IE. I was so hopeful … until I realized that this only works on browsers that have come into contact with Microsoft’s online Cleartype Tuner, which I visited with my copy of IE months before. If a users had never visited this page, the script would fail.

I was more disappointed because Googling “javascript cleartype” did not point to anything useful. However, searching for “javascript font-smoothing” pointed me to an article that told me about Internet Explorer’s screen.fontSmoothingEnabled property. This gives us what we need … but only in Internet Explorer. How on Earth can we detect font-smoothing in other browsers, and in non-Windows operating systems?

Canvas to the Rescue



Letter 'O' , Arial font, 32 px, rendered both without (left) and with (right) font-smoothing

I then thought about about the screenshots I made for the @font-face in Depth article. Can a browser render a black glyph and detect if there is some sort of non-black pixel colouring around the its edges of the glyphs? A human can tell the difference: if there are some non-black pixels around the edge of the glyph, it must be using font-smoothing.

But web browsers can do this too! Just have the browser draw a letter in black inside a canvas tag, and then have it sift through the canvas’ pixels to see if there are any that are not pure black or pure white (more accurately, have the browser check the alpha channel to see if there are any semi-transparent pixels, which have a value that is not 0 or 255). If there are no semi-transparent pixels, then the algorithm assumes that no font-smoothing is being used. I wrote an JavaScript routine that does this – it starts from co-ordinate (8,1) and scans left to right, to the bottom of the canvas (any point on near the top on the left-hand side of the canvas would have done as well).

The result is a JavaScript object, TypeHelpers, which implements this routine in one method, hasSmoothing():

var TypeHelpers = new function(){

   // I use me instead of this.  For reasons why, please read:
   // http://w3future.com/html/stories/callbacks.xml
   var me = this;

   me.hasSmoothing = function(){

      // IE has screen.fontSmoothingEnabled - sweet!
      if (typeof(screen.fontSmoothingEnabled) != "undefined") {
         return screen.fontSmoothingEnabled;
      } else {

         try {

            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement('canvas');
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise
            // Safari Windows does not report correctly.
            canvasNode.style.display = 'none';
            document.body.appendChild(canvasNode);
            var ctx = canvasNode.getContext('2d');

            // draw a black letter 'O', 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
               for (var i = 1; i <= 32; i++) {

                  var imageData = ctx.getImageData(i, j, 1, 1).data;
                  var alpha = imageData[3];

                  if (alpha != 255 && alpha != 0) {
                     return true; // font-smoothing must be on.
                  }
               }

            }

            // didn't find any non-black pixels - return false.
            return false;
         }
         catch (ex) {
            // Something went wrong (for example, Opera cannot use the
            // canvas fillText() method.  Return null (unknown).
            return null;
         }
      }
   }

   me.insertClasses = function(){
      var result = me.hasSmoothing();
      var htmlNode = document.getElementsByTagName('html')[0];
      if (result == true) {
         htmlNode.className += " hasFontSmoothing-true";
      } else if (result == false) {
            htmlNode.className += " hasFontSmoothing-false";
      } else { // result == null
            htmlNode.className += " hasFontSmoothing-unknown";
      }
   }

}

// if EventHelpers.js is included, insert the hasFontSmoothing CSS classes
if (window.EventHelpers) {
   EventHelpers.addPageLoadEvent('TypeHelpers.insertClasses')
}

Note the object also has an insertClasses() method. This method, when run, adds a class to the html tag:

• hasFontSmoothing-true if font-smoothing is being used
• hasFontSmoothing-false if it is not
• hasFontSmoothing-unknown if the user agent is unable to tell

This makes it easy for developers who don’t want to mess with JavaScript code and just want to use CSS.

Also note the EventHelpers.addPageLoadEvent() call at the end of the code. This method (which is part of EventHelpers.js, included with the archive below) implements Dean Edwards’ window.onload alternative which doesn’t wait for all the objects in the page to be loaded. I use this implementation to execute TypeHelpers.insertClasses() when the page loads so any font-detection CSS rules will work right away. Please feel free to change this code to use the equivalent function call in Dojo, Prototype, jQuery, or whatever JavaScript code framework you prefer.

Example #1: JavaScript Font Smoothing Detection

Enough of theory … let’s look at it in practice! To show how to detect font-smoothing with JavaScript, I created a page that, when the page is loaded, checks to see if it can tell if font-smoothing has been implemented and tells the user. Here is the code that does this check:

function displayInfo() {

   var message;
   var isFontSmoothingOn = TypeHelpers.hasSmoothing();
   if (isFontSmoothingOn == true) {
      message = "This browser is using a font-smoothing technology";
   } else if (isFontSmoothingOn == false) {
      message = "This browser isn't using a font-smoothing technology"
   } else {
      message = "We could not detect if font-smoothing is being used."
   }
   document.getElementById('detectInfo').innerHTML = message;

}

window.onload = displayInfo;

See the above code in action

Example #2: CSS Font Smoothing Detection

As implied earlier, this library can help CSS use different fonts if the browser is using a font-smoothing technology. For example, using the following CSS will allow a browser to use the Droid Sans embedded font only if it using font-smoothing — otherwise, it will use Arial:

@font-face {
	font-family: "Droid Sans";
	src: url("/shared/fonts/DroidSans/DroidSans.eot");
	src: local("Droid Sans"),
	     local("Droid Sans"),
	     url("/shared/fonts/DroidSans/DroidSans.ttf") format("truetype");
}

body {
	font-family: "Arial", "Helvetica", sans-serif;
}

html.hasFontSmoothing-true body {
	font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

We can also serve special content to users depending on the way fonts are rendered on their browser. We first create content for all three scenerios (browser uses font-smoothing, browser doesn’t use font-smoothing, and the “we cannot detect” case) and wrap the content inside <code>div</code> tags using appropriate CSS classes:

<div class="fontSmoothingMessage initiallyHidden">
    <p>You browser <strong>is</strong> rendering this page
    with font-smoothing. Because of that, we will attempt
    to serve up the Droid Sans font to render this page,
    because we think it looks cool. If you are using a
    browser (such as Google Chrome) that cannot render
    downloaded True Type fonts by default, then the page
    will be rendered using Arial instead.</p>
</div>

<div class="noFontSmoothingMessage initiallyHidden">
    Your browser <strong>is not</strong> rendering this
    page with font-smoothing. It is for that reason we have
    decided to use the plain old Arial font to render this
    page, because it is hinted for use for displays that
    don't employ a font-smoothing technology.
</div>

<div class="unknownFontSmoothingMessage initiallyHidden">
    <strong>We are not sure</strong> if your browser is
    rendering this page with a font-smoothing technology.
    It is for that reason we have decided to use the plain
    old Arial font to render this page, because it is
    hinted for use for displays that don't employ a
    font-smoothing technology.
</div>

Note all the div tags are members of the class initiallyHidden. This class will be used to hide all font-smoothing related content until the script kicks in.

However, all this will not work unless we use the following CSS code:

.initiallyHidden {
	display: none;
}

html.hasFontSmoothing-true .fontSmoothingMessage,
html.hasFontSmoothing-false .noFontSmoothingMessage,
html.hasFontSmoothing-unknown .unknownFontSmoothingMessage {
	display: block;
}

Of course, this whole soltution relies on whether JavaScript being turned on in the user’s browser. This should be kept in mind when implementing this solution.

See the above code in action

Download

All code used in this article can be downloaded below (Note: version 1.0 was missing the Droid Sans Fonts which have now been put into the archive. Thanks to John Faulds for pointing this out).

TypeHelpers.js v.1.0a and sample code.

With the help of Tim Brown, it was determined that the code detected font-smoothing correctly in the following browsers:

• Internet Explorer 6 and up on Windows XP and higher.
• Firefox 3.5 and higher on Windows XP and higher, Mac OS X 10.4 and higher, and Ubuntu Linux 9.10 (and probably lower)
• Chrome 3.0 on Windows XP and higher
• Safari 4.0.3 on Windows XP and higher and Mac OS X 10.4 and higher

This script cannot detect font-smoothing in any version of Opera (at the time of this writing, this includes all versions up to 10.10), since it cannot write text inside the canvas element in a way we can poll the pixels afterwards. If anyone can find a way of making it work with Opera, please write a comment below — I’d love to be able to support this browser.

Testing Caveats

Testing font-smoothing in most Windows web browsers is easy since it can be turned off inside the Display control panel. However, when using Safari for Windows, it is necessary to navigate inside Safari’s Appearance preferences and set the Font-smoothing option to Windows Standard. This is because by default, Safari uses it’s own built-in font-rendering engine which doesn’t seem to render aliased fonts. In Mac OS X, it seems anti-aliasing only works for fonts below a certain size, so aliased fonts don’t seem to be an issue with that operating system. In Ubuntu Linux I have yet to find a way of shutting of font-smoothing. If anyone knows a way, please let me know.

]]> http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/feed/ 25