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.
![Serving Fonts from CDN]()
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Create a Simple Slideshow Using MooTools]()
One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.
![Degradable SELECT onChange]()
Whenever I go to Google Analytics I notice a slight flicker in the dropdown list area. I see a button appear for the shortest amount of time and the poof! Gone. What that tells me is that Google is making their site function...
What would be a use-case for this rather than using :invalid ?