Category Archives: css3

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 [...]

Posted in css3 | 4 Comments

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 [...]

Also posted in site performance | Tagged , , , | 8 Comments

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 [...]

Also posted in site performance | Tagged , , | 3 Comments