How to style input tag file uploads in Webkit (Chrome, Safari)

If you’ve ever been tasked with creating a consistent user experience across all web browsers you’ve probably had a real challenge styling form input elements. Historically IE has been the most challenging to style but with file input elements webkit is almost impossible to change it from the default “choose file” dialog. Typically the file input is styled by setting it’s opacity to 0 and absolute positing it over an image of a browse button with whatever style is desired. The downside of this is that is requires JavaScript to update a text input element after a file is chosen with the file selection dialog. This technique uses pure CSS to present a consistent interface to all major browsers with a few vendor CSS prefixes.
Continue reading How to style input tag file uploads in Webkit (Chrome, Safari)

Superfast embedded fonts with @font-face

Now that font embedding is supported in all major browsers it has become increasingly common thanks to the bulletproof embedding technique. However embedded fonts can add several milliseconds if not whole seconds and can even block rendering if not done correctly. Here you will find how to mitigate the performance implications if not eliminate them completely.
Continue reading Superfast embedded fonts with @font-face

Bulletproof and fast css gradients

I am daring to claim that I have found the best bulletproof way to create css3 background gradients. It is the best because it guarantees that extra http requests are not made unless needed and bulletproof because it works in every browser falling back to a normal background-image based gradient if necessary.

UPDATE: Added new rules for IE10 and Opera 11.10!
Continue reading Bulletproof and fast css gradients