I use the following simple HTML code to demonstrate Opera 11's color picker.
ColorPicker.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Color Picker Demonstrated</title>
<script language="javascript">
function newBackgroundColor(color)
{
document.bgColor = color;
document.colorForm.selectedcolor.value = color;
}
</script>
</head>
<body bgcolor="white">
<header>
<h1>HTML 5 Color Picker Demonstrated</h1>
</header>
<form name="colorForm">
<p>Select Background Color
<input name="colorpicker" type="color" onchange="newBackgroundColor(colorpicker.value);">
</p>
<p>
Selected Color
<input name="selectedcolor" type="text">
</p>
</form>
</body>
</html>
There's not much in the code above for a color picker (just
<input type="color"> with a "name" attribute and an "onchange" event to make things a little more interesting). Before demonstrating this code in action on the five major browsers, I'll point out that the code works on all the browsers. What differentiates Opera's treatment from the other browsers is that Opera provides an elegant control to allow the user to select a color or type in a color's code. The other browsers (non-beta versions) do not provide a nice control at this point, but the code still works in them if the user types in a recognized color string.Opera 11's Color Picker
The next set of screen snapshots demonstrates Opera's treatment of the color picker. The images show that a small set of colors is presented first to choose from and that the user can choose from a larger set of colors or even specify a custom color. Simple JavaScript code is invoked when a color is selected and the color of the background is changed accordingly.
Firefox 3.6's "Color Picker"
Firefox 3.6 does not support the color picker as well as Opera 11. Indeed, it is presented as a simple text field. The good news is that if the user types a String that can be interpreted as a valid color code, the functionality still works appropriately. This is demonstrated in the next set of screen snapshots.
Chrome 8's "Color Picker"
Chrome 8's "color picker support" is very similar to Firefox 3.6's as is illustrated in the next three images.
Safari 5's "Color Picker"
Safari 5 provides the same level of support for color picker as Chrome 8 and Firefox 3.6.
Internet Explorer 8's "Color Picker"
Internet Explorer 8 support is similar to that of all the previously covered browsers other than Opera 11.
Conclusion
As with the date/time pickers, Opera 11 leads the pack of non-beta web browsers in maturity of color picker implementation and therefore provides the best illustration of what this tag can become. As with the date picker, I look forward to the day when we have an elegant color picker that works across all major browsers and is employed via simple HTML markup. Today, to get this, we need to use something outside of standard HTML such as Flex or a color picker provided by a third-party JavaScript library.
1 comment:
I liked this article.. it shows a great way to get a background change by color.. this is easily referenced for JS or some other language.
Thanks for the post!
websnare
www.websnare.com
Post a Comment