I have been playing around with HTML5 Forms for a while now, and one of my favorite parts of the HTML5 Forms spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user. I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating. However, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints. I hope that this article will start a discussion for a possible solution that could be easily added to the CSS3 UI specification.
Entries Tagged as 'Technologies'
CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution
Tags: CSS3 · forms · HTML5 · psuedo-classes · standard proposal · Uncategorized
Cross Browser GPU Acceleration and requestAnimationFrame in Depth
Animations made with requestAnimationFrame
appear less jumpy and stuttery than those using setTimeout or jQuery.animate by ensuring that animation frames are generated at the most optimal times according to the CPU load, what the browser is doing, what the graphics card is doing, etc. Recently, I researched a bit about how it works, how different browsers behave with it, and how well browsers are at animating both Canvas and SVG. This article will be a brain dump of all I have learned so far. Some of what I discovered may surprise you.
Tags: canvas · HTML · HTML5 · jQuery · Polyfills · SVG · Uncategorized · VML · XML
Cross Browser Styling of HTML5 Forms — Even In Older Browsers.
I have updated my html5Widgets package (now called html5Forms.js) so developers can create great looking, easy-to-use forms that can validate each field as a user types. It also has updated validation widgets so older browsers can display error messages like native HTML5 Form implementations do, and even allows developers to style error message bubbles in all browsers even in browsers like Firefox that don’t allow it natively.
Tags: CSS3 · Forms · HTML5 · Uncategorized
Cross Browser HTML5 Progress Bars In Depth
As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. Creating them is easy with the HTML5 <progress>
tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress
tag with CSS, even in browsers that don’t officially support the it. It will also show some interesting examples using advanced CSS3 techniques.
Tags: CSS3 · Forms · gradients · HTML · HTML5 · Polyfills · progress
Cross Browser CSS cursor
Images In Depth
When used properly, custom CSS cursors can add a little bit of polish to your web sites and applications. However, doing this in a cross browser way can be a little confusing unless you know all the gotchas, and this article will go into depth about them. We will also explore issues such as when to use custom cursors, performance, what makes good cursor design, cursor file formats, and cursor size.
Tags: CSS · CSS3 · cursor · Images
Clipping JPEG Images Into Non-Rectangular Polygons Using polyClip.js
Up until now, if a developer needed to clip an image in a non-rectangular shape, it was necessary to save the image as a PNG with an alpha channel. If the image is a photograph, the file-size balloons up to unacceptable levels. My new library, polyClip.js, allows developers to clip these images using photograph friendly JPEGs instead. This article guides you step by step on how to use it yourself.
Tags: canvas · HTML5 · Images · JavaScript · jQuery · Uncategorized · VML
How to Simulate CSS3 box-shadow
in IE6-8 Without JavaScript.
Using CSS3, developers can create simple, glowing and blurred box-shadows in all modern web browsers. But what about IE6-8? This article will discuss how you can simulate them using a variety of Visual Filters to simulate them. This article will cover a few CSS3 box-shadow effects, the equivalent Visual Filter recipes for IE 6-8, and the differences between them.
Tags: box-shadow · CSS3 · IE Visual Filters
Full CSS3 Text-Shadows — Even In IE
While researching the possibilities of using text-shadows in IE, I noticed that there wasn’t any silver bullet that produced multiple CSS3-like text-shadows in IE. However, combining my cssSandpaper script with a refactored version of a text-shadowing script by Kazumasa Hasegawa, we can now have IE text-shadow goodness.
Tags: ClearType · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · text-shadow
Fixing oninput
in IE Using html5Widgets
Even though onforminput
is deprecated, oninput
will allow developers to do dynamic calculations on forms with little JavaScript knowledge. Unfortunately, it doesn’t work in IE8 and lower, and there are some small bugs in IE9’s implementation when trying to delete characters inside a form field. So I implemented a fix for these issues with an update to my cross-browser HTML5 Forms polyfill, html5Widgets.
Tags: Events · Events · Forms · HTML · HTML5 · JavaScript · Polyfills · Uncategorized
Is onforminput
Deprecated in HTML5 Forms? (And Why Should I Care Anyways?)
The onforminput
event has been stripped out of HTML5, and it makes me sad. This article will show examples of how it works, how you can use it today in browsers that don’t support it, and hopefully will also present a good case as to why it should be put back into the HTML5 specification. Should something this useful and easy-to-use be abandoned?