CSS :out-of-range
One aspect of web development I've always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation.
With input[type=number] elements, you can add min and max attributes. Those attributes are great but the browser doesn't display distinct error styles if those numbers are out of range. Luckily we have :out-of-range:
/* matches when number is not within min and max */
input[type=number]:out-of-range {
border-color: red;
}
Thanks to CSS :out-of-range, developers can style input elements based on its valid value status. Despite the HTML validation and styling, you must still do server side validation; honestly, you probably also want to do JavaScript validation here too.
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Conquering Impostor Syndrome]()
Two years ago I documented my struggles with Imposter Syndrome and the response was immense. I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions. I've even caught myself reading the post...
![Create a Spinning, Zooming Effect with CSS3]()
In case you weren't aware, CSS animations are awesome. They're smooth, less taxing than JavaScript, and are the future of node animation within browsers. Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint. One of my favorite effects...
![MooTools Star Ratings with MooStarRating]()
I've said it over and over but I'll say it again: JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser. One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...
What would be a use-case for this rather than using :invalid ?